UI: Move legacy ACLs to use the new searchables/changeable-sets (#4933)

ui-v2/app/controllers/dc/acls/index.js

@@ -1,11 +1,12 @@
 import Controller from '@ember/controller';
 import { computed, get } from '@ember/object';
 import WithFiltering from 'consul-ui/mixins/with-filtering';
+import WithSearching from 'consul-ui/mixins/with-searching';
 import ucfirst from 'consul-ui/utils/ucfirst';
 const countType = function(items, type) {
   return type === '' ? get(items, 'length') : items.filterBy('Type', type).length;
 };
-export default Controller.extend(WithFiltering, {
+export default Controller.extend(WithSearching, WithFiltering, {
   queryParams: {
     type: {
       as: 'type',
@@ -15,6 +16,17 @@ export default Controller.extend(WithFiltering, {
       replace: true,
     },
   },
+  init: function() {
+    this.searchParams = {
+      acl: 's',
+    };
+    this._super(...arguments);
+  },
+  searchable: computed('filtered', function() {
+    return get(this, 'searchables.acl')
+      .add(get(this, 'filtered'))
+      .search(get(this, this.searchParams.acl));
+  }),
   typeFilters: computed('items', function() {
     const items = get(this, 'items');
     return ['', 'management', 'client'].map(function(item) {
@@ -27,18 +39,8 @@ export default Controller.extend(WithFiltering, {
       };
     });
   }),
-  // TODO: This should be using a searchable
+  filter: function(item, { type = '' }) {
-  filter: function(item, { s = '', type = '' }) {
+    return type === '' || get(item, 'Type') === type;
-    const sLower = s.toLowerCase();
-    return (
-      (get(item, 'Name')
-        .toLowerCase()
-        .indexOf(sLower) !== -1 ||
-        get(item, 'ID')
-          .toLowerCase()
-          .indexOf(sLower) !== -1) &&
-      (type === '' || get(item, 'Type') === type)
-    );
   },
   actions: {
     sendClone: function(item) {

ui-v2/app/initializers/search.js

@@ -2,6 +2,7 @@ import intention from 'consul-ui/search/filters/intention';
 import token from 'consul-ui/search/filters/token';
 import policy from 'consul-ui/search/filters/policy';
 import kv from 'consul-ui/search/filters/kv';
+import acl from 'consul-ui/search/filters/acl';
 import node from 'consul-ui/search/filters/node';
 // service instance
 import nodeService from 'consul-ui/search/filters/node/service';
@@ -16,6 +17,7 @@ export function initialize(application) {
   const searchables = {
     intention: intention(filterable),
     token: token(filterable),
+    acl: acl(filterable),
     policy: policy(filterable),
     kv: kv(filterable),
     healthyNode: node(filterable),

ui-v2/app/search/filters/acl.js

@@ -0,0 +1,14 @@
+import { get } from '@ember/object';
+export default function(filterable) {
+  return filterable(function(item, { s = '' }) {
+    const sLower = s.toLowerCase();
+    return (
+      get(item, 'Name')
+        .toLowerCase()
+        .indexOf(sLower) !== -1 ||
+      get(item, 'ID')
+        .toLowerCase()
+        .indexOf(sLower) !== -1
+    );
+  });
+}

ui-v2/app/templates/components/acl-filter.hbs

@@ -1,4 +1,4 @@
 {{!<form>}}
-    {{freetext-filter onchange=(action onchange) value=search placeholder="Search by name/token"}}
+    {{freetext-filter searchable=searchable value=search placeholder="Search by name/token"}}
     {{radio-group name="type" value=type items=filters onchange=(action onchange)}}
 {{!</form>}}

ui-v2/app/templates/dc/acls/index.hbs

@@ -13,11 +13,12 @@
     {{/block-slot}}
     {{#block-slot 'toolbar'}}
 {{#if (gt items.length 0) }}
-        {{acl-filter filters=typeFilters search=filters.s type=filters.type onchange=(action 'filter')}}
+        {{acl-filter searchable=searchable filters=typeFilters search=filters.s type=filters.type onchange=(action 'filter')}}
 {{/if}}
     {{/block-slot}}
     {{#block-slot 'content'}}
-{{#if (gt filtered.length 0)}}
+        {{#changeable-set dispatcher=searchable}}
+          {{#block-slot 'set' as |filtered|}}
             {{#tabular-collection
                 items=(sort-by 'Name:asc' filtered) as |item index|
             }}
@@ -90,10 +91,12 @@
                     {{/confirmation-dialog}}
                 {{/block-slot}}
             {{/tabular-collection}}
-{{else}}
+          {{/block-slot}}
+          {{#block-slot 'empty'}}
             <p>
               There are no ACLs.
             </p>
-{{/if}}
+          {{/block-slot}}
+        {{/changeable-set}}
     {{/block-slot}}
 {{/app-view}}

ui-v2/tests/unit/controllers/dc/acls/index-test.js

@@ -2,7 +2,7 @@ import { moduleFor, test } from 'ember-qunit';
 
 moduleFor('controller:dc/acls/index', 'Unit | Controller | dc/acls/index', {
   // Specify the other units that are required for this test.
-  // needs: ['controller:foo']
+  needs: ['service:search', 'service:dom'],
 });
 
 // Replace this with your real tests.

ui-v2/tests/unit/search/filters/acl-test.js

@@ -0,0 +1,36 @@
+import getFilter from 'consul-ui/search/filters/acl';
+import { module, test } from 'qunit';
+
+module('Unit | Search | Filter | acl');
+
+const filter = getFilter(cb => cb);
+test('items are found by properties', function(assert) {
+  [
+    {
+      ID: 'HIT-id',
+      Name: 'name',
+    },
+    {
+      ID: 'id',
+      Name: 'name-HIT',
+    },
+  ].forEach(function(item) {
+    const actual = filter(item, {
+      s: 'hit',
+    });
+    assert.ok(actual);
+  });
+});
+test('items are not found', function(assert) {
+  [
+    {
+      ID: 'id',
+      Name: 'name',
+    },
+  ].forEach(function(item) {
+    const actual = filter(item, {
+      s: 'hit',
+    });
+    assert.notOk(actual);
+  });
+});