From b16094a9e3153f2ac39800475c1ddb1dafb6ab34 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

Closes #4917
---
 frontend/src/Components/Form/TagInput.js          | 15 +++++++++++----
 frontend/src/Components/Form/TagInputConnector.js |  1 +
 .../src/Components/Form/TextTagInputConnector.js  | 15 +++++++++++++++
 .../Release/EditReleaseProfileModalContent.css    |  6 ++++++
 .../EditReleaseProfileModalContent.css.d.ts       |  1 +
 .../Release/EditReleaseProfileModalContent.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 1c34ec1c3..840d627f8 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;
 
-    this.props.onTagDelete(otherProps);
+    if (currentValue && this.props.onTagReplace) {
+      this.props.onTagReplace(otherProps, { name: currentValue });
+    } else {
+      this.props.onTagDelete(otherProps);
+    }
+
+    this.setState({ value });
   };
 
   onInputContainerPress = () => {
@@ -234,7 +240,7 @@ class TagInput extends Component {
       <AutoSuggestInput
         {...otherProps}
         forwardedRef={this._setAutosuggestRef}
-        className={styles.internalInput}
+        className={className}
         inputContainerClassName={classNames(
           inputContainerClassName,
           isFocused && styles.isFocused,
@@ -276,7 +282,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 bd2d0c9d0..aef065cfa 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/Settings/Profiles/Release/EditReleaseProfileModalContent.css b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css
index a2b6014df..050567669 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.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/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts
index c5f0ef8a7..930ca0cb3 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.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/Profiles/Release/EditReleaseProfileModalContent.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
index ed2c04e87..e544077af 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
@@ -76,6 +76,7 @@ function EditReleaseProfileModalContent(props) {
 
             <FormInputGroup
               {...required}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="required"
               helpText="The release must contain at least one of these terms (case insensitive)"
@@ -92,6 +93,7 @@ function EditReleaseProfileModalContent(props) {
 
             <FormInputGroup
               {...ignored}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="ignored"
               helpText="The release will be rejected if it contains one or more of terms (case insensitive)"