Fixed: Free space and missing for selected root folder value

frontend/src/Components/Form/Select/RootFolderSelectInput.tsx

@@ -21,6 +21,7 @@ const ADD_NEW_KEY = 'addNew';
 
 export interface RootFolderSelectInputValue
   extends EnhancedSelectInputValue<string> {
+  freeSpace?: number;
   isMissing?: boolean;
 }
 
@@ -42,66 +43,58 @@ function createRootFolderOptionsSelector(
   includeNoChange: boolean,
   includeNoChangeDisabled: boolean
 ) {
-  return createSelector(
+  return createSelector(createRootFoldersSelector(), (rootFolders) => {
-    createRootFoldersSelector(),
+    const values: RootFolderSelectInputValue[] = rootFolders.items.map(
-
+      (rootFolder) => {
-    (rootFolders) => {
+        return {
-      const values: RootFolderSelectInputValue[] = rootFolders.items.map(
+          key: rootFolder.path,
-        (rootFolder) => {
+          value: rootFolder.path,
-          return {
+          freeSpace: rootFolder.freeSpace,
-            key: rootFolder.path,
-            value: rootFolder.path,
-            freeSpace: rootFolder.freeSpace,
-            isMissing: false,
-          };
-        }
-      );
-
-      if (includeNoChange) {
-        values.unshift({
-          key: 'noChange',
-          get value() {
-            return translate('NoChange');
-          },
-          isDisabled: includeNoChangeDisabled,
           isMissing: false,
-        });
+        };
       }
+    );
 
-      if (!values.length) {
+    if (includeNoChange) {
-        values.push({
+      values.unshift({
-          key: '',
+        key: 'noChange',
-          value: '',
+        get value() {
-          isDisabled: true,
+          return translate('NoChange');
-          isHidden: true,
+        },
-        });
+        isDisabled: includeNoChangeDisabled,
-      }
+        isMissing: false,
-
-      if (
-        includeMissingValue &&
-        value &&
-        !values.find((v) => v.key === value)
-      ) {
-        values.push({
-          key: value,
-          value,
-          isMissing: true,
-          isDisabled: true,
-        });
-      }
-
-      values.push({
-        key: ADD_NEW_KEY,
-        value: translate('AddANewPath'),
       });
-
-      return {
-        values,
-        isSaving: rootFolders.isSaving,
-        saveError: rootFolders.saveError,
-      };
     }
-  );
+
+    if (!values.length) {
+      values.push({
+        key: '',
+        value: '',
+        isDisabled: true,
+        isHidden: true,
+      });
+    }
+
+    if (includeMissingValue && value && !values.find((v) => v.key === value)) {
+      values.push({
+        key: value,
+        value,
+        isMissing: true,
+        isDisabled: true,
+      });
+    }
+
+    values.push({
+      key: ADD_NEW_KEY,
+      value: translate('AddANewPath'),
+    });
+
+    return {
+      values,
+      isSaving: rootFolders.isSaving,
+      saveError: rootFolders.saveError,
+    };
+  });
 }
 
 function RootFolderSelectInput({

frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx

@@ -18,18 +18,16 @@ interface RootFolderSelectInputOptionProps
   isWindows?: boolean;
 }
 
-function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
+function RootFolderSelectInputOption({
-  const {
+  id,
-    id,
+  value,
-    value,
+  freeSpace,
-    freeSpace,
+  isMissing,
-    isMissing,
+  movieFolder,
-    movieFolder,
+  isMobile,
-    isMobile,
+  isWindows,
-    isWindows,
+  ...otherProps
-    ...otherProps
+}: RootFolderSelectInputOptionProps) {
-  } = props;
-
   const slashCharacter = isWindows ? '\\' : '/';
 
   return (

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css

@@ -30,3 +30,11 @@
   text-align: right;
   font-size: $smallFontSize;
 }
+
+.isMissing {
+  flex: 0 0 auto;
+  margin-left: 15px;
+  color: var(--dangerColor);
+  text-align: right;
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'freeSpace': string;
+  'isMissing': string;
   'movieFolder': string;
   'path': string;
   'pathContainer': string;

frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx

@@ -8,27 +8,23 @@ import styles from './RootFolderSelectInputSelectedValue.css';
 interface RootFolderSelectInputSelectedValueProps {
   selectedValue: string;
   values: RootFolderSelectInputValue[];
-  freeSpace?: number;
   movieFolder?: string;
   isWindows?: boolean;
   includeFreeSpace?: boolean;
 }
 
-function RootFolderSelectInputSelectedValue(
+function RootFolderSelectInputSelectedValue({
-  props: RootFolderSelectInputSelectedValueProps
+  selectedValue,
-) {
+  values,
-  const {
+  movieFolder,
-    selectedValue,
+  includeFreeSpace = true,
-    values,
+  isWindows,
-    freeSpace,
+  ...otherProps
-    movieFolder,
+}: RootFolderSelectInputSelectedValueProps) {
-    includeFreeSpace = true,
-    isWindows,
-    ...otherProps
-  } = props;
-
   const slashCharacter = isWindows ? '\\' : '/';
-  const value = values.find((v) => v.key === selectedValue)?.value;
+  const { value, freeSpace, isMissing } = values.find(
+    (v) => v.key === selectedValue
+  ) as RootFolderSelectInputValue;
 
   return (
     <EnhancedSelectInputSelectedValue
@@ -53,6 +49,10 @@ function RootFolderSelectInputSelectedValue(
           })}
         </div>
       ) : null}
+
+      {isMissing ? (
+        <div className={styles.isMissing}>{translate('Missing')}</div>
+      ) : null}
     </EnhancedSelectInputSelectedValue>
   );
 }