From 45f5ce5f292470ac218a144b5c45eaf374302f1a Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 16 Mar 2023 00:36:32 -0700
Subject: [PATCH] Fixed: Prevent loss of restrictions when attempting to edit
 multiple restrictions at once

(cherry picked from commit b16094a9e3153f2ac39800475c1ddb1dafb6ab34)

Closes #8231
---
 frontend/src/Components/Form/TagInput.js          | 15 +++++++++++----
 frontend/src/Components/Form/TagInputConnector.js |  1 +
 .../src/Components/Form/TextTagInputConnector.js  | 15 +++++++++++++++
 frontend/src/Movie/Edit/EditMovieModalContent.css |  6 ++++++
 .../src/Movie/Edit/EditMovieModalContent.css.d.ts |  1 +
 .../Restrictions/EditRestrictionModalContent.js   |  2 ++
 6 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js
index 44c6f48b0..8c66772f9 100644
--- a/frontend/src/Components/Form/TagInput.js
+++ b/frontend/src/Components/Form/TagInput.js
@@ -76,9 +76,15 @@ class TagInput extends Component {
   // Listeners
 
   onTagEdit = ({ value, ...otherProps }) => {
-    this.setState({ value });
+    const currentValue = this.state.value;
+
+    if (currentValue && this.props.onTagReplace) {
+      this.props.onTagReplace(otherProps, { name: currentValue });
+    } else {
+      this.props.onTagDelete(otherProps);
+    }
 
-    this.props.onTagDelete(otherProps);
+    this.setState({ value });
   };
 
   onInputContainerPress = () => {
@@ -232,7 +238,7 @@ class TagInput extends Component {
       <AutoSuggestInput
         {...otherProps}
         forwardedRef={this._setAutosuggestRef}
-        className={styles.internalInput}
+        className={className}
         inputContainerClassName={classNames(
           inputContainerClassName,
           isFocused && styles.isFocused
@@ -272,7 +278,8 @@ TagInput.propTypes = {
   hasWarning: PropTypes.bool,
   tagComponent: PropTypes.elementType.isRequired,
   onTagAdd: PropTypes.func.isRequired,
-  onTagDelete: PropTypes.func.isRequired
+  onTagDelete: PropTypes.func.isRequired,
+  onTagReplace: PropTypes.func
 };
 
 TagInput.defaultProps = {
diff --git a/frontend/src/Components/Form/TagInputConnector.js b/frontend/src/Components/Form/TagInputConnector.js
index 9504a2d73..8d0782fa5 100644
--- a/frontend/src/Components/Form/TagInputConnector.js
+++ b/frontend/src/Components/Form/TagInputConnector.js
@@ -138,6 +138,7 @@ class TagInputConnector extends Component {
       <TagInput
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}
+        onTagReplace={this.onTagReplace}
         {...this.props}
       />
     );
diff --git a/frontend/src/Components/Form/TextTagInputConnector.js b/frontend/src/Components/Form/TextTagInputConnector.js
index cba307e26..9f6d12689 100644
--- a/frontend/src/Components/Form/TextTagInputConnector.js
+++ b/frontend/src/Components/Form/TextTagInputConnector.js
@@ -71,6 +71,20 @@ class TextTagInputConnector extends Component {
     });
   };
 
+  onTagReplace = (tagToReplace, newTag) => {
+    const {
+      name,
+      valueArray,
+      onChange
+    } = this.props;
+
+    const newValue = [...valueArray];
+    newValue.splice(tagToReplace.index, 1);
+    newValue.push(newTag.name.trim());
+
+    onChange({ name, value: newValue });
+  };
+
   //
   // Render
 
@@ -80,6 +94,7 @@ class TextTagInputConnector extends Component {
         tagList={[]}
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}
+        onTagReplace={this.onTagReplace}
         {...this.props}
       />
     );
diff --git a/frontend/src/Movie/Edit/EditMovieModalContent.css b/frontend/src/Movie/Edit/EditMovieModalContent.css
index a2b6014df..050567669 100644
--- a/frontend/src/Movie/Edit/EditMovieModalContent.css
+++ b/frontend/src/Movie/Edit/EditMovieModalContent.css
@@ -3,3 +3,9 @@
 
   margin-right: auto;
 }
+
+.tagInternalInput {
+  composes: internalInput from '~Components/Form/TagInput.css';
+
+  flex: 0 0 100%;
+}
diff --git a/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts b/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts
index c5f0ef8a7..930ca0cb3 100644
--- a/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts
+++ b/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'deleteButton': string;
+  'tagInternalInput': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js b/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js
index 503df8be9..9070076b1 100644
--- a/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js
+++ b/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js
@@ -48,6 +48,7 @@ function EditRestrictionModalContent(props) {
 
             <FormInputGroup
               {...required}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="required"
               helpText={translate('RequiredRestrictionHelpText')}
@@ -63,6 +64,7 @@ function EditRestrictionModalContent(props) {
 
             <FormInputGroup
               {...ignored}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="ignored"
               helpText={translate('IgnoredHelpText')}