New: Ability to change root folder when editing movie

(cherry picked from commit 417af2b91542e709e4b99aa5ca55b0501ba426ad)

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/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 @@ export 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/Helpers/Props/icons.ts

@@ -71,6 +71,7 @@ import {
   faFire as fasFire,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
+  faFolderTree as farFolderTree,
   faForward as fasForward,
   faHeart as fasHeart,
   faHistory as fasHistory,
@@ -216,6 +217,7 @@ export const REMOVE = fasTimes;
 export const RESTART = fasRedoAlt;
 export const RESTORE = fasHistory;
 export const REORDER = fasBars;
+export const ROOT_FOLDER = farFolderTree;
 export const RSS = fasRss;
 export const SAVE = fasSave;
 export const SCHEDULED = farClock;

frontend/src/Movie/Edit/EditMovieModalContent.tsx

@@ -4,6 +4,7 @@ import MovieMinimumAvailabilityPopoverContent from 'AddMovie/MovieMinimumAvailab
 import AppState from 'App/State/AppState';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
+import FormInputButton from 'Components/Form/FormInputButton';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import Icon from 'Components/Icon';
@@ -28,6 +29,8 @@ import { saveMovie, setMovieValue } from 'Store/Actions/movieActions';
 import selectSettings from 'Store/Selectors/selectSettings';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
+import RootFolderModal from './RootFolder/RootFolderModal';
+import { RootFolderUpdated } from './RootFolder/RootFolderModalContent';
 import styles from './EditMovieModalContent.css';
 
 export interface EditMovieModalContentProps {
@@ -49,6 +52,7 @@ function EditMovieModalContent({
     qualityProfileId,
     path,
     tags,
+    rootFolderPath: initialRootFolderPath,
   } = useMovie(movieId)!;
 
   const { isSaving, saveError, pendingChanges } = useSelector(
@@ -57,6 +61,10 @@ function EditMovieModalContent({
 
   const wasSaving = usePrevious(isSaving);
 
+  const [isRootFolderModalOpen, setIsRootFolderModalOpen] = useState(false);
+
+  const [rootFolderPath, setRootFolderPath] = useState(initialRootFolderPath);
+
   const isPathChanging = pendingChanges.path && path !== pendingChanges.path;
 
   const [isConfirmMoveModalOpen, setIsConfirmMoveModalOpen] = useState(false);
@@ -91,6 +99,26 @@ function EditMovieModalContent({
     [dispatch]
   );
 
+  const handleRootFolderPress = useCallback(() => {
+    setIsRootFolderModalOpen(true);
+  }, []);
+
+  const handleRootFolderModalClose = useCallback(() => {
+    setIsRootFolderModalOpen(false);
+  }, []);
+
+  const handleRootFolderChange = useCallback(
+    ({
+      path: newPath,
+      rootFolderPath: newRootFolderPath,
+    }: RootFolderUpdated) => {
+      setIsRootFolderModalOpen(false);
+      setRootFolderPath(newRootFolderPath);
+      handleInputChange({ name: 'path', value: newPath });
+    },
+    [handleInputChange]
+  );
+
   const handleCancelPress = useCallback(() => {
     setIsConfirmMoveModalOpen(false);
   }, []);
@@ -183,6 +211,16 @@ function EditMovieModalContent({
               type={inputTypes.PATH}
               name="path"
               {...settings.path}
+              buttons={[
+                <FormInputButton
+                  key="fileBrowser"
+                  kind={kinds.DEFAULT}
+                  title={translate('RootFolder')}
+                  onPress={handleRootFolderPress}
+                >
+                  <Icon name={icons.ROOT_FOLDER} />
+                </FormInputButton>,
+              ]}
               includeFiles={false}
               onChange={handleInputChange}
             />
@@ -221,6 +259,14 @@ function EditMovieModalContent({
         </SpinnerErrorButton>
       </ModalFooter>
 
+      <RootFolderModal
+        isOpen={isRootFolderModalOpen}
+        movieId={movieId}
+        rootFolderPath={rootFolderPath}
+        onSavePress={handleRootFolderChange}
+        onModalClose={handleRootFolderModalClose}
+      />
+
       <MoveMovieModal
         originalPath={path}
         destinationPath={pendingChanges.path}

frontend/src/Movie/Edit/RootFolder/RootFolderModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import RootFolderModalContent, {
+  RootFolderModalContentProps,
+} from './RootFolderModalContent';
+
+interface RootFolderModalProps extends RootFolderModalContentProps {
+  isOpen: boolean;
+}
+
+function RootFolderModal({
+  isOpen,
+  rootFolderPath,
+  movieId,
+  onSavePress,
+  onModalClose,
+}: RootFolderModalProps) {
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <RootFolderModalContent
+        movieId={movieId}
+        rootFolderPath={rootFolderPath}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default RootFolderModal;

frontend/src/Movie/Edit/RootFolder/RootFolderModalContent.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import { inputTypes, sizes } from 'Helpers/Props';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+
+export interface RootFolderUpdated {
+  path: string;
+  rootFolderPath: string;
+}
+
+export interface RootFolderModalContentProps {
+  movieId: number;
+  rootFolderPath: string;
+  onSavePress(change: RootFolderUpdated): void;
+  onModalClose(): void;
+}
+
+interface MovieFolder {
+  folder: string;
+}
+
+function RootFolderModalContent(props: RootFolderModalContentProps) {
+  const { movieId, onSavePress, onModalClose } = props;
+  const { isWindows } = useSelector(createSystemStatusSelector());
+
+  const [rootFolderPath, setRootFolderPath] = useState(props.rootFolderPath);
+
+  const { isLoading, data } = useApiQuery<MovieFolder>({
+    url: `/movie/${movieId}/folder`,
+  });
+
+  const onInputChange = useCallback(({ value }: InputChanged<string>) => {
+    setRootFolderPath(value);
+  }, []);
+
+  const handleSavePress = useCallback(() => {
+    const separator = isWindows ? '\\' : '/';
+
+    onSavePress({
+      path: `${rootFolderPath}${separator}${data?.folder}`,
+      rootFolderPath,
+    });
+  }, [rootFolderPath, isWindows, data, onSavePress]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('UpdateMoviePath')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup size={sizes.MEDIUM}>
+          <FormLabel>{translate('RootFolder')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
+            name="rootFolderPath"
+            value={rootFolderPath}
+            valueOptions={{
+              movieFolder: data?.folder,
+              isWindows,
+            }}
+            selectedValueOptions={{
+              movieFolder: data?.folder,
+              isWindows,
+            }}
+            helpText={translate('MovieEditRootFolderHelpText')}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button disabled={isLoading || !data?.folder} onPress={handleSavePress}>
+          {translate('UpdatePath')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default RootFolderModalContent;

frontend/src/Movie/Index/Select/Edit/EditMoviesModalContent.tsx

@@ -203,7 +203,7 @@ function EditMoviesModalContent(props: EditMoviesModalContentProps) {
             includeNoChange={true}
             includeNoChangeDisabled={false}
             selectedValueOptions={{ includeFreeSpace: false }}
-            helpText="Moving movies to the same root folder can be used to rename movie folders to match updated title or naming format"
+            helpText={translate('MovieEditRootFolderHelpText')}
             onChange={onInputChange}
           />
         </FormGroup>

frontend/src/Movie/Movie.ts

@@ -68,6 +68,7 @@ interface Movie extends ModelBase {
   physicalRelease?: string;
   digitalRelease?: string;
   releaseDate?: string;
+  rootFolderPath: string;
   runtime: number;
   minimumAvailability: string;
   path: string;