From b435d81a834e89831c34eb5a5816797b80695bd0 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 18 Feb 2021 14:14:28 -0700
Subject: [PATCH 1/5] wizard setup

---
 ui/app/components/database-connection.js      | 10 ++++++
 ui/app/components/database-role-edit.js       | 12 +++++++
 .../generate-credentials-database.js          |  4 +--
 ui/app/components/wizard/mounts-wizard.js     |  1 +
 ui/app/helpers/wizard-constants.js            |  1 +
 ui/app/machines/secrets-machine.js            | 34 +++++++++++++++++++
 .../templates/components/wizard-progress.hbs  |  1 +
 .../components/wizard/mounts-wizard.hbs       |  1 +
 .../wizard/secrets-connection-show.hbs        |  8 +++++
 .../components/wizard/secrets-connection.hbs  |  8 +++++
 .../components/wizard/secrets-details.hbs     |  3 ++
 .../wizard/secrets-display-database-role.hbs  |  8 +++++
 .../vault/cluster/secrets/backend/list.hbs    |  2 +-
 .../vault/cluster/secrets/backend/roles.hbs   |  2 +-
 14 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 ui/app/templates/components/wizard/secrets-connection-show.hbs
 create mode 100644 ui/app/templates/components/wizard/secrets-connection.hbs
 create mode 100644 ui/app/templates/components/wizard/secrets-display-database-role.hbs

diff --git a/ui/app/components/database-connection.js b/ui/app/components/database-connection.js
index bb5271b977b3..cb6ab3a8ff3c 100644
--- a/ui/app/components/database-connection.js
+++ b/ui/app/components/database-connection.js
@@ -19,6 +19,7 @@ export default class DatabaseConnectionEdit extends Component {
   @service store;
   @service router;
   @service flashMessages;
+  @service wizard;
 
   @tracked
   showPasswordField = false; // used for edit mode
@@ -26,6 +27,15 @@ export default class DatabaseConnectionEdit extends Component {
   @tracked
   showSaveModal = false; // used for create mode
 
+  constructor() {
+    super(...arguments);
+    if (this.wizard.featureState === 'details' || this.wizard.featureState === 'connection') {
+      // when wizard featureState === details display secrets-connection
+      // when wizard featureState === connection display secrets-connection-show
+      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'database');
+    }
+  }
+
   rotateCredentials(backend, name) {
     let adapter = this.store.adapterFor('database/connection');
     return adapter.rotateRootCredentials(backend, name);
diff --git a/ui/app/components/database-role-edit.js b/ui/app/components/database-role-edit.js
index 113fbee4362c..821bb7fd8f93 100644
--- a/ui/app/components/database-role-edit.js
+++ b/ui/app/components/database-role-edit.js
@@ -8,6 +8,18 @@ const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 export default class DatabaseRoleEdit extends Component {
   @service router;
   @service flashMessages;
+  @service wizard;
+
+  constructor() {
+    super(...arguments);
+    console.log(this.wizard.featureState, 'featureSTate');
+    if (
+      this.wizard.featureState === 'displayConnection' ||
+      this.wizard.featureState === 'displayRoleDatabase'
+    ) {
+      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'database');
+    }
+  }
 
   get warningMessages() {
     let warnings = {};
diff --git a/ui/app/components/generate-credentials-database.js b/ui/app/components/generate-credentials-database.js
index f4e9cd85b854..2ed5ba4024a7 100644
--- a/ui/app/components/generate-credentials-database.js
+++ b/ui/app/components/generate-credentials-database.js
@@ -46,7 +46,7 @@ export default class GenerateCredentialsDatabase extends Component {
       this.roleType = 'static';
       return;
     } catch (error) {
-      errors.push(error.errors);
+      // you are not authorized error message will show
     }
     try {
       let newModel = yield this.store.queryRecord('database/credential', {
@@ -58,7 +58,7 @@ export default class GenerateCredentialsDatabase extends Component {
       this.roleType = 'dynamic';
       return;
     } catch (error) {
-      errors.push(error.errors);
+      // you are not authorized error message will show
     }
     this.roleType = 'noRoleFound';
   })
diff --git a/ui/app/components/wizard/mounts-wizard.js b/ui/app/components/wizard/mounts-wizard.js
index 1a2fa74afc7a..8fcb5956802b 100644
--- a/ui/app/components/wizard/mounts-wizard.js
+++ b/ui/app/components/wizard/mounts-wizard.js
@@ -21,6 +21,7 @@ export default Component.extend({
     return this.fullNextStep.split('.').lastObject;
   }),
   needsEncryption: equal('mountSubtype', 'transit'),
+  meep: equal('mountSubtype', 'database'),
   stepComponent: alias('wizard.stepComponent'),
   detailsComponent: computed('currentMachine', 'mountSubtype', function() {
     let suffix = this.currentMachine === 'secrets' ? 'engine' : 'method';
diff --git a/ui/app/helpers/wizard-constants.js b/ui/app/helpers/wizard-constants.js
index 93b070887fe7..741dc376f2b2 100644
--- a/ui/app/helpers/wizard-constants.js
+++ b/ui/app/helpers/wizard-constants.js
@@ -42,6 +42,7 @@ export const DEFAULTS = {
 
 export const FEATURE_MACHINE_STEPS = {
   secrets: {
+    connection: 4, // ARG TODO unsure just making this up for now
     encryption: 5,
     secret: {
       list: 4,
diff --git a/ui/app/machines/secrets-machine.js b/ui/app/machines/secrets-machine.js
index 1a75282b5f27..e50f405f5e6e 100644
--- a/ui/app/machines/secrets-machine.js
+++ b/ui/app/machines/secrets-machine.js
@@ -39,6 +39,9 @@ export default {
       ],
       on: {
         CONTINUE: {
+          connection: {
+            cond: type => type === 'database',
+          },
           role: {
             cond: type => ['pki', 'aws', 'ssh'].includes(type),
           },
@@ -51,6 +54,15 @@ export default {
         },
       },
     },
+    connection: {
+      onEntry: [
+        { type: 'render', level: 'step', component: 'wizard/secrets-connection' },
+        { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' },
+      ],
+      on: {
+        CONTINUE: 'displayConnection',
+      },
+    },
     encryption: {
       onEntry: [
         { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' },
@@ -87,6 +99,24 @@ export default {
         CONTINUE: 'credentials',
       },
     },
+    displayConnection: {
+      onEntry: [
+        { type: 'render', level: 'step', component: 'wizard/secrets-connection-show' },
+        { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' },
+      ],
+      on: {
+        CONTINUE: 'displayRoleDatabase',
+      },
+    },
+    displayRoleDatabase: {
+      onEntry: [
+        { type: 'render', level: 'step', component: 'wizard/secrets-display-database-role' },
+        { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' },
+      ],
+      on: {
+        CONTINUE: 'display',
+      },
+    },
     secret: {
       onEntry: [
         { type: 'render', level: 'step', component: 'wizard/secrets-secret' },
@@ -103,6 +133,10 @@ export default {
       ],
       on: {
         REPEAT: {
+          connection: {
+            cond: type => type === 'database',
+            actions: [{ type: 'routeTransition', params: ['vault.cluster.secrets.backend.create-root'] }],
+          },
           role: {
             cond: type => ['pki', 'aws', 'ssh'].includes(type),
             actions: [{ type: 'routeTransition', params: ['vault.cluster.secrets.backend.create-root'] }],
diff --git a/ui/app/templates/components/wizard-progress.hbs b/ui/app/templates/components/wizard-progress.hbs
index c658aa527db2..6dbebe10a4a4 100644
--- a/ui/app/templates/components/wizard-progress.hbs
+++ b/ui/app/templates/components/wizard-progress.hbs
@@ -1,5 +1,6 @@
 <div class="progress-container">
   {{#each progressBar as |bar|}}
+  {{log bar "bar ARG TODO COME BACK TO ME"}}
     <div class="feature-progress-container">
       <span class="progress-bar">
         <span class="feature-progress" style={{bar.style}} {{! template-lint-disable }}></span>
diff --git a/ui/app/templates/components/wizard/mounts-wizard.hbs b/ui/app/templates/components/wizard/mounts-wizard.hbs
index 74229973d817..92cd7c7ff3e5 100644
--- a/ui/app/templates/components/wizard/mounts-wizard.hbs
+++ b/ui/app/templates/components/wizard/mounts-wizard.hbs
@@ -6,6 +6,7 @@
   actionText=actionText
   nextFeature=nextFeature
   nextStep=nextStep
+  meep=meep
   needsEncryption=needsEncryption
   isSupported=isSupported
   onDone=onDone
diff --git a/ui/app/templates/components/wizard/secrets-connection-show.hbs b/ui/app/templates/components/wizard/secrets-connection-show.hbs
new file mode 100644
index 000000000000..102e3d3740a6
--- /dev/null
+++ b/ui/app/templates/components/wizard/secrets-connection-show.hbs
@@ -0,0 +1,8 @@
+<WizardSection
+  @headerText="Create a Role"
+  @instructions='Click “Add role.”'
+>
+  <p>
+   Now that we've setup a database let's connect a role.
+  </p>
+</WizardSection>
diff --git a/ui/app/templates/components/wizard/secrets-connection.hbs b/ui/app/templates/components/wizard/secrets-connection.hbs
new file mode 100644
index 000000000000..3f729f2db67c
--- /dev/null
+++ b/ui/app/templates/components/wizard/secrets-connection.hbs
@@ -0,0 +1,8 @@
+<WizardSection
+  @headerText="Connect a database"
+  @instructions='Enter the details of your database and click “Connect database.”'
+>
+  <p>
+    Here you can specify the details of your database plugin and include any root rotation statements.
+  </p>
+</WizardSection>
diff --git a/ui/app/templates/components/wizard/secrets-details.hbs b/ui/app/templates/components/wizard/secrets-details.hbs
index b32b1752e1ba..d3f1492417c4 100644
--- a/ui/app/templates/components/wizard/secrets-details.hbs
+++ b/ui/app/templates/components/wizard/secrets-details.hbs
@@ -6,5 +6,8 @@
     {{#if @needsEncryption}}
       The Transit Secrets Engine uses encryption keys to provide "encryption as a service". Click on "Create Encryption Key" at the top to create one.
     {{/if}}
+    {{#if @meep}}
+      Now that the engine has been mounted, let’s connect a {{@mountSubtype}}.
+    {{/if}}
   </p>
 </WizardSection>
diff --git a/ui/app/templates/components/wizard/secrets-display-database-role.hbs b/ui/app/templates/components/wizard/secrets-display-database-role.hbs
new file mode 100644
index 000000000000..771e2090292f
--- /dev/null
+++ b/ui/app/templates/components/wizard/secrets-display-database-role.hbs
@@ -0,0 +1,8 @@
+<WizardSection
+  @headerText="Create a Role"
+  @instructions='Edit the details of your role and click “Create role.”'
+>
+  <p>
+   Roles are what generate database credentials. They can be static or dynamic.
+  </p>
+</WizardSection>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/list.hbs b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
index 01251ced1842..860618573b54 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/list.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
@@ -73,7 +73,7 @@
   {{else}}
     {{#if (eq baseKey.id '')}}
       <EmptyState
-        @title="No {{pluralize options.item}} in this backend yet"
+        @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">
diff --git a/ui/app/templates/vault/cluster/secrets/backend/roles.hbs b/ui/app/templates/vault/cluster/secrets/backend/roles.hbs
index 9d8e65b87ac6..b5ba04e6b5e3 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/roles.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/roles.hbs
@@ -93,7 +93,7 @@
   {{else}}
     {{#if (eq baseKey.id '')}}
       <EmptyState
-        @title="No {{pluralize options.item}} in this backend yet"
+        @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">

From 34b0487e025ef0f0bbf3dfd8c9a3d3326487fb16 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 23 Feb 2021 10:16:58 -0700
Subject: [PATCH 2/5] cleanup

---
 ui/app/components/database-connection.js                  | 2 --
 ui/app/components/wizard/mounts-wizard.js                 | 2 +-
 ui/app/templates/components/wizard/mounts-wizard.hbs      | 2 +-
 ui/app/templates/components/wizard/secrets-connection.hbs | 2 +-
 ui/app/templates/components/wizard/secrets-details.hbs    | 2 +-
 5 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/app/components/database-connection.js b/ui/app/components/database-connection.js
index ede041add2bc..efb13943c23d 100644
--- a/ui/app/components/database-connection.js
+++ b/ui/app/components/database-connection.js
@@ -30,8 +30,6 @@ export default class DatabaseConnectionEdit extends Component {
   constructor() {
     super(...arguments);
     if (this.wizard.featureState === 'details' || this.wizard.featureState === 'connection') {
-      // when wizard featureState === details display secrets-connection
-      // when wizard featureState === connection display secrets-connection-show
       this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'database');
     }
   }
diff --git a/ui/app/components/wizard/mounts-wizard.js b/ui/app/components/wizard/mounts-wizard.js
index 8fcb5956802b..657ade04e12b 100644
--- a/ui/app/components/wizard/mounts-wizard.js
+++ b/ui/app/components/wizard/mounts-wizard.js
@@ -20,8 +20,8 @@ export default Component.extend({
   nextStep: computed('fullNextStep', function() {
     return this.fullNextStep.split('.').lastObject;
   }),
+  needsConnection: equal('mountSubtype', 'database'),
   needsEncryption: equal('mountSubtype', 'transit'),
-  meep: equal('mountSubtype', 'database'),
   stepComponent: alias('wizard.stepComponent'),
   detailsComponent: computed('currentMachine', 'mountSubtype', function() {
     let suffix = this.currentMachine === 'secrets' ? 'engine' : 'method';
diff --git a/ui/app/templates/components/wizard/mounts-wizard.hbs b/ui/app/templates/components/wizard/mounts-wizard.hbs
index 92cd7c7ff3e5..f3e38ca725a4 100644
--- a/ui/app/templates/components/wizard/mounts-wizard.hbs
+++ b/ui/app/templates/components/wizard/mounts-wizard.hbs
@@ -6,7 +6,7 @@
   actionText=actionText
   nextFeature=nextFeature
   nextStep=nextStep
-  meep=meep
+  needsConnection=needsConnection
   needsEncryption=needsEncryption
   isSupported=isSupported
   onDone=onDone
diff --git a/ui/app/templates/components/wizard/secrets-connection.hbs b/ui/app/templates/components/wizard/secrets-connection.hbs
index 3f729f2db67c..813f32c09eff 100644
--- a/ui/app/templates/components/wizard/secrets-connection.hbs
+++ b/ui/app/templates/components/wizard/secrets-connection.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Connect a database"
-  @instructions='Enter the details of your database and click “Connect database.”'
+  @instructions='Enter the details of your database and click “Save.”'
 >
   <p>
     Here you can specify the details of your database plugin and include any root rotation statements.
diff --git a/ui/app/templates/components/wizard/secrets-details.hbs b/ui/app/templates/components/wizard/secrets-details.hbs
index d3f1492417c4..9520ea37e181 100644
--- a/ui/app/templates/components/wizard/secrets-details.hbs
+++ b/ui/app/templates/components/wizard/secrets-details.hbs
@@ -6,7 +6,7 @@
     {{#if @needsEncryption}}
       The Transit Secrets Engine uses encryption keys to provide "encryption as a service". Click on "Create Encryption Key" at the top to create one.
     {{/if}}
-    {{#if @meep}}
+    {{#if @needsConnection}}
       Now that the engine has been mounted, let’s connect a {{@mountSubtype}}.
     {{/if}}
   </p>

From 2bca413eb11d6ec58d4683cd5dfdfc4cbae6eadf Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 23 Feb 2021 10:20:51 -0700
Subject: [PATCH 3/5] add changelog

---
 changelog/10982.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/10982.txt

diff --git a/changelog/10982.txt b/changelog/10982.txt
new file mode 100644
index 000000000000..7102478440bc
--- /dev/null
+++ b/changelog/10982.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adds the wizard to the Database Secret Engine
+```

From c0c0acbf99bd692cc34ff11ec1c94190b51fcee7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 23 Feb 2021 11:06:52 -0700
Subject: [PATCH 4/5] fix names from save to create role and create database

---
 .../components/database-connection.hbs        | 384 +++++++++---------
 .../components/database-role-edit.hbs         |   6 +-
 .../components/wizard/secrets-connection.hbs  |   2 +-
 .../components/wizard/secrets-role.hbs        |   2 +-
 4 files changed, 199 insertions(+), 195 deletions(-)

diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index d4ec905b9907..0ecf92af4373 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -16,212 +16,212 @@
 </PageHeader>
 
 {{#if (eq @mode "show")}}
-<Toolbar>
-  <ToolbarActions>
-    {{#if @model.canDelete}}
-    <button
-      type="button"
-      class="toolbar-link"
-      {{on 'click' this.delete}}
-      data-test-database-connection-delete
-    >
-      Delete connection
-    </button>
-    {{/if}}
-    {{#if @model.canReset}}
-    <ConfirmAction
-      @buttonClasses="toolbar-link"
-      @onConfirmAction={{action 'reset'}}
-      @confirmTitle="Reset connection?"
-      @confirmMessage="This will close the connection and its underlying plugin and restart it with the configuration stored in the barrier."
-      @confirmButtonText="Reset"
-      data-test-database-connection-reset
-    >
-      Reset connection
-    </ConfirmAction>
-    {{/if}}
-    {{#if (and @model.canReset @model.canDelete)}}
-    <div class="toolbar-separator" />
-    {{/if}}
-    {{#if @model.canRotate }}
-    <ConfirmAction
-      @buttonClasses="toolbar-link"
-      @onConfirmAction={{this.rotate}}
-      @confirmTitle="Rotate credentials?"
-      @confirmMessage={{'This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'}}
-      @confirmButtonText="Rotate"
-      data-test-database-connection-rotate
-    >
-      Rotate root credentials
-    </ConfirmAction>
-    {{/if}}
-    {{#if @model.canAddRole}}
-    <ToolbarSecretLink
-      @secret=''
-      @mode="create"
-      @type="add"
-      @queryParams={{query-params initialKey=(or filter baseKey.id) itemType="role"}}
-      @data-test-secret-create=true
-    >
-      Add role
-    </ToolbarSecretLink>
-    {{/if}}
-    {{#if @model.canEdit}}
-    <ToolbarSecretLink
-      @secret={{@model.id}}
-      @mode="edit"
-      @data-test-edit-link=true
-      @replace=true
-    >
-      Edit configuration
-    </ToolbarSecretLink>
-    {{/if}}
-  </ToolbarActions>
-</Toolbar>
+  <Toolbar>
+    <ToolbarActions>
+      {{#if @model.canDelete}}
+      <button
+        type="button"
+        class="toolbar-link"
+        {{on 'click' this.delete}}
+        data-test-database-connection-delete
+      >
+        Delete connection
+      </button>
+      {{/if}}
+      {{#if @model.canReset}}
+      <ConfirmAction
+        @buttonClasses="toolbar-link"
+        @onConfirmAction={{action 'reset'}}
+        @confirmTitle="Reset connection?"
+        @confirmMessage="This will close the connection and its underlying plugin and restart it with the configuration stored in the barrier."
+        @confirmButtonText="Reset"
+        data-test-database-connection-reset
+      >
+        Reset connection
+      </ConfirmAction>
+      {{/if}}
+      {{#if (and @model.canReset @model.canDelete)}}
+      <div class="toolbar-separator" />
+      {{/if}}
+      {{#if @model.canRotate }}
+      <ConfirmAction
+        @buttonClasses="toolbar-link"
+        @onConfirmAction={{this.rotate}}
+        @confirmTitle="Rotate credentials?"
+        @confirmMessage={{'This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'}}
+        @confirmButtonText="Rotate"
+        data-test-database-connection-rotate
+      >
+        Rotate root credentials
+      </ConfirmAction>
+      {{/if}}
+      {{#if @model.canAddRole}}
+      <ToolbarSecretLink
+        @secret=''
+        @mode="create"
+        @type="add"
+        @queryParams={{query-params initialKey=(or filter baseKey.id) itemType="role"}}
+        @data-test-secret-create=true
+      >
+        Add role
+      </ToolbarSecretLink>
+      {{/if}}
+      {{#if @model.canEdit}}
+      <ToolbarSecretLink
+        @secret={{@model.id}}
+        @mode="edit"
+        @data-test-edit-link=true
+        @replace=true
+      >
+        Edit configuration
+      </ToolbarSecretLink>
+      {{/if}}
+    </ToolbarActions>
+  </Toolbar>
 {{/if}}
 
 {{#if (eq @mode 'create')}}
-<form {{on 'submit' this.handleCreateConnection}}>
-  {{#each @model.fieldAttrs as |attr|}}
-    {{#if (eq attr.name "pluginConfig")}}
-      {{!-- Plugin Config Section --}}
-      <div class="form-section">
-        <h3 class="title is-5">Plugin config</h3>
-        {{#unless @model.pluginFieldGroups}}
-          <EmptyState
-            @title="No plugin selected"
-            @message="Select a plugin type to be able to configure it."
-          />
-        {{else}}
-          {{#each @model.pluginFieldGroups as |fieldGroup|}}
-            {{#each-in fieldGroup as |group fields|}}
-              {{#if (eq group "default")}}
-                {{#each fields as |attr|}}
-                  {{form-field data-test-field attr=attr model=@model}}
-                {{/each}}
-              {{else}}
-                <ToggleButton @class="is-block" @toggleAttr={{concat "show" (camelize group)}} @toggleTarget={{this}} @openLabel={{concat "Hide " group}} @closedLabel={{group}} @data-test-toggle-group={{group}} />
-                {{#if (get this (concat "show" (camelize group)))}}
-                  <div class="box is-marginless">
-                    {{#each fields as |attr|}}
-                      {{form-field data-test-field attr=attr model=@model}}
-                    {{/each}}
-                  </div>
+  <form {{on 'submit' this.handleCreateConnection}}>
+    {{#each @model.fieldAttrs as |attr|}}
+      {{#if (eq attr.name "pluginConfig")}}
+        {{!-- Plugin Config Section --}}
+        <div class="form-section">
+          <h3 class="title is-5">Plugin config</h3>
+          {{#unless @model.pluginFieldGroups}}
+            <EmptyState
+              @title="No plugin selected"
+              @message="Select a plugin type to be able to configure it."
+            />
+          {{else}}
+            {{#each @model.pluginFieldGroups as |fieldGroup|}}
+              {{#each-in fieldGroup as |group fields|}}
+                {{#if (eq group "default")}}
+                  {{#each fields as |attr|}}
+                    {{form-field data-test-field attr=attr model=@model}}
+                  {{/each}}
+                {{else}}
+                  <ToggleButton @class="is-block" @toggleAttr={{concat "show" (camelize group)}} @toggleTarget={{this}} @openLabel={{concat "Hide " group}} @closedLabel={{group}} @data-test-toggle-group={{group}} />
+                  {{#if (get this (concat "show" (camelize group)))}}
+                    <div class="box is-marginless">
+                      {{#each fields as |attr|}}
+                        {{form-field data-test-field attr=attr model=@model}}
+                      {{/each}}
+                    </div>
+                  {{/if}}
                 {{/if}}
-              {{/if}}
-            {{/each-in}}
-          {{/each}}
-        {{/unless}}
-      </div>
-    {{else if (not-eq attr.options.readOnly true)}}
-      {{form-field data-test-field attr=attr model=@model}}
-    {{/if}}
-  {{/each}}
+              {{/each-in}}
+            {{/each}}
+          {{/unless}}
+        </div>
+      {{else if (not-eq attr.options.readOnly true)}}
+        {{form-field data-test-field attr=attr model=@model}}
+      {{/if}}
+    {{/each}}
 
-  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
-    <div class="field is-grouped">
-      <div class="control">
-        <button
-          data-test-secret-save
-          type="submit"
-          disabled={{buttonDisabled}}
-          class="button is-primary"
-        >
-          Save
-        </button>
-      </div>
-      <div class="control">
-        <SecretLink @mode="list" @class="button">
-          Cancel
-        </SecretLink>
+    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
+      <div class="field is-grouped">
+        <div class="control">
+          <button
+            data-test-secret-save
+            type="submit"
+            disabled={{buttonDisabled}}
+            class="button is-primary"
+          >
+            Create database
+          </button>
+        </div>
+        <div class="control">
+          <SecretLink @mode="list" @class="button">
+            Cancel
+          </SecretLink>
+        </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
 {{else if (eq @mode 'edit')}}
-<form {{on 'submit' this.handleUpdateConnection}}>
-  {{#each @model.fieldAttrs as |attr|}}
-    {{#if (eq attr.name "pluginConfig")}}
-      <div class="form-section">
-        <h3 class="title is-5">Plugin config</h3>
-          {{#each @model.pluginFieldGroups as |fieldGroup|}}
-            {{#each-in fieldGroup as |group fields|}}
-              {{#if (eq group "default")}}
-                {{#each fields as |attr|}}
-                  {{#if (eq attr.name "password")}}
-                    <label for="{{attr.name}}" class="is-label">
-                      {{capitalize (or attr.options.label attr.name)}}
-                    </label>
-                    <div class="field">
-                      <Toggle
-                        @name="show-{{attr.name}}"
-                        @status="success"
-                        @size="small"
-                        @onChange={{fn this.updateShowPassword (not this.showPasswordField)}}
-                        @checked={{this.showPasswordField}}
-                        data-test-toggle={{attr.name}}
-                      >
-                        <span class="ttl-picker-label has-text-grey">Update password</span><br/>
-                        <div class="description has-text-grey">
-                          <span>{{if this.showPasswordField 'The new password that will be used when connecting to the database' 'Vault will use the existing password'}}</span>
-                        </div>
-                        {{#if this.showPasswordField}}
-                          <Input
-                            {{on "change" (fn this.updatePassword attr.name)}}
-                            @type="password"
-                            @value={{get @model attr.name}}
-                            @name={{attr.name}}
-                            class="input"
-                            {{!-- Prevents browsers from auto-filling --}}
-                            @autocomplete="new-password"
-                            @spellcheck="false" />
-                        {{/if}}
-                      </Toggle>
+  <form {{on 'submit' this.handleUpdateConnection}}>
+    {{#each @model.fieldAttrs as |attr|}}
+      {{#if (eq attr.name "pluginConfig")}}
+        <div class="form-section">
+          <h3 class="title is-5">Plugin config</h3>
+            {{#each @model.pluginFieldGroups as |fieldGroup|}}
+              {{#each-in fieldGroup as |group fields|}}
+                {{#if (eq group "default")}}
+                  {{#each fields as |attr|}}
+                    {{#if (eq attr.name "password")}}
+                      <label for="{{attr.name}}" class="is-label">
+                        {{capitalize (or attr.options.label attr.name)}}
+                      </label>
+                      <div class="field">
+                        <Toggle
+                          @name="show-{{attr.name}}"
+                          @status="success"
+                          @size="small"
+                          @onChange={{fn this.updateShowPassword (not this.showPasswordField)}}
+                          @checked={{this.showPasswordField}}
+                          data-test-toggle={{attr.name}}
+                        >
+                          <span class="ttl-picker-label has-text-grey">Update password</span><br/>
+                          <div class="description has-text-grey">
+                            <span>{{if this.showPasswordField 'The new password that will be used when connecting to the database' 'Vault will use the existing password'}}</span>
+                          </div>
+                          {{#if this.showPasswordField}}
+                            <Input
+                              {{on "change" (fn this.updatePassword attr.name)}}
+                              @type="password"
+                              @value={{get @model attr.name}}
+                              @name={{attr.name}}
+                              class="input"
+                              {{!-- Prevents browsers from auto-filling --}}
+                              @autocomplete="new-password"
+                              @spellcheck="false" />
+                          {{/if}}
+                        </Toggle>
+                      </div>
+                    {{else}}
+                      {{form-field data-test-field attr=attr model=@model}}
+                    {{/if}}
+                  {{/each}}
+                {{else}}
+                  <ToggleButton @class="is-block" @toggleAttr={{concat "show" (camelize group)}} @toggleTarget={{this}} @openLabel={{concat "Hide " group}} @closedLabel={{group}} @data-test-toggle-group={{group}} />
+                  {{#if (get this (concat "show" (camelize group)))}}
+                    <div class="box is-marginless">
+                      {{#each fields as |attr|}}
+                        {{form-field data-test-field attr=attr model=@model}}
+                      {{/each}}
                     </div>
-                  {{else}}
-                    {{form-field data-test-field attr=attr model=@model}}
                   {{/if}}
-                {{/each}}
-              {{else}}
-                <ToggleButton @class="is-block" @toggleAttr={{concat "show" (camelize group)}} @toggleTarget={{this}} @openLabel={{concat "Hide " group}} @closedLabel={{group}} @data-test-toggle-group={{group}} />
-                {{#if (get this (concat "show" (camelize group)))}}
-                  <div class="box is-marginless">
-                    {{#each fields as |attr|}}
-                      {{form-field data-test-field attr=attr model=@model}}
-                    {{/each}}
-                  </div>
                 {{/if}}
-              {{/if}}
-            {{/each-in}}
-          {{/each}}
-      </div>
-    {{else if (or (eq attr.name 'name') (eq attr.name 'plugin_name'))}}
-      <ReadonlyFormField @attr={{attr}} @value={{get @model attr.name}} />
-    {{else if (not-eq attr.options.readOnly true)}}
-      {{form-field data-test-field attr=attr model=@model}}
-    {{/if}}
-  {{/each}}
+              {{/each-in}}
+            {{/each}}
+        </div>
+      {{else if (or (eq attr.name 'name') (eq attr.name 'plugin_name'))}}
+        <ReadonlyFormField @attr={{attr}} @value={{get @model attr.name}} />
+      {{else if (not-eq attr.options.readOnly true)}}
+        {{form-field data-test-field attr=attr model=@model}}
+      {{/if}}
+    {{/each}}
 
-  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
-    <div class="field is-grouped">
-      <div class="control">
-        <button
-          data-test-secret-save
-          type="submit"
-          disabled={{buttonDisabled}}
-          class="button is-primary"
-        >
-          Save
-        </button>
-      </div>
-      <div class="control">
-        <SecretLink @mode="list" @class="button">
-          Cancel
-        </SecretLink>
+    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
+      <div class="field is-grouped">
+        <div class="control">
+          <button
+            data-test-secret-save
+            type="submit"
+            disabled={{buttonDisabled}}
+            class="button is-primary"
+          >
+            Save
+          </button>
+        </div>
+        <div class="control">
+          <SecretLink @mode="list" @class="button">
+            Cancel
+          </SecretLink>
+        </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
 {{else}}
   {{#each @model.showAttrs as |attr|}}
     {{#let attr.options.defaultDisplay as |defaultDisplay|}}
diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
index 4e56ee8df855..4dd25ed2e5fc 100644
--- a/ui/app/templates/components/database-role-edit.hbs
+++ b/ui/app/templates/components/database-role-edit.hbs
@@ -108,7 +108,11 @@
                 disabled={{this.loading}}
                 class="button is-primary {{if this.loading 'is-loading'}}"
               >
-                Save
+                {{#if (eq @mode 'create')}}
+                  Create role
+                {{else}}
+                  Save
+                {{/if}}
               </button>
             {{else}}
               <ToolTip @horizontalPosition="left" as |T|>
diff --git a/ui/app/templates/components/wizard/secrets-connection.hbs b/ui/app/templates/components/wizard/secrets-connection.hbs
index 813f32c09eff..bf48a09058a9 100644
--- a/ui/app/templates/components/wizard/secrets-connection.hbs
+++ b/ui/app/templates/components/wizard/secrets-connection.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Connect a database"
-  @instructions='Enter the details of your database and click “Save.”'
+  @instructions='Enter the details of your database and click “Create database.”'
 >
   <p>
     Here you can specify the details of your database plugin and include any root rotation statements.
diff --git a/ui/app/templates/components/wizard/secrets-role.hbs b/ui/app/templates/components/wizard/secrets-role.hbs
index c533949ac02e..96efbfefd983 100644
--- a/ui/app/templates/components/wizard/secrets-role.hbs
+++ b/ui/app/templates/components/wizard/secrets-role.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Adding a role"
-  @instructions='Enter your role details and click "Save"'
+  @instructions='Enter your role details and click "Create role"'
 >
   <p>
     A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions.

From a17ac1706c930062c1bae2626eca6b4bab837465 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 23 Feb 2021 13:31:55 -0700
Subject: [PATCH 5/5] fix missing progress bar

---
 ui/app/helpers/wizard-constants.js              | 1 -
 ui/app/templates/components/wizard-progress.hbs | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/app/helpers/wizard-constants.js b/ui/app/helpers/wizard-constants.js
index 741dc376f2b2..93b070887fe7 100644
--- a/ui/app/helpers/wizard-constants.js
+++ b/ui/app/helpers/wizard-constants.js
@@ -42,7 +42,6 @@ export const DEFAULTS = {
 
 export const FEATURE_MACHINE_STEPS = {
   secrets: {
-    connection: 4, // ARG TODO unsure just making this up for now
     encryption: 5,
     secret: {
       list: 4,
diff --git a/ui/app/templates/components/wizard-progress.hbs b/ui/app/templates/components/wizard-progress.hbs
index 6dbebe10a4a4..e4de36e03433 100644
--- a/ui/app/templates/components/wizard-progress.hbs
+++ b/ui/app/templates/components/wizard-progress.hbs
@@ -1,6 +1,6 @@
+
 <div class="progress-container">
-  {{#each progressBar as |bar|}}
-  {{log bar "bar ARG TODO COME BACK TO ME"}}
+  {{#each @progressBar as |bar|}}
     <div class="feature-progress-container">
       <span class="progress-bar">
         <span class="feature-progress" style={{bar.style}} {{! template-lint-disable }}></span>