New: Ability to change root folder when editing series

Closes #5544

frontend/src/Components/Form/FormInputButton.tsx

@@ -14,13 +14,14 @@ function FormInputButton({
   className = styles.button,
   canSpin = false,
   isLastButton = true,
+  kind = kinds.PRIMARY,
   ...otherProps
 }: FormInputButtonProps) {
   if (canSpin) {
     return (
       <SpinnerButton
         className={classNames(className, !isLastButton && styles.middleButton)}
-        kind={kinds.PRIMARY}
+        kind={kind}
         {...otherProps}
       />
     );
@@ -29,7 +30,7 @@ function FormInputButton({
   return (
     <Button
       className={classNames(className, !isLastButton && styles.middleButton)}
-      kind={kinds.PRIMARY}
+      kind={kind}
       {...otherProps}
     />
   );

frontend/src/Components/Form/FormInputGroup.tsx

@@ -145,6 +145,7 @@ interface FormInputGroupProps<T> {
   autoFocus?: boolean;
   includeNoChange?: boolean;
   includeNoChangeDisabled?: boolean;
+  valueOptions?: object;
   selectedValueOptions?: object;
   indexerFlags?: number;
   pending?: boolean;

frontend/src/Components/Form/PathInput.css

@@ -16,3 +16,7 @@
 
   height: 35px;
 }
+
+.fileBrowserMiddleButton {
+  composes: middleButton from '~./FormInputButton.css';
+}

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

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'fileBrowserButton': string;
+  'fileBrowserMiddleButton': string;
   'hasFileBrowser': string;
   'inputWrapper': string;
   'pathMatch': string;

frontend/src/Components/Form/PathInput.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, {
   KeyboardEvent,
   SyntheticEvent,
@@ -29,6 +30,7 @@ interface PathInputProps {
   value?: string;
   placeholder?: string;
   includeFiles: boolean;
+  hasButton?: boolean;
   hasFileBrowser?: boolean;
   onChange: (change: InputChanged<string>) => void;
 }
@@ -96,6 +98,7 @@ export function PathInputInternal(props: PathInputInternalProps) {
     value: inputValue = '',
     paths,
     includeFiles,
+    hasButton,
     hasFileBrowser = true,
     onChange,
     onFetchPaths,
@@ -229,9 +232,12 @@ export function PathInputInternal(props: PathInputInternalProps) {
       />
 
       {hasFileBrowser ? (
-        <div>
+        <>
           <FormInputButton
-            className={styles.fileBrowserButton}
+            className={classNames(
+              styles.fileBrowserButton,
+              hasButton && styles.fileBrowserMiddleButton
+            )}
             onPress={handleFileBrowserOpenPress}
           >
             <Icon name={icons.FOLDER_OPEN} />
@@ -245,7 +251,7 @@ export function PathInputInternal(props: PathInputInternalProps) {
             onChange={onChange}
             onModalClose={handleFileBrowserModalClose}
           />
-        </div>
+        </>
       ) : null}
     </div>
   );

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

@@ -3,7 +3,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
 import usePrevious from 'Helpers/Hooks/usePrevious';
-import { addRootFolder } from 'Store/Actions/rootFolderActions';
+import {
+  addRootFolder,
+  fetchRootFolders,
+} from 'Store/Actions/rootFolderActions';
 import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
 import { EnhancedSelectInputChanged, InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
@@ -189,6 +192,10 @@ function RootFolderSelectInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    dispatch(fetchRootFolders());
+  }, [dispatch]);
+
   return (
     <>
       <EnhancedSelectInput