From 1dfd57e26d291f1aee4537ed0366bf91b4e99122 Mon Sep 17 00:00:00 2001 From: Kianna <30884335+kiannaquach@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:12:20 -0700 Subject: [PATCH] UI: [VAULT-19560] Add empty states and tests (#22690) --- .../dashboard/quick-actions-card.js | 4 +- .../dashboard/secrets-engines-card.js | 8 +- .../dashboard/quick-actions-card.hbs | 133 ++++++++------- .../dashboard/secrets-engines-card.hbs | 156 ++++++++++-------- .../dashboard/dashboard-selectors.js | 1 + .../components/dashboard/overview-test.js | 26 +++ 6 files changed, 192 insertions(+), 136 deletions(-) diff --git a/ui/app/components/dashboard/quick-actions-card.js b/ui/app/components/dashboard/quick-actions-card.js index 64f454b70b..e990ecd4fb 100644 --- a/ui/app/components/dashboard/quick-actions-card.js +++ b/ui/app/components/dashboard/quick-actions-card.js @@ -101,13 +101,13 @@ export default class DashboardQuickActionsCard extends Component { } get filteredSecretEngines() { - return this.args.secretsEngines.filter( + return this.args.secretsEngines?.filter( (engine) => (engine.type === 'kv' && engine.version == 2) || QUICK_ACTION_ENGINES.includes(engine.type) ); } get mountOptions() { - return this.filteredSecretEngines.map((engine) => { + return this.filteredSecretEngines?.map((engine) => { const { id, type } = engine; return { name: id, type, id }; diff --git a/ui/app/components/dashboard/secrets-engines-card.js b/ui/app/components/dashboard/secrets-engines-card.js index 820fe68eda..b7343e5be3 100644 --- a/ui/app/components/dashboard/secrets-engines-card.js +++ b/ui/app/components/dashboard/secrets-engines-card.js @@ -18,14 +18,10 @@ import Component from '@glimmer/component'; export default class DashboardSecretsEnginesCard extends Component { get filteredSecretsEngines() { - const filteredEngines = this.args.secretsEngines.filter( - (secretEngine) => secretEngine.shouldIncludeInList - ); - - return filteredEngines; + return this.args.secretsEngines?.filter((secretEngine) => secretEngine.shouldIncludeInList); } get firstFiveSecretsEngines() { - return this.filteredSecretsEngines.slice(0, 5); + return this.filteredSecretsEngines?.slice(0, 5); } } diff --git a/ui/app/templates/components/dashboard/quick-actions-card.hbs b/ui/app/templates/components/dashboard/quick-actions-card.hbs index 3d5f1c8a11..e820f90af4 100644 --- a/ui/app/templates/components/dashboard/quick-actions-card.hbs +++ b/ui/app/templates/components/dashboard/quick-actions-card.hbs @@ -1,74 +1,87 @@

Quick actions

-
-

Secrets engines

-

Supported engines include databases, KV version - 2, and PKI.

- -
- - {{#if this.selectedEngine}} -

Action

- -
- -
+ {{#if this.searchSelectParams.model}} +

{{this.searchSelectParams.title}}

+ + + +
+ +
+ {{/if}} + {{else}} + {{/if}} {{else}} + + @title="Welcome to quick actions" + @message="Access secret engine actions easily. Enable a compatible secret engine (such as database, KV version 2, or PKI) to get started." + data-test-empty-state="quick-actions" + > +
+ Enable a secret engine +
+ {{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/dashboard/secrets-engines-card.hbs b/ui/app/templates/components/dashboard/secrets-engines-card.hbs index 9febbba345..c59c09a042 100644 --- a/ui/app/templates/components/dashboard/secrets-engines-card.hbs +++ b/ui/app/templates/components/dashboard/secrets-engines-card.hbs @@ -1,80 +1,100 @@ - +

Secrets engines

- - Details - + {{#if this.filteredSecretsEngines}} + + Details + + {{/if}}
- - <:body as |B|> - {{#each this.firstFiveSecretsEngines as |backend|}} - - -
-
- {{#if backend.icon}} - - - - - -
- {{or backend.engineType backend.path}} -
- - - {{/if}} - {{#if backend.path}} - {{#if backend.isSupportedBackend}} - - {{backend.path}} - - {{else}} - {{backend.path}} + {{#if this.filteredSecretsEngines}} + + <:body as |B|> + {{#each this.firstFiveSecretsEngines as |backend|}} + + +
+
+ {{#if backend.icon}} + + + + + +
+ {{or backend.engineType backend.path}} +
+ + {{/if}} + {{#if backend.path}} + {{#if backend.isSupportedBackend}} + + {{backend.path}} + + {{else}} + {{backend.path}} + {{/if}} + {{/if}} +
+ {{#if backend.accessor}} + + {{backend.accessor}} + + {{/if}} + {{#if backend.description}} +
+ {{backend.description}} +
{{/if}}
- {{#if backend.accessor}} - - {{backend.accessor}} - + {{#if backend.isSupportedBackend}} + + View + {{/if}} - {{#if backend.description}} -
- {{backend.description}} -
- {{/if}} -
- {{#if backend.isSupportedBackend}} - - View - - {{/if}} - - - {{/each}} - - + + + {{/each}} + + - {{#if (gt this.filteredSecretsEngines.length 5)}} -

- Showing 5 out of - {{this.filteredSecretsEngines.length}} - secret engines. Navigate to - details - to view more. -

+ {{#if (gt this.filteredSecretsEngines.length 5)}} +

+ Showing 5 out of + {{this.filteredSecretsEngines.length}} + secret engines. Navigate to + details + to view more. +

+ {{/if}} + + {{else}} + +
+ Enable a secret engine +
+ {{/if}} \ No newline at end of file diff --git a/ui/tests/helpers/components/dashboard/dashboard-selectors.js b/ui/tests/helpers/components/dashboard/dashboard-selectors.js index 2d9e738cb9..582f18418e 100644 --- a/ui/tests/helpers/components/dashboard/dashboard-selectors.js +++ b/ui/tests/helpers/components/dashboard/dashboard-selectors.js @@ -1,3 +1,4 @@ export const SELECTORS = { cardName: (name) => `[data-test-card="${name}"]`, + emptyState: (name) => `[data-test-empty-state="${name}"]`, }; diff --git a/ui/tests/integration/components/dashboard/overview-test.js b/ui/tests/integration/components/dashboard/overview-test.js index 4e526c5b1d..97f415d984 100644 --- a/ui/tests/integration/components/dashboard/overview-test.js +++ b/ui/tests/integration/components/dashboard/overview-test.js @@ -25,6 +25,7 @@ module('Integration | Component | dashboard/overview', function (hooks) { performance: { clusterId: 'abc-1', state: 'running', + isPrimary: true, }, }; this.store.pushPayload('secret-engine', { @@ -61,6 +62,29 @@ module('Integration | Component | dashboard/overview', function (hooks) { this.refreshModel = () => {}; }); + test('it should show dashboard empty states', async function (assert) { + this.version = this.owner.lookup('service:version'); + this.version.version = '1.13.1'; + this.isRootNamespace = true; + await render( + hbs` + + ` + ); + assert.dom('[data-test-dashboard-version-header]').exists(); + assert.dom(SELECTORS.cardName('secrets-engines')).exists(); + assert.dom(SELECTORS.emptyState('secrets-engines')).exists(); + assert.dom(SELECTORS.cardName('learn-more')).exists(); + assert.dom(SELECTORS.cardName('quick-actions')).exists(); + assert.dom(SELECTORS.emptyState('quick-actions')).exists(); + assert.dom(SELECTORS.cardName('configuration-details')).doesNotExist(); + assert.dom(SELECTORS.cardName('replication')).doesNotExist(); + assert.dom(SELECTORS.cardName('client-count')).doesNotExist(); + }); + test('it should hide client count and replication card on community', async function (assert) { this.version = this.owner.lookup('service:version'); this.version.version = '1.13.1'; @@ -135,6 +159,7 @@ module('Integration | Component | dashboard/overview', function (hooks) { ); assert.dom('[data-test-dashboard-version-header]').exists(); + assert.dom('[data-test-badge-namespace]').exists(); assert.dom(SELECTORS.cardName('secrets-engines')).exists(); assert.dom(SELECTORS.cardName('learn-more')).exists(); assert.dom(SELECTORS.cardName('quick-actions')).exists(); @@ -166,6 +191,7 @@ module('Integration | Component | dashboard/overview', function (hooks) { ); assert.dom('[data-test-dashboard-version-header]').exists(); + assert.dom('[data-test-badge-namespace]').exists(); assert.dom(SELECTORS.cardName('secrets-engines')).exists(); assert.dom(SELECTORS.cardName('learn-more')).exists(); assert.dom(SELECTORS.cardName('quick-actions')).exists();