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 #821

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,7 +28,8 @@ function createMapStateToProps() {
           key: 'noChange',
           value: '',
           name: 'No Change',
-          isDisabled: true
+          isDisabled: true,
+          isMissing: false
         });
       }
 
@@ -39,6 +43,15 @@ function createMapStateToProps() {
         });
       }
 
+      if (includeMissingValue && !values.find((v) => v.key === value)) {
+        values.push({
+          key: value,
+          value,
+          isMissing: true,
+          isDisabled: true
+        });
+      }
+
       values.push({
         key: ADD_NEW_KEY,
         value: '',

frontend/src/Components/Form/RootFolderSelectInputOption.css

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

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -10,6 +10,7 @@ function RootFolderSelectInputOption(props) {
     value,
     name,
     freeSpace,
+    isMissing,
     isMobile,
     ...otherProps
   } = props;
@@ -29,11 +30,20 @@ function RootFolderSelectInputOption(props) {
         <div>{text}</div>
 
         {
-          freeSpace != null &&
+          freeSpace == null ?
+            null :
             <div className={styles.freeSpace}>
               {formatBytes(freeSpace)} Free
             </div>
         }
+
+        {
+          isMissing ?
+            <div className={styles.isMissing}>
+              Missing
+            </div> :
+            null
+        }
       </div>
     </EnhancedSelectInputOption>
   );
@@ -43,6 +53,7 @@ RootFolderSelectInputOption.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
+  isMissing: PropTypes.bool,
   isMobile: PropTypes.bool.isRequired
 };
 

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -222,6 +222,7 @@ function EditImportListModalContent(props) {
                     name="rootFolderPath"
                     helpText={translate('RootFolderPathHelpText')}
                     {...rootFolderPath}
+                    includeMissingValue={true}
                     onChange={onInputChange}
                   />
                 </FormGroup>