From cd2ce34f10007efacd8631d3ce3ac4f4a6212966 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 31 Dec 2023 16:30:47 +0200
Subject: [PATCH] New: Custom formats in episode history

Details part of actions in episode history
---
 .../src/Episode/History/EpisodeHistory.js     | 16 ++++++-------
 .../src/Episode/History/EpisodeHistoryRow.css |  1 -
 .../History/EpisodeHistoryRow.css.d.ts        |  1 -
 .../src/Episode/History/EpisodeHistoryRow.js  | 24 ++++++++-----------
 .../src/Series/History/SeriesHistoryModal.js  |  2 ++
 .../History/SeriesHistoryModalContent.js      | 16 ++++++-------
 .../src/Series/History/SeriesHistoryRow.css   |  1 -
 .../Series/History/SeriesHistoryRow.css.d.ts  |  1 -
 .../src/Series/History/SeriesHistoryRow.js    | 24 ++++++++-----------
 9 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/frontend/src/Episode/History/EpisodeHistory.js b/frontend/src/Episode/History/EpisodeHistory.js
index 7a420de26..78f05a82d 100644
--- a/frontend/src/Episode/History/EpisodeHistory.js
+++ b/frontend/src/Episode/History/EpisodeHistory.js
@@ -30,13 +30,9 @@ const columns = [
     isVisible: true
   },
   {
-    name: 'date',
-    label: () => translate('Date'),
-    isVisible: true
-  },
-  {
-    name: 'details',
-    label: () => translate('Details'),
+    name: 'customFormats',
+    label: () => translate('CustomFormats'),
+    isSortable: false,
     isVisible: true
   },
   {
@@ -48,9 +44,13 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'date',
+    label: () => translate('Date'),
+    isVisible: true
+  },
   {
     name: 'actions',
-    label: () => translate('Actions'),
     isVisible: true
   }
 ];
diff --git a/frontend/src/Episode/History/EpisodeHistoryRow.css b/frontend/src/Episode/History/EpisodeHistoryRow.css
index deafecb81..e94c3ba0d 100644
--- a/frontend/src/Episode/History/EpisodeHistoryRow.css
+++ b/frontend/src/Episode/History/EpisodeHistoryRow.css
@@ -1,4 +1,3 @@
-.details,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
diff --git a/frontend/src/Episode/History/EpisodeHistoryRow.css.d.ts b/frontend/src/Episode/History/EpisodeHistoryRow.css.d.ts
index 20d861e58..d8ea83dc1 100644
--- a/frontend/src/Episode/History/EpisodeHistoryRow.css.d.ts
+++ b/frontend/src/Episode/History/EpisodeHistoryRow.css.d.ts
@@ -2,7 +2,6 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
-  'details': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Episode/History/EpisodeHistoryRow.js b/frontend/src/Episode/History/EpisodeHistoryRow.js
index e948a3316..d49f2c963 100644
--- a/frontend/src/Episode/History/EpisodeHistoryRow.js
+++ b/frontend/src/Episode/History/EpisodeHistoryRow.js
@@ -9,7 +9,6 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
-import Tooltip from 'Components/Tooltip/Tooltip';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
@@ -102,11 +101,19 @@ class EpisodeHistoryRow extends Component {
           />
         </TableRowCell>
 
+        <TableRowCell>
+          <EpisodeFormats formats={customFormats} />
+        </TableRowCell>
+
+        <TableRowCell>
+          {formatCustomFormatScore(customFormatScore, customFormats.length)}
+        </TableRowCell>
+
         <RelativeDateCellConnector
           date={date}
         />
 
-        <TableRowCell className={styles.details}>
+        <TableRowCell className={styles.actions}>
           <Popover
             anchor={
               <Icon
@@ -124,24 +131,13 @@ class EpisodeHistoryRow extends Component {
             }
             position={tooltipPositions.LEFT}
           />
-        </TableRowCell>
 
-        <TableRowCell className={styles.customFormatScore}>
-          <Tooltip
-            anchor={
-              formatCustomFormatScore(customFormatScore, customFormats.length)
-            }
-            tooltip={<EpisodeFormats formats={customFormats} />}
-            position={tooltipPositions.BOTTOM}
-          />
-        </TableRowCell>
-
-        <TableRowCell className={styles.actions}>
           {
             eventType === 'grabbed' &&
               <IconButton
                 title={translate('MarkAsFailed')}
                 name={icons.REMOVE}
+                size={14}
                 onPress={this.onMarkAsFailedPress}
               />
           }
diff --git a/frontend/src/Series/History/SeriesHistoryModal.js b/frontend/src/Series/History/SeriesHistoryModal.js
index 2d46c5f6f..5d8c2c6d7 100644
--- a/frontend/src/Series/History/SeriesHistoryModal.js
+++ b/frontend/src/Series/History/SeriesHistoryModal.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
 import SeriesHistoryModalContentConnector from './SeriesHistoryModalContentConnector';
 
 function SeriesHistoryModal(props) {
@@ -13,6 +14,7 @@ function SeriesHistoryModal(props) {
   return (
     <Modal
       isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
       onModalClose={onModalClose}
     >
       <SeriesHistoryModalContentConnector
diff --git a/frontend/src/Series/History/SeriesHistoryModalContent.js b/frontend/src/Series/History/SeriesHistoryModalContent.js
index 1622b3b36..72ddc5dc4 100644
--- a/frontend/src/Series/History/SeriesHistoryModalContent.js
+++ b/frontend/src/Series/History/SeriesHistoryModalContent.js
@@ -41,13 +41,9 @@ const columns = [
     isVisible: true
   },
   {
-    name: 'date',
-    label: () => translate('Date'),
-    isVisible: true
-  },
-  {
-    name: 'details',
-    label: () => translate('Details'),
+    name: 'customFormats',
+    label: () => translate('CustomFormats'),
+    isSortable: false,
     isVisible: true
   },
   {
@@ -59,9 +55,13 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'date',
+    label: () => translate('Date'),
+    isVisible: true
+  },
   {
     name: 'actions',
-    label: () => translate('Actions'),
     isVisible: true
   }
 ];
diff --git a/frontend/src/Series/History/SeriesHistoryRow.css b/frontend/src/Series/History/SeriesHistoryRow.css
index a62b9c2bb..33dba8df9 100644
--- a/frontend/src/Series/History/SeriesHistoryRow.css
+++ b/frontend/src/Series/History/SeriesHistoryRow.css
@@ -4,7 +4,6 @@
   word-break: break-word;
 }
 
-.details,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
diff --git a/frontend/src/Series/History/SeriesHistoryRow.css.d.ts b/frontend/src/Series/History/SeriesHistoryRow.css.d.ts
index e3425487e..b0b91a6b8 100644
--- a/frontend/src/Series/History/SeriesHistoryRow.css.d.ts
+++ b/frontend/src/Series/History/SeriesHistoryRow.css.d.ts
@@ -2,7 +2,6 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
-  'details': string;
   'sourceTitle': string;
 }
 export const cssExports: CssExports;
diff --git a/frontend/src/Series/History/SeriesHistoryRow.js b/frontend/src/Series/History/SeriesHistoryRow.js
index 4d9d4a072..5b44f93aa 100644
--- a/frontend/src/Series/History/SeriesHistoryRow.js
+++ b/frontend/src/Series/History/SeriesHistoryRow.js
@@ -9,7 +9,6 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
-import Tooltip from 'Components/Tooltip/Tooltip';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeNumber from 'Episode/EpisodeNumber';
@@ -122,11 +121,19 @@ class SeriesHistoryRow extends Component {
           />
         </TableRowCell>
 
+        <TableRowCell>
+          <EpisodeFormats formats={customFormats} />
+        </TableRowCell>
+
+        <TableRowCell>
+          {formatCustomFormatScore(customFormatScore, customFormats.length)}
+        </TableRowCell>
+
         <RelativeDateCellConnector
           date={date}
         />
 
-        <TableRowCell className={styles.details}>
+        <TableRowCell className={styles.actions}>
           <Popover
             anchor={
               <Icon
@@ -144,24 +151,13 @@ class SeriesHistoryRow extends Component {
             }
             position={tooltipPositions.LEFT}
           />
-        </TableRowCell>
 
-        <TableRowCell className={styles.customFormatScore}>
-          <Tooltip
-            anchor={
-              formatCustomFormatScore(customFormatScore, customFormats.length)
-            }
-            tooltip={<EpisodeFormats formats={customFormats} />}
-            position={tooltipPositions.BOTTOM}
-          />
-        </TableRowCell>
-
-        <TableRowCell className={styles.actions}>
           {
             eventType === 'grabbed' &&
               <IconButton
                 title={translate('MarkAsFailed')}
                 name={icons.REMOVE}
+                size={14}
                 onPress={this.onMarkAsFailedPress}
               />
           }