Update rules filters

2 files changed, 6 insertions, 138 deletions

diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 4c993dc..8e40d30 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -17,10 +17,9 @@
 
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
-import './RulesConnectionsFilter.scss';
-import ReactTags from 'react-tag-autocomplete';
 import backend from "../../backend";
 import dispatcher from "../../dispatcher";
+import TagField from "../fields/TagField";
 
 const classNames = require('classnames');
 const _ = require('lodash');
@@ -59,16 +58,8 @@ class RulesConnectionsFilter extends Component {
         dispatcher.unregister(this.connectionsFiltersCallback);
     }
 
-    onDelete = (i) => {
-        const activeRules = _.clone(this.state.activeRules);
-        activeRules.splice(i, 1);
-        this.setState({activeRules});
-        dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)});
-    };
-
-    onAddition = (rule) => {
-        if (!this.state.activeRules.includes(rule)) {
-            const activeRules = [].concat(this.state.activeRules, rule);
+    onChange = (activeRules) => {
+        if (!_.isEqual(activeRules.sort(), this.state.activeRules.sort())) {
             this.setState({activeRules});
             dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)});
         }
@@ -79,11 +70,9 @@ class RulesConnectionsFilter extends Component {
             <div
                 className={classNames("filter", "d-inline-block", {"filter-active": this.state.filterActive === "true"})}>
                 <div className="filter-rules">
-                    <ReactTags tags={this.state.activeRules} suggestions={this.state.rules}
-                               onDelete={this.onDelete} onAddition={this.onAddition}
-                               minQueryLength={0} placeholderText="rule_name"
-                               suggestionsFilter={(suggestion, query) =>
-                                   suggestion.name.startsWith(query) && !this.state.activeRules.includes(suggestion)}/>
+                    <TagField tags={this.state.activeRules} onChange={this.onChange}
+                              suggestions={_.differenceWith(this.state.rules, this.state.activeRules, _.isEqual)}
+                              minQueryLength={0} name="matched_rules" inline small placeholder="rule_name"/>
                 </div>
             </div>
         );
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss
deleted file mode 100644
index 0bb4952..0000000
--- a/frontend/src/components/filters/RulesConnectionsFilter.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "../../colors";
-
-.filter-rules {
-  .react-tags {
-    font-size: 12px;
-    position: relative;
-    z-index: 10;
-    padding: 0 6px;
-    cursor: text;
-    border-radius: 4px;
-    background-color: $color-primary-2;
-  }
-
-  .react-tags.is-focused {
-    border-color: #b1b1b1;
-  }
-
-  .react-tags__selected {
-    display: inline;
-  }
-
-  .react-tags__selected-tag {
-    font-size: 11px;
-    display: inline-block;
-    margin: 0 6px 6px 0;
-    padding: 2px 4px;
-    color: $color-primary-3;
-    border: none;
-    border-radius: 2px;
-    background: $color-primary-4;
-  }
-
-  .react-tags__selected-tag::after {
-    margin-left: 8px;
-    content: "\2715";
-    color: $color-primary-3;
-  }
-
-  .react-tags__selected-tag:hover,
-  .react-tags__selected-tag:focus {
-    border-color: #b1b1b1;
-  }
-
-  .react-tags__search {
-    display: inline-block;
-    max-width: 100%;
-    padding: 7px 10px;
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__search {
-      position: relative;
-    }
-  }
-
-  .react-tags__search-input {
-    font-size: inherit;
-    line-height: inherit;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-    color: $color-primary-4;
-    border: 0;
-    outline: none;
-    background-color: $color-primary-2;
-  }
-
-  .react-tags__search-input::-ms-clear {
-    display: none;
-  }
-
-  .react-tags__suggestions {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__suggestions {
-      width: 240px;
-    }
-  }
-
-  .react-tags__suggestions ul {
-    font-size: 12px;
-    margin: 4px -1px;
-    padding: 0;
-    list-style: none;
-    color: $color-primary-1;
-    border-radius: 2px;
-    background: $color-primary-4;
-  }
-
-  .react-tags__suggestions li {
-    padding: 3px 5px;
-    border-bottom: 1px solid #ddd;
-  }
-
-  .react-tags__suggestions li mark {
-    font-weight: 600;
-    text-decoration: underline;
-    background: none;
-  }
-
-  .react-tags__suggestions li:hover {
-    cursor: pointer;
-    color: $color-primary-4;
-    background: $color-primary-0;
-  }
-
-  .react-tags__suggestions li.is-active {
-    background: #b7cfe0;
-  }
-
-  .react-tags__suggestions li.is-disabled {
-    cursor: auto;
-    opacity: 0.5;
-  }
-
-}