feat: 🎸 add search & pagination support for users (#2195)

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

addons/api/addon/services/indexed-db.js

@@ -12,6 +12,7 @@ export const modelIndexes = {
     '&id, attributes.created_time, attributes.type, attributes.name, attributes.description, attributes.address, attributes.scope.scope_id',
   session:
     '&id, attributes.created_time, attributes.type, attributes.status, attributes.endpoint, attributes.target_id, attributes.user_id, attributes.scope.scope_id',
+  user: '&id, attributes.created_time, attributes.name, attributes.description, attributes.scope.scope_id',
 };
 
 export const formatDbName = (userId, clusterUrl) =>

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

@@ -0,0 +1,28 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { debounce } from 'core/decorators/debounce';
+
+export default class ScopesScopeUsersIndexController extends Controller {
+  // =attributes
+
+  queryParams = ['search', 'page', 'pageSize'];
+
+  @tracked search = '';
+  @tracked page = 1;
+  @tracked pageSize = 10;
+
+  // =methods
+
+  /**
+   * Handles input on each keystroke and the search queryParam
+   * @param {object} event
+   */
+  @action
+  @debounce(250)
+  handleSearchInput(event) {
+    const { value } = event.target;
+    this.search = value;
+    this.page = 1;
+  }
+}

ui/admin/app/routes/scopes/scope/users.js

@@ -13,7 +13,6 @@ import { notifySuccess, notifyError } from 'core/decorators/notify';
 export default class ScopesScopeUsersRoute extends Route {
   // =services
 
-  @service store;
   @service session;
   @service can;
   @service router;
@@ -27,18 +26,6 @@ export default class ScopesScopeUsersRoute extends Route {
     if (!this.session.isAuthenticated) this.router.transitionTo('index');
   }
 
-  /**
-   * Load all users under current scope.
-   * @return {Promise{[UserModel]}}
-   */
-  model() {
-    const scope = this.modelFor('scopes.scope');
-    const { id: scope_id } = scope;
-    if (this.can.can('list model', scope, { collection: 'users' })) {
-      return this.store.query('user', { scope_id });
-    }
-  }
-
   // =actions
   /**
    * Rollback changes on an user.
@@ -83,7 +70,7 @@ export default class ScopesScopeUsersRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(user) {
     await user.destroyRecord();
-    await this.router.replaceWith('scopes.scope.users');
+    this.router.replaceWith('scopes.scope.users');
     this.refresh();
   }
 }

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

@@ -4,10 +4,77 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeUsersIndexRoute extends Route {
+  // =attributes
+
+  queryParams = {
+    search: {
+      refreshModel: true,
+      replace: true,
+    },
+    page: {
+      refreshModel: true,
+    },
+    pageSize: {
+      refreshModel: true,
+    },
+  };
+
+  // =services
+
+  @service store;
+  @service can;
+
   // =methods
 
+  /**
+   * Load all users under current scope.
+   * @return {Promise{[UserModel]}}
+   */
+  async model({ search, page, pageSize }) {
+    const scope = this.modelFor('scopes.scope');
+    const { id: scope_id } = scope;
+
+    const filters = {
+      scope_id: [{ equals: scope_id }],
+    };
+
+    await this.getUsersExist(scope_id);
+
+    let users;
+    let totalItems = 0;
+    if (this.can.can('list model', scope, { collection: 'users' })) {
+      users = await this.store.query('user', {
+        query: { search, filters },
+        page,
+        pageSize,
+      });
+      totalItems = users.meta?.totalItems;
+    }
+
+    return { users, usersExist: this.usersExist, totalItems };
+  }
+
+  async getUsersExist(scopeId) {
+    const options = { pushToStore: false };
+    const user = await this.store.query(
+      'user',
+      {
+        query: {
+          filters: {
+            scope_id: [{ equals: scopeId }],
+          },
+        },
+        page: 1,
+        pageSize: 1,
+      },
+      options,
+    );
+    this.usersExist = user.length > 0;
+  }
+
   setupController(controller) {
     const scope = this.modelFor('scopes.scope');
     super.setupController(...arguments);

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

@@ -14,94 +14,113 @@
       {{t 'resources.user.title_plural'}}
       <DocLink @doc='user' @iconSize='large' />
     </h2>
-    {{#if @model}}
+    {{#if @model.usersExist}}
       <p>{{t 'resources.user.description'}}</p>
     {{/if}}
   </page.header>
 
   <page.actions>
     {{#if (can 'create model' this.scope collection='users')}}
-      {{#if @model}}
-        <Rose::LinkButton @route='scopes.scope.users.new' @style='primary'>{{t
-            'resources.user.titles.new'
-          }}</Rose::LinkButton>
+      {{#if @model.usersExist}}
+        <Hds::Button
+          @route='scopes.scope.users.new'
+          @text={{t 'resources.user.titles.new'}}
+        />
       {{/if}}
     {{/if}}
   </page.actions>
 
-  <page.body>
-
-    {{#if @model}}
-
-      <Hds::Table
-        @model={{@model}}
-        @columns={{array
-          (hash label=(t 'form.name.label'))
-          (hash label=(t 'form.id.label'))
-        }}
-        @valign='middle'
-      >
-        <:body as |B|>
-          <B.Tr>
-            <B.Td>
-              {{#if (can 'read user' B.data)}}
-                <LinkTo @route='scopes.scope.users.user' @model={{B.data.id}}>
-                  {{B.data.displayName}}
-                </LinkTo>
-              {{else}}
-                {{B.data.displayName}}
-              {{/if}}
-              {{#if B.data.accountName}}
-                <br /><Hds::Badge @text={{B.data.accountName}} />
-              {{/if}}
-              <p>{{B.data.description}}</p>
-            </B.Td>
-            <B.Td>
-              <Hds::Copy::Snippet
-                @textToCopy={{B.data.id}}
-                @color='secondary'
-              />
-            </B.Td>
-          </B.Tr>
-        </:body>
-      </Hds::Table>
-
-    {{else}}
-
-      <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.user.messages.welcome.title'}}
-          as |message|
+  <page.body class='search-filtering'>
+    {{#if @model.usersExist}}
+      <Hds::SegmentedGroup as |S|>
+        <S.TextInput
+          @value={{this.search}}
+          @type='search'
+          placeholder={{t 'actions.search'}}
+          aria-label={{t 'actions.search'}}
+          {{on 'input' this.handleSearchInput}}
+        />
+      </Hds::SegmentedGroup>
+      {{#if @model.users}}
+        <Hds::Table
+          @model={{@model.users}}
+          @columns={{array
+            (hash label=(t 'form.name.label'))
+            (hash label=(t 'form.id.label'))
+          }}
+          @valign='middle'
         >
-          <message.description>
-            {{#if (can 'list model' this.scope collection='users')}}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.user.description'}}
-            {{else if (can 'create model' this.scope collection='users')}}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
+          <:body as |B|>
+            <B.Tr>
+              <B.Td>
+                {{#if (can 'read user' B.data)}}
+                  <LinkTo @route='scopes.scope.users.user' @model={{B.data.id}}>
+                    {{B.data.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{B.data.displayName}}
+                {{/if}}
+                {{#if B.data.accountName}}
+                  <br /><Hds::Badge @text={{B.data.accountName}} />
+                {{/if}}
+                <p>{{B.data.description}}</p>
+              </B.Td>
+              <B.Td>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
+              </B.Td>
+            </B.Tr>
+          </:body>
+        </Hds::Table>
+        <Rose::Pagination
+          @totalItems={{@model.totalItems}}
+          @currentPage={{this.page}}
+          @currentPageSize={{this.pageSize}}
+        />
+      {{else}}
+        <Hds::ApplicationState data-test-no-user-results as |A|>
+          <A.Header @title={{t 'titles.no-results-found'}} />
+          <A.Body
+            @text={{t
+              'descriptions.no-search-results'
+              query=this.search
+              resource='users'
+            }}
+          />
+        </Hds::ApplicationState>
+      {{/if}}
+    {{else}}
+      <Hds::ApplicationState as |A|>
+        <A.Header @title={{t 'resources.user.messages.welcome.title'}} />
+        <A.Body
+          {{! can list (at least):  show default welcome message}}
+          {{! can create (only):  show create-but-not-list welcome message}}
+          {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+          @text={{t
+            (if
+              (can 'list model' this.scope collection='users')
+              'resources.user.description'
+              (if
+                (can 'create model' this.scope collection='users')
                 'descriptions.create-but-not-list'
-                resource=(t 'resources.user.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
                 'descriptions.neither-list-nor-create'
-                resource=(t 'resources.user.title_plural')
-              }}
-            {{/if}}
-          </message.description>
-          {{#if (can 'create model' this.scope collection='users')}}
-            <message.link @route='scopes.scope.users.new'>
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
-          {{/if}}
-        </Rose::Message>
-      </Rose::Layout::Centered>
-
+              )
+            )
+          }}
+        />
+        {{#if (can 'create model' this.scope collection='users')}}
+          <A.Footer as |F|>
+            <F.Link::Standalone
+              @icon='plus-circle'
+              @text={{t 'titles.new'}}
+              @route='scopes.scope.users.new'
+            />
+          </A.Footer>
+        {{/if}}
+      </Hds::ApplicationState>
     {{/if}}
-
   </page.body>
 
 </Rose::Layout::Page>

ui/admin/tests/acceptance/users/delete-test.js

@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { visit, click, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import { Response } from 'miragejs';
 import {
   authenticateSession,
@@ -18,6 +19,7 @@ import {
 module('Acceptance | users | delete', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIndexedDb(hooks);
 
   const instances = {
     scopes: {

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

@@ -4,9 +4,10 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, click } from '@ember/test-helpers';
+import { visit, click, fillIn, waitUntil, findAll } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import {
   authenticateSession,
   // These are left here intentionally for future reference.
@@ -17,20 +18,26 @@ import {
 module('Acceptance | users | list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIndexedDb(hooks);
+
+  const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]';
+  const NO_RESULTS_MSG_SELECTOR = '[data-test-no-user-results]';
 
   const instances = {
     scopes: {
       global: null,
       org: null,
     },
-    user: null,
+    user1: null,
+    user2: null,
   };
 
   const urls = {
     globalScope: null,
     orgScope: null,
     users: null,
-    user: null,
+    user1: null,
+    user2: null,
   };
 
   hooks.beforeEach(function () {
@@ -39,13 +46,17 @@ module('Acceptance | users | list', function (hooks) {
       type: 'org',
       scope: { id: 'global', type: 'global' },
     });
-    instances.user = this.server.create('user', {
+    instances.user1 = this.server.create('user', {
+      scope: instances.scopes.org,
+    });
+    instances.user2 = this.server.create('user', {
       scope: instances.scopes.org,
     });
     urls.globalScope = `/scopes/global/scopes`;
     urls.orgScope = `/scopes/${instances.scopes.org.id}`;
     urls.users = `${urls.orgScope}/users`;
-    urls.user = `${urls.users}/${instances.user.id}`;
+    urls.user1 = `${urls.users}/${instances.user1.id}`;
+    urls.user2 = `${urls.users}/${instances.user2.id}`;
     authenticateSession({});
   });
 
@@ -104,7 +115,7 @@ module('Acceptance | users | list', function (hooks) {
 
     await click(`[href="${urls.users}"]`);
 
-    assert.dom(`.rose-table [href="${urls.user}"]`).doesNotExist();
+    assert.dom(`.rose-table [href="${urls.user1}"]`).doesNotExist();
   });
 
   test('user can navigate to users tab with only list action', async function (assert) {
@@ -128,6 +139,37 @@ module('Acceptance | users | list', function (hooks) {
 
     await click(`[href="${urls.users}"]`);
 
-    assert.dom(`[href="${urls.user}"]`).exists();
+    assert.dom(`[href="${urls.user1}"]`).exists();
+  });
+
+  test('user can search for a user by id', async function (assert) {
+    await visit(urls.orgScope);
+
+    await click(`[href="${urls.users}"]`);
+
+    assert.dom(`[href="${urls.user1}"]`).exists();
+    assert.dom(`[href="${urls.user2}"]`).exists();
+
+    await fillIn(SEARCH_INPUT_SELECTOR, instances.user1.id);
+    await waitUntil(() => findAll(`[href="${urls.user2}"]`).length === 0);
+
+    assert.dom(`[href="${urls.user1}"]`).exists();
+    assert.dom(`[href="${urls.user2}"]`).doesNotExist();
+  });
+
+  test('user can search for users and get no results', async function (assert) {
+    await visit(urls.orgScope);
+
+    await click(`[href="${urls.users}"]`);
+
+    assert.dom(`[href="${urls.user1}"]`).exists();
+    assert.dom(`[href="${urls.user2}"]`).exists();
+
+    await fillIn(SEARCH_INPUT_SELECTOR, 'fake user that does not exist');
+    await waitUntil(() => findAll(NO_RESULTS_MSG_SELECTOR).length === 1);
+
+    assert.dom(`[href="${urls.user1}"]`).doesNotExist();
+    assert.dom(`[href="${urls.user2}"]`).doesNotExist();
+    assert.dom(NO_RESULTS_MSG_SELECTOR).includesText('No results found');
   });
 });

ui/admin/tests/acceptance/users/read-test.js

@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { visit, currentURL, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import {
   authenticateSession,
@@ -18,6 +19,7 @@ import {
 module('Acceptance | users | read', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIndexedDb(hooks);
 
   const urls = {
     orgScope: null,

ui/admin/tests/acceptance/users/update-test.js

@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import { Response } from 'miragejs';
 import {
   authenticateSession,
@@ -18,6 +19,7 @@ import {
 module('Acceptance | users | update', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIndexedDb(hooks);
 
   const urls = {
     orgScope: null,

ui/admin/tests/unit/controllers/scopes/scope/users/index-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { waitUntil } from '@ember/test-helpers';
+
+module('Unit | Controller | scopes/scope/users/index', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/users/index');
+    assert.ok(controller);
+  });
+
+  test('handleSearchInput action sets expected values correctly', async function (assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/users/index');
+    const searchValue = 'test';
+    controller.handleSearchInput({ target: { value: searchValue } });
+    await waitUntil(() => controller.search === searchValue);
+
+    assert.strictEqual(controller.page, 1);
+    assert.strictEqual(controller.search, searchValue);
+  });
+});