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,10 +43,7 @@ function createRootFolderOptionsSelector(
   includeNoChange: boolean,
   includeNoChangeDisabled: boolean
 ) {
-  return createSelector(
-    createRootFoldersSelector(),
-
-    (rootFolders) => {
+  return createSelector(createRootFoldersSelector(), (rootFolders) => {
     const values: RootFolderSelectInputValue[] = rootFolders.items.map(
       (rootFolder) => {
         return {
@@ -77,11 +75,7 @@ function createRootFolderOptionsSelector(
       });
     }
 
-      if (
-        includeMissingValue &&
-        value &&
-        !values.find((v) => v.key === value)
-      ) {
+    if (includeMissingValue && value && !values.find((v) => v.key === value)) {
       values.push({
         key: value,
         value,
@@ -100,8 +94,7 @@ function createRootFolderOptionsSelector(
       isSaving: rootFolders.isSaving,
       saveError: rootFolders.saveError,
     };
-    }
-  );
+  });
 }
 
 function RootFolderSelectInput({

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

@@ -18,8 +18,7 @@ interface RootFolderSelectInputOptionProps
   isWindows?: boolean;
 }
 
-function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
-  const {
+function RootFolderSelectInputOption({
   id,
   value,
   freeSpace,
@@ -28,8 +27,7 @@ function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
   isMobile,
   isWindows,
   ...otherProps
-  } = props;
-
+}: RootFolderSelectInputOptionProps) {
   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(
-  props: RootFolderSelectInputSelectedValueProps
-) {
-  const {
+function RootFolderSelectInputSelectedValue({
   selectedValue,
   values,
-    freeSpace,
   movieFolder,
   includeFreeSpace = true,
   isWindows,
   ...otherProps
-  } = props;
-
+}: RootFolderSelectInputSelectedValueProps) {
   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>
   );
 }