New: Ability to change root folder when editing series

Closes #5544

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 useApiQuery from 'Helpers/Hooks/useApiQuery';
+import { inputTypes } 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 {
+  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;