Fixed: undefined absolute episode numbers on select episode modal

frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx

@@ -220,6 +220,7 @@ function SelectEpisodeModalContentInner(props: SelectEpisodeModalContentProps) {
                       title={item.title}
                       airDate={item.airDate}
                       isAnime={isAnime}
+                      unverifiedSceneNumbering={item.unverifiedSceneNumbering}
                     />
                   ) : null;
                 })}

frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css

@@ -0,0 +1,3 @@
+.warning {
+  margin-left: 8px;
+}

frontend/src/InteractiveImport/Episode/SelectEpisodeRow.css.d.ts

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

frontend/src/InteractiveImport/Episode/SelectEpisodeRow.tsx

@@ -4,7 +4,29 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import Episode from 'Episode/Episode';
+import { icons, kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
+import Icon from '../../Components/Icon';
+import styles from './SelectEpisodeRow.css';
+
+function getWarningMessage(
+  unverifiedSceneNumbering: boolean,
+  isAnime: boolean,
+  absoluteEpisodeNumber: number | undefined
+) {
+  const messages = [];
+
+  if (unverifiedSceneNumbering) {
+    messages.push(translate('SceneNumberNotVerified'));
+  }
+
+  if (isAnime && !absoluteEpisodeNumber) {
+    messages.push(translate('EpisodeMissingAbsoluteNumber'));
+  }
+
+  return messages.join('\n');
+}
 
 interface SelectEpisodeRowProps {
   id: number;
@@ -14,6 +36,7 @@ interface SelectEpisodeRowProps {
   airDate: string;
   isAnime: boolean;
   isSelected?: boolean;
+  unverifiedSceneNumbering?: boolean;
 }
 
 function SelectEpisodeRow({
@@ -23,6 +46,7 @@ function SelectEpisodeRow({
   title,
   airDate,
   isAnime,
+  unverifiedSceneNumbering = false,
 }: SelectEpisodeRowProps) {
   const { toggleSelected, useIsSelected } = useSelect<Episode>();
   const isSelected = useIsSelected(id);
@@ -42,6 +66,12 @@ function SelectEpisodeRow({
     handleSelectedChange({ id, value: !isSelected, shiftKey: false });
   }, [id, isSelected, handleSelectedChange]);
 
+  const warningMessage = getWarningMessage(
+    unverifiedSceneNumbering,
+    isAnime,
+    absoluteEpisodeNumber
+  );
+
   return (
     <TableRowButton onPress={handlePress}>
       <TableSelectCell
@@ -52,7 +82,17 @@ function SelectEpisodeRow({
 
       <TableRowCell>
         {episodeNumber}
-        {isAnime ? ` (${absoluteEpisodeNumber})` : ''}
+        {isAnime && !!absoluteEpisodeNumber
+          ? ` (${absoluteEpisodeNumber})`
+          : ''}
+        {warningMessage ? (
+          <Icon
+            className={styles.warning}
+            name={icons.WARNING}
+            kind={kinds.WARNING}
+            title={warningMessage}
+          />
+        ) : null}
       </TableRowCell>
 
       <TableRowCell>{title}</TableRowCell>