ui: Add sorting to Policies (#8373)

* Add sorting to ACLs policies with comparator * Add acls/roles sorting test * Add navigation test for acls/policies * Update onchange value for sorting policies
2020-07-29 14:36:09 -04:00 · 2020-07-29 14:36:09 -04:00 · 4c8a15b698
parent 85ef7ba943
commit 4c8a15b698
13 changed files with 107 additions and 15 deletions
--- a/ui-v2/app/components/consul-policy-list/pageobject.js
+++ b/ui-v2/app/components/consul-policy-list/pageobject.js
@ -1,5 +1,5 @@
 export default (collection, clickable, attribute, text, actions) => () => {
-  return collection('.consul-policy-list li:not(:first-child)', {
+  return collection('.consul-policy-list [data-test-list-row]', {
    name: attribute('data-test-policy', '[data-test-policy]'),
    description: text('[data-test-description]'),
    policy: clickable('a'),
--- a/ui-v2/app/controllers/dc/acls/policies/index.js
+++ b/ui-v2/app/controllers/dc/acls/policies/index.js
@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 export default Controller.extend({
  queryParams: {
+    sortBy: 'sort',
    search: {
      as: 'filter',
      replace: true,
--- a/ui-v2/app/initializers/sort.js
+++ b/ui-v2/app/initializers/sort.js
@ -3,6 +3,7 @@ import check from 'consul-ui/sort/comparators/check';
 import intention from 'consul-ui/sort/comparators/intention';
 import token from 'consul-ui/sort/comparators/token';
 import role from 'consul-ui/sort/comparators/role';
+import policy from 'consul-ui/sort/comparators/policy';

 export function initialize(container) {
  // Service-less injection using private properties at a per-project level
@ -13,6 +14,7 @@ export function initialize(container) {
    intention: intention(),
    token: token(),
    role: role(),
+    policy: policy(),
  };
  Sort.reopen({
    comparator: function(type) {
--- a/ui-v2/app/routes/dc/acls/policies/index.js
+++ b/ui-v2/app/routes/dc/acls/policies/index.js
@ -7,6 +7,7 @@ import WithPolicyActions from 'consul-ui/mixins/policy/with-actions';
 export default Route.extend(WithPolicyActions, {
  repo: service('repository/policy'),
  queryParams: {
+    sortBy: 'sort',
    search: {
      as: 'filter',
      replace: true,
--- a/ui-v2/app/sort/comparators/policy.js
+++ b/ui-v2/app/sort/comparators/policy.js
@ -0,0 +1,3 @@
+export default () => key => {
+  return key;
+};
--- a/ui-v2/app/templates/dc/acls/policies/index.hbs
+++ b/ui-v2/app/templates/dc/acls/policies/index.hbs
@ -3,6 +3,15 @@
 {{else}}
  {{title 'Access Controls'}}
 {{/if}}
+
+{{#let (selectable-key-values
+    (array "Name:asc" "A to Z")
+    (array "Name:desc" "Z to A")
+      selected=sortBy
+  )
+  as |sort|
+}}
+
 <AppView
  @class="policy list"
  @loading={{isLoading}}
@ -31,17 +40,24 @@
  <BlockSlot @name="actions">
      <a data-test-create href="{{href-to 'dc.acls.policies.create'}}" class="type-create">Create</a>
  </BlockSlot>
-  <BlockSlot @name="content">
-{{#if (gt items.length 0) }}
+  <BlockSlot @name="toolbar">
+  {{#if (gt items.length 0) }}
    <SearchBar
      @value={{search}}
      @onsearch={{action (mut search) value="target.value"}}
+      @secondary="sort"
+      @selected={{sort.selected}}
+      @options={{sort.items}}
+      @onchange={{action (mut sortBy) value='target.selected.key'}}
    />
-{{/if}}
-    <ChangeableSet @dispatcher={{searchable 'policy' items}} @terms={{search}}>
+  {{/if}}
+  </BlockSlot>
+  <BlockSlot @name="content">
+  {{#let (sort-by (comparator 'policy' sort.selected.key) items) as |sorted|}}
+    <ChangeableSet @dispatcher={{searchable 'policy' sorted}} @terms={{search}}>
      <BlockSlot @name="set" as |filtered|>
        <ConsulPolicyList
-          @items={{sort-by "CreateTime:desc" "Name:asc" filtered}}
+          @items={{filtered}}
          @ondelete={{action send 'delete'}}
        />
      </BlockSlot>
@ -76,5 +92,7 @@
        </EmptyState>
      </BlockSlot>
    </ChangeableSet>
+  {{/let}}
  </BlockSlot>
-</AppView>
+</AppView>
+{{/let}}
--- a/ui-v2/tests/acceptance/dc/acls/policies/navigation.feature
+++ b/ui-v2/tests/acceptance/dc/acls/policies/navigation.feature
@ -0,0 +1,15 @@
+@setupApplicationTest
+Feature: dc / policies / navigation
+  Scenario: Clicking a policy in the listing and back again
+    Given 1 datacenter model with the value "dc-1"
+    And 3 policy models
+    When I visit the policies page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/acls/policies
+    And the title should be "Policies - Consul"
+    Then I see 3 policy models
+    When I click policy on the policies
+    And I click "[data-test-back]"
+    Then the url should be /dc-1/acls/policies
--- a/ui-v2/tests/acceptance/dc/acls/policies/sorting.feature
+++ b/ui-v2/tests/acceptance/dc/acls/policies/sorting.feature
@ -0,0 +1,36 @@
+@setupApplicationTest
+Feature: dc / acls / policies / sorting
+  Scenario: Sorting Policies
+    Given 1 datacenter model with the value "dc-1"
+    And 4 policy models from yaml
+    ---
+    - Name: "system-A"
+    - Name: "system-D"
+    - Name: "system-C"
+    - Name: "system-B"
+    ---
+    When I visit the policies page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/acls/policies
+    Then I see 4 policy models
+    When I click selected on the sort
+    When I click options.1.button on the sort
+    Then I see name on the policies vertically like yaml
+    ---
+    - "system-D"
+    - "system-C"
+    - "system-B"
+    - "system-A"
+    ---
+    When I click selected on the sort
+    When I click options.0.button on the sort
+    Then I see name on the policies vertically like yaml
+    ---
+    - "system-A"
+    - "system-B"
+    - "system-C"
+    - "system-D"
+    ---
+
--- a/ui-v2/tests/acceptance/page-navigation.feature
+++ b/ui-v2/tests/acceptance/page-navigation.feature
@ -46,11 +46,7 @@ Feature: page-navigation
    | node      | nodes      | /dc-1/nodes/node-0/health-checks                         | /v1/session/node/node-0?dc=dc-1&ns=@namespace                               | /dc-1/nodes         |
    | kv        | kvs        | /dc-1/kv/0-key-value/edit                                | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv            |
    # | acl       | acls       | /dc-1/acls/anonymous                                     | /v1/acl/info/anonymous?dc=dc-1                                             | /dc-1/acls         |
-# These Endpoints will be datacenters due to the datacenters checkbox selectors                                               | /dc-1/acls/tokens   |
-    | policy    | policies   | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/catalog/datacenters                                                     | /dc-1/acls/policies |
-    # | token     | tokens     | /dc-1/acls/tokens/00000000-0000-0000-0000-000000000000   | /v1/acl/token/00000000-0000-0000-0000-000000000000?dc=dc-1    | /dc-1/acls/tokens |
-    # | policy    | policies   | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/acl/policy/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1   | /dc-1/acls/policies |
-    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  Scenario: The node detail page calls the correct API endpoints
    When I visit the node page for yaml
    ---
--- a/ui-v2/tests/acceptance/steps/dc/acls/policies/navigation-steps.js
+++ b/ui-v2/tests/acceptance/steps/dc/acls/policies/navigation-steps.js
@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
--- a/ui-v2/tests/acceptance/steps/dc/acls/policies/sorting-steps.js
+++ b/ui-v2/tests/acceptance/steps/dc/acls/policies/sorting-steps.js
@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
--- a/ui-v2/tests/pages.js
+++ b/ui-v2/tests/pages.js
@ -168,7 +168,7 @@ export default {
  kv: create(kv(visitable, attribute, submitable, deletable, cancelable, clickable)),
  acls: create(acls(visitable, deletable, creatable, clickable, attribute, collection, aclFilter)),
  acl: create(acl(visitable, submitable, deletable, cancelable, clickable)),
-  policies: create(policies(visitable, creatable, consulPolicyList, freetextFilter)),
+  policies: create(policies(visitable, creatable, consulPolicyList, popoverSelect)),
  policy: create(policy(visitable, submitable, deletable, cancelable, clickable, tokenList)),
  roles: create(roles(visitable, creatable, consulRoleList, popoverSelect)),
  // TODO: This needs a policyList
--- a/ui-v2/tests/pages/dc/acls/policies/index.js
+++ b/ui-v2/tests/pages/dc/acls/policies/index.js
@ -1,7 +1,7 @@
-export default function(visitable, creatable, policies, filter) {
+export default function(visitable, creatable, policies, popoverSelect) {
  return creatable({
    visit: visitable('/:dc/acls/policies'),
    policies: policies(),
-    filter: filter(),
+    sort: popoverSelect(),
  });
 }