New: Custom Formats

Co-Authored-By: ta264 <ta264@users.noreply.github.com>

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -65,6 +65,15 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'customFormats',
+    label: React.createElement(Icon, {
+      name: icons.INTERACTIVE,
+      title: translate('CustomFormat')
+    }),
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, {

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css

@@ -29,3 +29,7 @@
 
   color: var(--disabledColor);
 }
+
+.customFormatTooltip {
+  max-width: 250px;
+}

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
 import FileDetails from 'BookFile/FileDetails';
 import Icon from 'Components/Icon';
@@ -165,6 +166,7 @@ class InteractiveImportRow extends Component {
       quality,
       releaseGroup,
       size,
+      customFormats,
       rejections,
       additionalFile,
       isSelected,
@@ -286,7 +288,26 @@ class InteractiveImportRow extends Component {
 
         <TableRowCell>
           {
-            rejections && rejections.length ?
+            customFormats?.length ?
+              <Popover
+                anchor={
+                  <Icon name={icons.INTERACTIVE} />
+                }
+                title="Formats"
+                body={
+                  <div className={styles.customFormatTooltip}>
+                    <BookFormats formats={customFormats} />
+                  </div>
+                }
+                position={tooltipPositions.LEFT}
+              /> :
+              null
+          }
+        </TableRowCell>
+
+        <TableRowCell>
+          {
+            rejections.length ?
               <Popover
                 anchor={
                   <Icon
@@ -371,6 +392,7 @@ InteractiveImportRow.propTypes = {
   releaseGroup: PropTypes.string,
   quality: PropTypes.object,
   size: PropTypes.number.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
   rejections: PropTypes.arrayOf(PropTypes.object).isRequired,
   audioTags: PropTypes.object.isRequired,
   additionalFile: PropTypes.bool.isRequired,