Fixed: Change MovieHistoryDetails to Modal

frontend/src/Movie/History/MovieHistoryRow.css

@@ -1,6 +1,5 @@
-.details,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
-  width: 65px;
+  min-width: 70px;
 }

frontend/src/Movie/History/MovieHistoryRow.js

@@ -1,33 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
-import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Popover from 'Components/Tooltip/Popover';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
-import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
 import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
+import HistoryDetailsModal from 'Activity/History/Details/HistoryDetailsModal';
 import styles from './MovieHistoryRow.css';
 
-function getTitle(eventType) {
-  switch (eventType) {
-    case 'grabbed': return 'Grabbed';
-    case 'seriesFolderImported': return 'Series Folder Imported';
-    case 'downloadFolderImported': return 'Download Folder Imported';
-    case 'downloadFailed': return 'Download Failed';
-    case 'episodeFileDeleted': return 'Episode File Deleted';
-    case 'movieFileDeleted': return 'Movie File Deleted';
-    case 'movieFolderImported': return 'Movie Folder Imported';
-    default: return 'Unknown';
-  }
-}
-
 class MovieHistoryRow extends Component {
 
   //
@@ -37,7 +22,8 @@ class MovieHistoryRow extends Component {
     super(props, context);
 
     this.state = {
-      isMarkAsFailedModalOpen: false
+      isMarkAsFailedModalOpen: false,
+      isDetailsModalOpen: false
     };
   }
 
@@ -57,6 +43,14 @@ class MovieHistoryRow extends Component {
     this.setState({ isMarkAsFailedModalOpen: false });
   }
 
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
   //
   // Render
 
@@ -69,7 +63,11 @@ class MovieHistoryRow extends Component {
       languages,
       qualityCutoffNotMet,
       date,
-      data
+      data,
+      isMarkingAsFailed,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
     } = this.props;
 
     const {
@@ -110,26 +108,12 @@ class MovieHistoryRow extends Component {
           date={date}
         />
 
-        <TableRowCell className={styles.details}>
-          <Popover
-            anchor={
-              <Icon
-                name={icons.INFO}
-              />
-            }
-            title={getTitle(eventType)}
-            body={
-              <HistoryDetailsConnector
-                eventType={eventType}
-                sourceTitle={sourceTitle}
-                data={data}
-              />
-            }
-            position={tooltipPositions.LEFT}
-          />
-        </TableRowCell>
-
         <TableRowCell className={styles.actions}>
+          <IconButton
+            name={icons.INFO}
+            onPress={this.onDetailsPress}
+          />
+
           {
             eventType === 'grabbed' &&
               <IconButton
@@ -149,6 +133,18 @@ class MovieHistoryRow extends Component {
           onConfirm={this.onConfirmMarkAsFailed}
           onCancel={this.onMarkAsFailedModalClose}
         />
+
+        <HistoryDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          eventType={eventType}
+          sourceTitle={sourceTitle}
+          data={data}
+          isMarkingAsFailed={isMarkingAsFailed}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          onMarkAsFailedPress={onMarkAsFailedPress}
+          onModalClose={this.onDetailsModalClose}
+        />
       </TableRow>
     );
   }
@@ -164,7 +160,10 @@ MovieHistoryRow.propTypes = {
   qualityCutoffNotMet: PropTypes.bool.isRequired,
   date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
   movie: PropTypes.object.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 

frontend/src/Movie/History/MovieHistoryRowConnector.js

@@ -2,14 +2,18 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import MovieHistoryRow from './MovieHistoryRow';
 
 function createMapStateToProps() {
   return createSelector(
     createMovieSelector(),
-    (movie) => {
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
       return {
-        movie
+        movie,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
       };
     }
   );

frontend/src/Movie/History/MovieHistoryTableContent.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
@@ -37,14 +39,9 @@ const columns = [
     label: 'Date',
     isVisible: true
   },
-  {
-    name: 'details',
-    label: 'Details',
-    isVisible: true
-  },
   {
     name: 'actions',
-    label: 'Actions',
+    label: React.createElement(IconButton, { name: icons.ADVANCED_SETTINGS }),
     isVisible: true
   }
 ];

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons } from 'Helpers/Props';
-import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import MovieFileEditorRow from './MovieFileEditorRow';
@@ -45,7 +45,7 @@ const columns = [
   },
   {
     name: 'action',
-    label: React.createElement(Icon, { name: icons.ADVANCED_SETTINGS }),
+    label: React.createElement(IconButton, { name: icons.ADVANCED_SETTINGS }),
     isVisible: true
   }
 ];