feat(ui): allow editing filters in place

ui/package-lock.json

@@ -4,6 +4,15 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@attently/riek": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@attently/riek/-/riek-2.0.1.tgz",
+      "integrity": "sha1-AFJ4WlurHKepkjbxNWJNOeZhkCQ=",
+      "requires": {
+        "debug": "2.6.9",
+        "prop-types": "15.6.2"
+      }
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.1.tgz",

ui/package.json

@@ -4,6 +4,7 @@
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
+    "@attently/riek": "^2.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.0",
     "@fortawesome/free-regular-svg-icons": "^5.1.0",
     "@fortawesome/free-solid-svg-icons": "^5.1.0",

ui/src/Components/Labels/FilterInputLabel/index.js

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 
 import { observer } from "mobx-react";
 
+import { RIEInput } from "@attently/riek";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
@@ -28,6 +30,18 @@ const FilterInputLabel = observer(
       })
     };
 
+    onChange = update => {
+      const { alertStore, filter } = this.props;
+
+      // if filter is empty string then remove it
+      if (update.raw === "") {
+        alertStore.filters.removeFilter(filter.raw);
+      }
+
+      // if not empty replace it
+      alertStore.filters.replaceFilter(filter.raw, update.raw);
+    };
+
     render() {
       const { filter, alertStore } = this.props;
 
@@ -79,8 +93,13 @@ const FilterInputLabel = observer(
               <FontAwesomeIcon icon={faExclamationCircle} />
             </span>
           )}
-
-          {filter.raw}
+          <RIEInput
+            defaultValue=""
+            value={filter.raw}
+            propName="raw"
+            change={this.onChange}
+            classEditing="py-0 border-0 bg-light"
+          />
         </span>
       );
     }

ui/src/Stores/AlertStore.js

@@ -94,6 +94,13 @@ class AlertStore {
           UpdateLocationSearch({ q: this.values.map(f => f.raw) });
         }
       },
+      replaceFilter(oldRaw, newRaw) {
+        const index = this.values.findIndex(e => e.raw === oldRaw);
+        if (index >= 0) {
+          this.values[index] = newUnappliedFilter(newRaw);
+          UpdateLocationSearch({ q: this.values.map(f => f.raw) });
+        }
+      },
       setFilters(raws) {
         this.values = raws.map(raw => newUnappliedFilter(raw));
         UpdateLocationSearch({ q: this.values.map(f => f.raw) });
@@ -102,6 +109,7 @@ class AlertStore {
     {
       addFilter: action.bound,
       removeFilter: action.bound,
+      replaceFilter: action.bound,
       setFilters: action.bound
     },
     { name: "API Filters" }