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

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..."

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() {}) {

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(),
+  service: service(options),
-  serviceInstance: serviceInstance(),
+  serviceInstance: serviceInstance(options),
-  ['upstream-instance']: upstreamInstance(),
+  ['upstream-instance']: upstreamInstance(options),
-  kv: kv(),
+  kv: kv(options),
-  check: check(),
+  check: check(options),
-  intention: intention(),
+  intention: intention(options),
-  token: token(),
+  token: token(options),
-  role: role(),
+  role: role(options),
-  policy: policy(),
+  policy: policy(options),
-  nspace: nspace(),
+  nspace: nspace(options),
-  node: node(),
+  node: node(options),
 };
 export default class SortService extends Service {
   comparator(type) {

ui/packages/consul-ui/app/sort/comparators/policy.js

@@ -1,3 +1,3 @@
-export default () => key => {
+export default ({ properties }) => (key = 'Name:asc') => {
-  return key;
+  return properties(['Name'])(key);
 };

ui/packages/consul-ui/app/sort/comparators/role.js

@@ -1,3 +1,3 @@
-export default () => key => {
+export default ({ properties }) => (key = 'Name:asc') => {
-  return key;
+  return properties(['Name', 'CreateIndex'])(key);
 };

ui/packages/consul-ui/app/sort/comparators/upstream-instance.js

@@ -1,7 +1,3 @@
-const directionify = arr => {
+export default ({ properties }) => (key = 'DestinationName:asc') => {
-  return arr.reduce((prev, item) => prev.concat([`${item}:asc`, `${item}:desc`]), []);
+  return properties(['DestinationName'])(key);
-};
-export default () => key => {
-  const comparables = directionify(['DestinationName']);
-  return [comparables.find(item => item === key) || comparables[0]];
 };

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

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
     ---