New: Custom formats in album history

(cherry picked from commit cd2ce34f10007efacd8631d3ce3ac4f4a6212966)

Closes #4408

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

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
   }
 ];

frontend/src/Artist/History/ArtistHistoryRow.css

@@ -4,7 +4,6 @@
   word-break: break-word;
 }
 
-.details,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

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;

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}
               />
           }