From 7f67aa28bf2b197a3d6aaa1dc9d7e8eae3bd7b14 Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Thu, 11 Nov 2021 16:53:53 -0800
Subject: [PATCH] UI/Custom empty state messages for transit and transform
 (#13090)

* customizes empty state messages for transit and transform

* adds changelog

* clarifies key name
---
 changelog/13090.txt                           |  3 +++
 ui/app/helpers/options-for-backend.js         |  2 ++
 ui/app/models/secret-engine.js                |  4 +--
 .../vault/cluster/secrets/backend/overview.js |  2 +-
 .../vault/cluster/secrets/backend/list.hbs    | 27 +++++++++++++------
 5 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 changelog/13090.txt

diff --git a/changelog/13090.txt b/changelog/13090.txt
new file mode 100644
index 000000000..82ad157d1
--- /dev/null
+++ b/changelog/13090.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: customizes empty state messages for transit and transform
+```
\ No newline at end of file
diff --git a/ui/app/helpers/options-for-backend.js b/ui/app/helpers/options-for-backend.js
index 1d44934e4..e918e60c5 100644
--- 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
index ffb314288..fc674bb6a 100644
--- 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
index e3cbc947f..fb46f85d7 100644
--- 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
index b55c7977e..04ecb4620 100644
--- 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