From 84f594ec0b247557ec608495258aaf57fc8c6509 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Mon, 10 Aug 2020 10:54:51 -0400
Subject: [PATCH] ui: Add sorting to namespaces (#8405)

* Add sorting to namespaces

* Add sorting to namespaces

* ui: Fix up default namespace no delete test (#8467)

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
---
 .../components/consul-nspace-list/index.hbs   |  4 +-
 .../consul-nspace-list/pageobject.js          |  3 +-
 ui-v2/app/controllers/dc/nspaces/index.js     |  1 +
 ui-v2/app/initializers/sort.js                |  2 +
 ui-v2/app/routes/dc/nspaces/index.js          |  1 +
 ui-v2/app/sort/comparators/nspace.js          |  3 ++
 ui-v2/app/templates/dc/nspaces/index.hbs      | 27 +++++++---
 .../tests/acceptance/dc/nspaces/index.feature | 14 ++++--
 .../acceptance/dc/nspaces/sorting.feature     | 49 +++++++++++++++++++
 .../steps/dc/nspaces/sorting-steps.js         | 10 ++++
 ui-v2/tests/pages.js                          |  2 +-
 ui-v2/tests/pages/dc/nspaces/index.js         |  4 +-
 12 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 ui-v2/app/sort/comparators/nspace.js
 create mode 100644 ui-v2/tests/acceptance/dc/nspaces/sorting.feature
 create mode 100644 ui-v2/tests/acceptance/steps/dc/nspaces/sorting-steps.js

diff --git a/ui-v2/app/components/consul-nspace-list/index.hbs b/ui-v2/app/components/consul-nspace-list/index.hbs
index 8c1a9c9de5..f5a35d2dfe 100644
--- a/ui-v2/app/components/consul-nspace-list/index.hbs
+++ b/ui-v2/app/components/consul-nspace-list/index.hbs
@@ -6,7 +6,7 @@
       Deleting {{item.Name}}...
     </p>
 {{else}}
-      <a href={{href-to 'dc.nspaces.edit' item.Name}}>{{item.Name}}</a>
+      <a data-test-nspace={{item.Name}} href={{href-to 'dc.nspaces.edit' item.Name}}>{{item.Name}}</a>
 {{/if}}
     </BlockSlot>
     <BlockSlot @name="details">
@@ -48,7 +48,7 @@
             </Confirmation>
           </BlockSlot>
         </Action>
-  {{/if}}
+      {{/if}}
       </Actions>
     </BlockSlot>
 </ListCollection>
diff --git a/ui-v2/app/components/consul-nspace-list/pageobject.js b/ui-v2/app/components/consul-nspace-list/pageobject.js
index ef33cf4fc9..752dc6809b 100644
--- a/ui-v2/app/components/consul-nspace-list/pageobject.js
+++ b/ui-v2/app/components/consul-nspace-list/pageobject.js
@@ -1,6 +1,7 @@
 export default (collection, clickable, attribute, text, actions) => () => {
-  return collection('.consul-nspace-list li:not(:first-child)', {
+  return collection('.consul-nspace-list [data-test-list-row]', {
     nspace: clickable('a'),
+    name: attribute('data-test-nspace', '[data-test-nspace]'),
     description: text('[data-test-description]'),
     ...actions(['edit', 'delete']),
   });
diff --git a/ui-v2/app/controllers/dc/nspaces/index.js b/ui-v2/app/controllers/dc/nspaces/index.js
index 0584aee0a2..422233d168 100644
--- a/ui-v2/app/controllers/dc/nspaces/index.js
+++ b/ui-v2/app/controllers/dc/nspaces/index.js
@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 
 export default Controller.extend({
   queryParams: {
+    sortBy: 'sort',
     search: {
       as: 'filter',
     },
diff --git a/ui-v2/app/initializers/sort.js b/ui-v2/app/initializers/sort.js
index 1809a505bf..9826e89679 100644
--- a/ui-v2/app/initializers/sort.js
+++ b/ui-v2/app/initializers/sort.js
@@ -4,6 +4,7 @@ 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';
+import nspace from 'consul-ui/sort/comparators/nspace';
 
 export function initialize(container) {
   // Service-less injection using private properties at a per-project level
@@ -15,6 +16,7 @@ export function initialize(container) {
     token: token(),
     role: role(),
     policy: policy(),
+    nspace: nspace(),
   };
   Sort.reopen({
     comparator: function(type) {
diff --git a/ui-v2/app/routes/dc/nspaces/index.js b/ui-v2/app/routes/dc/nspaces/index.js
index e6df448e3c..0b115b8eed 100644
--- a/ui-v2/app/routes/dc/nspaces/index.js
+++ b/ui-v2/app/routes/dc/nspaces/index.js
@@ -7,6 +7,7 @@ export default Route.extend(WithNspaceActions, {
   data: service('data-source/service'),
   repo: service('repository/nspace'),
   queryParams: {
+    sortBy: 'sort',
     search: {
       as: 'filter',
       replace: true,
diff --git a/ui-v2/app/sort/comparators/nspace.js b/ui-v2/app/sort/comparators/nspace.js
new file mode 100644
index 0000000000..62e718f7a1
--- /dev/null
+++ b/ui-v2/app/sort/comparators/nspace.js
@@ -0,0 +1,3 @@
+export default () => key => {
+  return key;
+};
diff --git a/ui-v2/app/templates/dc/nspaces/index.hbs b/ui-v2/app/templates/dc/nspaces/index.hbs
index 81862b1f28..ee95c08610 100644
--- a/ui-v2/app/templates/dc/nspaces/index.hbs
+++ b/ui-v2/app/templates/dc/nspaces/index.hbs
@@ -1,4 +1,11 @@
 {{title 'Namespaces'}}
+{{#let (selectable-key-values
+    (array "Name:asc" "A to Z")
+    (array "Name:desc" "Z to A")
+      selected=sortBy
+  )
+  as |sort|
+}}
 <EventSource @src={{items}} />
 <AppView @class="nspace list" @loading={{isLoading}}>
   <BlockSlot @name="notification" as |status type subject|>
@@ -12,16 +19,22 @@
   <BlockSlot @name="actions">
       <a data-test-create href="{{href-to 'dc.nspaces.create'}}" class="type-create">Create</a>
   </BlockSlot>
-  <BlockSlot @name="content">
-{{#if (gt items.length 0) }}
+  <BlockSlot @name="toolbar">
+  {{#if (gt items.length 0)}}
     <SearchBar
-      @placeholder="Search by name"
       @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 'nspace' items}} @terms={{search}}>
-      <BlockSlot @name="content" as |filtered|>
+  {{/if}}
+  </BlockSlot>
+  <BlockSlot @name="content">
+  {{#let (sort-by (comparator 'nspace' sort.selected.key) items) as |sorted|}}
+    <ChangeableSet @dispatcher={{searchable 'nspace' sorted}} @terms={{search}}>
+      <BlockSlot @name="set" as |filtered|>
         <ConsulNspaceList
           @items={{filtered}}
           @ondelete={{queue (action send 'delete')}}
@@ -57,5 +70,7 @@
         </ConsulNspaceList>
       </BlockSlot>
     </ChangeableSet>
+  {{/let}}
   </BlockSlot>
 </AppView>
+{{/let}}
\ No newline at end of file
diff --git a/ui-v2/tests/acceptance/dc/nspaces/index.feature b/ui-v2/tests/acceptance/dc/nspaces/index.feature
index 567bbc9cea..adf725c589 100644
--- a/ui-v2/tests/acceptance/dc/nspaces/index.feature
+++ b/ui-v2/tests/acceptance/dc/nspaces/index.feature
@@ -10,7 +10,15 @@ Feature: dc / nspaces / index: Nspaces List
       Namespace: default
     ---
     And 1 datacenter model with the value "dc-1"
-    And 3 nspace models
+    And 3 nspace models from yaml
+    ---
+    - Name:  a-namespace
+      Description: a namespace
+    - Name:  default
+      Description: The default namespace
+    - Name:  z-namespace
+      Description: z namespace
+    ---
     When I visit the nspaces page for yaml
     ---
       dc: dc-1
@@ -29,5 +37,5 @@ Feature: dc / nspaces / index: Nspaces List
     And I see 1 nspace model with the description "The default namespace"
   Scenario: The default namespace can't be deleted
     Then I see 3 nspace models
-    And I click actions on the nspaces
-    Then I don't see delete on the nspaces
+    And I click nspaces.1.actions
+    Then I don't see nspaces.1.delete
diff --git a/ui-v2/tests/acceptance/dc/nspaces/sorting.feature b/ui-v2/tests/acceptance/dc/nspaces/sorting.feature
new file mode 100644
index 0000000000..588bb76b35
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/nspaces/sorting.feature
@@ -0,0 +1,49 @@
+@setupApplicationTest
+@onlyNamespaceable
+Feature: dc / nspaces / sorting
+  Scenario: Sorting Namespaces
+    Given settings from yaml
+    ---
+    consul:token:
+      SecretID: secret
+      AccessorID: accessor
+      Namespace: default
+    ---
+    Given 1 datacenter model with the value "dc-1"
+    And 6 nspace models from yaml
+    ---
+    - Name: "nspace-5"
+    - Name: "nspace-3"
+    - Name: "nspace-1"
+    - Name: "nspace-4"
+    - Name: "nspace-2"
+    - Name: "nspace-6"
+    ---
+    When I visit the nspaces page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/namespaces
+    Then I see 6 nspace models
+    When I click selected on the sort
+    When I click options.1.button on the sort
+    Then I see name on the nspaces vertically like yaml
+    ---
+    - "nspace-6"
+    - "nspace-5"
+    - "nspace-4"
+    - "nspace-3"
+    - "nspace-2"
+    - "nspace-1"
+    ---
+    When I click selected on the sort
+    When I click options.0.button on the sort
+    Then I see name on the nspaces vertically like yaml
+    ---
+    - "nspace-1"
+    - "nspace-2"
+    - "nspace-3"
+    - "nspace-4"
+    - "nspace-5"
+    - "nspace-6"
+    ---
\ No newline at end of file
diff --git a/ui-v2/tests/acceptance/steps/dc/nspaces/sorting-steps.js b/ui-v2/tests/acceptance/steps/dc/nspaces/sorting-steps.js
new file mode 100644
index 0000000000..ba1093295f
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/nspaces/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 d78068e838..244f8e74ef 100644
--- a/ui-v2/tests/pages.js
+++ b/ui-v2/tests/pages.js
@@ -181,7 +181,7 @@ export default {
     intentions(visitable, creatable, clickable, consulIntentionList, popoverSelect)
   ),
   intention: create(intention(visitable, submitable, deletable, cancelable)),
-  nspaces: create(nspaces(visitable, creatable, consulNspaceList, freetextFilter)),
+  nspaces: create(nspaces(visitable, creatable, consulNspaceList, popoverSelect)),
   nspace: create(
     nspace(visitable, submitable, deletable, cancelable, policySelector, roleSelector)
   ),
diff --git a/ui-v2/tests/pages/dc/nspaces/index.js b/ui-v2/tests/pages/dc/nspaces/index.js
index e7836e7b82..96b1a6b7cf 100644
--- a/ui-v2/tests/pages/dc/nspaces/index.js
+++ b/ui-v2/tests/pages/dc/nspaces/index.js
@@ -1,7 +1,7 @@
-export default function(visitable, creatable, nspaces, filter) {
+export default function(visitable, creatable, nspaces, popoverSelect) {
   return creatable({
     visit: visitable('/:dc/namespaces'),
     nspaces: nspaces(),
-    filter: filter(),
+    sort: popoverSelect(),
   });
 }