New: Health check for import lists with missing root folders

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

Closes #5908

(cherry picked from commit ae196af2ad368d49fde2358f0987ed7650c7f29c)

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -10,13 +10,16 @@ const ADD_NEW_KEY = 'addNew';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.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,
-          freeSpace: rootFolder.freeSpace
+          freeSpace: rootFolder.freeSpace,
+          isMissing: false
         };
       });
 
@@ -24,7 +27,8 @@ function createMapStateToProps() {
         values.unshift({
           key: 'noChange',
           value: 'No Change',
-          isDisabled: true
+          isDisabled: true,
+          isMissing: false
         });
       }
 
@@ -37,6 +41,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: 'Add a new path'

frontend/src/Components/Form/RootFolderSelectInputOption.css

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

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -10,6 +10,7 @@ function RootFolderSelectInputOption(props) {
     id,
     value,
     freeSpace,
+    isMissing,
     movieFolder,
     isMobile,
     isWindows,
@@ -43,11 +44,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>
   );
@@ -58,6 +68,7 @@ RootFolderSelectInputOption.propTypes = {
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
   movieFolder: PropTypes.string,
+  isMissing: PropTypes.boolean,
   isMobile: PropTypes.bool.isRequired,
   isWindows: PropTypes.bool
 };