From 86f5919fc0f2698569def47d7918240e1bba4688 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:06:39 +0000
Subject: [PATCH] ui: ACL Tokens > Roles and Policy search and sort (#9236)

* ui: Ensure search is enabled for child items in the ACLs area

* Refactor comparators to reuse some utility functions

* Add search and sorting to the ACLs child selector

* Add tests for searching within child selectors

* Allow sorting by CreateIndex
---
 .../app/components/child-selector/index.hbs   |  1 +
 .../app/components/child-selector/index.js    | 21 +++++++----
 ui/packages/consul-ui/app/services/sort.js    | 37 +++++++++++++------
 .../consul-ui/app/sort/comparators/policy.js  |  4 +-
 .../consul-ui/app/sort/comparators/role.js    |  4 +-
 .../app/sort/comparators/upstream-instance.js |  8 +---
 .../policies/as-many/add-existing.feature     |  4 +-
 .../acls/roles/as-many/add-existing.feature   |  4 +-
 8 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/child-selector/index.hbs b/ui/packages/consul-ui/app/components/child-selector/index.hbs
index f2da698ee3..8010051226 100644
--- a/ui/packages/consul-ui/app/components/child-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/child-selector/index.hbs
@@ -12,6 +12,7 @@
       />
     {{/if}}
       <PowerSelect
+          @searchEnabled={{true}}
           @search={{action "search"}}
           @options={{options}}
           @loadingMessage="Loading..."
diff --git a/ui/packages/consul-ui/app/components/child-selector/index.js b/ui/packages/consul-ui/app/components/child-selector/index.js
index 9ebd5aac7f..6291d631c1 100644
--- a/ui/packages/consul-ui/app/components/child-selector/index.js
+++ b/ui/packages/consul-ui/app/components/child-selector/index.js
@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import { get, set, computed } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { alias, sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 import { task } from 'ember-concurrency';
@@ -15,7 +15,8 @@ export default Component.extend(Slotted, {
   type: '',
 
   dom: service('dom'),
-  container: service('search'),
+  search: service('search'),
+  sort: service('sort'),
   formContainer: service('form'),
 
   item: alias('form.data'),
@@ -25,7 +26,7 @@ export default Component.extend(Slotted, {
   init: function() {
     this._super(...arguments);
     this._listeners = this.dom.listeners();
-    this.searchable = this.container.searchable(this.type);
+    this.searchable = this.search.searchable(this.type);
     this.form = this.formContainer.form(this.type);
     this.form.clear({ Datacenter: this.dc, Namespace: this.nspace });
   },
@@ -33,16 +34,22 @@ export default Component.extend(Slotted, {
     this._super(...arguments);
     this._listeners.remove();
   },
-  options: computed('selectedOptions.[]', 'allOptions.[]', function() {
+  sortedOptions: sort('allOptions.[]', 'comparator'),
+  comparator: computed(function() {
+    return this.sort.comparator(this.type)();
+  }),
+  options: computed('selectedOptions.[]', 'sortedOptions.[]', function() {
     // It's not massively important here that we are defaulting `items` and
     // losing reference as its just to figure out the diff
-    let options = this.allOptions || [];
+    let options = this.sortedOptions || [];
     const items = this.selectedOptions || [];
     if (get(items, 'length') > 0) {
-      // find a proper ember-data diff
+      // filter out any items from the available options that have already been
+      // selected/added
+      // TODO: find a proper ember-data diff
       options = options.filter(item => !items.findBy('ID', get(item, 'ID')));
-      this.searchable.add(options);
     }
+    this.searchable.add(options);
     return options;
   }),
   save: task(function*(item, items, success = function() {}) {
diff --git a/ui/packages/consul-ui/app/services/sort.js b/ui/packages/consul-ui/app/services/sort.js
index eed4eb05da..c741d8d3d9 100644
--- a/ui/packages/consul-ui/app/services/sort.js
+++ b/ui/packages/consul-ui/app/services/sort.js
@@ -11,18 +11,33 @@ import policy from 'consul-ui/sort/comparators/policy';
 import nspace from 'consul-ui/sort/comparators/nspace';
 import node from 'consul-ui/sort/comparators/node';
 
+// returns an array of Property:asc, Property:desc etc etc
+const directionify = arr => {
+  return arr.reduce((prev, item) => prev.concat([`${item}:asc`, `${item}:desc`]), []);
+};
+// Specify a list of sortable properties, when called with a property
+// returns an array ready to be passed to ember @sort
+// properties(['Potential', 'Sortable', 'Properties'])('Sortable:asc') => ['Sortable:asc']
+const properties = (props = []) => key => {
+  const comparables = directionify(props);
+  return [comparables.find(item => item === key) || comparables[0]];
+};
+const options = {
+  properties,
+  directionify,
+};
 const comparators = {
-  service: service(),
-  serviceInstance: serviceInstance(),
-  ['upstream-instance']: upstreamInstance(),
-  kv: kv(),
-  check: check(),
-  intention: intention(),
-  token: token(),
-  role: role(),
-  policy: policy(),
-  nspace: nspace(),
-  node: node(),
+  service: service(options),
+  serviceInstance: serviceInstance(options),
+  ['upstream-instance']: upstreamInstance(options),
+  kv: kv(options),
+  check: check(options),
+  intention: intention(options),
+  token: token(options),
+  role: role(options),
+  policy: policy(options),
+  nspace: nspace(options),
+  node: node(options),
 };
 export default class SortService extends Service {
   comparator(type) {
diff --git a/ui/packages/consul-ui/app/sort/comparators/policy.js b/ui/packages/consul-ui/app/sort/comparators/policy.js
index 62e718f7a1..93a22f098a 100644
--- a/ui/packages/consul-ui/app/sort/comparators/policy.js
+++ b/ui/packages/consul-ui/app/sort/comparators/policy.js
@@ -1,3 +1,3 @@
-export default () => key => {
-  return key;
+export default ({ properties }) => (key = 'Name:asc') => {
+  return properties(['Name'])(key);
 };
diff --git a/ui/packages/consul-ui/app/sort/comparators/role.js b/ui/packages/consul-ui/app/sort/comparators/role.js
index 62e718f7a1..fc036177f8 100644
--- a/ui/packages/consul-ui/app/sort/comparators/role.js
+++ b/ui/packages/consul-ui/app/sort/comparators/role.js
@@ -1,3 +1,3 @@
-export default () => key => {
-  return key;
+export default ({ properties }) => (key = 'Name:asc') => {
+  return properties(['Name', 'CreateIndex'])(key);
 };
diff --git a/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js b/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
index 560d8a57af..8e3bd0cd75 100644
--- a/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
+++ b/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
@@ -1,7 +1,3 @@
-const directionify = arr => {
-  return arr.reduce((prev, item) => prev.concat([`${item}:asc`, `${item}:desc`]), []);
-};
-export default () => key => {
-  const comparables = directionify(['DestinationName']);
-  return [comparables.find(item => item === key) || comparables[0]];
+export default ({ properties }) => (key = 'DestinationName:asc') => {
+  return properties(['DestinationName'])(key);
 };
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/acls/policies/as-many/add-existing.feature b/ui/packages/consul-ui/tests/acceptance/dc/acls/policies/as-many/add-existing.feature
index 4eeae7a897..a83bb0e208 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/acls/policies/as-many/add-existing.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/acls/policies/as-many/add-existing.feature
@@ -22,10 +22,12 @@ Feature: dc / acls / policies / as many / add existing: Add existing policy
     ---
     Then the url should be /datacenter/acls/[Model]s/key
     And I click "form > #policies .ember-power-select-trigger"
+    And I type "Policy 1" into ".ember-power-select-search-input"
     And I click ".ember-power-select-option:first-child"
     And I see 1 policy model on the policies component
     And I click "form > #policies .ember-power-select-trigger"
-    And I click ".ember-power-select-option:nth-child(1)"
+    And I type "Policy 2" into ".ember-power-select-search-input"
+    And I click ".ember-power-select-option:first-child"
     And I see 2 policy models on the policies component
     And I submit
     Then a PUT request was made to "/v1/acl/[Model]/key?dc=datacenter" with the body from yaml
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-existing.feature b/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-existing.feature
index 21b3bed6c3..30d02d48c8 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-existing.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-existing.feature
@@ -22,10 +22,12 @@ Feature: dc / acls / roles / as many / add existing: Add existing
     ---
     Then the url should be /datacenter/acls/tokens/key
     And I click "form > #roles .ember-power-select-trigger"
+    And I type "Role 1" into ".ember-power-select-search-input"
     And I click ".ember-power-select-option:first-child"
     And I see 1 role model on the roles component
     And I click "form > #roles .ember-power-select-trigger"
-    And I click ".ember-power-select-option:nth-child(1)"
+    And I type "Role 2" into ".ember-power-select-search-input"
+    And I click ".ember-power-select-option:first-child"
     And I see 2 role models on the roles component
     Then I fill in with yaml
     ---