UI: add pagination to new PKI (#23193) (#23239)

* UI: add pagination to new PKI (#23193)

* fixes store type import

* fixes tests

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

changelog/23193.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add pagination to PKI roles, keys, issuers, and certificates list pages
+```

ui/app/services/store.js

@@ -77,9 +77,12 @@ export default Store.extend({
   //   pageFilter: a string that will be used to do a fuzzy match against the
   //     results, this is done pre-pagination
   lazyPaginatedQuery(modelType, query /*, options*/) {
+    const skipCache = query.skipCache;
+    // We don't want skipCache to be part of the actual query key, so remove it
+    delete query.skipCache;
     const adapter = this.adapterFor(modelType);
     const modelName = normalizeModelName(modelType);
-    const dataCache = this.getDataset(modelName, query);
+    const dataCache = skipCache ? this.clearDataset(modelName) : this.getDataset(modelName, query);
     const responsePath = query.responsePath;
     assert('responsePath is required', responsePath);
     assert('page is required', typeof query.page === 'number');
@@ -144,6 +147,7 @@ export default Store.extend({
       prevPage: clamp(currentPage - 1, 1, lastPage),
       total: dataset.length || 0,
       filteredTotal: data.length || 0,
+      pageSize: size,
     };
 
     return response;

ui/lib/pki/addon/components/page/pki-issuer-list.hbs

@@ -1,4 +1,41 @@
-{{#each @issuers as |pkiIssuer idx|}}
+<PkiPaginatedList @listRoute="issuers.index" @list={{@issuers}}>
+  <:actions>
+    <ToolbarLink @route="issuers.import" data-test-generate-issuer="import">
+      Import
+    </ToolbarLink>
+    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+      <D.Trigger
+        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
+        @htmlTag="button"
+        data-test-issuer-generate-dropdown
+      >
+        Generate
+        <Chevron @direction="down" @isButton={{true}} />
+      </D.Trigger>
+      <D.Content @defaultClass="popup-menu-content">
+        <nav class="box menu" aria-label="generate options">
+          <ul class="menu-list">
+            <li class="action">
+              <LinkTo @route="issuers.generate-root" {{on "click" (fn this.onLinkClick D)}} data-test-generate-issuer="root">
+                Root
+              </LinkTo>
+            </li>
+            <li class="action">
+              <LinkTo
+                @route="issuers.generate-intermediate"
+                {{on "click" (fn this.onLinkClick D)}}
+                data-test-generate-issuer="intermediate"
+              >
+                Intermediate CSR
+              </LinkTo>
+            </li>
+          </ul>
+        </nav>
+      </D.Content>
+    </BasicDropdown>
+  </:actions>
+  <:list as |issuers|>
+    {{#each issuers as |pkiIssuer idx|}}
       <LinkedBlock class="list-item-row" @params={{array "issuers.issuer.details" pkiIssuer.id}} @linkPrefix={{@mountPoint}}>
         <div class="level is-mobile">
           <div class="level-left">
@@ -14,7 +51,7 @@
                 {{#if pkiIssuer.isDefault}}
                   <span class="tag has-text-grey-dark" data-test-is-default={{idx}}>default issuer</span>
                 {{/if}}
-            {{#if (not (eq pkiIssuer.isRoot undefined))}}
+                {{#if (not-eq pkiIssuer.isRoot undefined)}}
                   <span class="tag has-text-grey-dark" data-test-is-root-tag={{idx}}>{{if
                       pkiIssuer.isRoot
                       "root"
@@ -63,3 +100,12 @@
         </div>
       </LinkedBlock>
     {{/each}}
+  </:list>
+  <:empty>
+    <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
+      <LinkTo @route="configuration.create">
+        Configure PKI
+      </LinkTo>
+    </EmptyState>
+  </:empty>
+</PkiPaginatedList>

ui/lib/pki/addon/components/page/pki-issuer-list.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview';
+import type PkiIssuerModel from 'vault/models/pki/issuer';
+
+interface BasicDropdown {
+  actions: {
+    close: CallableFunction;
+  };
+}
+interface Args {
+  issuers: PkiIssuerModel[];
+  mountPoint: string;
+}
+
+export default class PkiIssuerList extends Component<Args> {
+  notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
+
+  // To prevent production build bug of passing D.actions to on "click": https://github.com/hashicorp/vault/pull/16983
+  @action onLinkClick(D: BasicDropdown) {
+    next(() => D.actions.close());
+  }
+}

ui/lib/pki/addon/components/page/pki-key-list.hbs

@@ -1,5 +1,5 @@
-<Toolbar>
-  <ToolbarActions>
+<PkiPaginatedList @listRoute="keys.index" @list={{@keyModels}} @hasConfig={{@hasConfig}}>
+  <:actions>
     {{#if @canImportKey}}
       <ToolbarLink @route="keys.import" @type="download" data-test-pki-key-import>
         Import
@@ -10,14 +10,14 @@
         Generate
       </ToolbarLink>
     {{/if}}
-  </ToolbarActions>
-</Toolbar>
+  </:actions>
+  <:description>
     <p class="has-padding">Below is information about the private keys used by the issuers to sign certificates. While
       certificates represent a public assertion of an identity, private keys represent the private part of that identity, a
       secret used to prove who they are and who they trust.</p>
-
-{{#if @keyModels.length}}
-  {{#each @keyModels as |pkiKey|}}
+  </:description>
+  <:list as |keys|>
+    {{#each keys as |pkiKey|}}
       <LinkedBlock class="list-item-row" @params={{array "keys.key.details" pkiKey.keyId}} @linkPrefix={{@mountPoint}}>
         <div class="level is-mobile">
           <div class="level-left">
@@ -66,6 +66,17 @@
         </div>
       </LinkedBlock>
     {{/each}}
-{{else}}
+  </:list>
+
+  <:empty>
     <EmptyState @title="No keys yet" @message="There are no keys in this PKI mount. You can generate or create one." />
-{{/if}}
+  </:empty>
+
+  <:configure>
+    <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
+      <LinkTo @route="configuration.create">
+        Configure PKI
+      </LinkTo>
+    </EmptyState>
+  </:configure>
+</PkiPaginatedList>

ui/lib/pki/addon/components/page/pki-key-list.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview';
+import type PkiKeyModel from 'vault/models/pki/key';
+
+interface Args {
+  keyModels: PkiKeyModel[];
+  mountPoint: string;
+  canImportKey: boolean;
+  canGenerateKey: boolean;
+  canRead: boolean;
+  canEdit: boolean;
+  hasConfig: boolean;
+}
+
+export default class PkiKeyList extends Component<Args> {
+  notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
+}

ui/lib/pki/addon/components/pki-paginated-list.hbs

@@ -0,0 +1,25 @@
+<Toolbar>
+  <ToolbarActions>
+    {{yield to="actions"}}
+  </ToolbarActions>
+</Toolbar>
+
+{{#if this.hasConfig}}
+  {{#if @list.meta.total}}
+    {{yield to="description"}}
+    {{yield @list to="list"}}
+    <Hds::Pagination::Numbered
+      @currentPage={{@list.meta.currentPage}}
+      @currentPageSize={{@list.meta.pageSize}}
+      @route={{@listRoute}}
+      @showSizeSelector={{false}}
+      @totalItems={{@list.meta.total}}
+      @queryFunction={{this.paginationQueryParams}}
+      data-test-pagination
+    />
+  {{else}}
+    {{yield to="empty"}}
+  {{/if}}
+{{else}}
+  {{yield to="configure"}}
+{{/if}}

ui/lib/pki/addon/components/pki-paginated-list.ts

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+
+/**
+ * @module AuthForm
+ * The `PkiPaginatedList` is used to handle a list page layout with lazyPagination response.
+ * It is specific to PKI so we can make certain assumptions about routing.
+ * The toolbar has no filtering since users can go directly to an item from the overview page.
+ *
+ * @example ```js
+ * <PkiPaginatedList @list={{this.model.roles}} @hasConfig={{this.model.hasConfig}} @listRoute="roles.index">
+ *   <:list as |items|>
+ *     {{#each items as |item}}
+ *       <div>for each thing</div>
+ *     {{/each}}
+ *   </:list>
+ * </PkiPaginatedList>
+ * ```
+ */
+
+interface Args {
+  list: unknown[];
+  listRoute: string;
+  hasConfig?: boolean;
+}
+export default class PkiPaginatedListComponent extends Component<Args> {
+  get paginationQueryParams() {
+    return (page: number) => ({ page });
+  }
+  get hasConfig() {
+    if (typeof this.args.hasConfig === 'boolean') return this.args.hasConfig;
+    return true;
+  }
+}

ui/lib/pki/addon/components/pki-role-generate.hbs

@@ -1,5 +1,5 @@
 {{#if @model.serialNumber}}
-  <Page::PkiCertificateDetails @model={{@model}} @onRevoke={{this.cancel}} @onBack={{this.cancel}} />
+  <Page::PkiCertificateDetails @model={{@model}} @onBack={{this.cancel}} />
 {{else}}
   <form {{on "submit" (perform this.save)}} data-test-pki-generate-cert-form>
     <div class="box is-bottomless is-fullwidth is-marginless">

ui/lib/pki/addon/controllers/certificates/index.js

@@ -8,6 +8,8 @@ import { getOwner } from '@ember/application';
 import { action } from '@ember/object';
 
 export default class PkiCertificatesIndexController extends Controller {
+  queryParams = ['page'];
+
   get mountPoint() {
     return getOwner(this).mountPoint;
   }

ui/lib/pki/addon/controllers/issuers/index.js

@@ -4,16 +4,12 @@
  */
 
 import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { next } from '@ember/runloop';
 import { getOwner } from '@ember/application';
 
 export default class PkiIssuerIndexController extends Controller {
+  queryParams = ['page'];
+
   get mountPoint() {
     return getOwner(this).mountPoint;
   }
-  // To prevent production build bug of passing D.actions to on "click": https://github.com/hashicorp/vault/pull/16983
-  @action onLinkClick(D) {
-    next(() => D.actions.close());
-  }
 }

ui/lib/pki/addon/controllers/keys/index.js

@@ -7,6 +7,8 @@ import Controller from '@ember/controller';
 import { getOwner } from '@ember/application';
 
 export default class PkiKeysIndexController extends Controller {
+  queryParams = ['page'];
+
   get mountPoint() {
     return getOwner(this).mountPoint;
   }

ui/lib/pki/addon/controllers/roles/index.js

@@ -7,6 +7,8 @@ import Controller from '@ember/controller';
 import { getOwner } from '@ember/application';
 
 export default class PkiRolesIndexController extends Controller {
+  queryParams = ['page'];
+
   get mountPoint() {
     return getOwner(this).mountPoint;
   }

ui/lib/pki/addon/routes/certificates/index.js

@@ -14,23 +14,35 @@ export default class PkiCertificatesIndexRoute extends Route {
   @service store;
   @service secretMountPath;
 
-  async fetchCertificates() {
+  queryParams = {
+    page: {
+      refreshModel: true,
+    },
+  };
+
+  async fetchCertificates(params) {
     try {
-      return await this.store.query('pki/certificate/base', { backend: this.secretMountPath.currentPath });
+      const page = Number(params.page) || 1;
+      return await this.store.lazyPaginatedQuery('pki/certificate/base', {
+        backend: this.secretMountPath.currentPath,
+        responsePath: 'data.keys',
+        page,
+        skipCache: page === 1,
+      });
     } catch (e) {
       if (e.httpStatus === 404) {
         return { parentModel: this.modelFor('certificates') };
-      } else {
+      }
       throw e;
     }
   }
-  }
 
-  model() {
+  model(params) {
     return hash({
       hasConfig: this.shouldPromptConfig,
-      certificates: this.fetchCertificates(),
+      certificates: this.fetchCertificates(params),
       parentModel: this.modelFor('certificates'),
+      pageFilter: params.pageFilter,
     });
   }
 
@@ -41,4 +53,10 @@ export default class PkiCertificatesIndexRoute extends Route {
     if (certificates?.length) controller.notConfiguredMessage = getCliMessage('certificates');
     else controller.notConfiguredMessage = getCliMessage();
   }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.set('page', undefined);
+    }
+  }
 }

ui/lib/pki/addon/routes/issuers/index.js

@@ -5,15 +5,21 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview';
 
 export default class PkiIssuersListRoute extends Route {
   @service store;
   @service secretMountPath;
 
-  model() {
+  model(params) {
+    const page = Number(params.page) || 1;
     return this.store
-      .query('pki/issuer', { backend: this.secretMountPath.currentPath, isListView: true })
+      .lazyPaginatedQuery('pki/issuer', {
+        backend: this.secretMountPath.currentPath,
+        responsePath: 'data.keys',
+        page,
+        skipCache: page === 1,
+        isListView: true,
+      })
       .then((issuersModel) => {
         return { issuersModel, parentModel: this.modelFor('issuers') };
       })
@@ -33,6 +39,11 @@ export default class PkiIssuersListRoute extends Route {
       { label: this.secretMountPath.currentPath, route: 'overview' },
       { label: 'issuers', route: 'issuers.index' },
     ];
-    controller.notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
+  }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.set('page', undefined);
+    }
   }
 }

ui/lib/pki/addon/routes/keys/index.js

@@ -14,11 +14,25 @@ export default class PkiKeysIndexRoute extends Route {
   @service secretMountPath;
   @service store;
 
-  model() {
+  queryParams = {
+    page: {
+      refreshModel: true,
+    },
+  };
+
+  model(params) {
+    const page = Number(params.page) || 1;
     return hash({
       hasConfig: this.shouldPromptConfig,
       parentModel: this.modelFor('keys'),
-      keyModels: this.store.query('pki/key', { backend: this.secretMountPath.currentPath }).catch((err) => {
+      keyModels: this.store
+        .lazyPaginatedQuery('pki/key', {
+          backend: this.secretMountPath.currentPath,
+          responsePath: 'data.keys',
+          page,
+          skipCache: page === 1,
+        })
+        .catch((err) => {
           if (err.httpStatus === 404) {
             return [];
           } else {
@@ -37,4 +51,10 @@ export default class PkiKeysIndexRoute extends Route {
     ];
     controller.notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
   }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.set('page', undefined);
+    }
+  }
 }

ui/lib/pki/addon/routes/roles/index.js

@@ -13,23 +13,35 @@ export default class PkiRolesIndexRoute extends Route {
   @service store;
   @service secretMountPath;
 
-  async fetchRoles() {
+  queryParams = {
+    page: {
+      refreshModel: true,
+    },
+  };
+
+  async fetchRoles(params) {
     try {
-      return await this.store.query('pki/role', { backend: this.secretMountPath.currentPath });
+      const page = Number(params.page) || 1;
+      return await this.store.lazyPaginatedQuery('pki/role', {
+        backend: this.secretMountPath.currentPath,
+        responsePath: 'data.keys',
+        page,
+        skipCache: page === 1,
+      });
     } catch (e) {
       if (e.httpStatus === 404) {
         return { parentModel: this.modelFor('roles') };
-      } else {
+      }
       throw e;
     }
   }
-  }
 
-  model() {
+  model(params) {
     return hash({
       hasConfig: this.shouldPromptConfig,
-      roles: this.fetchRoles(),
+      roles: this.fetchRoles(params),
       parentModel: this.modelFor('roles'),
+      pageFilter: params.pageFilter,
     });
   }
 
@@ -40,4 +52,10 @@ export default class PkiRolesIndexRoute extends Route {
     if (roles?.length) controller.notConfiguredMessage = getCliMessage('roles');
     else controller.notConfiguredMessage = getCliMessage();
   }
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.set('page', undefined);
+    }
+  }
 }

ui/lib/pki/addon/templates/certificates/index.hbs

@@ -8,18 +8,10 @@
   }}
   @isEngine={{true}}
 />
-{{outlet}}
-<Toolbar>
-  {{#if this.model.certificates.length}}
-    <ToolbarFilters>
-      {{! TODO add NavigateInput component }}
-    </ToolbarFilters>
-  {{/if}}
-</Toolbar>
 
-{{#if this.model.hasConfig}}
-  {{#if this.model.certificates.length}}
-    {{#each this.model.certificates as |pkiCertificate|}}
+<PkiPaginatedList @listRoute="certificates.index" @list={{this.model.certificates}} @hasConfig={{this.model.hasConfig}}>
+  <:list as |certs|>
+    {{#each certs as |pkiCertificate|}}
       <LinkedBlock
         class="list-item-row"
         @params={{array "certificates.certificate.details" pkiCertificate.id}}
@@ -55,7 +47,8 @@
         </div>
       </LinkedBlock>
     {{/each}}
-  {{else}}
+  </:list>
+  <:empty>
     <EmptyState @title="No certificates yet">
       <div>
         <p>When created, certificates will be listed here. Select a role to start generating certificates.</p>
@@ -66,11 +59,12 @@
         </div>
       </div>
     </EmptyState>
-  {{/if}}
-{{else}}
+  </:empty>
+  <:configure>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
       <LinkTo @route="configuration.create">
         Configure PKI
       </LinkTo>
     </EmptyState>
-{{/if}}
+  </:configure>
+</PkiPaginatedList>

ui/lib/pki/addon/templates/issuers/index.hbs

@@ -8,50 +8,5 @@
   }}
   @isEngine={{true}}
 />
-<Toolbar>
-  <ToolbarActions>
-    <ToolbarLink @route="issuers.import" data-test-generate-issuer="import">
-      Import
-    </ToolbarLink>
-    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
-      <D.Trigger
-        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
-        @htmlTag="button"
-        data-test-issuer-generate-dropdown
-      >
-        Generate
-        <Chevron @direction="down" @isButton={{true}} />
-      </D.Trigger>
-      <D.Content @defaultClass="popup-menu-content">
-        <nav class="box menu" aria-label="generate options">
-          <ul class="menu-list">
-            <li class="action">
-              <LinkTo @route="issuers.generate-root" {{on "click" (fn this.onLinkClick D)}} data-test-generate-issuer="root">
-                Root
-              </LinkTo>
-            </li>
-            <li class="action">
-              <LinkTo
-                @route="issuers.generate-intermediate"
-                {{on "click" (fn this.onLinkClick D)}}
-                data-test-generate-issuer="intermediate"
-              >
-                Intermediate CSR
-              </LinkTo>
-            </li>
-          </ul>
-        </nav>
-      </D.Content>
-    </BasicDropdown>
-  </ToolbarActions>
-</Toolbar>
 
-{{#if this.model.issuersModel.length}}
 <Page::PkiIssuerList @issuers={{this.model.issuersModel}} @mountPoint={{this.mountPoint}} />
-{{else}}
-  <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-    <LinkTo @route="configuration.create">
-      Configure PKI
-    </LinkTo>
-  </EmptyState>
-{{/if}}

ui/lib/pki/addon/templates/keys/index.hbs

@@ -8,7 +8,7 @@
   }}
   @isEngine={{true}}
 />
-{{#if (or this.model.hasConfig this.model.keyModels)}}
+
 <Page::PkiKeyList
   @keyModels={{this.model.keyModels}}
   @mountPoint={{this.mountPoint}}
@@ -16,12 +16,5 @@
   @canGenerateKey={{this.model.keyModels.firstObject.canGenerateKey}}
   @canRead={{this.model.keyModels.firstObject.canRead}}
   @canEdit={{this.model.keyModels.firstObject.canEdit}}
+  @hasConfig={{this.model.hasConfig}}
 />
-{{else}}
-  <Toolbar />
-  <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-    <LinkTo @route="configuration.create">
-      Configure PKI
-    </LinkTo>
-  </EmptyState>
-{{/if}}

ui/lib/pki/addon/templates/roles/index.hbs

@@ -9,17 +9,16 @@
   @isEngine={{true}}
 />
 
+<PkiPaginatedList @listRoute="roles.index" @list={{this.model.roles}} @hasConfig={{this.model.hasConfig}}>
+  <:actions>
     {{#if this.model.hasConfig}}
-  <Toolbar>
-    <ToolbarActions>
       <ToolbarLink @type="add" @route="roles.create" data-test-pki-role-create-link>
         Create role
       </ToolbarLink>
-    </ToolbarActions>
-  </Toolbar>
-
-  {{#if this.model.roles.length}}
-    {{#each this.model.roles as |pkiRole|}}
+    {{/if}}
+  </:actions>
+  <:list as |roles|>
+    {{#each roles as |pkiRole|}}
       <LinkedBlock class="list-item-row" @params={{array "roles.role.details" pkiRole.id}} @linkPrefix={{this.mountPoint}}>
         <div class="level is-mobile">
           <div class="level-left">
@@ -53,7 +52,8 @@
         </div>
       </LinkedBlock>
     {{/each}}
-  {{else}}
+  </:list>
+  <:empty>
     <EmptyState @title="No roles yet">
       <div>
         <p>When created, roles will be listed here. Create a role to start generating certificates.</p>
@@ -64,12 +64,12 @@
         </div>
       </div>
     </EmptyState>
-  {{/if}}
-{{else}}
-  <Toolbar />
+  </:empty>
+  <:configure>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
       <LinkTo @route="configuration.create">
         Configure PKI
       </LinkTo>
     </EmptyState>
-{{/if}}
+  </:configure>
+</PkiPaginatedList>

ui/tests/acceptance/pki/pki-configuration-test.js

@@ -70,28 +70,50 @@ module('Acceptance | pki configuration test', function (hooks) {
       await authPage.login(this.pkiAdminToken);
       await visit(`/vault/secrets/${this.mountPath}/pki/configuration`);
       await click(SELECTORS.configuration.configureButton);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.mountPath}/pki/configuration/create`);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.mountPath}/pki/configuration/create`,
+        'goes to pki configure page'
+      );
       await click(SELECTORS.configuration.generateRootOption);
       await fillIn(SELECTORS.configuration.typeField, 'exported');
       await fillIn(SELECTORS.configuration.generateRootCommonNameField, 'issuer-common-0');
       await fillIn(SELECTORS.configuration.generateRootIssuerNameField, 'issuer-0');
       await click(SELECTORS.configuration.generateRootSave);
       await click(SELECTORS.configuration.doneButton);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.mountPath}/pki/overview`);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.mountPath}/pki/overview`,
+        'goes to overview page'
+      );
       await click(SELECTORS.configTab);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.mountPath}/pki/configuration`);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.mountPath}/pki/configuration`,
+        'goes to configuration page'
+      );
       await click(SELECTORS.configuration.issuerLink);
       assert.dom(SELECTORS.configuration.deleteAllIssuerModal).exists();
       await fillIn(SELECTORS.configuration.deleteAllIssuerInput, 'delete-all');
       await click(SELECTORS.configuration.deleteAllIssuerButton);
       await isSettled();
-      assert.dom(SELECTORS.configuration.deleteAllIssuerModal).doesNotExist();
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.mountPath}/pki/configuration`);
+      assert
+        .dom(SELECTORS.configuration.deleteAllIssuerModal)
+        .doesNotExist('delete all issuers modal closes');
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.mountPath}/pki/configuration`,
+        'is still on configuration page'
+      );
       await isSettled();
       await visit(`/vault/secrets/${this.mountPath}/pki/overview`);
       await waitUntil(() => currentURL() === `/vault/secrets/${this.mountPath}/pki/overview`);
       await isSettled();
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.mountPath}/pki/overview`);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.mountPath}/pki/overview`,
+        'goes to overview page'
+      );
       assert
         .dom(SELECTORS.emptyStateMessage)
         .hasText(

ui/tests/acceptance/pki/pki-engine-workflow-test.js

@@ -380,7 +380,7 @@ module('Acceptance | pki workflow', function (hooks) {
       await visit(`/vault/secrets/${this.mountPath}/pki/overview`);
       await click(SELECTORS.issuersTab);
       assert.dom('[data-test-serial-number="0"]').exists({ count: 1 }, 'displays serial number tag');
-      assert.dom('[data-test-common-name="0"]').exists({ count: 1 }, 'displays cert common name tag');
+      assert.dom('[data-test-common-name="0"]').doesNotExist('does not display cert common name tag');
     });
 
     test('details view renders correct number of info items', async function (assert) {

ui/tests/helpers/pki.js

@@ -15,3 +15,9 @@ export const SELECTORS = {
   revocationTime: '[data-test-row-value="Revocation time"]',
   serialNumber: '[data-test-row-value="Serial number"]',
 };
+
+export const STANDARD_META = {
+  total: 2,
+  currentPage: 1,
+  pageSize: 100,
+};

ui/tests/integration/components/pki-paginated-list-test.js

@@ -0,0 +1,158 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { setupEngine } from 'ember-engines/test-support';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { STANDARD_META } from 'vault/tests/helpers/pki';
+
+module('Integration | Component | pki-paginated-list', function (hooks) {
+  setupRenderingTest(hooks);
+  setupEngine(hooks, 'pki');
+
+  hooks.beforeEach(function () {
+    this.store = this.owner.lookup('service:store');
+    this.secretMountPath = this.owner.lookup('service:secret-mount-path');
+    this.secretMountPath.currentPath = 'pki-test';
+    this.store.pushPayload('pki/key', {
+      modelName: 'pki/key',
+      data: {
+        key_id: '724862ff-6438-bad0-b598-77a6c7f4e934',
+        key_type: 'ec',
+        key_name: 'test-key',
+      },
+    });
+    this.store.pushPayload('pki/key', {
+      modelName: 'pki/key',
+      data: {
+        key_id: '9fdddf12-9ce3-0268-6b34-dc1553b00175',
+        key_type: 'rsa',
+        key_name: 'another-key',
+      },
+    });
+    // toArray to mimic what happens in lazyPaginatedQuery
+    const keyModels = this.store.peekAll('pki/key').toArray();
+    keyModels.meta = STANDARD_META;
+    this.list = keyModels;
+    const emptyList = this.store.peekAll('pki/foo');
+    emptyList.meta = {
+      meta: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 100,
+      },
+    };
+    this.emptyList = emptyList;
+  });
+
+  test('it renders correctly with a list', async function (assert) {
+    this.set('hasConfig', null);
+    await render(
+      hbs`
+      <PkiPaginatedList @list={{this.list}} @hasConfig={{this.hasConfig}}>
+        <:list as |items|>
+          {{#each items as |item|}}
+            <div data-test-item={{item.keyId}}>{{item.keyName}}</div>
+          {{/each}}
+        </:list>
+        <:empty>
+          No items found
+        </:empty>
+        <:configure>
+          Not configured
+        </:configure>
+      </PkiPaginatedList>
+    `,
+      { owner: this.engine }
+    );
+
+    assert.dom(this.element).doesNotContainText('Not configured', 'defaults to has config if not boolean');
+    assert.dom(this.element).doesNotContainText('No items found', 'does not render empty state');
+    assert.dom('[data-test-item]').exists({ count: 2 }, 'lists the items');
+    assert.dom('[data-test-item="724862ff-6438-bad0-b598-77a6c7f4e934"]').hasText('test-key');
+    assert.dom('[data-test-item="9fdddf12-9ce3-0268-6b34-dc1553b00175"]').hasText('another-key');
+    assert.dom('[data-test-pagination]').exists('shows pagination');
+    await this.set('hasConfig', false);
+    assert.dom(this.element).doesNotContainText('No items found', 'does not render empty state');
+    assert.dom(this.element).containsText('Not configured', 'shows configuration prompt');
+    assert.dom('[data-test-item]').doesNotExist('Does not show list items when not configured');
+    assert.dom('[data-test-pagination]').doesNotExist('hides pagination');
+  });
+
+  test('it renders correctly with an empty list', async function (assert) {
+    this.set('hasConfig', true);
+    await render(
+      hbs`
+      <PkiPaginatedList @list={{this.emptyList}} @hasConfig={{this.hasConfig}}>
+        <:list>
+          List item
+        </:list>
+        <:empty>
+          No items found
+        </:empty>
+        <:configure>
+          Not configured
+        </:configure>
+      </PkiPaginatedList>
+    `,
+      { owner: this.engine }
+    );
+
+    assert.dom(this.element).doesNotContainText('list item', 'does not render list items if empty');
+    assert.dom(this.element).hasText('No items found', 'shows empty block');
+    assert.dom(this.element).doesNotContainText('Not configured', 'does not show configuration prompt');
+    assert.dom('[data-test-pagination]').doesNotExist('hides pagination');
+    await this.set('hasConfig', false);
+    assert.dom(this.element).doesNotContainText('list item', 'does not render list items if empty');
+    assert.dom(this.element).doesNotContainText('No items found', 'does not show empty state');
+    assert.dom(this.element).hasText('Not configured', 'shows configuration prompt');
+    assert.dom('[data-test-pagination]').doesNotExist('hides pagination');
+  });
+
+  test('it renders actions, description, pagination', async function (assert) {
+    this.set('hasConfig', true);
+    this.set('model', this.list);
+    await render(
+      hbs`
+      <PkiPaginatedList @list={{this.model}} @hasConfig={{this.hasConfig}}>
+        <:actions>
+          <div data-test-button>Action</div>
+        </:actions>
+        <:description>
+          Description goes here
+        </:description>
+        <:list>
+          List items
+        </:list>
+        <:empty>
+          No items found
+        </:empty>
+        <:configure>
+          Not configured
+        </:configure>
+      </PkiPaginatedList>
+    `,
+      { owner: this.engine }
+    );
+    assert
+      .dom('[data-test-button]')
+      .includesText('Action', 'Renders actions in toolbar when list and config');
+    assert
+      .dom(this.element)
+      .includesText('Description goes here', 'renders description when list and config');
+    assert.dom('[data-test-pagination]').exists('shows pagination when list and config');
+
+    this.set('model', this.emptyList);
+    assert
+      .dom('[data-test-button]')
+      .hasText('Action', 'Renders actions in toolbar when empty list and config');
+    assert
+      .dom(this.element)
+      .doesNotIncludeText('Description goes here', 'hides description when empty list and config');
+    assert.dom('[data-test-pagination]').doesNotExist('hides pagination when empty list and config');
+
+    this.set('hasConfig', false);
+    assert.dom('[data-test-button]').hasText('Action', 'Renders actions in toolbar when no config');
+    assert.dom(this.element).doesNotIncludeText('Description goes here', 'hides description when no config');
+    assert.dom('[data-test-pagination]').doesNotExist('hides pagination when no config');
+  });
+});

ui/tests/integration/components/pki/page/pki-issuer-list-test.js

@@ -4,6 +4,7 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupEngine } from 'ember-engines/test-support';
 import { setupRenderingTest } from 'vault/tests/helpers';
+import { STANDARD_META } from 'vault/tests/helpers/pki';
 
 /**
  * this test is for the page component only. A separate test is written for the form rendered
@@ -37,7 +38,9 @@ module('Integration | Component | page/pki-issuer-list', function (hooks) {
       },
       serialNumber: '74:2d:ed:f2:c4:3b:76:5e:6e:0d:f1:6a:c0:8b:6f:e3:3c:62:f9:03',
     });
-    this.issuers = this.store.peekAll('pki/issuer');
+    const issuers = this.store.peekAll('pki/issuer');
+    issuers.meta = STANDARD_META;
+    this.issuers = issuers;
 
     await render(hbs`<Page::PkiIssuerList @issuers={{this.issuers}} @mountPoint={{this.engineId}} />`, {
       owner: this.engine,
@@ -65,8 +68,9 @@ module('Integration | Component | page/pki-issuer-list', function (hooks) {
       issuerName: 'issuer-1',
       isDefault: true,
     });
-    this.issuers = this.store.peekAll('pki/issuer');
-
+    const issuers = this.store.peekAll('pki/issuer');
+    issuers.meta = STANDARD_META;
+    this.issuers = issuers;
     await render(hbs`<Page::PkiIssuerList @issuers={{this.issuers}} @mountPoint={{this.engineId}} />`, {
       owner: this.engine,
     });

ui/tests/integration/components/pki/page/pki-key-list-test.js

@@ -10,6 +10,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupEngine } from 'ember-engines/test-support';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { SELECTORS } from 'vault/tests/helpers/pki/page/pki-keys';
+import { STANDARD_META } from 'vault/tests/helpers/pki';
 
 module('Integration | Component | pki key list page', function (hooks) {
   setupRenderingTest(hooks);
@@ -32,12 +33,20 @@ module('Integration | Component | pki key list page', function (hooks) {
       key_type: 'rsa',
       key_name: 'another-key',
     });
-    this.keyModels = this.store.peekAll('pki/key');
+    const keyModels = this.store.peekAll('pki/key');
+    keyModels.meta = STANDARD_META;
+    this.keyModels = keyModels;
   });
 
   test('it renders empty state when no keys exist', async function (assert) {
     assert.expect(3);
-    this.keyModels = [];
+    this.keyModels = {
+      meta: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 100,
+      },
+    };
     await render(
       hbs`
         <Page::PkiKeyList

ui/tests/unit/services/store-test.js

@@ -90,7 +90,15 @@ module('Unit | Service | store', function (hooks) {
       store.constructResponse('data', { id: 1, pageFilter: 't', page: 1, size: 3, responsePath: 'data' }),
       {
         data: ['two', 'three', 'fifteen'],
-        meta: { currentPage: 1, lastPage: 2, nextPage: 2, prevPage: 1, total: 5, filteredTotal: 4 },
+        meta: {
+          currentPage: 1,
+          lastPage: 2,
+          nextPage: 2,
+          prevPage: 1,
+          total: 5,
+          filteredTotal: 4,
+          pageSize: 3,
+        },
       },
       'it returns filtered results'
     );
@@ -132,6 +140,7 @@ module('Unit | Service | store', function (hooks) {
         lastPage: 4,
         total: 7,
         filteredTotal: 7,
+        pageSize: 2,
       },
       'returns correct meta values'
     );