UI: dashboard acceptance tests for quick actions, client count, replication

ui/app/components/dashboard/client-count-card.js

@@ -45,7 +45,8 @@ export default class DashboardClientCountCard extends Component {
 
   @task
   @waitFor
-  *fetchClientActivity() {
+  *fetchClientActivity(e) {
+    if (e) e.preventDefault();
     this.updatedAt = timestamp.now().toISOString();
     // only make the network request if we have a start_time
     if (!this.licenseStartTime) return {};

ui/app/components/dashboard/quick-actions-card.js

@@ -26,12 +26,11 @@ export default class DashboardQuickActionsCard extends Component {
 
   @tracked selectedEngine;
   @tracked selectedAction;
-  @tracked mountPath;
   @tracked paramValue;
 
   get actionOptions() {
-    switch (this.selectedEngine) {
-      case 'kv':
+    switch (this.selectedEngine.type) {
+      case `kv version ${this.selectedEngine?.version}`:
         return ['Find KV secrets'];
       case 'database':
         return ['Generate credentials for database'];
@@ -49,8 +48,9 @@ export default class DashboardQuickActionsCard extends Component {
           title: 'Secret path',
           subText: 'Path of the secret you want to read, including the mount. E.g., secret/data/foo.',
           buttonText: 'Read secrets',
-          model: 'secret-v2',
-          route: 'vault.cluster.secrets.backends.show',
+          // check kv version to figure out which model to use
+          model: this.selectedEngine.version === 2 ? 'secret-v2' : 'secret',
+          route: 'vault.cluster.secrets.backend.show',
         };
       case 'Generate credentials for database':
         return {
@@ -99,15 +99,16 @@ export default class DashboardQuickActionsCard extends Component {
 
   get mountOptions() {
     return this.filteredSecretEngines.map((engine) => {
-      const { id, type } = engine;
-      return { name: id, type, id };
+      let { id, type, version } = engine;
+      if (type === 'kv') type = `kv version ${version}`;
+
+      return { name: id, type, id, version };
     });
   }
 
   @action
   handleSearchEngineSelect([selection]) {
-    this.selectedEngine = selection?.type;
-    this.mountPath = selection?.id;
+    this.selectedEngine = selection;
     // reset tracked properties
     this.selectedAction = null;
     this.paramValue = null;
@@ -134,13 +135,13 @@ export default class DashboardQuickActionsCard extends Component {
 
     // kv has a special use case where if the paramValue ends in a '/' you should
     // link to different route
-    if (this.selectedEngine === 'kv') {
+    if (this.selectedEngine.type === 'kv') {
       searchSelectParamRoute =
         this.paramValue && this.paramValue[this.paramValue?.length - 1] === '/'
           ? 'vault.cluster.secrets.backend.list'
           : 'vault.cluster.secrets.backend.show';
     }
 
-    this.router.transitionTo(searchSelectParamRoute, this.mountPath, this.paramValue);
+    this.router.transitionTo(searchSelectParamRoute, this.selectedEngine.id, this.paramValue);
   }
 }

ui/app/components/dashboard/vault-configuration-details-card.js

@@ -18,7 +18,7 @@ import Component from '@glimmer/component';
 
 export default class DashboardSecretsEnginesCard extends Component {
   get tlsDisabled() {
-    const tlsDisableConfig = this.args.vaultConfiguration.listeners.find((listener) => {
+    const tlsDisableConfig = this.args.vaultConfiguration?.listeners.find((listener) => {
       if (listener.config && listener.config.tls_disable) return listener.config.tls_disable;
     });
 

ui/app/controllers/vault/cluster/dashboard.js

@@ -12,7 +12,8 @@ export default class DashboardController extends Controller {
   @tracked replicationUpdatedAt = timestamp.now().toISOString();
 
   @action
-  refreshModel() {
+  refreshModel(e) {
+    if (e) e.preventDefault();
     this.replicationUpdatedAt = timestamp.now().toISOString();
     this.send('refreshRoute');
   }

ui/app/templates/components/dashboard/client-count-card.hbs

@@ -1,4 +1,4 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m">
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-client-count-card>
   <div class="is-flex-between">
     <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
       Client count
@@ -14,10 +14,10 @@
   would return no activity data. Adding this empty state here to match the current client count behavior }}
     <Clients::NoData @config={{this.clientConfig}} />
   {{else}}
-    <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
-      {{#if this.fetchClientActivity.isRunning}}
-        <VaultLogoSpinner />
-      {{else}}
+    {{#if this.fetchClientActivity.isRunning}}
+      <VaultLogoSpinner />
+    {{else}}
+      <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
         <StatText
           @label="Total"
           @value={{this.activityData.total.clients}}
@@ -35,10 +35,8 @@
           @subText="The number of clients new to Vault in the current month."
           data-test-stat-text="new-clients"
         />
-      {{/if}}
-    </div>
+      </div>
 
-    {{#unless this.fetchClientActivity.isRunning}}
       <div class="has-top-margin-l is-flex-center">
         <Hds::Button
           @text="Refresh"
@@ -55,6 +53,6 @@
           {{date-format this.updatedAt "MMM dd, yyyy HH:mm:SS"}}
         </small>
       </div>
-    {{/unless}}
+    {{/if}}
   {{/if}}
 </Hds::Card::Container>

ui/app/templates/components/dashboard/quick-actions-card.hbs

@@ -14,7 +14,7 @@
       @displayInherit={{true}}
       @shouldRenderName={{true}}
       @passObject={{true}}
-      @objectKeys={{array "type"}}
+      @objectKeys={{array "type" "version"}}
       class="is-marginless"
       data-test-secrets-engines-select
     />
@@ -38,13 +38,14 @@
         class="is-flex-grow-1"
         @selectLimit="1"
         @models={{array this.searchSelectParams.model}}
-        @backend={{this.mountPath}}
+        @backend={{this.selectedEngine.id}}
         @placeholder={{this.searchSelectParams.placeholder}}
         @disallowNewItems={{true}}
         @onChange={{this.handleActionSelect}}
         @fallbackComponent="input-search"
         @nameKey={{this.searchSelectParams.nameKey}}
         @disabled={{not this.searchSelectParams.model}}
+        data-test-param-select
       />
 
       <div>
@@ -60,6 +61,10 @@
       </div>
     {{/if}}
   {{else}}
-    <EmptyState @title="No mount selected" @message="Select a mount above to get started." />
+    <EmptyState
+      @title="No mount selected"
+      @message="Select a mount above to get started."
+      data-test-no-mount-selected-empty
+    />
   {{/if}}
 </Hds::Card::Container>

ui/app/templates/components/dashboard/replication-card.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m">
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-replication-card>
 
   <div class="is-flex-between">
     <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>

ui/app/templates/components/dashboard/secrets-engines-card.hbs

@@ -60,13 +60,15 @@
       {{/each}}
     </:body>
   </Hds::Table>
-  <div class="is-flex-end has-top-margin-s">
-    <Hds::Link::Standalone
-      class="has-text-weight-semibold is-no-underline"
-      @icon="arrow-right"
-      @iconPosition="trailing"
-      @text="Show all"
-      @route="vault.cluster.secrets.backends"
-    />
-  </div>
+  {{#if (gt this.filteredSecretsEngines.length 4)}}
+    <div class="is-flex-end has-top-margin-s" data-test-secrets-engines-card-show-all>
+      <Hds::Link::Standalone
+        class="has-text-weight-semibold is-no-underline"
+        @icon="arrow-right"
+        @iconPosition="trailing"
+        @text="Show all"
+        @route="vault.cluster.secrets.backends"
+      />
+    </div>
+  {{/if}}
 </Hds::Card::Container>

ui/app/templates/components/dashboard/survey-link-text.hbs

@@ -2,7 +2,8 @@
   <small>
     Don't see what you're looking for on this page? Let us know via our
     <Hds::Link::Inline @icon="external-link" @href="https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_1SNUsZLdWHpfw0e">
-      feedback form.
+      feedback form
     </Hds::Link::Inline>
+    .
   </small>
 </div>

ui/app/templates/vault/cluster/dashboard.hbs

@@ -2,7 +2,7 @@
 
 <div class="has-bottom-margin-xl">
   <div class="is-flex-row has-gap-l">
-    {{#if @model.version.isEnterprise}}
+    {{#if (and @model.version.isEnterprise (or @model.license @model.isRootNamespace))}}
 
       <div class="is-flex-column is-flex-1 has-gap-l">
         {{#if @model.license}}