UI/Custom empty state messages for transit and transform (hashicorp#1…

…3090) * customizes empty state messages for transit and transform * adds changelog * clarifies key name
qk4l · Feb 4, 2022 · 4aae3f4 · 4aae3f4
1 parent 59db856
commit 4aae3f4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/changelog/13090.txt b/changelog/13090.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: customizes empty state messages for transit and transform
+```
diff --git a/ui/app/helpers/options-for-backend.js b/ui/app/helpers/options-for-backend.js
@@ -87,6 +87,7 @@ const SECRET_BACKENDS = {
     displayName: 'Transformation',
     navigateTree: false,
     listItemPartial: 'secret-list/transform-list-item',
+    firstStep: 'create a transformation and a role',
     tabs: [
       {
         name: 'transformations',
@@ -136,6 +137,7 @@ const SECRET_BACKENDS = {
     navigateTree: false,
     editComponent: 'transit-edit',
     listItemPartial: 'secret-list/item',
+    firstStep: 'create an encryption key',
   },
 };
 

diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
@@ -4,8 +4,8 @@ import { fragment } from 'ember-data-model-fragments/attributes';
 import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 import { validator, buildValidations } from 'ember-cp-validations';
 
-//identity will be managed separately and the inclusion
-//of the system backend is an implementation detail
+// identity will be managed separately and the inclusion
+// of the system backend is an implementation detail
 const LIST_EXCLUDED_BACKENDS = ['system', 'identity'];
 
 const Validations = buildValidations({

diff --git a/ui/app/routes/vault/cluster/secrets/backend/overview.js b/ui/app/routes/vault/cluster/secrets/backend/overview.js
@@ -68,7 +68,7 @@ export default Route.extend({
       if (noConnectionCapabilities) {
         return 'You cannot yet generate credentials.  Ask your administrator if you think you should have access.';
       } else {
-        return 'You can connect and external database to Vault.  We recommend that you create a user for Vault rather than using the database root user.';
+        return 'You can connect an external database to Vault.  We recommend that you create a user for Vault rather than using the database root user.';
       }
     };
     controller.set('showEmptyState', showEmptyState);

diff --git a/ui/app/templates/vault/cluster/secrets/backend/list.hbs b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
@@ -113,14 +113,25 @@
       {{/if}}
     {{else}}
       {{#if (eq baseKey.id '')}}
-        <EmptyState
-          @title="No {{pluralize options.item}} in this backend"
-          @message="Secrets in this backend will be listed here. Add a secret to get started."
-        >
-          <SecretLink @mode="create" @secret="" @queryParams={{query-params initialKey=(or filter baseKey.id) itemType=tab}} @class="link">
-            {{options.create}}
-          </SecretLink>
-        </EmptyState>
+        {{#if (and options.firstStep (not tab))}}
+          <EmptyState
+            @title="Get started with {{capitalize backendType}}"
+            @message="To use {{backendType}}, you'll need to {{options.firstStep}}."
+          >
+            <SecretLink @mode="create" @secret="" @queryParams={{query-params initialKey=(or filter baseKey.id) itemType=tab}} @class="link">
+              {{options.create}}
+            </SecretLink>
+          </EmptyState>    
+        {{else}} 
+          <EmptyState
+            @title="No {{pluralize options.item}} in this backend"
+            @message="Secrets in this backend will be listed here. Add a secret to get started."
+          >
+            <SecretLink @mode="create" @secret="" @queryParams={{query-params initialKey=(or filter baseKey.id) itemType=tab}} @class="link">
+              {{options.create}}
+            </SecretLink>
+          </EmptyState>
+        {{/if}}
       {{else}}
         {{#if filterIsFolder}}
           <EmptyState