Add sorting to Roles in boundary admin (#2827)

* feat: 🎸 add sorting to roles/index route

Add sortAttribute and sortDirection query params, and use values in
this.store.query sorting option

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16784

* refactor: 💡 use manual hds table components for custom sort

This refactor uses the underlying hds components directly in order to
support custom sorting, see:
https://helios.hashicorp.design/components/table/table?tab=code#custom-sorting-using-the-yielded-sorting-argumentsfunctions

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16784

* feat: 🎸 wire-up query param state, controller action with table

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16784

* test: 💍 add sorting tests for admin roles list

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16784

ui/admin/app/controllers/scopes/scope/roles/index.js

@@ -21,11 +21,19 @@ export default class ScopesScopeRolesIndexController extends Controller {
 
   // =attributes
 
-  queryParams = ['search', 'page', 'pageSize'];
+  queryParams = [
+    'search',
+    'page',
+    'pageSize',
+    'sortAttribute',
+    'sortDirection',
+  ];
 
   @tracked search;
   @tracked page = 1;
   @tracked pageSize = 10;
+  @tracked sortAttribute;
+  @tracked sortDirection;
 
   grantScopeThis = GRANT_SCOPE_THIS;
 
@@ -127,4 +135,11 @@ export default class ScopesScopeRolesIndexController extends Controller {
     await role.removePrincipal(principal.id);
     await this.router.refresh();
   }
+
+  @action
+  sortBy(attribute, direction) {
+    this.sortAttribute = attribute;
+    this.sortDirection = direction;
+    this.page = 1;
+  }
 }

ui/admin/app/routes/scopes/scope/roles/index.js

@@ -21,6 +21,14 @@ export default class ScopesScopeRolesIndexRoute extends Route {
     pageSize: {
       refreshModel: true,
     },
+    sortAttribute: {
+      refreshModel: true,
+      replace: true,
+    },
+    sortDirection: {
+      refreshModel: true,
+      replace: true,
+    },
   };
 
   // =services
@@ -41,7 +49,14 @@ export default class ScopesScopeRolesIndexRoute extends Route {
   }
 
   retrieveData = restartableTask(
-    async ({ search, page, pageSize, useDebounce }) => {
+    async ({
+      search,
+      page,
+      pageSize,
+      sortAttribute,
+      sortDirection,
+      useDebounce,
+    }) => {
       if (useDebounce) {
         await timeout(250);
       }
@@ -51,6 +66,10 @@ export default class ScopesScopeRolesIndexRoute extends Route {
       const filters = {
         scope_id: [{ equals: scope_id }],
       };
+      const sort = {
+        attribute: sortAttribute,
+        direction: sortDirection,
+      };
 
       let roles;
       let totalItems = 0;
@@ -58,7 +77,7 @@ export default class ScopesScopeRolesIndexRoute extends Route {
       if (this.can.can('list model', scope, { collection: 'roles' })) {
         roles = await this.store.query('role', {
           scope_id,
-          query: { search, filters },
+          query: { search, filters, sort },
           page,
           pageSize,
         });

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -46,50 +46,68 @@
       </Hds::SegmentedGroup>
       {{#if @model.roles}}
         <Hds::Table
-          @model={{@model.roles}}
-          @columns={{array
-            (hash label=(t 'form.name.label'))
-            (hash label=(t 'resources.role.titles.grants-applied'))
-            (hash label=(t 'form.id.label'))
-          }}
           @valign='middle'
+          @sortBy={{this.sortAttribute}}
+          @sortOrder={{this.sortDirection}}
+          @onSort={{this.sortBy}}
         >
+          <:head as |H|>
+            <H.Tr>
+              <H.ThSort
+                @onClickSort={{fn H.setSortBy 'name'}}
+                @sortOrder={{if (eq 'name' H.sortBy) H.sortOrder}}
+              >
+                {{t 'form.name.label'}}
+              </H.ThSort>
+              <H.Th>
+                {{t 'resources.role.titles.grants-applied'}}
+              </H.Th>
+              <H.ThSort
+                @onClickSort={{fn H.setSortBy 'id'}}
+                @sortOrder={{if (eq 'id' H.sortBy) H.sortOrder}}
+              >
+                {{t 'form.id.label'}}
+              </H.ThSort>
+            </H.Tr>
+          </:head>
           <:body as |B|>
-            <B.Tr data-test-role-row={{B.data.id}}>
-              <B.Td>
-                {{#if (can 'read role' B.data)}}
-                  <LinkTo @route='scopes.scope.roles.role' @model={{B.data.id}}>
-                    {{B.data.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{B.data.displayName}}
-                {{/if}}
-                <Hds::Text::Body @tag='p'>
-                  {{B.data.description}}
-                </Hds::Text::Body>
-              </B.Td>
-              <B.Td>
-                {{#if (includes this.grantScopeThis B.data.grant_scope_ids)}}
-                  <Hds::TooltipButton
-                    @text={{t 'resources.role.messages.tooltips.yes'}}
-                  >
-                    <Hds::Badge @text={{t 'actions.yes'}} @color='success' />
-                  </Hds::TooltipButton>
-                {{else}}
-                  <Hds::TooltipButton
-                    @text={{t 'resources.role.messages.tooltips.no'}}
-                  >
-                    <Hds::Badge @text={{t 'actions.no'}} />
-                  </Hds::TooltipButton>
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                <Hds::Copy::Snippet
-                  @textToCopy={{B.data.id}}
-                  @color='secondary'
-                />
-              </B.Td>
-            </B.Tr>
+            {{#each @model.roles as |data|}}
+              <B.Tr data-test-role-row={{data.id}}>
+                <B.Td>
+                  {{#if (can 'read role' data)}}
+                    <LinkTo @route='scopes.scope.roles.role' @model={{data.id}}>
+                      {{data.displayName}}
+                    </LinkTo>
+                  {{else}}
+                    {{data.displayName}}
+                  {{/if}}
+                  <Hds::Text::Body @tag='p' class='p'>
+                    {{data.description}}
+                  </Hds::Text::Body>
+                </B.Td>
+                <B.Td>
+                  {{#if (includes this.grantScopeThis data.grant_scope_ids)}}
+                    <Hds::TooltipButton
+                      @text={{t 'resources.role.messages.tooltips.yes'}}
+                    >
+                      <Hds::Badge @text={{t 'actions.yes'}} @color='success' />
+                    </Hds::TooltipButton>
+                  {{else}}
+                    <Hds::TooltipButton
+                      @text={{t 'resources.role.messages.tooltips.no'}}
+                    >
+                      <Hds::Badge @text={{t 'actions.no'}} />
+                    </Hds::TooltipButton>
+                  {{/if}}
+                </B.Td>
+                <B.Td>
+                  <Hds::Copy::Snippet
+                    @textToCopy={{data.id}}
+                    @color='secondary'
+                  />
+                </B.Td>
+              </B.Tr>
+            {{/each}}
           </:body>
         </Hds::Table>
         <Rose::Pagination

ui/admin/tests/acceptance/roles/list-test.js

@@ -11,6 +11,7 @@ import {
   fillIn,
   waitUntil,
   focus,
+  currentURL,
 } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
@@ -19,6 +20,7 @@ import { authenticateSession } from 'ember-simple-auth/test-support';
 import { GRANT_SCOPE_THIS } from 'api/models/role';
 import * as selectors from './selectors';
 import * as commonSelectors from 'admin/tests/helpers/selectors';
+import { faker } from '@faker-js/faker';
 
 module('Acceptance | roles | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -151,4 +153,97 @@ module('Acceptance | roles | list', function (hooks) {
       .dom(selectors.ROLE_TOOLTIP_CONTENT(instances.role2.id))
       .hasText('The grants on this role have been applied to this scope.');
   });
+
+  test('roles table is sorted by created_time descending by default', async function (assert) {
+    this.server.schema.roles.all().destroy();
+
+    const years = ['2026', '2025', '2024', '2023'];
+    faker.helpers.shuffle(years).map((year) => {
+      return this.server.create('role', {
+        scope: instances.scopes.org,
+        id: `r_${year}`,
+        name: `Role ${year}`,
+        created_time: `${year}-01-01T00:00:00Z`,
+      });
+    });
+
+    await visit(urls.roles);
+
+    assert.dom(commonSelectors.TABLE_ROWS).exists({ count: years.length });
+    assert.dom(commonSelectors.TABLE_ROW(1)).containsText('Role 2026');
+    assert.dom(commonSelectors.TABLE_ROW(2)).containsText('Role 2025');
+    assert.dom(commonSelectors.TABLE_ROW(3)).containsText('Role 2024');
+    assert.dom(commonSelectors.TABLE_ROW(4)).containsText('Role 2023');
+  });
+
+  test.each(
+    'sorting',
+    {
+      'on name': {
+        attribute: {
+          key: 'name',
+          values: ['Alpha', 'Beta', 'Delta', 'Gamma', 'Epsilon'],
+        },
+        expectedAscendingSort: ['Alpha', 'Beta', 'Delta', 'Epsilon', 'Gamma'],
+        column: 1,
+      },
+      'on id': {
+        attribute: {
+          key: 'id',
+          values: ['r_0001', 'r_0010', 'r_0100', 'r_1000', 'r_10000'],
+        },
+        expectedAscendingSort: [
+          'r_0001',
+          'r_0010',
+          'r_0100',
+          'r_1000',
+          'r_10000',
+        ],
+        column: 3,
+      },
+    },
+    async function (assert, input) {
+      this.server.schema.roles.all().destroy();
+      faker.helpers.shuffle(input.attribute.values).forEach((value) => {
+        this.server.create('role', {
+          [input.attribute.key]: value,
+          scope: instances.scopes.org,
+        });
+      });
+
+      await visit(urls.roles);
+
+      // click the sort button again to sort in ascending order
+      await click(commonSelectors.TABLE_SORT_BTN(input.column));
+      assert.true(currentURL().includes('sortDirection=asc'));
+      assert.true(
+        currentURL().includes(`sortAttribute=${input.attribute.key}`),
+      );
+      assert
+        .dom(commonSelectors.TABLE_SORT_BTN_ARROW_UP(input.column))
+        .isVisible();
+      assert
+        .dom(commonSelectors.TABLE_ROWS)
+        .isVisible({ count: input.attribute.values.length });
+
+      input.expectedAscendingSort.forEach((expected, index) => {
+        // nth-child index starts at 1
+        assert.dom(commonSelectors.TABLE_ROW(index + 1)).containsText(expected);
+      });
+
+      // click the sort button again to sort in descending order
+      await click(commonSelectors.TABLE_SORT_BTN(input.column));
+      assert.true(currentURL().includes('sortDirection=desc'));
+      assert.true(
+        currentURL().includes(`sortAttribute=${input.attribute.key}`),
+      );
+      assert
+        .dom(commonSelectors.TABLE_SORT_BTN_ARROW_DOWN(input.column))
+        .isVisible();
+      input.expectedAscendingSort.toReversed().forEach((expected, index) => {
+        // nth-child index starts at 1
+        assert.dom(commonSelectors.TABLE_ROW(index + 1)).containsText(expected);
+      });
+    },
+  );
 });