Implement sorting for host catalogs (#2857)

Co-authored-by: hashicc <191911133+hashicc@users.noreply.github.com>

ui/admin/app/controllers/scopes/scope/host-catalogs/index.js

@@ -21,11 +21,19 @@ export default class ScopesScopeHostCatalogsIndexController 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;
 
   /**
    * If can list (at least): return default welcome message.
@@ -138,4 +146,16 @@ export default class ScopesScopeHostCatalogsIndexController extends Controller {
   changeCredentialType(hostCatalog, credentialType) {
     hostCatalog.credentialType = credentialType;
   }
+
+  /**
+   * Set sort values and sets page to 1
+   * @param {string} sortBy
+   * @param {string} sortOrder
+   */
+  @action
+  onSort(sortBy, sortOrder) {
+    this.sortAttribute = sortBy;
+    this.sortDirection = sortOrder;
+    this.page = 1;
+  }
 }

ui/admin/app/routes/scopes/scope/host-catalogs/index.js

@@ -26,6 +26,14 @@ export default class ScopesScopeHostCatalogsIndexRoute extends Route {
     pageSize: {
       refreshModel: true,
     },
+    sortAttribute: {
+      refreshModel: true,
+      replace: true,
+    },
+    sortDirection: {
+      refreshModel: true,
+      replace: true,
+    },
   };
 
   // =methods
@@ -41,7 +49,14 @@ export default class ScopesScopeHostCatalogsIndexRoute extends Route {
   }
 
   retrieveData = restartableTask(
-    async ({ search, page, pageSize, useDebounce }) => {
+    async ({
+      search,
+      page,
+      pageSize,
+      sortAttribute,
+      sortDirection,
+      useDebounce,
+    }) => {
       if (useDebounce) {
         await timeout(250);
       }
@@ -55,13 +70,18 @@ export default class ScopesScopeHostCatalogsIndexRoute extends Route {
         'plugin.name': [],
       };
 
+      const sort = {
+        attribute: sortAttribute,
+        direction: sortDirection,
+      };
+
       let hostCatalogs;
       let totalItems = 0;
       let doHostCatalogsExist = false;
       if (this.can.can('list model', scope, { collection: 'host-catalogs' })) {
         hostCatalogs = await this.store.query('host-catalog', {
           scope_id,
-          query: { search, filters },
+          query: { search, filters, sort },
           page,
           pageSize,
         });

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -46,45 +46,58 @@
 
       {{#if @model.hostCatalogs}}
         <Hds::Table
-          @model={{@model.hostCatalogs}}
-          @columns={{array
-            (hash label=(t 'form.name.label'))
-            (hash label=(t 'form.type.label'))
-            (hash label=(t 'form.id.label'))
-          }}
           @valign='middle'
+          @onSort={{this.onSort}}
+          @sortBy={{this.sortAttribute}}
+          @sortOrder={{this.sortDirection}}
         >
+          <: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 'form.type.label'}}</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>
-              <B.Td>
-                {{#if (can 'read host-catalog' B.data)}}
-                  <LinkTo
-                    @route='scopes.scope.host-catalogs.host-catalog'
-                    @model={{B.data.id}}
-                  >
-                    {{B.data.displayName}}
-                  </LinkTo>
-                {{else}}
-                  <Hds::Text::Body @tag='p'>
-                    {{B.data.displayName}}
-                  </Hds::Text::Body>
-                {{/if}}
-                <Hds::Text::Body
-                  @tag='p'
-                >{{B.data.description}}</Hds::Text::Body>
-              </B.Td>
-              <B.Td>
-                <HostCatalogTypeBadge @model={{B.data}} />
-              </B.Td>
-              <B.Td>
-                <Hds::Copy::Snippet
-                  @color='secondary'
-                  @textToCopy={{B.data.id}}
-                />
-              </B.Td>
-            </B.Tr>
+            {{#each @model.hostCatalogs as |data|}}
+              <B.Tr>
+                <B.Td>
+                  {{#if (can 'read host-catalog' data)}}
+                    <LinkTo
+                      @route='scopes.scope.host-catalogs.host-catalog'
+                      @model={{data.id}}
+                    >
+                      {{data.displayName}}
+                    </LinkTo>
+                  {{else}}
+                    <Hds::Text::Body @tag='p'>
+                      {{data.displayName}}
+                    </Hds::Text::Body>
+                  {{/if}}
+                  <Hds::Text::Body
+                    @tag='p'
+                  >{{data.description}}</Hds::Text::Body>
+                </B.Td>
+                <B.Td>
+                  <HostCatalogTypeBadge @model={{data}} />
+                </B.Td>
+                <B.Td>
+                  <Hds::Copy::Snippet
+                    @color='secondary'
+                    @textToCopy={{data.id}}
+                  />
+                </B.Td>
+              </B.Tr>
+            {{/each}}
           </:body>
         </Hds::Table>
+
         <Rose::Pagination
           @totalItems={{@model.totalItems}}
           @currentPage={{this.page}}

ui/admin/tests/acceptance/host-catalogs/list-test.js

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, click, fillIn, waitFor } from '@ember/test-helpers';
+import { visit, click, fillIn, waitFor, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -18,6 +18,7 @@ import {
 } from 'api/models/host-catalog';
 import * as commonSelectors from 'admin/tests/helpers/selectors';
 import * as selectors from './selectors';
+import { faker } from '@faker-js/faker';
 
 module('Acceptance | host-catalogs | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -263,4 +264,94 @@ module('Acceptance | host-catalogs | list', function (hooks) {
     assert.dom(commonSelectors.HREF(urls.azureHostCatalog)).doesNotExist();
     assert.dom(selectors.NO_RESULTS_MSG).includesText('No results found');
   });
+
+  test('Host catalogs table is sorted by `created_time` descending by default', async function (assert) {
+    this.server.schema.hostCatalogs.all().destroy();
+    const years = ['2006', '2005', '2004', '2003'];
+    faker.helpers.shuffle(years).map((year) => {
+      return this.server.create('host-catalog', {
+        scope: instances.scopes.project,
+        type: TYPE_HOST_CATALOG_STATIC,
+        created_time: `${year}-01-01T00:00:00Z`,
+        name: `Host catalogs ${year}`,
+      });
+    });
+
+    await visit(urls.hostCatalogs);
+
+    assert.dom(commonSelectors.TABLE_ROWS).exists({ count: years.length });
+    years.forEach((year, index) => {
+      // nth-child index starts at 1
+      assert
+        .dom(commonSelectors.TABLE_ROW(index + 1))
+        .containsText(`Host catalogs ${year}`);
+    });
+  });
+
+  test.each(
+    'sorting',
+    {
+      'on name': {
+        attribute: {
+          key: 'name',
+          values: ['Alpha', 'Delta', 'Beta', 'Gamma', 'Epsilon'],
+        },
+        expectedAscendingSort: ['Alpha', 'Beta', 'Delta', 'Epsilon', 'Gamma'],
+        column: 1,
+      },
+      'on id': {
+        attribute: {
+          key: 'id',
+          values: ['hc_1000', 'hc_0001', 'hc_0100', 'hc_0010'],
+        },
+        expectedAscendingSort: ['hc_0001', 'hc_0010', 'hc_0100', 'hc_1000'],
+        column: 3,
+      },
+    },
+    async function (assert, input) {
+      this.server.schema.hostCatalogs.all().destroy();
+      faker.helpers.shuffle(input.attribute.values).forEach((value) => {
+        this.server.create('host-catalog', {
+          [input.attribute.key]: value,
+          scope: instances.scopes.project,
+        });
+      });
+
+      await visit(urls.hostCatalogs);
+
+      // 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);
+      });
+    },
+  );
 });