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

frontend/src/Helpers/Props/icons.ts

@@ -65,6 +65,7 @@ import {
   faFilter as fasFilter,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
+  faFolderTree as farFolderTree,
   faForward as fasForward,
   faHeart as fasHeart,
   faHistory as fasHistory,
@@ -201,6 +202,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 SCENE_MAPPING = fasSitemap;

frontend/src/Series/Edit/EditSeriesModalConnector.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditSeriesModal from './EditSeriesModal';
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class EditSeriesModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'series' });
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditSeriesModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditSeriesModalConnector.propTypes = {
+  ...EditSeriesModal.propTypes,
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(EditSeriesModalConnector);

frontend/src/Series/Edit/EditSeriesModalContent.tsx

@@ -4,6 +4,7 @@ import SeriesMonitorNewItemsOptionsPopoverContent from 'AddSeries/SeriesMonitorN
 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';
@@ -21,6 +22,8 @@ import { saveSeries, setSeriesValue } from 'Store/Actions/seriesActions';
 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 './EditSeriesModalContent.css';
 
 export interface EditSeriesModalContentProps {
@@ -43,11 +46,17 @@ function EditSeriesModalContent({
     seriesType,
     path,
     tags,
+    rootFolderPath: initialRootFolderPath,
   } = useSeries(seriesId)!;
+
   const { isSaving, saveError, pendingChanges } = useSelector(
     (state: AppState) => state.series
   );
 
+  const [isRootFolderModalOpen, setIsRootFolderModalOpen] = useState(false);
+
+  const [rootFolderPath, setRootFolderPath] = useState(initialRootFolderPath);
+
   const isPathChanging = pendingChanges.path && path !== pendingChanges.path;
 
   const [isConfirmMoveModalOpen, setIsConfirmMoveModalOpen] = useState(false);
@@ -86,6 +95,26 @@ function EditSeriesModalContent({
     [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);
   }, []);
@@ -196,6 +225,16 @@ function EditSeriesModalContent({
               type={inputTypes.PATH}
               name="path"
               {...settings.path}
+              buttons={[
+                <FormInputButton
+                  key="fileBrowser"
+                  kind={kinds.DEFAULT}
+                  title="Root Folder"
+                  onPress={handleRootFolderPress}
+                >
+                  <Icon name={icons.ROOT_FOLDER} />
+                </FormInputButton>,
+              ]}
               onChange={handleInputChange}
             />
           </FormGroup>
@@ -233,6 +272,14 @@ function EditSeriesModalContent({
         </SpinnerErrorButton>
       </ModalFooter>
 
+      <RootFolderModal
+        isOpen={isRootFolderModalOpen}
+        seriesId={seriesId}
+        rootFolderPath={rootFolderPath}
+        onSavePress={handleRootFolderChange}
+        onModalClose={handleRootFolderModalClose}
+      />
+
       <MoveSeriesModal
         originalPath={path}
         destinationPath={pendingChanges.path}

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

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

frontend/src/Series/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 { inputTypes } from 'Helpers/Props';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { InputChanged } from 'typings/inputs';
+import useApiQuery from 'Utilities/Hooks/useApiQuery';
+import translate from 'Utilities/String/translate';
+
+export interface RootFolderUpdated {
+  path: string;
+  rootFolderPath: string;
+}
+
+export interface RootFolderModalContentProps {
+  seriesId: number;
+  rootFolderPath: string;
+  onSavePress(change: RootFolderUpdated): void;
+  onModalClose(): void;
+}
+
+interface SeriesFolder {
+  folder: string;
+}
+
+function RootFolderModalContent(props: RootFolderModalContentProps) {
+  const { seriesId, onSavePress, onModalClose } = props;
+  const { isWindows } = useSelector(createSystemStatusSelector());
+
+  const [rootFolderPath, setRootFolderPath] = useState(props.rootFolderPath);
+
+  const { isLoading, data } = useApiQuery<SeriesFolder>({
+    url: `/series/${seriesId}/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('UpdateSeriesPath')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('RootFolder')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
+            name="rootFolderPath"
+            value={rootFolderPath}
+            valueOptions={{
+              seriesFolder: data?.folder,
+              isWindows,
+            }}
+            selectedValueOptions={{
+              seriesFolder: data?.folder,
+              isWindows,
+            }}
+            helpText={translate('SeriesEditRootFolderHelpText')}
+            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;

src/NzbDrone.Core/Localization/Core/en.json

@@ -2085,6 +2085,8 @@
   "UpdateStartupTranslocationHealthCheckMessage": "Cannot install update because startup folder '{startupFolder}' is in an App Translocation folder.",
   "UpdateUiNotWritableHealthCheckMessage": "Cannot install update because UI folder '{uiFolder}' is not writable by the  user '{userName}'.",
   "UpdaterLogFiles": "Updater Log Files",
+  "UpdatePath": "Update Path",
+  "UpdateSeriesPath": "Update Series Path",
   "Updates": "Updates",
   "UpgradeUntil": "Upgrade Until",
   "UpgradeUntilCustomFormatScore": "Upgrade Until Custom Format Score",

src/NzbDrone.Core/RootFolders/RootFolderService.cs

@@ -219,10 +219,10 @@ private string GetBestRootFolderPathInternal(string path)
             {
                 var osPath = new OsPath(path);
 
-                return osPath.Directory.ToString().TrimEnd(osPath.IsUnixPath ? '/' : '\\');
+                return osPath.Directory.ToString().GetCleanPath();
             }
 
-            return possibleRootFolder.Path;
+            return possibleRootFolder.Path.GetCleanPath();
         }
     }
 }

src/Sonarr.Api.V3/Series/SeriesFolderController.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Mvc;
+using NzbDrone.Core.Organizer;
+using NzbDrone.Core.Tv;
+using Sonarr.Http;
+
+namespace Sonarr.Api.V3.Series;
+
+[V3ApiController("series")]
+public class SeriesFolderController : Controller
+{
+    private readonly ISeriesService _seriesService;
+    private readonly IBuildFileNames _fileNameBuilder;
+
+    public SeriesFolderController(ISeriesService seriesService, IBuildFileNames fileNameBuilder)
+    {
+        _seriesService = seriesService;
+        _fileNameBuilder = fileNameBuilder;
+    }
+
+    [HttpGet("{id}/folder")]
+    public object GetFolder([FromRoute] int id)
+    {
+        var series = _seriesService.GetSeries(id);
+        var folder = _fileNameBuilder.GetSeriesFolder(series);
+
+        return new
+        {
+            folder
+        };
+    }
+}