New: Health check for import lists with missing root folders

New: Show missing root folder path in edit for Import List

(cherry picked from commit ae196af2ad368d49fde2358f0987ed7650c7f29c)

Closes #1998

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -9,14 +9,17 @@ const ADD_NEW_KEY = 'addNew';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.rootFolders,
+    (state, { value }) => value,
+    (state, { includeMissingValue }) => includeMissingValue,
     (state, { includeNoChange }) => includeNoChange,
-    (rootFolders, includeNoChange) => {
+    (rootFolders, value, includeMissingValue, includeNoChange) => {
       const values = rootFolders.items.map((rootFolder) => {
         return {
           key: rootFolder.path,
           value: rootFolder.path,
           name: rootFolder.name,
-          freeSpace: rootFolder.freeSpace
+          freeSpace: rootFolder.freeSpace,
+          isMissing: false
         };
       });
 
@@ -25,6 +28,16 @@ function createMapStateToProps() {
           key: 'noChange',
           value: '',
           name: 'No Change',
+          isDisabled: true,
+          isMissing: false
+        });
+      }
+
+      if (includeMissingValue && !values.find((v) => v.key === value)) {
+        values.push({
+          key: value,
+          value,
+          isMissing: true,
           isDisabled: true
         });
       }

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -27,3 +27,10 @@
   color: var(--darkGray);
   font-size: $smallFontSize;
 }
+
+.isMissing {
+  margin-left: 15px;
+  color: var(--dangerColor);
+  font-size: $smallFontSize;
+}
+

frontend/src/Components/Form/RootFolderSelectInputOption.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'artistFolder': string;
   'freeSpace': string;
+  'isMissing': string;
   'isMobile': string;
   'optionText': string;
   'value': string;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -11,6 +11,7 @@ function RootFolderSelectInputOption(props) {
     value,
     name,
     freeSpace,
+    isMissing,
     artistFolder,
     isMobile,
     isWindows,
@@ -19,9 +20,7 @@ function RootFolderSelectInputOption(props) {
 
   const slashCharacter = isWindows ? '\\' : '/';
 
-  const text = value === '' ? name : `[${name}] ${value}`;
-
-  console.debug(props);
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputOption
@@ -48,11 +47,20 @@ function RootFolderSelectInputOption(props) {
         </div>
 
         {
-          freeSpace != null &&
+          freeSpace == null ?
+            null :
             <div className={styles.freeSpace}>
               {formatBytes(freeSpace)} Free
             </div>
         }
+
+        {
+          isMissing ?
+            <div className={styles.isMissing}>
+              Missing
+            </div> :
+            null
+        }
       </div>
     </EnhancedSelectInputOption>
   );
@@ -63,9 +71,14 @@ RootFolderSelectInputOption.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
+  isMissing: PropTypes.bool,
   artistFolder: PropTypes.string,
   isMobile: PropTypes.bool.isRequired,
   isWindows: PropTypes.bool
 };
 
+RootFolderSelectInputOption.defaultProps = {
+  name: ''
+};
+
 export default RootFolderSelectInputOption;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -17,7 +17,7 @@ function RootFolderSelectInputSelectedValue(props) {
 
   const slashCharacter = isWindows ? '\\' : '/';
 
-  const text = value === '' ? name : `[${name}] ${value}`;
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputSelectedValue
@@ -59,6 +59,7 @@ RootFolderSelectInputSelectedValue.propTypes = {
 };
 
 RootFolderSelectInputSelectedValue.defaultProps = {
+  name: '',
   includeFreeSpace: true
 };