From ee3b3f559ad95165ba1893a7d60ff21634ad3c38 Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Wed, 29 Jul 2020 14:36:09 -0400 Subject: [PATCH] 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 --- .../consul-policy-list/pageobject.js | 2 +- .../app/controllers/dc/acls/policies/index.js | 1 + ui-v2/app/initializers/sort.js | 2 ++ ui-v2/app/routes/dc/acls/policies/index.js | 1 + ui-v2/app/sort/comparators/policy.js | 3 ++ .../app/templates/dc/acls/policies/index.hbs | 30 ++++++++++++---- .../dc/acls/policies/navigation.feature | 15 ++++++++ .../dc/acls/policies/sorting.feature | 36 +++++++++++++++++++ .../tests/acceptance/page-navigation.feature | 6 +--- .../dc/acls/policies/navigation-steps.js | 10 ++++++ .../steps/dc/acls/policies/sorting-steps.js | 10 ++++++ ui-v2/tests/pages.js | 2 +- ui-v2/tests/pages/dc/acls/policies/index.js | 4 +-- 13 files changed, 107 insertions(+), 15 deletions(-) create mode 100644 ui-v2/app/sort/comparators/policy.js create mode 100644 ui-v2/tests/acceptance/dc/acls/policies/navigation.feature create mode 100644 ui-v2/tests/acceptance/dc/acls/policies/sorting.feature create mode 100644 ui-v2/tests/acceptance/steps/dc/acls/policies/navigation-steps.js create mode 100644 ui-v2/tests/acceptance/steps/dc/acls/policies/sorting-steps.js diff --git a/ui-v2/app/components/consul-policy-list/pageobject.js b/ui-v2/app/components/consul-policy-list/pageobject.js index 529c9d5014..fa3c0a9a1f 100644 --- 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'), diff --git a/ui-v2/app/controllers/dc/acls/policies/index.js b/ui-v2/app/controllers/dc/acls/policies/index.js index 510563886b..f99cde37f3 100644 --- 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, diff --git a/ui-v2/app/initializers/sort.js b/ui-v2/app/initializers/sort.js index 83d6827cd6..1809a505bf 100644 --- 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) { diff --git a/ui-v2/app/routes/dc/acls/policies/index.js b/ui-v2/app/routes/dc/acls/policies/index.js index 4ab49b852e..2093dfa526 100644 --- 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, diff --git a/ui-v2/app/sort/comparators/policy.js b/ui-v2/app/sort/comparators/policy.js new file mode 100644 index 0000000000..62e718f7a1 --- /dev/null +++ b/ui-v2/app/sort/comparators/policy.js @@ -0,0 +1,3 @@ +export default () => key => { + return key; +}; diff --git a/ui-v2/app/templates/dc/acls/policies/index.hbs b/ui-v2/app/templates/dc/acls/policies/index.hbs index c1baae4103..899ef241a2 100644 --- 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| +}} + Create - -{{#if (gt items.length 0) }} + + {{#if (gt items.length 0) }} -{{/if}} - + {{/if}} + + + {{#let (sort-by (comparator 'policy' sort.selected.key) items) as |sorted|}} + @@ -76,5 +92,7 @@ + {{/let}} - \ No newline at end of file + +{{/let}} \ No newline at end of file diff --git a/ui-v2/tests/acceptance/dc/acls/policies/navigation.feature b/ui-v2/tests/acceptance/dc/acls/policies/navigation.feature new file mode 100644 index 0000000000..165185c36c --- /dev/null +++ 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 diff --git a/ui-v2/tests/acceptance/dc/acls/policies/sorting.feature b/ui-v2/tests/acceptance/dc/acls/policies/sorting.feature new file mode 100644 index 0000000000..a2b3692686 --- /dev/null +++ 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" + --- + diff --git a/ui-v2/tests/acceptance/page-navigation.feature b/ui-v2/tests/acceptance/page-navigation.feature index 0982c742ff..6331a044ed 100644 --- 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 --- diff --git a/ui-v2/tests/acceptance/steps/dc/acls/policies/navigation-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/policies/navigation-steps.js new file mode 100644 index 0000000000..3231912b98 --- /dev/null +++ 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); + }); +} diff --git a/ui-v2/tests/acceptance/steps/dc/acls/policies/sorting-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/policies/sorting-steps.js new file mode 100644 index 0000000000..3231912b98 --- /dev/null +++ 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); + }); +} diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js index c80ff1e44b..d78068e838 100644 --- 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 diff --git a/ui-v2/tests/pages/dc/acls/policies/index.js b/ui-v2/tests/pages/dc/acls/policies/index.js index 7b196ba345..40303efffa 100644 --- 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(), }); }