New: Add TmdbId and ImdbId to manual import movie selection

Fixes #8483

frontend/src/Components/Table/VirtualTableRowButton.css

@@ -0,0 +1,4 @@
+.row {
+  composes: link from '~Components/Link/Link.css';
+  composes: row from '~./VirtualTableRow.css';
+}

frontend/src/Components/Table/VirtualTableRowButton.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'row': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Table/VirtualTableRowButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import VirtualTableRow from './VirtualTableRow';
+import styles from './VirtualTableRowButton.css';
+
+function VirtualTableRowButton(props) {
+  return (
+    <Link
+      className={styles.row}
+      component={VirtualTableRow}
+      {...props}
+    />
+  );
+}
+
+export default VirtualTableRowButton;

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -15,13 +15,40 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Scroller from 'Components/Scroller/Scroller';
+import Column from 'Components/Table/Column';
+import VirtualTableRowButton from 'Components/Table/VirtualTableRowButton';
 import { scrollDirections } from 'Helpers/Props';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import translate from 'Utilities/String/translate';
+import SelectMovieModalTableHeader from './SelectMovieModalTableHeader';
 import SelectMovieRow from './SelectMovieRow';
 import styles from './SelectMovieModalContent.css';
 
+const columns = [
+  {
+    name: 'title',
+    label: translate('Title'),
+    isVisible: true,
+  },
+  {
+    name: 'year',
+    label: translate('Year'),
+    isVisible: true,
+  },
+  {
+    name: 'imdbId',
+    label: translate('ImdbId'),
+    isVisible: true,
+  },
+  {
+    name: 'tmdbId',
+    label: translate('TmdbId'),
+    isVisible: true,
+  },
+];
+
 const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
 
 interface SelectMovieModalContentProps {
@@ -32,6 +59,7 @@ interface SelectMovieModalContentProps {
 
 interface RowItemData {
   items: Movie[];
+  columns: Column[];
   onMovieSelect(movieId: number): void;
 }
 
@@ -40,7 +68,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   style,
   data,
 }) => {
-  const { items, onMovieSelect } = data;
+  const { items, columns, onMovieSelect } = data;
 
   if (index >= items.length) {
     return null;
@@ -49,20 +77,24 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   const movie = items[index];
 
   return (
-    <div
+    <VirtualTableRowButton
       style={{
         display: 'flex',
         justifyContent: 'space-between',
         ...style,
       }}
+      onPress={() => onMovieSelect(movie.id)}
     >
       <SelectMovieRow
         id={movie.id}
         title={movie.title}
+        tmdbId={movie.tmdbId}
+        imdbId={movie.imdbId}
         year={movie.year}
+        columns={columns}
         onMovieSelect={onMovieSelect}
       />
-    </div>
+    </VirtualTableRowButton>
   );
 };
 
@@ -161,6 +193,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
           autoFocus={false}
           ref={scrollerRef}
         >
+          <SelectMovieModalTableHeader columns={columns} />
           <List<RowItemData>
             ref={listRef}
             style={{
@@ -174,6 +207,7 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
             itemSize={38}
             itemData={{
               items,
+              columns,
               onMovieSelect: onMovieSelectWrapper,
             }}
           >

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css

@@ -0,0 +1,18 @@
+.title {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 70px;
+}
+
+.imdbId,
+.tmdbId {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 110px;
+}

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'imdbId': string;
+  'title': string;
+  'tmdbId': string;
+  'year': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/InteractiveImport/Movie/SelectMovieModalTableHeader.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Column from 'Components/Table/Column';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import styles from './SelectMovieModalTableHeader.css';
+
+interface SelectMovieModalTableHeaderProps {
+  columns: Column[];
+}
+
+function SelectMovieModalTableHeader(props: SelectMovieModalTableHeaderProps) {
+  const { columns } = props;
+
+  return (
+    <VirtualTableHeader>
+      {columns.map((column) => {
+        const { name, label, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        return (
+          <VirtualTableHeaderCell
+            key={name}
+            className={
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              styles[name]
+            }
+            name={name}
+          >
+            {label}
+          </VirtualTableHeaderCell>
+        );
+      })}
+    </VirtualTableHeader>
+  );
+}
+
+export default SelectMovieModalTableHeader;

frontend/src/InteractiveImport/Movie/SelectMovieRow.css

@@ -1,5 +1,25 @@
-.movie {
-  padding: 8px;
-  width: 100%;
-  border-bottom: 1px solid var(--borderColor);
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  composes: cell;
+
+  flex: 4 0 140px;
+}
+
+.year {
+  composes: cell;
+
+  flex: 0 0 70px;
+}
+
+.tmdbId,
+.imdbId {
+  composes: cell;
+
+  flex: 0 0 110px;
 }

frontend/src/InteractiveImport/Movie/SelectMovieRow.css.d.ts

@@ -1,7 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'movie': string;
+  'cell': string;
+  'imdbId': string;
+  'title': string;
+  'tmdbId': string;
+  'year': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/InteractiveImport/Movie/SelectMovieRow.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Link from 'Components/Link/Link';
+import Label from 'Components/Label';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import styles from './SelectMovieRow.css';
 
 class SelectMovieRow extends Component {
@@ -17,13 +18,23 @@ class SelectMovieRow extends Component {
 
   render() {
     return (
-      <Link
-        className={styles.movie}
-        component="div"
-        onPress={this.onPress}
-      >
-        {this.props.title} ({this.props.year})
-      </Link>
+      <>
+        <VirtualTableRowCell className={styles.title}>
+          {this.props.title}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.year}>
+          {this.props.year}
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.imdbId}>
+          <Label>{this.props.imdbId}</Label>
+        </VirtualTableRowCell>
+
+        <VirtualTableRowCell className={styles.tmdbId}>
+          <Label>{this.props.tmdbId}</Label>
+        </VirtualTableRowCell>
+      </>
     );
   }
 }
@@ -31,6 +42,8 @@ class SelectMovieRow extends Component {
 SelectMovieRow.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   onMovieSelect: PropTypes.func.isRequired
 };