New: Custom Formats

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

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,