From ae267f672917d90f39788b0d8711c5aa4dd9030f 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 album history

(cherry picked from commit cd2ce34f10007efacd8631d3ce3ac4f4a6212966)

Closes #4408
---
 .../src/Artist/History/ArtistHistoryModal.js  |  2 ++
 .../History/ArtistHistoryModalContent.js      | 16 ++++++------
 .../src/Artist/History/ArtistHistoryRow.css   |  1 -
 .../Artist/History/ArtistHistoryRow.css.d.ts  |  1 -
 .../src/Artist/History/ArtistHistoryRow.js    | 25 ++++++++-----------
 5 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/frontend/src/Artist/History/ArtistHistoryModal.js b/frontend/src/Artist/History/ArtistHistoryModal.js
index 7139d7633..a4362484c 100644
--- a/frontend/src/Artist/History/ArtistHistoryModal.js
+++ b/frontend/src/Artist/History/ArtistHistoryModal.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 ArtistHistoryModalContentConnector from './ArtistHistoryModalContentConnector';
 
 function ArtistHistoryModal(props) {
@@ -13,6 +14,7 @@ function ArtistHistoryModal(props) {
   return (
     <Modal
       isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
       onModalClose={onModalClose}
     >
       <ArtistHistoryModalContentConnector
diff --git a/frontend/src/Artist/History/ArtistHistoryModalContent.js b/frontend/src/Artist/History/ArtistHistoryModalContent.js
index cf344290b..f791f9ed7 100644
--- a/frontend/src/Artist/History/ArtistHistoryModalContent.js
+++ b/frontend/src/Artist/History/ArtistHistoryModalContent.js
@@ -35,13 +35,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
   },
   {
@@ -53,9 +49,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/Artist/History/ArtistHistoryRow.css b/frontend/src/Artist/History/ArtistHistoryRow.css
index a62b9c2bb..33dba8df9 100644
--- a/frontend/src/Artist/History/ArtistHistoryRow.css
+++ b/frontend/src/Artist/History/ArtistHistoryRow.css
@@ -4,7 +4,6 @@
   word-break: break-word;
 }
 
-.details,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
diff --git a/frontend/src/Artist/History/ArtistHistoryRow.css.d.ts b/frontend/src/Artist/History/ArtistHistoryRow.css.d.ts
index e3425487e..b0b91a6b8 100644
--- a/frontend/src/Artist/History/ArtistHistoryRow.css.d.ts
+++ b/frontend/src/Artist/History/ArtistHistoryRow.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/Artist/History/ArtistHistoryRow.js b/frontend/src/Artist/History/ArtistHistoryRow.js
index 4b2dfff42..fe8326378 100644
--- a/frontend/src/Artist/History/ArtistHistoryRow.js
+++ b/frontend/src/Artist/History/ArtistHistoryRow.js
@@ -11,7 +11,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 { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
@@ -112,11 +111,19 @@ class ArtistHistoryRow extends Component {
           />
         </TableRowCell>
 
+        <TableRowCell>
+          <AlbumFormats formats={customFormats} />
+        </TableRowCell>
+
+        <TableRowCell>
+          {formatCustomFormatScore(customFormatScore, customFormats.length)}
+        </TableRowCell>
+
         <RelativeDateCellConnector
           date={date}
         />
 
-        <TableRowCell className={styles.details}>
+        <TableRowCell className={styles.actions}>
           <Popover
             anchor={
               <Icon
@@ -134,25 +141,13 @@ class ArtistHistoryRow extends Component {
             }
             position={tooltipPositions.LEFT}
           />
-        </TableRowCell>
-
-        <TableRowCell className={styles.customFormatScore}>
-          <Tooltip
-            anchor={formatCustomFormatScore(
-              customFormatScore,
-              customFormats.length
-            )}
-            tooltip={<AlbumFormats formats={customFormats} />}
-            position={tooltipPositions.BOTTOM}
-          />
-        </TableRowCell>
 
-        <TableRowCell className={styles.actions}>
           {
             eventType === 'grabbed' &&
               <IconButton
                 title={translate('MarkAsFailed')}
                 name={icons.REMOVE}
+                size={14}
                 onPress={this.onMarkAsFailedPress}
               />
           }