New: Ability to edit restriction terms

(cherry picked from commit dab6242ff28a603f2f15818c1c86567137ed0089)

frontend/src/Components/Form/TagInput.js

@@ -75,6 +75,12 @@ class TagInput extends Component {
   //
   // Listeners
 
+  onTagEdit = ({ value, ...otherProps }) => {
+    this.setState({ value });
+
+    this.props.onTagDelete(otherProps);
+  };
+
   onInputContainerPress = () => {
     this._autosuggestRef.input.focus();
   };
@@ -188,6 +194,7 @@ class TagInput extends Component {
     const {
       tags,
       kind,
+      canEdit,
       tagComponent,
       onTagDelete
     } = this.props;
@@ -199,8 +206,10 @@ class TagInput extends Component {
         kind={kind}
         inputProps={inputProps}
         isFocused={this.state.isFocused}
+        canEdit={canEdit}
         tagComponent={tagComponent}
         onTagDelete={onTagDelete}
+        onTagEdit={this.onTagEdit}
         onInputContainerPress={this.onInputContainerPress}
       />
     );
@@ -258,6 +267,7 @@ TagInput.propTypes = {
   placeholder: PropTypes.string.isRequired,
   delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
   minQueryLength: PropTypes.number.isRequired,
+  canEdit: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   tagComponent: PropTypes.elementType.isRequired,
@@ -273,6 +283,7 @@ TagInput.defaultProps = {
   placeholder: '',
   delimiters: ['Tab', 'Enter', ' ', ','],
   minQueryLength: 1,
+  canEdit: false,
   tagComponent: TagInputTag
 };
 

frontend/src/Components/Form/TagInputInput.js

@@ -28,8 +28,10 @@ class TagInputInput extends Component {
       tags,
       inputProps,
       kind,
+      canEdit,
       tagComponent: TagComponent,
-      onTagDelete
+      onTagDelete,
+      onTagEdit
     } = this.props;
 
     return (
@@ -46,8 +48,10 @@ class TagInputInput extends Component {
                 index={index}
                 tag={tag}
                 kind={kind}
+                canEdit={canEdit}
                 isLastTag={index === tags.length - 1}
                 onDelete={onTagDelete}
+                onEdit={onTagEdit}
               />
             );
           })
@@ -66,8 +70,10 @@ TagInputInput.propTypes = {
   inputProps: PropTypes.object.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   isFocused: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   tagComponent: PropTypes.elementType.isRequired,
   onTagDelete: PropTypes.func.isRequired,
+  onTagEdit: PropTypes.func.isRequired,
   onInputContainerPress: PropTypes.func.isRequired
 };
 

frontend/src/Components/Form/TagInputTag.css

@@ -1,5 +1,25 @@
 .tag {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 31px;
+}
+
+.link {
   composes: link from '~Components/Link/Link.css';
 
-  height: 31px;
+  line-height: 1px;
+}
+
+.editContainer {
+  display: inline-block;
+  margin-left: 4px;
+  padding-left: 2px;
+  border-left: 1px solid #eee;
+}
+
+.editButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  width: auto;
 }

frontend/src/Components/Form/TagInputTag.css.d.ts

@@ -1,6 +1,9 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'editButton': string;
+  'editContainer': string;
+  'link': string;
   'tag': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Form/TagInputTag.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import styles from './TagInputTag.css';
 
@@ -24,24 +25,60 @@ class TagInputTag extends Component {
     });
   };
 
+  onEdit = () => {
+    const {
+      index,
+      tag,
+      onEdit
+    } = this.props;
+
+    onEdit({
+      index,
+      id: tag.id,
+      value: tag.name
+    });
+  };
+
   //
   // Render
 
   render() {
     const {
       tag,
-      kind
+      kind,
+      canEdit
     } = this.props;
     return (
-      <Link
+      <div
         className={styles.tag}
         tabIndex={-1}
-        onPress={this.onDelete}
       >
-        <Label kind={kind}>
-          {tag.name}
+        <Label
+          kind={kind}
+        >
+          <Link
+            className={styles.link}
+            tabIndex={-1}
+            onPress={this.onDelete}
+          >
+
+            {tag.name}
+          </Link>
+
+          {
+            canEdit ?
+              <div className={styles.editContainer}>
+                <IconButton
+                  className={styles.editButton}
+                  name={icons.EDIT}
+                  size={9}
+                  onPress={this.onEdit}
+                />
+              </div> :
+              null
+          }
         </Label>
-      </Link>
+      </div>
     );
   }
 }
@@ -50,7 +87,9 @@ TagInputTag.propTypes = {
   index: PropTypes.number.isRequired,
   tag: PropTypes.shape(tagShape),
   kind: PropTypes.oneOf(kinds.all).isRequired,
-  onDelete: PropTypes.func.isRequired
+  canEdit: PropTypes.bool.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired
 };
 
 export default TagInputTag;

frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js

@@ -47,12 +47,13 @@ function EditRestrictionModalContent(props) {
             <FormLabel>{translate('MustContain')}</FormLabel>
 
             <FormInputGroup
+              {...required}
               type={inputTypes.TEXT_TAG}
               name="required"
               helpText={translate('RequiredRestrictionHelpText')}
               kind={kinds.SUCCESS}
               placeholder={translate('RequiredRestrictionPlaceHolder')}
-              {...required}
+              canEdit={true}
               onChange={onInputChange}
             />
           </FormGroup>
@@ -61,12 +62,13 @@ function EditRestrictionModalContent(props) {
             <FormLabel>{translate('MustNotContain')}</FormLabel>
 
             <FormInputGroup
+              {...ignored}
               type={inputTypes.TEXT_TAG}
               name="ignored"
               helpText={translate('IgnoredHelpText')}
               kind={kinds.DANGER}
               placeholder={translate('IgnoredPlaceHolder')}
-              {...ignored}
+              canEdit={true}
               onChange={onInputChange}
             />
           </FormGroup>