UI: [VAULT-19160 VAULT-19159] Dashboard card order, minor cleanup tasks, and update page header

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

@@ -46,7 +46,7 @@ export default class DashboardQuickActionsCard extends Component {
     switch (this.selectedAction) {
       case 'Find KV secrets':
         return {
-          title: 'Secret Path',
+          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',

ui/app/styles/components/secrets-engines-card.scss

@@ -0,0 +1,3 @@
+.secrets-engines-card {
+  min-height: 480px;
+}

ui/app/styles/core.scss

@@ -103,6 +103,7 @@
 @import './components/search-select';
 @import './components/selectable-card';
 @import './components/selectable-card-container';
+@import './components/secrets-engines-card';
 // action-block extends selectable-card
 @import './components/action-block';
 @import './components/shamir-modal-flow';

ui/app/styles/helper-classes/flexbox-and-grid.scss

@@ -24,6 +24,10 @@
   gap: $spacing-m;
 }
 
+.has-gap-l {
+  gap: $spacing-l;
+}
+
 // Alignment of the items
 .is-flex-v-centered {
   display: flex;
@@ -72,13 +76,17 @@
   flex-basis: 100%;
 }
 
-.is-flex-1 {
+.is-flex-grow-1 {
   flex-grow: 1;
   &.basis-0 {
     flex-basis: 0;
   }
 }
 
+.is-flex-1 {
+  flex: 1;
+}
+
 .is-no-flex-grow {
   flex-grow: 0 !important;
 }
@@ -101,6 +109,12 @@
   }
 }
 
+@include until($mobile) {
+  .is-flex-row {
+    flex-flow: column wrap;
+  }
+}
+
 /* CSS GRID */
 .is-grid {
   display: grid;

ui/app/styles/helper-classes/spacing.scss

@@ -95,6 +95,15 @@
   margin-bottom: -$spacing-m;
 }
 
+.has-top-margin-xxs {
+  margin: $spacing-xxs 0;
+}
+.has-right-margin-xxs {
+  margin-right: $spacing-xxs;
+}
+.has-left-margin-xxs {
+  margin-left: $spacing-xxs;
+}
 .has-bottom-margin-xxs {
   margin-bottom: $spacing-xxs !important;
 }

ui/app/templates/components/auth-button-google.hbs

@@ -69,7 +69,7 @@
     </g>
   </svg>
 
-  <div class="is-flex-1 text">
+  <div class="is-flex-grow-1 text">
     Sign in with Google
   </div>
 </div>

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

@@ -1,60 +1,60 @@
-<div class="is-flex-between">
-  <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
-    Client count
-  </h3>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m">
+  <div class="is-flex-between">
+    <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
+      Client count
+    </h3>
 
-  <div>
-    <Hds::Link::Inline @route="vault.cluster.clients.dashboard" class="is-no-underline">Details</Hds::Link::Inline>
+    <LinkTo @route="vault.cluster.clients.dashboard" class="is-no-underline">Details</LinkTo>
   </div>
-</div>
 
-<hr class="has-background-gray-100" />
+  <hr class="has-background-gray-100" />
 
-{{#if this.noActivityData}}
-  {{! This will likely not be show since the client activity api was changed to always return data. In the past it
+  {{#if this.noActivityData}}
+    {{! This will likely not be show since the client activity api was changed to always return data. In the past it
   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}}
-      <StatText
-        @label="Total"
-        @value={{this.activityData.total.clients}}
-        @size="l"
-        @subText="The number of clients in this billing period ({{date-format
-          this.licenseStartTime
-          'MMM yyyy'
-        }} - {{date-format this.updatedAt 'MMM yyyy'}})."
-        data-test-stat-text="total-clients"
-      />
-      <StatText
-        @label="New"
-        @value={{this.currentMonthActivityTotalCount}}
-        @size="l"
-        @subText="The number of clients new to Vault in the current month."
-        data-test-stat-text="new-clients"
-      />
-    {{/if}}
-  </div>
-
-  {{#unless this.fetchClientActivity.isRunning}}
-    <div class="has-top-margin-l is-flex-center">
-      <Hds::Button
-        @text="Refresh"
-        @isIconOnly={{true}}
-        @color="tertiary"
-        @icon="sync"
-        disabled={{this.fetchClientActivity.isRunning}}
-        class="has-padding-xxs"
-        {{on "click" (perform this.fetchClientActivity)}}
-        data-test-refresh
-      />
-      <small class="has-left-margin-xs has-text-grey">
-        Updated
-        {{date-format this.updatedAt "MMM dd, yyyy HH:mm:SS"}}
-      </small>
+    <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}}
+        <StatText
+          @label="Total"
+          @value={{this.activityData.total.clients}}
+          @size="l"
+          @subText="The number of clients in this billing period ({{date-format
+            this.licenseStartTime
+            'MMM yyyy'
+          }} - {{date-format this.updatedAt 'MMM yyyy'}})."
+          data-test-stat-text="total-clients"
+        />
+        <StatText
+          @label="New"
+          @value={{this.currentMonthActivityTotalCount}}
+          @size="l"
+          @subText="The number of clients new to Vault in the current month."
+          data-test-stat-text="new-clients"
+        />
+      {{/if}}
     </div>
-  {{/unless}}
-{{/if}}
+
+    {{#unless this.fetchClientActivity.isRunning}}
+      <div class="has-top-margin-l is-flex-center">
+        <Hds::Button
+          @text="Refresh"
+          @isIconOnly={{true}}
+          @color="tertiary"
+          @icon="sync"
+          disabled={{this.fetchClientActivity.isRunning}}
+          class="has-padding-xxs"
+          {{on "click" (perform this.fetchClientActivity)}}
+          data-test-refresh
+        />
+        <small class="has-left-margin-xs has-text-grey">
+          Updated
+          {{date-format this.updatedAt "MMM dd, yyyy HH:mm:SS"}}
+        </small>
+      </div>
+    {{/unless}}
+  {{/if}}
+</Hds::Card::Container>

ui/app/templates/components/dashboard/learn-more-card.hbs

@@ -1,15 +1,17 @@
-<h3 class="title is-4 has-bottom-margin-xxs" data-test-learn-more-title>Learn more</h3>
-<div class="sub-text" data-test-learn-more-subtext>
-  Explore the features of Vault and learn advance practices with the following tutorials and documentation.
-</div>
-<div class="has-top-margin-xs" data-test-learn-more-links>
-  {{#each this.learnMoreLinks as |learnMoreLink|}}
-    <Hds::Link::Standalone
-      @icon={{learnMoreLink.icon}}
-      @text={{learnMoreLink.title}}
-      @href={{learnMoreLink.link}}
-      class="has-bottom-margin-xs"
-      data-test-learn-more-link={{learnMoreLink.title}}
-    />
-  {{/each}}
-</div>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+  <h3 class="title is-4 has-bottom-margin-xxs" data-test-learn-more-title>Learn more</h3>
+  <div class="sub-text" data-test-learn-more-subtext>
+    Explore the features of Vault and learn advance practices with the following tutorials and documentation.
+  </div>
+  <div class="has-top-margin-xs" data-test-learn-more-links>
+    {{#each this.learnMoreLinks as |learnMoreLink|}}
+      <Hds::Link::Standalone
+        @icon={{learnMoreLink.icon}}
+        @text={{learnMoreLink.title}}
+        @href={{learnMoreLink.link}}
+        class="has-bottom-margin-xs"
+        data-test-learn-more-link={{learnMoreLink.title}}
+      />
+    {{/each}}
+  </div>
+</Hds::Card::Container>

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

@@ -1,63 +1,65 @@
-<h3 class="title is-4">Quick actions</h3>
-
-<div class="has-bottom-margin-m">
-  <h4 class="title is-6">Secrets engines</h4>
-  <SearchSelect
-    @id="secrets-engines-select"
-    @options={{this.mountOptions}}
-    @selectLimit="1"
-    @disallowNewItems={{true}}
-    @fallbackComponent="input-search"
-    @onChange={{this.handleSearchEngineSelect}}
-    @placeholder="Type to select a mount"
-    @displayInherit={{true}}
-    @shouldRenderName={{true}}
-    @passObject={{true}}
-    @objectKeys={{array "type"}}
-    class="is-marginless"
-    data-test-secrets-engines-select
-  />
-</div>
-
-{{#if this.selectedEngine}}
-  <h4 class="title is-6">Action</h4>
-  <Select
-    @name="action-select"
-    @options={{this.actionOptions}}
-    @isFullwidth={{true}}
-    @selectedValue={{this.selectedAction}}
-    @onChange={{this.setSelectedAction}}
-    @noDefault={{true}}
-  />
-
-  {{#if this.searchSelectParams.model}}
-    <h4 class="title is-6" data-test-search-select-params-title>{{this.searchSelectParams.title}}</h4>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+  <h3 class="title is-4">Quick actions</h3>
 
+  <div class="has-bottom-margin-m">
+    <h4 class="title is-6">Secrets engines</h4>
     <SearchSelect
-      class="is-flex-1"
+      @id="secrets-engines-select"
+      @options={{this.mountOptions}}
       @selectLimit="1"
-      @models={{array this.searchSelectParams.model}}
-      @backend={{this.mountPath}}
-      @placeholder={{this.searchSelectParams.placeholder}}
       @disallowNewItems={{true}}
-      @onChange={{this.handleActionSelect}}
       @fallbackComponent="input-search"
-      @nameKey={{this.searchSelectParams.nameKey}}
-      @disabled={{not this.searchSelectParams.model}}
+      @onChange={{this.handleSearchEngineSelect}}
+      @placeholder="Type to select a mount"
+      @displayInherit={{true}}
+      @shouldRenderName={{true}}
+      @passObject={{true}}
+      @objectKeys={{array "type"}}
+      class="is-marginless"
+      data-test-secrets-engines-select
     />
+  </div>
+
+  {{#if this.selectedEngine}}
+    <h4 class="title is-6">Action</h4>
+    <Select
+      @name="action-select"
+      @options={{this.actionOptions}}
+      @isFullwidth={{true}}
+      @selectedValue={{this.selectedAction}}
+      @onChange={{this.setSelectedAction}}
+      @noDefault={{true}}
+    />
+
+    {{#if this.searchSelectParams.model}}
+      <h4 class="title is-6" data-test-search-select-params-title>{{this.searchSelectParams.title}}</h4>
+
+      <SearchSelect
+        class="is-flex-grow-1"
+        @selectLimit="1"
+        @models={{array this.searchSelectParams.model}}
+        @backend={{this.mountPath}}
+        @placeholder={{this.searchSelectParams.placeholder}}
+        @disallowNewItems={{true}}
+        @onChange={{this.handleActionSelect}}
+        @fallbackComponent="input-search"
+        @nameKey={{this.searchSelectParams.nameKey}}
+        @disabled={{not this.searchSelectParams.model}}
+      />
 
-    <div>
-      <button
-        type="button"
-        class="button is-primary has-top-margin-m"
-        disabled={{(not (and this.selectedAction this.selectedEngine this.paramValue))}}
-        {{on "click" this.navigateToPage}}
-        data-test-button={{this.searchSelectParams.buttonText}}
-      >
-        {{this.searchSelectParams.buttonText}}
-      </button>
-    </div>
+      <div>
+        <button
+          type="button"
+          class="button is-primary has-top-margin-m"
+          disabled={{(not (and this.selectedAction this.selectedEngine this.paramValue))}}
+          {{on "click" this.navigateToPage}}
+          data-test-button={{this.searchSelectParams.buttonText}}
+        >
+          {{this.searchSelectParams.buttonText}}
+        </button>
+      </div>
+    {{/if}}
+  {{else}}
+    <EmptyState @title="No mount selected" @message="Select a mount above to get started." />
   {{/if}}
-{{else}}
-  <EmptyState @title="No mount selected" @message="Select a mount above to get started." />
-{{/if}}
+</Hds::Card::Container>