From 7e3925007ed8ee9dda83331f78922660b6a921cf Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 23 Jul 2021 15:31:32 -0600
Subject: [PATCH 01/40] initial setup

---
 ui/app/components/secret-edit.js              |  11 +-
 ui/app/lib/kv-metadata-object.js              |  28 ++++
 ui/app/models/secret-v2.js                    |   1 +
 .../components/secret-edit-display.hbs        | 115 ----------------
 .../components/secret-edit-metadata.hbs       |  98 ++++++++++++++
 ui/app/templates/components/secret-edit.hbs   | 126 +++++++++++++++---
 6 files changed, 243 insertions(+), 136 deletions(-)
 create mode 100644 ui/app/lib/kv-metadata-object.js
 delete mode 100644 ui/app/templates/components/secret-edit-display.hbs
 create mode 100644 ui/app/templates/components/secret-edit-metadata.hbs

diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index d8ca7cceaffc..abc11e69bcec 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -9,6 +9,7 @@ import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
 import WithNavToNearestAncestor from 'vault/mixins/with-nav-to-nearest-ancestor';
 import keys from 'vault/lib/keycodes';
 import KVObject from 'vault/lib/kv-object';
+import KVMetadataObject from 'vault/lib/kv-metadata-object';
 import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
 import ControlGroupError from 'vault/lib/control-group-error';
 
@@ -35,12 +36,13 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   mode: null,
 
   secretData: null,
+  customMetadata: null,
 
   wrappedData: null,
   isWrapping: false,
   showWrapButton: not('wrappedData'),
 
-  // called with a bool indicating if there's been a change in the secretData
+  // called with a bool indicating if there's been a change in the secretData and customMetadata
   onDataChange() {},
   onRefresh() {},
   onToggleAdvancedEdit() {},
@@ -73,6 +75,11 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
     const data = KVObject.create({ content: [] }).fromJSON(secrets);
     this.set('secretData', data);
+    // sets up the customMetadata class with the content of one empty array value
+    const customMetadata = KVMetadataObject.create({ content: [] }).createClass();
+    this.set('customMetadata', customMetadata);
+    this.customMetadata.pushObject({ name: '', value: '' });
+
     this.set('codemirrorString', data.toJSONString());
     if (data.isAdvanced()) {
       this.set('preferAdvancedEdit', true);
@@ -365,6 +372,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
       }
 
       this.persistKey(() => {
+        debugger;
         this.transitionToRoute(SHOW_ROUTE, this.model.path || this.model.id);
       });
     },
@@ -382,6 +390,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
 
     addRow() {
       const data = this.secretData;
+      // fired off on init
       if (isNone(data.findBy('name', ''))) {
         data.pushObject({ name: '', value: '' });
         this.send('handleChange');
diff --git a/ui/app/lib/kv-metadata-object.js b/ui/app/lib/kv-metadata-object.js
new file mode 100644
index 000000000000..9adf366d818d
--- /dev/null
+++ b/ui/app/lib/kv-metadata-object.js
@@ -0,0 +1,28 @@
+import ArrayProxy from '@ember/array/proxy';
+import { guidFor } from '@ember/object/internals';
+
+export default ArrayProxy.extend({
+  createClass() {
+    let contents = Object.keys([]).map(key => {
+      let obj = {
+        name: key,
+        value: '',
+      };
+      guidFor(obj);
+      return obj;
+    });
+    this.setObjects(
+      // ARG TODO not sure I need the sorting
+      contents.sort((a, b) => {
+        if (a.name === '') {
+          return 1;
+        }
+        if (b.name === '') {
+          return -1;
+        }
+        return a.name.localeCompare(b.name);
+      })
+    );
+    return this;
+  },
+});
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index d6ed6c28df28..d5052365bb77 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -41,6 +41,7 @@ export default Model.extend(KeyMixin, Validations, {
     helpText:
       'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter',
   }),
+  customMetadata: attr('object'),
   fields: computed(function() {
     return expandAttributeMeta(this, ['maxVersions', 'casRequired']);
   }),
diff --git a/ui/app/templates/components/secret-edit-display.hbs b/ui/app/templates/components/secret-edit-display.hbs
deleted file mode 100644
index 30e16b28ac25..000000000000
--- a/ui/app/templates/components/secret-edit-display.hbs
+++ /dev/null
@@ -1,115 +0,0 @@
-{{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
-  <div data-test-metadata-fields class="form-section box is-shadowless is-fullwidth">
-    <label class="title is-5">
-      Secret metadata
-    </label>
-    {{#each @model.fields as |attr|}}
-      <FormField 
-        data-test-field 
-        @attr={{attr}}
-        @model={{@model}}
-        @onKeyUp={{@onKeyUp}}
-        @validationMessages={{@validationMessages}}
-      />
-    {{/each}}
-  </div>
-{{/if}}
-
-{{#if @showWriteWithoutReadWarning}}
-  {{#if (and @isV2 @model.failedServerRead)}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
-      @class="is-marginless"
-      data-test-v2-no-cas-warning
-    />
-  {{else if @isV2}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
-      @class="is-marginless"
-      data-test-v2-write-without-read
-    />
-  {{else}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
-      @class="is-marginless"
-      data-test-v1-write-without-read
-    />
-  {{/if}}
-{{/if}}
-
-{{#if @showAdvancedMode}}
-  <div class="form-section">
-    <JsonEditor
-      @title={{if isV2 "Version Data" "Secret Data"}}
-      @value={{@codemirrorString}}
-      @valueUpdated={{action @editActions.codemirrorUpdated}}
-      @onFocusOut={{action @editActions.formatJSON}}>
-    </JsonEditor> 
-  </div>
-{{else}}
-  <div class="form-section">
-    <label class="title is-5">
-      {{#if isV2}}
-      Version data
-      {{else}}
-      Secret data
-      {{/if}}
-    </label>
-  {{#each @secretData as |secret index|}}
-    <div class="info-table-row">
-      <div class="column is-one-quarter info-table-row-edit">
-        <Input 
-          data-test-secret-key={{true}}
-          @value={{secret.name}}
-          placeholder="key"
-          @change={{action @editActions.handleChange}}
-          class="input"
-          @autocomplete="off"
-          @spellcheck="false"
-          {{on "keyup" (fn @onKeyUp "key" secret.name)}}
-        />
-      </div>
-      <div class="column info-table-row-edit">
-        <MaskedInput
-          @name={{secret.name}}
-          @onKeyDown={{@editActions.handleKeyDown}}
-          @onChange={{@editActions.handleChange}}
-          @value={{secret.value}}
-          data-test-secret-value="true"
-        />
-      </div>
-      <div class="column is-narrow info-table-row-edit">
-        {{#if (eq @secretData.length (inc index))}}
-          <button type="button" {{action @editActions.addRow}} class="button is-outlined is-primary" data-test-secret-add-row="true">
-            Add
-          </button>
-        {{else}}
-          <button
-            class="button has-text-grey is-expanded is-icon"
-            type="button"
-            {{action @editActions.deleteRow secret.name}}
-            aria-label="Delete row"
-          >
-            <Icon
-              @glyph="trash"
-              @size="l"
-              class="has-text-grey-light"
-            />
-          </button>
-        {{/if}}
-      </div>
-    </div>
-    {{#if @validationMessages.key}}
-      <AlertInline 
-        @type="danger" 
-        @message={{@validationMessages.key}} 
-        @paddingTop=true
-        @isMarginless=true
-      />
-    {{/if}}
-  {{/each}}
-  </div>
-{{/if}}
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
new file mode 100644
index 000000000000..825756c9d4bf
--- /dev/null
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -0,0 +1,98 @@
+{{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
+{{!-- Angel beginning of custom metadata --}}
+  <div class="form-section">
+    <label class="title is-5">
+      Custom metadata
+    </label>
+      {{#each @customMetadata as |metadata index|}}
+        <div class="info-table-row">
+          <div class="column is-one-quarter info-table-row-edit">
+            <Input 
+              data-test-secret-key={{true}}
+              @value={{metadata.key}}
+              placeholder="key"
+              @change={{action @editActions.handleChange}}
+              class="input"
+              @autocomplete="off"
+              @spellcheck="false"
+            />
+          </div>
+          <div class="column info-table-row-edit">
+            <textarea 
+              class="input"
+              rows=1 wrap="off"
+              value={{metadata.value}}
+            />
+          </div>
+          <div class="column is-narrow info-table-row-edit">
+            {{#if (eq @customMetadata.length (inc index))}}
+              <button type="button" {{action @editActions.addRow}} class="button is-outlined is-primary" data-test-secret-add-row="true">
+                Add
+              </button>
+            {{else}}
+              <button
+                class="button has-text-grey is-expanded is-icon"
+                type="button"
+                {{action @editActions.deleteRow metadata.key}}
+                aria-label="Delete row"
+              >
+                <Icon
+                  @glyph="trash"
+                  @size="l"
+                  class="has-text-grey-light"
+                />
+              </button>
+            {{/if}}
+          </div>
+        </div>
+        {{#if @validationMessages.key}}
+          <AlertInline 
+            @type="danger" 
+            @message={{@validationMessages.key}} 
+            @paddingTop=true
+            @isMarginless=true
+          />
+        {{/if}}
+      {{/each}}
+      </div>
+      {{!-- end of custom metadata --}}
+  <div data-test-metadata-fields class="form-section box is-shadowless is-fullwidth">
+    <label class="title is-5">
+      Additional Options
+    </label>
+    {{#each @model.fields as |attr|}}
+      <FormField 
+        data-test-field 
+        @attr={{attr}}
+        @model={{@model}}
+        @onKeyUp={{@onKeyUp}}
+        @validationMessages={{@validationMessages}}
+      />
+    {{/each}}
+  </div>
+{{/if}}
+
+{{#if @showWriteWithoutReadWarning}}
+  {{#if (and @isV2 @model.failedServerRead)}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
+      @class="is-marginless"
+      data-test-v2-no-cas-warning
+    />
+  {{else if @isV2}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
+      @class="is-marginless"
+      data-test-v2-write-without-read
+    />
+  {{else}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
+      @class="is-marginless"
+      data-test-v1-write-without-read
+    />
+  {{/if}}
+{{/if}}
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 58548579049b..4978a0bb0b21 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -166,24 +166,110 @@
         </p>
       {{/if}}
     </div>
-    <SecretEditDisplay
-      @showAdvancedMode={{showAdvancedMode}}
-      @codemirrorString={{codemirrorString}}
-      @secretData={{secretData}}
-      @isV2={{isV2}}
-      @model={{model}}
-      @canEditV2Secret={{canEditV2Secret}}
-      @editActions={{hash
-        codemirrorUpdated=(action "codemirrorUpdated")
-        formatJSON=(action "formatJSON")
-        handleKeyDown=(action "handleKeyDown")
-        handleChange=(action "handleChange")
-        deleteRow=(action "deleteRow")
-        addRow=(action "addRow")
-      }}
-      @onKeyUp={{perform waitForKeyUp}}
-      @validationMessages={{validationMessages}}
-    />
+    {{!-- Angel start here UPDATE --}}
+    {{!-- Chunk of secret data --}}
+    {{#if showAdvancedMode}}
+      <div class="form-section">
+        <JsonEditor
+          @title={{if isV2 "Version Data" "Secret Data"}}
+          @value={{codemirrorString}}
+          @valueUpdated={{action "codemirrorUpdated"}}
+          @onFocusOut={{action "formatJSON"}}>
+        </JsonEditor> 
+      </div>
+    {{else}}
+      <div class="form-section">
+        <label class="title is-5">
+          Secret data
+        </label>
+      {{#each secretData as |secret index|}}
+        <div class="info-table-row">
+          <div class="column is-one-quarter info-table-row-edit">
+            <Input 
+              data-test-secret-key={{true}}
+              @value={{secret.name}}
+              placeholder="key"
+              @change={{action "handleChange"}}
+              class="input"
+              @autocomplete="off"
+              @spellcheck="false"
+            />
+          </div>
+          <div class="column info-table-row-edit">
+            <MaskedInput
+              @name={{secret.name}}
+              @onKeyDown={{action "handleKeyDown"}}
+              @onChange={{action "handleChange"}}
+              @value={{secret.value}}
+              data-test-secret-value="true"
+            />
+          </div>
+          <div class="column is-narrow info-table-row-edit">
+            {{#if (eq secretData.length (inc index))}}
+              <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
+                Add
+              </button>
+            {{else}}
+              <button
+                class="button has-text-grey is-expanded is-icon"
+                type="button"
+                {{action "deleteRow" secret.name}}
+                aria-label="Delete row"
+              >
+                <Icon
+                  @glyph="trash"
+                  @size="l"
+                  class="has-text-grey-light"
+                />
+              </button>
+            {{/if}}
+          </div>
+        </div>
+        {{#if validationMessages.key}}
+          <AlertInline 
+            @type="danger" 
+            @message={{validationMessages.key}} 
+            @paddingTop=true
+            @isMarginless=true
+          />
+        {{/if}}
+      {{/each}}
+      </div>
+    {{/if}}
+  {{!-- Angel end --}}
+  {{!-- Angel gets hidden under toggle --}}
+  {{!-- Angel rename component to Secret metadata --}}
+  <ToggleButton 
+    @class="is-block"
+    @toggleAttr={{"showMetadata"}}
+    @toggleTarget={{this}}
+    @openLabel="Hide secret metadata"
+    @closedLabel="Show secret metadata"
+  />
+    {{#if showMetadata}}
+    {{!-- can clean up the passed properties in this component --}}
+      <SecretEditMetadata
+        @showAdvancedMode={{showAdvancedMode}}
+        @codemirrorString={{codemirrorString}}
+        @customMetadata={{customMetadata}}
+        @isV2={{isV2}}
+        @model={{model}}
+        @canEditV2Secret={{canEditV2Secret}}
+        @editActions={{hash
+          codemirrorUpdated=(action "codemirrorUpdated")
+          formatJSON=(action "formatJSON")
+          handleKeyDown=(action "handleKeyDown")
+          handleChange=(action "handleChange")
+          deleteRow=(action "deleteRow")
+          addRow=(action "addRow")
+        }}
+        @onKeyUp={{perform waitForKeyUp}}
+        @validationMessages={{validationMessages}}
+      />
+  {{!-- Angel turn into seperate component --}}
+  
+    {{/if}}
+   
     <div class="field is-grouped box is-fullwidth is-bottomless">
       <div class="control">
         <button
@@ -216,10 +302,10 @@
           />
         </div>
       {{/if}}
-      <SecretEditDisplay
+      <SecretEditMetadata
         @showAdvancedMode={{showAdvancedMode}}
         @codemirrorString={{codemirrorString}}
-        @secretData={{secretData}}
+        @customMetadata={{customMetadata}}
         @isV2={{isV2}}
         @canEditV2Secret={{canEditV2Secret}}
         @showWriteWithoutReadWarning={{isWriteWithoutRead}}

From 975f45a244bab3f9d1a18dc67e728b6da374058b Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 26 Jul 2021 13:22:52 -0600
Subject: [PATCH 02/40] form field editType kv is very helpful

---
 ui/app/components/secret-edit.js              | 16 +++--
 ui/app/lib/kv-metadata-object.js              | 28 ---------
 ui/app/models/secret-v2.js                    | 13 ++++-
 .../components/secret-edit-metadata.hbs       | 58 +------------------
 ui/app/templates/components/secret-edit.hbs   |  4 +-
 5 files changed, 24 insertions(+), 95 deletions(-)
 delete mode 100644 ui/app/lib/kv-metadata-object.js

diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index abc11e69bcec..a909b6ceab46 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -9,7 +9,6 @@ import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
 import WithNavToNearestAncestor from 'vault/mixins/with-nav-to-nearest-ancestor';
 import keys from 'vault/lib/keycodes';
 import KVObject from 'vault/lib/kv-object';
-import KVMetadataObject from 'vault/lib/kv-metadata-object';
 import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
 import ControlGroupError from 'vault/lib/control-group-error';
 
@@ -36,7 +35,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   mode: null,
 
   secretData: null,
-  customMetadata: null,
 
   wrappedData: null,
   isWrapping: false,
@@ -75,10 +73,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
     const data = KVObject.create({ content: [] }).fromJSON(secrets);
     this.set('secretData', data);
-    // sets up the customMetadata class with the content of one empty array value
-    const customMetadata = KVMetadataObject.create({ content: [] }).createClass();
-    this.set('customMetadata', customMetadata);
-    this.customMetadata.pushObject({ name: '', value: '' });
 
     this.set('codemirrorString', data.toJSONString());
     if (data.isAdvanced()) {
@@ -225,12 +219,22 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
         set(this.validationMessages, name, '');
       }
     }
+    if (name === 'customMetadata') {
+      if (value) {
+        this.model.set('customMetadata', { key: 'meep', value: 'meeping' });
+      }
+      console.log(this.model, 'model');
+    }
 
     let values = Object.values(this.validationMessages);
 
     this.set('validationErrorCount', values.filter(Boolean).length);
   },
 
+  updateCustomMetadata(name, key, value) {
+    console.log(name, key, value, 'here in new func');
+  },
+
   onEscape(e) {
     if (e.keyCode !== keys.ESC || this.mode !== 'show') {
       return;
diff --git a/ui/app/lib/kv-metadata-object.js b/ui/app/lib/kv-metadata-object.js
deleted file mode 100644
index 9adf366d818d..000000000000
--- a/ui/app/lib/kv-metadata-object.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import ArrayProxy from '@ember/array/proxy';
-import { guidFor } from '@ember/object/internals';
-
-export default ArrayProxy.extend({
-  createClass() {
-    let contents = Object.keys([]).map(key => {
-      let obj = {
-        name: key,
-        value: '',
-      };
-      guidFor(obj);
-      return obj;
-    });
-    this.setObjects(
-      // ARG TODO not sure I need the sorting
-      contents.sort((a, b) => {
-        if (a.name === '') {
-          return 1;
-        }
-        if (b.name === '') {
-          return -1;
-        }
-        return a.name.localeCompare(b.name);
-      })
-    );
-    return this;
-  },
-});
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index d5052365bb77..fb939ed14e3b 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -7,6 +7,13 @@ import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 import { validator, buildValidations } from 'ember-cp-validations';
 
 const Validations = buildValidations({
+  // ARG TODO later:
+  //The new custom_metadata field will compete with the version history for storage space in the key metadata entry. To attempt to prevent contention, Vault will impose limits on both the keys and values within the custom_metadata field. The keys and values will be limited to 128 and 512 bytes, respectively. Vault will also impose a limit of 64 total custom_metadata keys.
+
+  customMetadata: validator('format', {
+    regex: /^[^\/]+$/,
+    message: 'Custom Values cannot contain a forward slash.',
+  }),
   maxVersions: [
     validator('number', {
       allowString: false,
@@ -31,6 +38,9 @@ export default Model.extend(KeyMixin, Validations, {
   updatedTime: attr(),
   currentVersion: attr('number'),
   oldestVersion: attr('number'),
+  customMetadata: attr('object', {
+    editType: 'kv',
+  }),
   maxVersions: attr('number', {
     defaultValue: 10,
     label: 'Maximum Number of Versions',
@@ -41,9 +51,8 @@ export default Model.extend(KeyMixin, Validations, {
     helpText:
       'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter',
   }),
-  customMetadata: attr('object'),
   fields: computed(function() {
-    return expandAttributeMeta(this, ['maxVersions', 'casRequired']);
+    return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired']);
   }),
   versionPath: lazyCapabilities(apiPath`${'engineId'}/data/${'id'}`, 'engineId', 'id'),
   secretPath: lazyCapabilities(apiPath`${'engineId'}/metadata/${'id'}`, 'engineId', 'id'),
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 825756c9d4bf..009ce16127d2 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,66 +1,10 @@
 {{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
-{{!-- Angel beginning of custom metadata --}}
-  <div class="form-section">
-    <label class="title is-5">
-      Custom metadata
-    </label>
-      {{#each @customMetadata as |metadata index|}}
-        <div class="info-table-row">
-          <div class="column is-one-quarter info-table-row-edit">
-            <Input 
-              data-test-secret-key={{true}}
-              @value={{metadata.key}}
-              placeholder="key"
-              @change={{action @editActions.handleChange}}
-              class="input"
-              @autocomplete="off"
-              @spellcheck="false"
-            />
-          </div>
-          <div class="column info-table-row-edit">
-            <textarea 
-              class="input"
-              rows=1 wrap="off"
-              value={{metadata.value}}
-            />
-          </div>
-          <div class="column is-narrow info-table-row-edit">
-            {{#if (eq @customMetadata.length (inc index))}}
-              <button type="button" {{action @editActions.addRow}} class="button is-outlined is-primary" data-test-secret-add-row="true">
-                Add
-              </button>
-            {{else}}
-              <button
-                class="button has-text-grey is-expanded is-icon"
-                type="button"
-                {{action @editActions.deleteRow metadata.key}}
-                aria-label="Delete row"
-              >
-                <Icon
-                  @glyph="trash"
-                  @size="l"
-                  class="has-text-grey-light"
-                />
-              </button>
-            {{/if}}
-          </div>
-        </div>
-        {{#if @validationMessages.key}}
-          <AlertInline 
-            @type="danger" 
-            @message={{@validationMessages.key}} 
-            @paddingTop=true
-            @isMarginless=true
-          />
-        {{/if}}
-      {{/each}}
-      </div>
-      {{!-- end of custom metadata --}}
   <div data-test-metadata-fields class="form-section box is-shadowless is-fullwidth">
     <label class="title is-5">
       Additional Options
     </label>
     {{#each @model.fields as |attr|}}
+    {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
       <FormField 
         data-test-field 
         @attr={{attr}}
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 4978a0bb0b21..9bbf1bd3b9f6 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -251,7 +251,6 @@
       <SecretEditMetadata
         @showAdvancedMode={{showAdvancedMode}}
         @codemirrorString={{codemirrorString}}
-        @customMetadata={{customMetadata}}
         @isV2={{isV2}}
         @model={{model}}
         @canEditV2Secret={{canEditV2Secret}}
@@ -264,6 +263,7 @@
           addRow=(action "addRow")
         }}
         @onKeyUp={{perform waitForKeyUp}}
+        @onKeyUpMetadata={{updateCustomMetadata}}
         @validationMessages={{validationMessages}}
       />
   {{!-- Angel turn into seperate component --}}
@@ -305,7 +305,6 @@
       <SecretEditMetadata
         @showAdvancedMode={{showAdvancedMode}}
         @codemirrorString={{codemirrorString}}
-        @customMetadata={{customMetadata}}
         @isV2={{isV2}}
         @canEditV2Secret={{canEditV2Secret}}
         @showWriteWithoutReadWarning={{isWriteWithoutRead}}
@@ -319,6 +318,7 @@
           addRow=(action "addRow")
         }}
         @onKeyUp={{perform waitForKeyUp}}
+        @onKeyUpMetadata={{updateCustomMetadata}}
         @validationMessages={{validationMessages}}
       />
     </div>

From f311c18e94884bb854375150ed95b57d6df6f382 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 27 Jul 2021 16:09:13 -0600
Subject: [PATCH 03/40] setting up things

---
 ui/app/components/kv-object-editor.js         |  6 ++-
 ui/app/models/secret-v2.js                    |  3 ++
 ui/app/styles/core/box.scss                   | 17 ++++++++-
 .../templates/components/kv-object-editor.hbs |  9 ++++-
 .../components/secret-edit-metadata.hbs       | 38 +++++++++++++------
 .../addon/templates/components/form-field.hbs | 29 +++++++-------
 6 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/ui/app/components/kv-object-editor.js b/ui/app/components/kv-object-editor.js
index a8da4b35c343..fc8b8e820aea 100644
--- a/ui/app/components/kv-object-editor.js
+++ b/ui/app/components/kv-object-editor.js
@@ -4,15 +4,19 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import KVObject from 'vault/lib/kv-object';
+// ARG TODO add documentation here
 
 export default Component.extend({
   'data-test-component': 'kv-object-editor',
-  classNames: ['field', 'form-section'],
+  classNames: ['field'],
+  classNameBindings: ['formSection:form-section'],
+  formSection: true,
   // public API
   // Ember Object to mutate
   value: null,
   label: null,
   helpText: null,
+  subText: null,
   // onChange will be called with the changed Value
   onChange() {},
 
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index fb939ed14e3b..fea16e3be581 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -40,10 +40,13 @@ export default Model.extend(KeyMixin, Validations, {
   oldestVersion: attr('number'),
   customMetadata: attr('object', {
     editType: 'kv',
+    subText: 'An optional set of informational key-value pairs that will be stored with all secret versions.',
   }),
   maxVersions: attr('number', {
     defaultValue: 10,
     label: 'Maximum Number of Versions',
+    subText:
+      'The number of versions to keep per key. Once the number of keys exceeds the maximum number set here, the oldest version will be permanently deleted.',
   }),
   casRequired: attr('boolean', {
     defaultValue: false,
diff --git a/ui/app/styles/core/box.scss b/ui/app/styles/core/box.scss
index 277c55ed3507..fc7cec98cfce 100644
--- a/ui/app/styles/core/box.scss
+++ b/ui/app/styles/core/box.scss
@@ -1,5 +1,16 @@
 .box {
   box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+
+  .title {
+    &.has-padding-top {
+      padding-top: $spacing-m;
+    }
+  }
+  p {
+    &.has-padding-bottom {
+      padding-bottom: $spacing-s;
+    }
+  }
 }
 .box.is-fullwidth {
   padding-left: 0;
@@ -20,7 +31,11 @@
 .box.is-rounded {
   border-radius: 3px;
 }
-
 .box.no-top-shadow {
   box-shadow: inset 0 -1px 0 0 rgba($black, 0.1);
 }
+.box.has-container {
+  box-shadow: 0 4px 4px rgba($black, 0.25);
+  border: 1px solid #bac1cc;
+  padding: $spacing-l;
+}
diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs
index 3d1bb75bc38f..74d3062d2bd9 100644
--- a/ui/app/templates/components/kv-object-editor.hbs
+++ b/ui/app/templates/components/kv-object-editor.hbs
@@ -1,12 +1,17 @@
 {{#if label}}
-  <label class="title is-4" data-test-kv-label="true">
+  <label class="title {{if small-label 'is-5' 'is-4'}}" data-test-kv-label="true">
     {{label}}
     {{#if helpText}}
       <InfoTooltip>
-        {{helpText}}
+       {{helpText}}
       </InfoTooltip>
     {{/if}}
   </label>
+  {{#if true}}
+    <p class="has-padding-bottom">
+      {{subText}}
+    </p> 
+  {{/if}}
 {{/if}}
 {{#each kvData as |row index|}}
   <div class="columns is-variable is-1" data-test-kv-row>
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 009ce16127d2..cda3bbd24a97 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,21 +1,37 @@
 {{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
-  <div data-test-metadata-fields class="form-section box is-shadowless is-fullwidth">
-    <label class="title is-5">
-      Additional Options
-    </label>
+  <div data-test-metadata-fields class="box has-container is-fullwidth">
+    <p class="field">
+      The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
+    </p>
     {{#each @model.fields as |attr|}}
     {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
-      <FormField 
-        data-test-field 
-        @attr={{attr}}
-        @model={{@model}}
-        @onKeyUp={{@onKeyUp}}
-        @validationMessages={{@validationMessages}}
-      />
+      {{#if (eq attr.name "customMetadata")}}
+        <FormField 
+          data-test-field 
+          @attr={{attr}}
+          @model={{@model}}
+          @onKeyUp={{@onKeyUp}}
+          @validationMessages={{@validationMessages}}
+        />
+        <label class="title has-padding-top is-5">
+          Additional Options
+        </label>
+      {{/if}}
+      {{#unless (eq attr.name "customMetadata")}}
+        <FormField 
+          data-test-field 
+          @attr={{attr}}
+          @model={{@model}}
+          @onKeyUp={{@onKeyUp}}
+          @validationMessages={{@validationMessages}}
+        />
+      {{/unless}}
     {{/each}}
+    
   </div>
 {{/if}}
 
+{{!-- ARG TODO test to see if can force these warnings and turn into validation instead --}}
 {{#if @showWriteWithoutReadWarning}}
   {{#if (and @isV2 @model.failedServerRead)}}
     <AlertBanner
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index e0eb202095d2..e90c11d045b2 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -18,21 +18,21 @@
     )
   )
 }}
-{{#unless (eq attr.type "object")}}
+  {{#unless (eq attr.type "object")}}
     <label for="{{attr.name}}" class="is-label">
-    {{labelString}}
-    {{#if attr.options.helpText}}
-      {{#info-tooltip}}
-        <span data-test-help-text>
-          {{attr.options.helpText}}
-        </span>
-      {{/info-tooltip}}
+      {{labelString}}
+      {{#if attr.options.helpText}}
+        {{#info-tooltip}}
+          <span data-test-help-text>
+            {{attr.options.helpText}}
+          </span>
+        {{/info-tooltip}}
+      {{/if}}
+    </label>
+    {{#if attr.options.subText}}
+      <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
     {{/if}}
-  </label>
-  {{#if attr.options.subText}}
-    <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
-  {{/if}}
-{{/unless}}
+  {{/unless}}
 {{/unless}}
 {{#if attr.options.possibleValues}}
   <div class="control is-expanded">
@@ -109,6 +109,9 @@
     label=labelString
     warning=attr.options.warning
     helpText=attr.options.helpText
+    subText=attr.options.subText
+    small-label=(if (eq valuePath 'customMetadata') true false )
+    formSection=(if (eq valuePath 'customMetadata') false true )
   }}
 {{else if (eq attr.options.editType "file")}}
 {{!-- File Input --}}

From e74a728700a62d36f1704ca11cb68e2c95e2f2e9 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 28 Jul 2021 12:53:55 -0600
Subject: [PATCH 04/40] setup two routes for metadata

---
 ui/app/models/secret-v2.js                    |  9 +++++++-
 ui/app/router.js                              |  8 ++++++-
 .../cluster/secrets/backend/metadata/edit.js  | 18 +++++++++++++++
 .../cluster/secrets/backend/metadata/show.js  | 22 +++++++++++++++++++
 ui/app/styles/core/forms.scss                 |  4 ++++
 ui/app/templates/components/secret-edit.hbs   | 19 ++++++++++++++++
 .../cluster/secrets/backend/metadata/edit.hbs |  1 +
 .../cluster/secrets/backend/metadata/show.hbs |  1 +
 .../addon/templates/components/form-field.hbs |  7 ++++--
 9 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
 create mode 100644 ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
 create mode 100644 ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
 create mode 100644 ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs

diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index fea16e3be581..f0c4b81cff6d 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -54,8 +54,15 @@ export default Model.extend(KeyMixin, Validations, {
     helpText:
       'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter',
   }),
+  deleteVersionAfter: attr({
+    defaultValue: 0,
+    editType: 'ttl',
+    label: 'Automate secret deletion',
+    textDisabled: 'A secret’s version must be manually deleted.',
+    textEnabled: 'Delete a secret version after.',
+  }),
   fields: computed(function() {
-    return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired']);
+    return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired', 'deleteVersionAfter']);
   }),
   versionPath: lazyCapabilities(apiPath`${'engineId'}/data/${'id'}`, 'engineId', 'id'),
   secretPath: lazyCapabilities(apiPath`${'engineId'}/metadata/${'id'}`, 'engineId', 'id'),
diff --git a/ui/app/router.js b/ui/app/router.js
index cfa018b0c572..ad26206ccda3 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -94,7 +94,7 @@ Router.map(function() {
           this.route('index', { path: '/' });
           this.route('configuration');
           // because globs / params can't be empty,
-          // we have to special-case ids of '' with thier own routes
+          // we have to special-case ids of '' with their own routes
           this.route('list-root', { path: '/list/' });
           this.route('create-root', { path: '/create/' });
           this.route('show-root', { path: '/show/' });
@@ -105,6 +105,12 @@ Router.map(function() {
           this.route('create', { path: '/create/*secret' });
           this.route('edit', { path: '/edit/*secret' });
 
+          // // kv2 metadata
+          this.route('metadata', function() {
+            this.route('show', { path: '/show/' });
+            this.route('edit', { path: '/edit/*secret' });
+          });
+
           this.route('credentials-root', { path: '/credentials/' });
           this.route('credentials', { path: '/credentials/*secret' });
 
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js b/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
new file mode 100644
index 000000000000..3c0976dadf2a
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+// import { inject as service } from '@ember/service';
+// import { action } from '@ember/object';
+
+export default class MetadataEdit extends Route {
+  // @service store;
+  // // …
+  // @action
+  // async visitUserProfile(id) {
+  //   this.store.findRecord('user', id).then(function (user) {
+  //     // Success callback
+  //     this.transitionTo('user.profile', user);
+  //   }).catch(function () {
+  //     // Error callback
+  //     this.transitionTo('not-found', 404);
+  //   }
+  // }
+}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js b/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
new file mode 100644
index 000000000000..bbd9a1e02a0b
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
@@ -0,0 +1,22 @@
+import Route from '@ember/routing/route';
+// import EditBase from '../secret-edit';
+// import { inject as service } from '@ember/service';
+// import { action } from '@ember/object';
+
+export default class MetadataShow extends Route {
+  model(params) {
+    // params because its a dynamic segment
+  }
+  // @service store;
+  // // …
+  // @action
+  // async visitUserProfile(id) {
+  //   this.store.findRecord('user', id).then(function (user) {
+  //     // Success callback
+  //     this.transitionTo('user.profile', user);
+  //   }).catch(function () {
+  //     // Error callback
+  //     this.transitionTo('not-found', 404);
+  //   }
+  // }
+}
diff --git a/ui/app/styles/core/forms.scss b/ui/app/styles/core/forms.scss
index ceb3399d87d3..ceb102b2a009 100644
--- a/ui/app/styles/core/forms.scss
+++ b/ui/app/styles/core/forms.scss
@@ -60,6 +60,10 @@ label {
   margin-left: $size-10;
 }
 
+.b-checkbox > .sub-text {
+  padding-left: 2rem;
+}
+
 .help {
   &.is-danger {
     font-weight: $weight-bold;
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 9bbf1bd3b9f6..e441141038ec 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -16,6 +16,25 @@
     </h1>
   </p.levelLeft>
 </PageHeader>
+{{!-- tabs for show only --}}
+{{#if (eq mode "show")}}
+  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
+    <nav class="tabs">
+      <ul>
+        <LinkTo @route="vault.cluster.secrets.backend.show" @tagName="li" @activeClass="is-active">
+          <LinkTo @route="vault.cluster.secrets.backend.show">
+            Secret
+          </LinkTo>
+        </LinkTo>
+        <LinkTo @route="vault.cluster.secrets.backend.metadata.show" @model={{key.id}} @tagName="li" @activeClass="is-active">
+          <LinkTo @route="vault.cluster.secrets.backend.metadata.show">
+            Metadata
+          </LinkTo>
+        </LinkTo>
+      </ul>
+    </nav>
+  </div>
+{{/if}}
 
 <Toolbar>
   {{#unless (and (eq mode 'show') isWriteWithoutRead)}}
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
new file mode 100644
index 000000000000..8491ab9f808d
--- /dev/null
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
@@ -0,0 +1 @@
+edit
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs
new file mode 100644
index 000000000000..4ccb5668ebe4
--- /dev/null
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs
@@ -0,0 +1 @@
+show file
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index e90c11d045b2..136504e491ed 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -127,8 +127,8 @@
     <TtlPicker2
       @onChange={{action (action "setAndBroadcastTtl" valuePath)}}
       @label={{labelString}}
-      @helperTextDisabled={{or attr.subText "Vault will use the default lease duration"}}
-      @helperTextEnabled={{or attr.subText "Lease will expire after"}}
+      @helperTextDisabled={{or attr.options.textDisabled "Vault will use the default lease duration"}}
+      @helperTextEnabled={{or attr.options.textEnabled "Lease will expire after"}}
       @description={{attr.helpText}}
       @initialValue={{or (get model valuePath) attr.options.setDefault}}
     />
@@ -310,6 +310,9 @@
         {{#info-tooltip}}{{attr.options.helpText}}{{/info-tooltip}}
       {{/if}}
     </label>
+      {{#if attr.options.subText}}
+        <p class="sub-text">{{attr.options.subText}}</p>
+      {{/if}}
   </div>
 {{else if (eq attr.type "object")}}
   {{json-editor

From 83322b1c625685ad57a84cd8f172f3d3e9b69348 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 28 Jul 2021 15:26:27 -0600
Subject: [PATCH 05/40] routing

---
 ui/app/models/database/role.js                |  2 +-
 ui/app/router.js                              |  7 +--
 .../cluster/secrets/backend/metadata/edit.js  | 18 -------
 .../cluster/secrets/backend/metadata/show.js  | 22 ---------
 .../cluster/secrets/backend/show-metadata.js  | 49 +++++++++++++++++++
 ui/app/templates/components/secret-edit.hbs   |  4 +-
 .../cluster/secrets/backend/metadata/edit.hbs |  1 -
 .../cluster/secrets/backend/metadata/show.hbs |  1 -
 .../cluster/secrets/backend/show-metadata.hbs | 27 ++++++++++
 9 files changed, 80 insertions(+), 51 deletions(-)
 delete mode 100644 ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
 delete mode 100644 ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
 create mode 100644 ui/app/routes/vault/cluster/secrets/backend/show-metadata.js
 delete mode 100644 ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
 delete mode 100644 ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs
 create mode 100644 ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs

diff --git a/ui/app/models/database/role.js b/ui/app/models/database/role.js
index cdc557c8f8ef..839995aab85f 100644
--- a/ui/app/models/database/role.js
+++ b/ui/app/models/database/role.js
@@ -45,7 +45,7 @@ export default Model.extend({
   rotation_period: attr({
     editType: 'ttl',
     defaultValue: '24h',
-    subText:
+    textDisabled:
       'Specifies the amount of time Vault should wait before rotating the password. The minimum is 5 seconds. Default is 24 hours.',
   }),
   creation_statements: attr('array', {
diff --git a/ui/app/router.js b/ui/app/router.js
index ad26206ccda3..f99dd1832809 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -102,15 +102,10 @@ Router.map(function() {
 
           this.route('list', { path: '/list/*secret' });
           this.route('show', { path: '/show/*secret' });
+          this.route('show-metadata', { path: '/show-metadata/*secret' }); // show-metadata or edit-metadata
           this.route('create', { path: '/create/*secret' });
           this.route('edit', { path: '/edit/*secret' });
 
-          // // kv2 metadata
-          this.route('metadata', function() {
-            this.route('show', { path: '/show/' });
-            this.route('edit', { path: '/edit/*secret' });
-          });
-
           this.route('credentials-root', { path: '/credentials/' });
           this.route('credentials', { path: '/credentials/*secret' });
 
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js b/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
deleted file mode 100644
index 3c0976dadf2a..000000000000
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata/edit.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Route from '@ember/routing/route';
-// import { inject as service } from '@ember/service';
-// import { action } from '@ember/object';
-
-export default class MetadataEdit extends Route {
-  // @service store;
-  // // …
-  // @action
-  // async visitUserProfile(id) {
-  //   this.store.findRecord('user', id).then(function (user) {
-  //     // Success callback
-  //     this.transitionTo('user.profile', user);
-  //   }).catch(function () {
-  //     // Error callback
-  //     this.transitionTo('not-found', 404);
-  //   }
-  // }
-}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js b/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
deleted file mode 100644
index bbd9a1e02a0b..000000000000
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata/show.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Route from '@ember/routing/route';
-// import EditBase from '../secret-edit';
-// import { inject as service } from '@ember/service';
-// import { action } from '@ember/object';
-
-export default class MetadataShow extends Route {
-  model(params) {
-    // params because its a dynamic segment
-  }
-  // @service store;
-  // // …
-  // @action
-  // async visitUserProfile(id) {
-  //   this.store.findRecord('user', id).then(function (user) {
-  //     // Success callback
-  //     this.transitionTo('user.profile', user);
-  //   }).catch(function () {
-  //     // Error callback
-  //     this.transitionTo('not-found', 404);
-  //   }
-  // }
-}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/show-metadata.js b/ui/app/routes/vault/cluster/secrets/backend/show-metadata.js
new file mode 100644
index 000000000000..88db746a0313
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/show-metadata.js
@@ -0,0 +1,49 @@
+import Route from '@ember/routing/route';
+// import EditBase from '../secret-edit';
+import { inject as service } from '@ember/service';
+// import { action } from '@ember/object';
+
+export default class MetadataShow extends Route {
+  @service store;
+  // ARG TODO unloadmodelroute
+  model(params) {
+    console.log('model hook', params);
+    let { secret } = params; // of dynamic route /*secret
+    let parentModel = this.modelFor('vault.cluster.secrets.backend');
+    return this.store
+      .queryRecord('secret-v2', {
+        backend: 'kv',
+        id: secret,
+      })
+      .then(record => {
+        console.log(record, 'RECORD!!!');
+        return record;
+      });
+    // make an API request that uses the id
+  }
+}
+// params because its a dynamic segment
+// constructor() {
+//   super(...arguments);
+//   let test = this.paramsFor(this.routeName);
+//   console.log(test, 'l;ajdf');
+//   // this.fetchCapabilities();
+// }
+
+// controller.setProperties({
+//   model: model.lease,
+//   capabilities: model.capabilities,
+//   baseKey: { id: secret },
+// });
+// @service store;
+// // …
+// @action
+// async visitUserProfile(id) {
+//   this.store.findRecord('user', id).then(function (user) {
+//     // Success callback
+//     this.transitionTo('user.profile', user);
+//   }).catch(function () {
+//     // Error callback
+//     this.transitionTo('not-found', 404);
+//   }
+// }
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index e441141038ec..9b16a8258f48 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -26,8 +26,8 @@
             Secret
           </LinkTo>
         </LinkTo>
-        <LinkTo @route="vault.cluster.secrets.backend.metadata.show" @model={{key.id}} @tagName="li" @activeClass="is-active">
-          <LinkTo @route="vault.cluster.secrets.backend.metadata.show">
+        <LinkTo @route="vault.cluster.secrets.backend.show-metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
+          <LinkTo @route="vault.cluster.secrets.backend.show-metadata">
             Metadata
           </LinkTo>
         </LinkTo>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
deleted file mode 100644
index 8491ab9f808d..000000000000
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata/edit.hbs
+++ /dev/null
@@ -1 +0,0 @@
-edit
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs
deleted file mode 100644
index 4ccb5668ebe4..000000000000
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata/show.hbs
+++ /dev/null
@@ -1 +0,0 @@
-show file
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs
new file mode 100644
index 000000000000..420682455753
--- /dev/null
+++ b/ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs
@@ -0,0 +1,27 @@
+<PageHeader as |p|>
+  <p.top>
+    <KeyValueHeader @baseKey={{baseKey}} @path="vault.cluster.secrets.backend.list" @mode={{mode}} @root={{root}} @showCurrent={{true}} />
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      {{model.id}}
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+{{!-- tabs for show only --}}
+<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
+  <nav class="tabs">
+    <ul>
+      <LinkTo @route="vault.cluster.secrets.backend.show" @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{model.id}}>
+          Secret
+        </LinkTo>
+      </LinkTo>
+      <LinkTo @route="vault.cluster.secrets.backend.show-metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.secrets.backend.show-metadata">
+          Metadata
+        </LinkTo>
+      </LinkTo>
+    </ul>
+  </nav>
+</div>
\ No newline at end of file

From fed0f56080298a83a5a04a36e464ba5eb38735f6 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 29 Jul 2021 10:19:10 -0600
Subject: [PATCH 06/40] clean up routing

---
 ui/app/router.js                                            | 2 +-
 .../secrets/backend/{show-metadata.js => metadata.js}       | 0
 ui/app/templates/components/secret-edit.hbs                 | 6 +++---
 .../secrets/backend/{show-metadata.hbs => metadata.hbs}     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename ui/app/routes/vault/cluster/secrets/backend/{show-metadata.js => metadata.js} (100%)
 rename ui/app/templates/vault/cluster/secrets/backend/{show-metadata.hbs => metadata.hbs} (79%)

diff --git a/ui/app/router.js b/ui/app/router.js
index f99dd1832809..604b00a414cc 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -102,7 +102,7 @@ Router.map(function() {
 
           this.route('list', { path: '/list/*secret' });
           this.route('show', { path: '/show/*secret' });
-          this.route('show-metadata', { path: '/show-metadata/*secret' }); // show-metadata or edit-metadata
+          this.route('metadata', { path: '/metadata/*secret' });
           this.route('create', { path: '/create/*secret' });
           this.route('edit', { path: '/edit/*secret' });
 
diff --git a/ui/app/routes/vault/cluster/secrets/backend/show-metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
similarity index 100%
rename from ui/app/routes/vault/cluster/secrets/backend/show-metadata.js
rename to ui/app/routes/vault/cluster/secrets/backend/metadata.js
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 9b16a8258f48..e5f9b8c0d563 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -21,13 +21,13 @@
   <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
     <nav class="tabs">
       <ul>
-        <LinkTo @route="vault.cluster.secrets.backend.show" @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{key.id}} @tagName="li" @activeClass="is-active">
           <LinkTo @route="vault.cluster.secrets.backend.show">
             Secret
           </LinkTo>
         </LinkTo>
-        <LinkTo @route="vault.cluster.secrets.backend.show-metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
-          <LinkTo @route="vault.cluster.secrets.backend.show-metadata">
+        <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
+          <LinkTo @route="vault.cluster.secrets.backend.metadata">
             Metadata
           </LinkTo>
         </LinkTo>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
similarity index 79%
rename from ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs
rename to ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index 420682455753..4197fa45b144 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/show-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -17,8 +17,8 @@
           Secret
         </LinkTo>
       </LinkTo>
-      <LinkTo @route="vault.cluster.secrets.backend.show-metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
-        <LinkTo @route="vault.cluster.secrets.backend.show-metadata">
+      <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{model.id}} @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.secrets.backend.metadata">
           Metadata
         </LinkTo>
       </LinkTo>

From 5f26562f4cdcba63df75787664ff3cd96ec4acc0 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 29 Jul 2021 11:01:20 -0600
Subject: [PATCH 07/40] meh router changes not my favorite but its working

---
 ui/app/router.js                                    |  1 +
 .../vault/cluster/secrets/backend/edit-metadata.js  |  3 +++
 .../vault/cluster/secrets/backend/edit-metadata.hbs |  1 +
 .../vault/cluster/secrets/backend/metadata.hbs      | 13 +++++++++++--
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
 create mode 100644 ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs

diff --git a/ui/app/router.js b/ui/app/router.js
index 604b00a414cc..ee964bfb77ac 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -103,6 +103,7 @@ Router.map(function() {
           this.route('list', { path: '/list/*secret' });
           this.route('show', { path: '/show/*secret' });
           this.route('metadata', { path: '/metadata/*secret' });
+          this.route('edit-metadata', { path: '/edit-metadata/*secret' });
           this.route('create', { path: '/create/*secret' });
           this.route('edit', { path: '/edit/*secret' });
 
diff --git a/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
new file mode 100644
index 000000000000..33ed9eca06cf
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class VaultClusterSecretsBackendEditMetadataRoute extends Route {}
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
new file mode 100644
index 000000000000..c36ace75c13a
--- /dev/null
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -0,0 +1 @@
+edit-metadata
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index 4197fa45b144..521a24cb7be2 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -8,7 +8,6 @@
     </h1>
   </p.levelLeft>
 </PageHeader>
-{{!-- tabs for show only --}}
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
   <nav class="tabs">
     <ul>
@@ -24,4 +23,14 @@
       </LinkTo>
     </ul>
   </nav>
-</div>
\ No newline at end of file
+</div>
+<Toolbar>
+  {{!-- ARG TODO add conditional here, shouldn't access edit if no edit to metadata access --}}
+  <ToolbarActions>  
+    <ToolbarLink
+      @params={{array 'vault.cluster.secrets.backend.edit-metadata' model.id }}
+    >
+      Edit metadata
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
\ No newline at end of file

From 640f8eb5b3ab4d76647ed5a95dd08df63d5bea0f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 29 Jul 2021 14:06:28 -0600
Subject: [PATCH 08/40] show metadata

---
 .../vault/cluster/secrets/backend/metadata.js | 34 +++----------
 ui/app/templates/components/secret-edit.hbs   |  1 +
 .../cluster/secrets/backend/metadata.hbs      | 48 +++++++++++++++----
 3 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index 88db746a0313..81fabb0c83a9 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -7,43 +7,21 @@ export default class MetadataShow extends Route {
   @service store;
   // ARG TODO unloadmodelroute
   model(params) {
-    console.log('model hook', params);
     let { secret } = params; // of dynamic route /*secret
-    let parentModel = this.modelFor('vault.cluster.secrets.backend');
     return this.store
       .queryRecord('secret-v2', {
         backend: 'kv',
         id: secret,
       })
       .then(record => {
-        console.log(record, 'RECORD!!!');
+        // ARG TODO remove when API is done
+        record.customMetadata = {
+          foo: 'abc',
+          bar: '123',
+          baz: '5c07d823-3810-48f6-a147-4c06b5219e84',
+        };
         return record;
       });
     // make an API request that uses the id
   }
 }
-// params because its a dynamic segment
-// constructor() {
-//   super(...arguments);
-//   let test = this.paramsFor(this.routeName);
-//   console.log(test, 'l;ajdf');
-//   // this.fetchCapabilities();
-// }
-
-// controller.setProperties({
-//   model: model.lease,
-//   capabilities: model.capabilities,
-//   baseKey: { id: secret },
-// });
-// @service store;
-// // …
-// @action
-// async visitUserProfile(id) {
-//   this.store.findRecord('user', id).then(function (user) {
-//     // Success callback
-//     this.transitionTo('user.profile', user);
-//   }).catch(function () {
-//     // Error callback
-//     this.transitionTo('not-found', 404);
-//   }
-// }
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index e5f9b8c0d563..d163bf47ec85 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -1,3 +1,4 @@
+{{log root "Root from secret edit"}}
 <PageHeader as |p|>
   <p.top>
     <KeyValueHeader @baseKey={{baseKey}} @path="vault.cluster.secrets.backend.list" @mode={{mode}} @root={{root}} @showCurrent={{true}} />
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index 521a24cb7be2..375b6ce04748 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -1,22 +1,28 @@
 <PageHeader as |p|>
   <p.top>
-    <KeyValueHeader @baseKey={{baseKey}} @path="vault.cluster.secrets.backend.list" @mode={{mode}} @root={{root}} @showCurrent={{true}} />
+    <KeyValueHeader
+      @baseKey={{hash id=model.id}}
+      @path="vault.cluster.secrets.backend.show"
+      @mode="show"
+      @showCurrent={{true}} 
+    />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
-      {{model.id}}
+      {{this.model.id}}
     </h1>
   </p.levelLeft>
 </PageHeader>
+{{!-- Tabs --}}
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
   <nav class="tabs">
     <ul>
       <LinkTo @route="vault.cluster.secrets.backend.show" @tagName="li" @activeClass="is-active">
-        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{model.id}}>
+        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.model.id}}>
           Secret
         </LinkTo>
       </LinkTo>
-      <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{model.id}} @tagName="li" @activeClass="is-active">
+      <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{this.model.id}} @tagName="li" @activeClass="is-active">
         <LinkTo @route="vault.cluster.secrets.backend.metadata">
           Metadata
         </LinkTo>
@@ -24,13 +30,39 @@
     </ul>
   </nav>
 </div>
+
 <Toolbar>
   {{!-- ARG TODO add conditional here, shouldn't access edit if no edit to metadata access --}}
   <ToolbarActions>  
-    <ToolbarLink
-      @params={{array 'vault.cluster.secrets.backend.edit-metadata' model.id }}
-    >
+    <ToolbarLink @params={{array 'vault.cluster.secrets.backend.edit-metadata' this.model.id }}>
       Edit metadata
     </ToolbarLink>
   </ToolbarActions>
-</Toolbar>
\ No newline at end of file
+</Toolbar>
+
+<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+  <InfoTableRow @alwaysRender={{true}} @label="Maximum versions" @value={{this.model.maxVersions}} />
+  <InfoTableRow @alwaysRender={{true}} @label="Check-and-Set required" @value={{this.model.casRequired}} />
+  <InfoTableRow @alwaysRender={{true}} @label="Delete version after" @value={{if (eq this.model.deleteVersionAfter "0s") "Never delete" this.model.deleteVersionAfter}} />
+</div>
+<div class="form-section">
+  <label class="title has-padding-top is-5">
+    Metadata
+  </label>
+</div>
+<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+  {{#if this.model.customMetadata}}
+    {{#each-in this.model.customMetadata as | key value|}}
+      <InfoTableRow @alwaysRender={{false}} @label={{key}} @value={{value}} />
+    {{/each-in}}
+  {{else}}
+    <EmptyState
+      @title="No custom metadata"
+      @bottomBorder={{true}}
+      @message="Once entered, custom metadata will be shown here.">
+        <DocLink @path="/docs/secrets/kv/kv-v2.html">
+          Add metadata
+        </DocLink>
+    </EmptyState>
+  {{/if}}
+</div>
\ No newline at end of file

From d5e5ed59dafdb24ca05b29a35c7404d58357b71a Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 30 Jul 2021 10:47:54 -0600
Subject: [PATCH 09/40] add controller for backendCrumb mixin

---
 .../vault/cluster/secrets/backend/actions.js       | 14 +-------------
 .../vault/cluster/secrets/backend/metadata.js      | 11 +++++++++++
 .../vault/cluster/secrets/backend/metadata.js      | 11 ++++++++---
 .../vault/cluster/secrets/backend/metadata.hbs     |  4 +++-
 4 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 ui/app/controllers/vault/cluster/secrets/backend/metadata.js

diff --git a/ui/app/controllers/vault/cluster/secrets/backend/actions.js b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
index 17f11291f34a..7bd67c4d3d72 100644
--- a/ui/app/controllers/vault/cluster/secrets/backend/actions.js
+++ b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
@@ -1,16 +1,4 @@
 import Controller from '@ember/controller';
 import BackendCrumbMixin from 'vault/mixins/backend-crumb';
 
-export default Controller.extend(BackendCrumbMixin, {
-  queryParams: {
-    selectedAction: 'action',
-  },
-
-  actions: {
-    refresh: function() {
-      // closure actions don't bubble to routes,
-      // so we have to manually bubble here
-      this.send('refreshModel');
-    },
-  },
-});
+export default Controller.extend(BackendCrumbMixin, {});
diff --git a/ui/app/controllers/vault/cluster/secrets/backend/metadata.js b/ui/app/controllers/vault/cluster/secrets/backend/metadata.js
new file mode 100644
index 000000000000..c9b6547478bb
--- /dev/null
+++ b/ui/app/controllers/vault/cluster/secrets/backend/metadata.js
@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import BackendCrumbMixin from 'vault/mixins/backend-crumb';
+import { action } from '@ember/object';
+
+export default class MetadataController extends Controller.extend(BackendCrumbMixin) {
+  // ARG TODO not sure if I'm going to use this yet. Set the controller up for the mixin
+  @action
+  refreshModel() {
+    this.send('refreshModel');
+  }
+}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index 81fabb0c83a9..a3d2897a857c 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -1,11 +1,12 @@
 import Route from '@ember/routing/route';
-// import EditBase from '../secret-edit';
 import { inject as service } from '@ember/service';
-// import { action } from '@ember/object';
-
 export default class MetadataShow extends Route {
   @service store;
   // ARG TODO unloadmodelroute
+  beforeModel() {
+    const { backend } = this.paramsFor('vault.cluster.secrets.backend');
+    this.backend = backend;
+  }
   model(params) {
     let { secret } = params; // of dynamic route /*secret
     return this.store
@@ -24,4 +25,8 @@ export default class MetadataShow extends Route {
       });
     // make an API request that uses the id
   }
+  setupController(controller, model) {
+    controller.set('backend', this.backend); // for backendCrumb
+    controller.set('model', model);
+  }
 }
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index 375b6ce04748..c02e9b4521db 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -5,6 +5,7 @@
       @path="vault.cluster.secrets.backend.show"
       @mode="show"
       @showCurrent={{true}} 
+      @root={{backendCrumb}}
     />
   </p.top>
   <p.levelLeft>
@@ -56,10 +57,11 @@
       <InfoTableRow @alwaysRender={{false}} @label={{key}} @value={{value}} />
     {{/each-in}}
   {{else}}
+  {{!-- ARG TODO double check the link --}}
     <EmptyState
       @title="No custom metadata"
       @bottomBorder={{true}}
-      @message="Once entered, custom metadata will be shown here.">
+      @message="This data is version-agnostic and usually used to describe the secret being stored.">
         <DocLink @path="/docs/secrets/kv/kv-v2.html">
           Add metadata
         </DocLink>

From dee6798df234ebc0c6069629e6545f3e5ae1db55 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 30 Jul 2021 11:59:42 -0600
Subject: [PATCH 10/40] setting up edit metadata and trimming
 SecretEditMetadata component

---
 .../cluster/secrets/backend/edit-metadata.js  |  5 +-
 .../components/secret-edit-metadata.hbs       | 66 +++++++++----------
 ui/app/templates/components/secret-edit.hbs   | 36 +---------
 .../cluster/secrets/backend/edit-metadata.hbs | 20 +++++-
 .../cluster/secrets/backend/metadata.hbs      |  7 +-
 5 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
index 33ed9eca06cf..0dcc58dba6bc 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
@@ -1,3 +1,4 @@
-import Route from '@ember/routing/route';
+// import Route from '@ember/routing/route';
+import Metadata from './metadata';
 
-export default class VaultClusterSecretsBackendEditMetadataRoute extends Route {}
+export default class EditMetadataRoute extends Metadata {}
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index cda3bbd24a97..74d087015d2a 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,38 +1,36 @@
-{{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
-  <div data-test-metadata-fields class="box has-container is-fullwidth">
-    <p class="field">
-      The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
-    </p>
-    {{#each @model.fields as |attr|}}
-    {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
-      {{#if (eq attr.name "customMetadata")}}
-        <FormField 
-          data-test-field 
-          @attr={{attr}}
-          @model={{@model}}
-          @onKeyUp={{@onKeyUp}}
-          @validationMessages={{@validationMessages}}
-        />
-        <label class="title has-padding-top is-5">
-          Additional Options
-        </label>
-      {{/if}}
-      {{#unless (eq attr.name "customMetadata")}}
-        <FormField 
-          data-test-field 
-          @attr={{attr}}
-          @model={{@model}}
-          @onKeyUp={{@onKeyUp}}
-          @validationMessages={{@validationMessages}}
-        />
-      {{/unless}}
-    {{/each}}
-    
-  </div>
-{{/if}}
+{{!-- ARG TODO add empty state if no access --}}
+<div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth"}}>
+  <p class="field">
+    The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
+  </p>
+  {{#each @model.fields as |attr|}}
+  {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
+    {{#if (eq attr.name "customMetadata")}}
+      <FormField 
+        data-test-field 
+        @attr={{attr}}
+        @model={{@model}}
+        @onKeyUp={{@onKeyUp}}
+        @validationMessages={{@validationMessages}}
+      />
+      <label class="title has-padding-top is-5">
+        Additional Options
+      </label>
+    {{/if}}
+    {{#unless (eq attr.name "customMetadata")}}
+      <FormField 
+        data-test-field 
+        @attr={{attr}}
+        @model={{@model}}
+        @onKeyUp={{@onKeyUp}}
+        @validationMessages={{@validationMessages}}
+      />
+    {{/unless}}
+  {{/each}}
+</div>
 
 {{!-- ARG TODO test to see if can force these warnings and turn into validation instead --}}
-{{#if @showWriteWithoutReadWarning}}
+{{!-- {{#if @showWriteWithoutReadWarning}}
   {{#if (and @isV2 @model.failedServerRead)}}
     <AlertBanner
       @type="warning"
@@ -55,4 +53,4 @@
       data-test-v1-write-without-read
     />
   {{/if}}
-{{/if}}
+{{/if}} --}}
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index d163bf47ec85..a9ef2a69b1f0 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -1,4 +1,3 @@
-{{log root "Root from secret edit"}}
 <PageHeader as |p|>
   <p.top>
     <KeyValueHeader @baseKey={{baseKey}} @path="vault.cluster.secrets.backend.list" @mode={{mode}} @root={{root}} @showCurrent={{true}} />
@@ -267,24 +266,11 @@
     @closedLabel="Show secret metadata"
   />
     {{#if showMetadata}}
-    {{!-- can clean up the passed properties in this component --}}
       <SecretEditMetadata
-        @showAdvancedMode={{showAdvancedMode}}
-        @codemirrorString={{codemirrorString}}
-        @isV2={{isV2}}
         @model={{model}}
-        @canEditV2Secret={{canEditV2Secret}}
-        @editActions={{hash
-          codemirrorUpdated=(action "codemirrorUpdated")
-          formatJSON=(action "formatJSON")
-          handleKeyDown=(action "handleKeyDown")
-          handleChange=(action "handleChange")
-          deleteRow=(action "deleteRow")
-          addRow=(action "addRow")
-        }}
         @onKeyUp={{perform waitForKeyUp}}
-        @onKeyUpMetadata={{updateCustomMetadata}}
         @validationMessages={{validationMessages}}
+        @mode={{mode}}
       />
   {{!-- Angel turn into seperate component --}}
   
@@ -322,25 +308,7 @@
           />
         </div>
       {{/if}}
-      <SecretEditMetadata
-        @showAdvancedMode={{showAdvancedMode}}
-        @codemirrorString={{codemirrorString}}
-        @isV2={{isV2}}
-        @canEditV2Secret={{canEditV2Secret}}
-        @showWriteWithoutReadWarning={{isWriteWithoutRead}}
-        @model={{model}}
-        @editActions={{hash
-          codemirrorUpdated=(action "codemirrorUpdated")
-          formatJSON=(action "formatJSON")
-          handleKeyDown=(action "handleKeyDown")
-          handleChange=(action "handleChange")
-          deleteRow=(action "deleteRow")
-          addRow=(action "addRow")
-        }}
-        @onKeyUp={{perform waitForKeyUp}}
-        @onKeyUpMetadata={{updateCustomMetadata}}
-        @validationMessages={{validationMessages}}
-      />
+      {{!-- ARG TODO removed Secret Edit Metadata because can't edit metadata anymore from here --}}
     </div>
     <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
       <div class="field is-grouped">
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index c36ace75c13a..e40101d529c0 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -1 +1,19 @@
-edit-metadata
\ No newline at end of file
+<PageHeader as |p|>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Edit {{this.model.id}} metadata
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+<div class="form-section">
+  <label class="title has-padding-top is-5">
+    Metadata
+  </label>
+  {{!-- metadata inputs --}}
+<SecretEditMetadata
+  @model={{model}}
+  @onKeyUp={{perform waitForKeyUp}}
+  @validationMessages={{validationMessages}}
+/>
+</div>
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index c02e9b4521db..ca68ab6d7b53 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -58,13 +58,14 @@
     {{/each-in}}
   {{else}}
   {{!-- ARG TODO double check the link --}}
+  {{!-- Also unsure if will return empty object or not --}}
     <EmptyState
       @title="No custom metadata"
       @bottomBorder={{true}}
       @message="This data is version-agnostic and usually used to describe the secret being stored.">
-        <DocLink @path="/docs/secrets/kv/kv-v2.html">
+        <LinkTo @route="vault.cluster.secrets.backend.edit-metadata" @model={{this.model.id}}>
           Add metadata
-        </DocLink>
+        </LinkTo>
     </EmptyState>
   {{/if}}
-</div>
\ No newline at end of file
+</div>

From 8ccea40a1792ce400e697f3040670b1aee81ba82 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 2 Aug 2021 11:00:09 -0600
Subject: [PATCH 11/40] add edit metadata save functionality

---
 ui/app/components/secret-edit-metadata.js     |  43 ++++++
 ui/app/models/secret-v2.js                    |   2 +-
 .../components/secret-edit-metadata.hbs       | 127 ++++++++++--------
 ui/app/templates/components/secret-edit.hbs   |   3 +-
 .../cluster/secrets/backend/edit-metadata.hbs |  12 +-
 5 files changed, 126 insertions(+), 61 deletions(-)
 create mode 100644 ui/app/components/secret-edit-metadata.js

diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
new file mode 100644
index 000000000000..b662e9168160
--- /dev/null
+++ b/ui/app/components/secret-edit-metadata.js
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+// ARG TODO FILL OUT
+/**
+ * @module AuthInfo
+ *
+ * @example
+ * ```js
+ * <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action "onLinkClick"}} />
+ * ```
+ *
+ * @param {string} activeClusterName - name of the current cluster, passed from the parent.
+ * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ */
+export default class SecretEditMetadata extends Component {
+  @service router;
+  @service store;
+
+  async save() {
+    let model = this.args.model;
+    console.log(model, 'MODEL');
+    try {
+      await model.save();
+    } catch (err) {
+      // ARG TODO handle error in error object
+      console.log(err, 'ERROR');
+    }
+    this.router.transitionTo('vault.cluster.secrets.backend.metadata', this.args.model.id);
+  }
+
+  @action
+  onSaveChanges(event) {
+    event.preventDefault();
+    const changed = this.args.model.hasDirtyAttributes; // ARG TODO when API done double check this is working
+    if (changed) {
+      this.save();
+      return;
+    }
+    // ARG TODO else validation error?
+  }
+}
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index f0c4b81cff6d..b78ea802e620 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -59,7 +59,7 @@ export default Model.extend(KeyMixin, Validations, {
     editType: 'ttl',
     label: 'Automate secret deletion',
     textDisabled: 'A secret’s version must be manually deleted.',
-    textEnabled: 'Delete a secret version after.',
+    textEnabled: 'Delete a secret version after',
   }),
   fields: computed(function() {
     return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired', 'deleteVersionAfter']);
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 74d087015d2a..8f32ce6f064b 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,56 +1,77 @@
 {{!-- ARG TODO add empty state if no access --}}
-<div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth"}}>
-  <p class="field">
-    The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
-  </p>
-  {{#each @model.fields as |attr|}}
-  {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
-    {{#if (eq attr.name "customMetadata")}}
-      <FormField 
-        data-test-field 
-        @attr={{attr}}
-        @model={{@model}}
-        @onKeyUp={{@onKeyUp}}
-        @validationMessages={{@validationMessages}}
+<form onsubmit={{this.onSaveChanges}}>
+  <div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth"}}>
+    <p class="field">
+      The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
+    </p>
+    {{#each @model.fields as |attr|}}
+    {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
+      {{#if (eq attr.name "customMetadata")}}
+        <FormField 
+          data-test-field 
+          @attr={{attr}}
+          @model={{@model}}
+          @onKeyUp={{@onKeyUp}}
+          @validationMessages={{@validationMessages}}
+        />
+        <label class="title has-padding-top is-5">
+          Additional Options
+        </label>
+      {{/if}}
+      {{#unless (eq attr.name "customMetadata")}}
+        <FormField 
+          data-test-field 
+          @attr={{attr}}
+          @model={{@model}}
+          @onKeyUp={{@onKeyUp}}
+          @validationMessages={{@validationMessages}}
+        />
+      {{/unless}}
+    {{/each}}
+  </div>
+
+  {{!-- ARG TODO test to see if can force these warnings and turn into validation instead --}}
+  {{!-- {{#if @showWriteWithoutReadWarning}}
+    {{#if (and @isV2 @model.failedServerRead)}}
+      <AlertBanner
+        @type="warning"
+        @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
+        @class="is-marginless"
+        data-test-v2-no-cas-warning
       />
-      <label class="title has-padding-top is-5">
-        Additional Options
-      </label>
-    {{/if}}
-    {{#unless (eq attr.name "customMetadata")}}
-      <FormField 
-        data-test-field 
-        @attr={{attr}}
-        @model={{@model}}
-        @onKeyUp={{@onKeyUp}}
-        @validationMessages={{@validationMessages}}
+    {{else if @isV2}}
+      <AlertBanner
+        @type="warning"
+        @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
+        @class="is-marginless"
+        data-test-v2-write-without-read
       />
-    {{/unless}}
-  {{/each}}
-</div>
-
-{{!-- ARG TODO test to see if can force these warnings and turn into validation instead --}}
-{{!-- {{#if @showWriteWithoutReadWarning}}
-  {{#if (and @isV2 @model.failedServerRead)}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
-      @class="is-marginless"
-      data-test-v2-no-cas-warning
-    />
-  {{else if @isV2}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
-      @class="is-marginless"
-      data-test-v2-write-without-read
-    />
-  {{else}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
-      @class="is-marginless"
-      data-test-v1-write-without-read
-    />
-  {{/if}}
-{{/if}} --}}
+    {{else}}
+      <AlertBanner
+        @type="warning"
+        @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
+        @class="is-marginless"
+        data-test-v1-write-without-read
+      />
+    {{/if}}
+  {{/if}} --}}
+  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
+    <div class="field is-grouped">
+      <div class="control">
+        <button
+          type="submit"
+          {{!-- disabled={{or buttonDisabled validationErrorCount}} --}}
+          class="button is-primary"
+        >
+          Save
+        </button>
+      </div>
+      <div class="control">
+        {{!-- ARG TODO this stuff here --}}
+        {{!-- <SecretLink @mode="show" @secret={{@model.id}} @class="button" @queryParams={{query-params version=this.modelForData.version}}>
+          Cancel
+        </SecretLink> --}}
+      </div>
+    </div>
+  </div>
+</form>
\ No newline at end of file
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index a9ef2a69b1f0..361d24a5ed6b 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -268,7 +268,8 @@
     {{#if showMetadata}}
       <SecretEditMetadata
         @model={{model}}
-        @onKeyUp={{perform waitForKeyUp}}
+        {{!-- ARG TODO issue here because passing a task in secret edit but edit edit metadata not a task --}}
+        {{!-- @onKeyUp={{perform waitForKeyUp}} --}}
         @validationMessages={{validationMessages}}
         @mode={{mode}}
       />
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index e40101d529c0..f12f0f90ce29 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -1,7 +1,7 @@
 <PageHeader as |p|>
   <p.levelLeft>
     <h1 class="title is-3">
-      Edit {{this.model.id}} metadata
+      Edit secret metadata
     </h1>
   </p.levelLeft>
 </PageHeader>
@@ -11,9 +11,9 @@
     Metadata
   </label>
   {{!-- metadata inputs --}}
-<SecretEditMetadata
-  @model={{model}}
-  @onKeyUp={{perform waitForKeyUp}}
-  @validationMessages={{validationMessages}}
-/>
+  <SecretEditMetadata
+    @model={{model}}
+    {{!-- ARG TODO handle onKeyUp --}}
+    @validationMessages={{validationMessages}}
+  />
 </div>
\ No newline at end of file

From 83af67b17ae0da5e79a906950f51924620d2bd9d Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 9 Aug 2021 10:45:23 -0600
Subject: [PATCH 12/40] create new version work

---
 ui/app/components/secret-edit.js              |  1 -
 ...play.hbs => secret-create-new-version.hbs} | 35 ++++---------------
 .../components/secret-edit-metadata.hbs       | 11 +++---
 ui/app/templates/components/secret-edit.hbs   | 18 +++++++++-
 4 files changed, 30 insertions(+), 35 deletions(-)
 rename ui/app/templates/components/{secret-edit-display.hbs => secret-create-new-version.hbs} (79%)

diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index a909b6ceab46..e8a56e72f009 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -376,7 +376,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
       }
 
       this.persistKey(() => {
-        debugger;
         this.transitionToRoute(SHOW_ROUTE, this.model.path || this.model.id);
       });
     },
diff --git a/ui/app/templates/components/secret-edit-display.hbs b/ui/app/templates/components/secret-create-new-version.hbs
similarity index 79%
rename from ui/app/templates/components/secret-edit-display.hbs
rename to ui/app/templates/components/secret-create-new-version.hbs
index 40bf257e39ed..fd4e54676d6c 100644
--- a/ui/app/templates/components/secret-edit-display.hbs
+++ b/ui/app/templates/components/secret-create-new-version.hbs
@@ -1,21 +1,6 @@
-{{#if (and (or @model.isNew @canEditV2Secret) @isV2 (not @model.failedServerRead))}}
-  <div data-test-metadata-fields class="form-section box is-shadowless is-fullwidth">
-    <label class="title is-5">
-      Secret metadata
-    </label>
-    {{#each @model.fields as |attr|}}
-      <FormField 
-        data-test-field 
-        @attr={{attr}}
-        @model={{@model}}
-        @onKeyUp={{@onKeyUp}}
-        @validationMessages={{@validationMessages}}
-      />
-    {{/each}}
-  </div>
-{{/if}}
-
-{{#if @showWriteWithoutReadWarning}}
+{{!-- ARG TODO test these --}}
+{{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
+{{!-- {{#if @showWriteWithoutReadWarning}}
   {{#if (and @isV2 @model.failedServerRead)}}
     <AlertBanner
       @type="warning"
@@ -38,7 +23,7 @@
       data-test-v1-write-without-read
     />
   {{/if}}
-{{/if}}
+{{/if}} --}}
 
 {{#if @showAdvancedMode}}
   <div class="form-section">
@@ -53,9 +38,9 @@
   <div class="form-section">
     <label class="title is-5">
       {{#if isV2}}
-      Version data
+        Version data
       {{else}}
-      Secret data
+        Secret data
       {{/if}}
     </label>
   {{#each @secretData as |secret index|}}
@@ -102,14 +87,6 @@
         {{/if}}
       </div>
     </div>
-    {{#if @validationMessages.key}}
-      <AlertInline 
-        @type="danger" 
-        @message={{@validationMessages.key}} 
-        @paddingTop=true
-        @isMarginless=true
-      />
-    {{/if}}
   {{/each}}
   </div>
 {{/if}}
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 8f32ce6f064b..be14391c2a76 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,6 +1,6 @@
 {{!-- ARG TODO add empty state if no access --}}
 <form onsubmit={{this.onSaveChanges}}>
-  <div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth"}}>
+  <div data-test-metadata-fields-meep class={{if (eq @mode "create") "box has-container is-fullwidth" "form-section is-fullwidth"}}>
     <p class="field">
       The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
     </p>
@@ -67,10 +67,13 @@
         </button>
       </div>
       <div class="control">
-        {{!-- ARG TODO this stuff here --}}
-        {{!-- <SecretLink @mode="show" @secret={{@model.id}} @class="button" @queryParams={{query-params version=this.modelForData.version}}>
+        <SecretLink
+          @secret={{@model.id}}
+          @class="button"
+          @mode="show"
+        >
           Cancel
-        </SecretLink> --}}
+        </SecretLink>
       </div>
     </div>
   </div>
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 361d24a5ed6b..fb3e06b4fa8e 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -309,7 +309,23 @@
           />
         </div>
       {{/if}}
-      {{!-- ARG TODO removed Secret Edit Metadata because can't edit metadata anymore from here --}}
+      <SecretCreateNewVersion
+        @showAdvancedMode={{showAdvancedMode}}
+        @codemirrorString={{codemirrorString}}
+        @secretData={{secretData}}
+        @isV2={{isV2}}
+        {{!-- ARG TODO may not need model if remove validations at the top of file --}}
+        @model={{model}}
+        @canEditV2Secret={{canEditV2Secret}}
+        @editActions={{hash
+          codemirrorUpdated=(action "codemirrorUpdated")
+          formatJSON=(action "formatJSON")
+          handleKeyDown=(action "handleKeyDown")
+          handleChange=(action "handleChange")
+          deleteRow=(action "deleteRow")
+          addRow=(action "addRow")
+        }}
+      />
     </div>
     <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
       <div class="field is-grouped">

From bea9f2a78b858a7cf9118cedd6a7033941404ef9 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 9 Aug 2021 13:04:56 -0600
Subject: [PATCH 13/40] setup model and formfieldgroups for added config data.

---
 ui/app/models/secret-engine.js                | 28 ++++++++++++-
 ui/app/models/secret-v2.js                    |  6 +--
 .../components/secret-edit-metadata.hbs       | 42 ++++++++++---------
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index e1da82f77cd6..287a062086cd 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -35,6 +35,26 @@ export default Model.extend(Validations, {
     helpText:
       'When enabled - if a seal supporting seal wrapping is specified in the configuration, all critical security parameters (CSPs) in this backend will be seal wrapped. (For K/V mounts, all values will be seal wrapped.) This can only be specified at mount time.',
   }),
+  // KV 2 additional config default options
+  maxVersions: attr('number', {
+    defaultValue: 10,
+    label: 'Maximum Number of Versions',
+    subText:
+      'The number of versions to keep per key. Once the number of keys exceeds the maximum number set here, the oldest version will be permanently deleted. This value applies to all keys, but a key’s metadata settings can overwrite this value.',
+  }),
+  casRequired: attr('boolean', {
+    defaultValue: false,
+    label: 'Require Check and Set',
+    subText:
+      'If checked all keys will require the cas parameter to be set on all write request. A key’s metadata settings can overwrite this value.',
+  }),
+  deleteVersionAfter: attr({
+    defaultValue: 0,
+    editType: 'ttl',
+    label: 'Automate secret deletion',
+    helperTextDisabled: 'A secret’s version must be manually deleted.',
+    helperTextEnabled: 'Delete all new versions of this secret after',
+  }),
 
   modelTypeForKV: computed('engineType', 'options.version', function() {
     let type = this.engineType;
@@ -67,7 +87,13 @@ export default Model.extend(Validations, {
 
   formFieldGroups: computed('engineType', function() {
     let type = this.engineType;
-    let defaultGroup = { default: ['path'] };
+    let defaultGroup;
+    // KV has specific config options it adds on the enable engine. https://www.vaultproject.io/api/secret/kv/kv-v2#configure-the-kv-engine
+    if (type === 'kv') {
+      defaultGroup = { default: ['path', 'maxVersions', 'casRequired', 'deleteVersionAfter'] };
+    } else {
+      defaultGroup = { default: ['path'] };
+    }
     let optionsGroup = {
       'Method Options': [
         'description',
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index b78ea802e620..6346038b72fd 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -51,15 +51,15 @@ export default Model.extend(KeyMixin, Validations, {
   casRequired: attr('boolean', {
     defaultValue: false,
     label: 'Require Check and Set',
-    helpText:
+    subText:
       'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter',
   }),
   deleteVersionAfter: attr({
     defaultValue: 0,
     editType: 'ttl',
     label: 'Automate secret deletion',
-    textDisabled: 'A secret’s version must be manually deleted.',
-    textEnabled: 'Delete a secret version after',
+    helperTextDisabled: 'A secret’s version must be manually deleted.',
+    helperTextEnabled: 'Delete all new versions of this secret after',
   }),
   fields: computed(function() {
     return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired', 'deleteVersionAfter']);
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index be14391c2a76..b127dfddadcb 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -55,26 +55,28 @@
       />
     {{/if}}
   {{/if}} --}}
-  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
-    <div class="field is-grouped">
-      <div class="control">
-        <button
-          type="submit"
-          {{!-- disabled={{or buttonDisabled validationErrorCount}} --}}
-          class="button is-primary"
-        >
-          Save
-        </button>
-      </div>
-      <div class="control">
-        <SecretLink
-          @secret={{@model.id}}
-          @class="button"
-          @mode="show"
-        >
-          Cancel
-        </SecretLink>
+  {{#unless (eq @mode "create")}}
+    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
+      <div class="field is-grouped">
+        <div class="control">
+          <button
+            type="submit"
+            {{!-- disabled={{or buttonDisabled validationErrorCount}} --}}
+            class="button is-primary"
+          >
+            Save
+          </button>
+        </div>
+        <div class="control">
+          <SecretLink
+            @secret={{@model.id}}
+            @class="button"
+            @mode="show"
+          >
+            Cancel
+          </SecretLink>
+        </div>
       </div>
     </div>
-  </div>
+  {{/unless}}
 </form>
\ No newline at end of file

From c1a256a2794d7f5e1f9499fba837e0c4aea3f7ba Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 9 Aug 2021 14:25:17 -0600
Subject: [PATCH 14/40] add config network request to secret-engine

---
 ui/app/adapters/secret-engine.js | 48 ++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/ui/app/adapters/secret-engine.js b/ui/app/adapters/secret-engine.js
index 21f926a4587d..257a99f3dbec 100644
--- a/ui/app/adapters/secret-engine.js
+++ b/ui/app/adapters/secret-engine.js
@@ -8,6 +8,10 @@ export default ApplicationAdapter.extend({
     return path ? url + '/' + encodePath(path) : url;
   },
 
+  urlForConfig(path) {
+    return `/v1/${path}/config`;
+  },
+
   internalURL(path) {
     let url = `/${this.urlPrefix()}/internal/ui/mounts`;
     if (path) {
@@ -26,15 +30,43 @@ export default ApplicationAdapter.extend({
 
   createRecord(store, type, snapshot) {
     const serializer = store.serializerFor(type.modelName);
-    const data = serializer.serialize(snapshot);
+    let data = serializer.serialize(snapshot);
     const path = snapshot.attr('path');
-
-    return this.ajax(this.url(path), 'POST', { data }).then(() => {
-      // ember data doesn't like 204s if it's not a DELETE
-      return {
-        data: assign({}, data, { path: path + '/', id: path }),
-      };
-    });
+    // for kv2 we make two network requests
+    if (type.modelName === 'secret-engine') {
+      // data has both data for sys mount and the config, we need to separate them
+      let configData = (({ max_versions, delete_version_after, cas_required }) => ({
+        max_versions,
+        delete_version_after,
+        cas_required,
+      }))(data);
+      // remove extra params from data
+      /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+      let { max_versions, delete_version_after, cas_required, ...newData } = data;
+      data = newData;
+      // first create the engine
+      return this.ajax(this.url(path), 'POST', { data })
+        .then(() => {
+          // second modify config on engine
+          return this.ajax(this.urlForConfig(path), 'POST', { data: configData });
+        })
+        .then(() => {
+          // ember data doesn't like 204s if it's not a DELETE
+          return {
+            data: assign({}, data, { path: path + '/', id: path }),
+          };
+        })
+        .catch(e => {
+          console.log(e, 'error');
+        });
+    } else {
+      return this.ajax(this.url(path), 'POST', { data }).then(() => {
+        // ember data doesn't like 204s if it's not a DELETE
+        return {
+          data: assign({}, data, { path: path + '/', id: path }),
+        };
+      });
+    }
   },
 
   findRecord(store, type, path, snapshot) {

From 49006b2592507eeeadc3221500d117b440626b5a Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 10 Aug 2021 10:05:08 -0600
Subject: [PATCH 15/40] fix validations on config

---
 ui/app/components/mount-backend-form.js | 32 ++++++++++++++++++-------
 ui/app/models/secret-engine.js          | 12 ++++++++++
 ui/app/models/secret-v2.js              |  1 -
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/ui/app/components/mount-backend-form.js b/ui/app/components/mount-backend-form.js
index 5280ec75dab2..75fde89e45ea 100644
--- a/ui/app/components/mount-backend-form.js
+++ b/ui/app/components/mount-backend-form.js
@@ -108,14 +108,30 @@ export default Component.extend({
 
   actions: {
     onKeyUp(name, value) {
-      this.mountModel.set('path', value);
-      this.mountModel.validations.attrs.path.isValid
-        ? set(this.validationMessages, 'path', '')
-        : set(this.validationMessages, 'path', this.mountModel.validations.attrs.path.message);
-
-      this.mountModel.validate().then(({ validations }) => {
-        this.set('isFormInvalid', !validations.isValid);
-      });
+      // validate path
+      if (name === 'path') {
+        this.mountModel.set('path', value);
+        this.mountModel.validations.attrs.path.isValid
+          ? set(this.validationMessages, 'path', '')
+          : set(this.validationMessages, 'path', this.mountModel.validations.attrs.path.message);
+
+        this.mountModel.validate().then(({ validations }) => {
+          this.set('isFormInvalid', !validations.isValid);
+        });
+      }
+      // check maxVersions is a number
+      if (name === 'maxVersions') {
+        // checking for value because value which is blank on first load. No keyup event has occurred and default is 10.
+        if (value) {
+          let number = Number(value);
+          this.mountModel.set('maxVersions', number);
+        }
+        if (!this.mountModel.validations.attrs.maxVersions.isValid) {
+          set(this.validationMessages, name, this.mountModel.validations.attrs.maxVersions.message);
+        } else {
+          set(this.validationMessages, name, '');
+        }
+      }
     },
     onTypeChange(path, value) {
       if (path === 'type') {
diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index 287a062086cd..7e53be9afb89 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -13,6 +13,18 @@ const Validations = buildValidations({
     presence: true,
     message: "Path can't be blank.",
   }),
+  maxVersions: [
+    validator('number', {
+      allowString: false,
+      integer: true,
+      message: 'Maximum versions must be a number.',
+    }),
+    validator('length', {
+      min: 1,
+      max: 16,
+      message: 'You cannot go over 16 characters.',
+    }),
+  ],
 });
 
 export default Model.extend(Validations, {
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index 6346038b72fd..8d09015d30c2 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -9,7 +9,6 @@ import { validator, buildValidations } from 'ember-cp-validations';
 const Validations = buildValidations({
   // ARG TODO later:
   //The new custom_metadata field will compete with the version history for storage space in the key metadata entry. To attempt to prevent contention, Vault will impose limits on both the keys and values within the custom_metadata field. The keys and values will be limited to 128 and 512 bytes, respectively. Vault will also impose a limit of 64 total custom_metadata keys.
-
   customMetadata: validator('format', {
     regex: /^[^\/]+$/,
     message: 'Custom Values cannot contain a forward slash.',

From 99f92c651b1e2d8ec2052bac3b51c63437ad560a Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 10 Aug 2021 11:10:13 -0600
Subject: [PATCH 16/40] add config rows

---
 .../cluster/secrets/backend/configuration.js  | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/ui/app/routes/vault/cluster/secrets/backend/configuration.js b/ui/app/routes/vault/cluster/secrets/backend/configuration.js
index 88985ddf75ca..1cd8b9212394 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/configuration.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/configuration.js
@@ -3,11 +3,46 @@ import Route from '@ember/routing/route';
 
 export default Route.extend({
   wizard: service(),
+  store: service(),
   model() {
     let backend = this.modelFor('vault.cluster.secrets.backend');
     if (this.wizard.featureState === 'list') {
       this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', backend.get('type'));
     }
+    // if KV2 then we pull in specific attrs from the config endpoint saved on the secret-engine record and display them
+    if (backend.isV2KV) {
+      let secretEngineRecord = this.store.peekRecord('secret-engine', backend.id);
+      // create objects like you would normally pull from the model
+      let casRequired = {
+        name: 'casRequired',
+        options: {
+          label: 'Check-and-Set required',
+        },
+      };
+      let deleteVersionAfter = {
+        name: 'deleteVersionAfter',
+        options: {
+          label: 'Delete version after',
+        },
+      };
+      let maxVersions = {
+        name: 'maxVersions',
+        options: {
+          label: 'Maximum versions',
+        },
+      };
+      backend.attrs.pushObject(casRequired);
+      backend.attrs.pushObject(deleteVersionAfter);
+      backend.attrs.pushObject(maxVersions);
+      // set value on the model
+      backend.set('casRequired', secretEngineRecord.casRequired ? secretEngineRecord.casRequired : 'False');
+      backend.set(
+        'deleteVersionAfter',
+        secretEngineRecord.deleteVersionAfter ? secretEngineRecord.deleteVersionAfter : 'Never delete'
+      );
+      backend.set('maxVersions', secretEngineRecord.maxVersions ? secretEngineRecord.maxVersions : 'Not set');
+    }
+
     return backend;
   },
 });

From 4925c7c017121b4f054a3bcf1101f79d815f9192 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 11 Aug 2021 16:09:27 -0600
Subject: [PATCH 17/40] breaking up secret edit

---
 ui/app/components/kv-object-editor.js         |  23 +-
 ui/app/components/secret-create-or-update.js  | 240 +++++++++++++
 ui/app/components/secret-edit-metadata.js     |  26 +-
 ui/app/components/secret-edit-toolbar.js      | 102 ++++++
 ui/app/components/secret-edit.js              | 313 ++--------------
 .../components/secret-create-new-version.hbs  |  92 -----
 .../components/secret-create-or-update.hbs    | 265 ++++++++++++++
 .../components/secret-edit-metadata.hbs       |   1 +
 .../components/secret-edit-toolbar.hbs        | 118 ++++++
 ui/app/templates/components/secret-edit.hbs   | 338 ++----------------
 10 files changed, 815 insertions(+), 703 deletions(-)
 create mode 100644 ui/app/components/secret-create-or-update.js
 create mode 100644 ui/app/components/secret-edit-toolbar.js
 delete mode 100644 ui/app/templates/components/secret-create-new-version.hbs
 create mode 100644 ui/app/templates/components/secret-create-or-update.hbs
 create mode 100644 ui/app/templates/components/secret-edit-toolbar.hbs

diff --git a/ui/app/components/kv-object-editor.js b/ui/app/components/kv-object-editor.js
index fc8b8e820aea..3a3a4217edfb 100644
--- a/ui/app/components/kv-object-editor.js
+++ b/ui/app/components/kv-object-editor.js
@@ -1,10 +1,31 @@
+/**
+ * @module KvObjectEditor
+ * KvObjectEditor components are called in FormFields when the editType on the model is kv.  They are used to show a key-value input field.
+ *
+ * @example
+ * ```js
+ * <KvObjectEditor
+ *  @value={{get model valuePath}}
+ *  @onChange={{action "setAndBroadcast" valuePath }}
+ *  @label="some label"
+   />
+ * ```
+ * @param {string} value - the value is captured from the model.
+ * @param {function} onChange - function that captures the value on change
+ * @param {string} [label] - label displayed over key value inputs
+ * @param {string} [warning] - warning that is displayed
+ * @param {string} [helpText] - helper text. In tooltip.
+ * @param {string} [subText] - placed under label.
+ * @param {boolean} [small-label]- change label size.
+ * @param {boolean} [formSection] - if false the component is meant to live outside of a form, like in the customMetadata which is nested already inside a form-section.
+ */
+
 import { isNone } from '@ember/utils';
 import { assert } from '@ember/debug';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import KVObject from 'vault/lib/kv-object';
-// ARG TODO add documentation here
 
 export default Component.extend({
   'data-test-component': 'kv-object-editor',
diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
new file mode 100644
index 000000000000..9d9c2681c918
--- /dev/null
+++ b/ui/app/components/secret-create-or-update.js
@@ -0,0 +1,240 @@
+/**
+ * @module SecretCreateOrUpdate
+ * SecretCreateOrUpdate component displays either the form for creating a new secret or creating a new version of the secret
+ *
+ * @example
+ * ```js
+ * <SecretCreateOrUpdate @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * ```
+ * @param {object} requiredParam - requiredParam is...
+ * @param {string} [optionalParam] - optionalParam is...
+ * @param {string} [param1=defaultValue] - param1 is...
+ */
+
+import Component from '@ember/component';
+import ControlGroupError from 'vault/lib/control-group-error';
+import Ember from 'ember';
+import keys from 'vault/lib/keycodes';
+import { inject as service } from '@ember/service';
+import { isBlank, isNone } from '@ember/utils';
+import { set } from '@ember/object';
+import { task, waitForEvent } from 'ember-concurrency';
+
+const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
+const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
+const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
+
+export default Component.extend({
+  secretPaths: null,
+  validationErrorCount: 0,
+  validationMessages: null,
+
+  controlGroup: service(),
+  router: service(),
+  store: service(),
+  wizard: service(),
+
+  init() {
+    this._super(...arguments);
+    this.set('validationMessages', {
+      path: '',
+      maxVersions: '',
+    });
+    // for validation, return array of path names already assigned
+    if (Ember.testing) {
+      this.set('secretPaths', ['beep', 'bop', 'boop']);
+    } else {
+      let adapter = this.store.adapterFor('secret-v2');
+      let type = { modelName: 'secret-v2' };
+      let query = { backend: this.model.backend };
+      adapter.query(this.store, type, query).then(result => {
+        this.set('secretPaths', result.data.keys);
+      });
+    }
+    this.checkRows();
+    if (this.mode === 'edit') {
+      this.send('addRow');
+    }
+  },
+
+  checkRows() {
+    if (this.secretData.length === 0) {
+      this.send('addRow');
+    }
+  },
+  checkValidation(name, value) {
+    if (name === 'path') {
+      !value
+        ? set(this.validationMessages, name, `${name} can't be blank.`)
+        : set(this.validationMessages, name, '');
+    }
+    // check duplicate on path
+    if (name === 'path' && value) {
+      this.secretPaths?.includes(value)
+        ? set(this.validationMessages, name, `A secret with this ${name} already exists.`)
+        : set(this.validationMessages, name, '');
+    }
+    // check maxVersions is a number
+    if (name === 'maxVersions') {
+      // checking for value because value which is blank on first load. No keyup event has occurred and default is 10.
+      if (value) {
+        let number = Number(value);
+        this.model.set('maxVersions', number);
+      }
+      if (!this.model.validations.attrs.maxVersions.isValid) {
+        set(this.validationMessages, name, this.model.validations.attrs.maxVersions.message);
+      } else {
+        set(this.validationMessages, name, '');
+      }
+    }
+    if (name === 'customMetadata') {
+      if (value) {
+        this.model.set('customMetadata', { key: 'meep', value: 'meeping' });
+      }
+    }
+
+    let values = Object.values(this.validationMessages);
+
+    this.set('validationErrorCount', values.filter(Boolean).length);
+  },
+  onEscape(e) {
+    if (e.keyCode !== keys.ESC || this.mode !== 'show') {
+      return;
+    }
+    const parentKey = this.model.parentKey;
+    if (parentKey) {
+      this.transitionToRoute(LIST_ROUTE, parentKey);
+    } else {
+      this.transitionToRoute(LIST_ROOT_ROUTE);
+    }
+  },
+  // successCallback is called in the context of the component
+  persistKey(successCallback) {
+    let secret = this.model;
+    let secretData = this.modelForData;
+    let isV2 = this.isV2;
+    let key = secretData.get('path') || secret.id;
+
+    if (key.startsWith('/')) {
+      key = key.replace(/^\/+/g, '');
+      secretData.set(secretData.pathAttr, key);
+    }
+
+    return secretData
+      .save()
+      .then(() => {
+        if (!secretData.isError) {
+          if (isV2) {
+            secret.set('id', key);
+          }
+          if (isV2 && Object.keys(secret.changedAttributes()).length) {
+            // save secret metadata
+            secret
+              .save()
+              .then(() => {
+                this.saveComplete(successCallback, key);
+              })
+              .catch(e => {
+                this.set(e, e.errors.join(' '));
+              });
+          } else {
+            this.saveComplete(successCallback, key);
+          }
+        }
+      })
+      .catch(error => {
+        if (error instanceof ControlGroupError) {
+          // ARG TODO YOU NEED TO TEST THIS!
+          let errorMessage = this.controlGroup.logFromError(error);
+          this.set('error', errorMessage.content);
+        }
+        throw error;
+      });
+  },
+  saveComplete(callback, key) {
+    if (this.wizard.featureState === 'secret') {
+      this.wizard.transitionFeatureMachine('secret', 'CONTINUE');
+    }
+    callback(key);
+  },
+  transitionToRoute() {
+    return this.router.transitionTo(...arguments);
+  },
+
+  waitForKeyUp: task(function*(name, value) {
+    this.checkValidation(name, value);
+    while (true) {
+      let event = yield waitForEvent(document.body, 'keyup');
+      this.onEscape(event);
+    }
+  })
+    .on('didInsertElement')
+    .cancelOn('willDestroyElement'),
+
+  actions: {
+    addRow() {
+      const data = this.secretData;
+      // fired off on init
+      if (isNone(data.findBy('name', ''))) {
+        data.pushObject({ name: '', value: '' });
+        this.send('handleChange');
+      }
+      this.checkRows();
+    },
+    codemirrorUpdated(val, codemirror) {
+      this.set('error', null);
+      codemirror.performLint();
+      const noErrors = codemirror.state.lint.marked.length === 0;
+      if (noErrors) {
+        try {
+          this.secretData.fromJSONString(val);
+          set(this.modelForData, 'secretData', this.secretData.toJSON());
+        } catch (e) {
+          this.set('error', e.message);
+        }
+      }
+      this.set('hasLintError', !noErrors);
+      this.set('codemirrorString', val);
+    },
+    createOrUpdateKey(type, event) {
+      event.preventDefault();
+      if (type === 'create' && isBlank(this.modelForData.path || this.modelForData.id)) {
+        this.checkValidation('path', '');
+        return;
+      }
+
+      this.persistKey(() => {
+        this.transitionToRoute(SHOW_ROUTE, this.model.path || this.model.id);
+      });
+    },
+    deleteRow(name) {
+      const data = this.secretData;
+      const item = data.findBy('name', name);
+      if (isBlank(item.name)) {
+        return;
+      }
+      data.removeObject(item);
+      this.checkRows();
+      this.send('handleChange');
+    },
+    formatJSON() {
+      this.set('codemirrorString', this.secretData.toJSONString(true));
+    },
+    handleChange() {
+      this.set('codemirrorString', this.secretData.toJSONString(true));
+      set(this.modelForData, 'secretData', this.secretData.toJSON());
+    },
+
+    //submit on shift + enter
+    handleKeyDown(e) {
+      e.stopPropagation();
+      if (!(e.keyCode === keys.ENTER && e.metaKey)) {
+        return;
+      }
+      let $form = this.element.querySelector('form');
+      if ($form.length) {
+        $form.submit();
+      }
+    },
+  },
+});
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index b662e9168160..53a8c65b813d 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -1,31 +1,33 @@
-import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-
-// ARG TODO FILL OUT
 /**
- * @module AuthInfo
+ * @module SecretEditMetadata
  *
  * @example
  * ```js
- * <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action "onLinkClick"}} />
+ * <SecretEditMetadata
+ * @model={{model}}
+ * @validationMessages={{validationMessages}}
+ * @mode={{mode}}
+ * />
  * ```
  *
- * @param {string} activeClusterName - name of the current cluster, passed from the parent.
- * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ * @param {object} model - name of the current cluster, passed from the parent.
+ * @param {object} [validationMessages] - Object that contains form validation errors. keys are the field names and values are the messages.
+ * @param {Function} mode - if the mode is create, show, edit.
  */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 export default class SecretEditMetadata extends Component {
   @service router;
   @service store;
 
   async save() {
     let model = this.args.model;
-    console.log(model, 'MODEL');
     try {
       await model.save();
     } catch (err) {
-      // ARG TODO handle error in error object
-      console.log(err, 'ERROR');
+      // error
     }
     this.router.transitionTo('vault.cluster.secrets.backend.metadata', this.args.model.id);
   }
diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
new file mode 100644
index 000000000000..e8dce3a8b29f
--- /dev/null
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -0,0 +1,102 @@
+// ARG TODO turn into Glimmer
+/**
+ * @module SecretEditToolbar
+ * SecretEditToolbar component is the toolbar component displaying the JSON toggle and the actions like delete in the show mode.
+ *
+ * @example
+ * ```js
+ * <SecretEditToolbar
+ * @mode={{mode}}
+ * @model={{this.model}}
+ * @isV2={{isV2}}
+ * @isWriteWithoutRead={{isWriteWithoutRead}}
+ * @secretDataIsAdvanced={{secretDataIsAdvanced}}
+ * @showAdvancedMode={{showAdvancedMode}}
+ * @modelForData={{this.modelForData}}
+ * @navToNearestAncestor={{this.navToNearestAncestor}}
+ * @canEditV2Secret={{canEditV2Secret}}
+ * @canEdit={{canEdit}}
+ * @codemirrorString={{codemirrorString}}
+ * @wrappedData={{wrappedData}}
+ * @editActions={{hash
+    toggleAdvanced=(action "toggleAdvanced")
+    refresh=(action "refresh")
+  }}
+ * />
+ * ```
+ 
+ * @param {string} mode - show, create, edit. The view.
+ * @param {object} model - the model passed from the parent secret-edit
+ * @param {boolean} isV2 - KV type
+ * @param {boolean} isWriteWithoutRead - boolean describing permissions
+ * @param {boolean} secretDataIsAdvanced - used to determine if show JSON toggle
+ * @param {object} modelForData - a modified version of the model with secret data
+ * @param {string} navToNearestAncestor - route to nav to if press cancel
+ * @param {boolean} canEditV2Secret - permissions
+ * @param {boolean} canEdit - permissions
+ * @param {string} codemirrorString - used in JSON editor
+ * @param {object} wrappedData - when copy the data it's the token of the secret returned.
+ * @param {object} editActions - actions passed from parent to child
+ */
+
+import Component from '@ember/component';
+import { not } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+  store: service(),
+
+  wrappedData: null,
+  isWrapping: false,
+  showWrapButton: not('wrappedData'),
+
+  actions: {
+    handleWrapClick() {
+      this.set('isWrapping', true);
+      if (this.isV2) {
+        this.store
+          .adapterFor('secret-v2-version')
+          .queryRecord(this.modelForData.id, { wrapTTL: 1800 })
+          .then(resp => {
+            this.set('wrappedData', resp.wrap_info.token);
+            this.flashMessages.success('Secret Successfully Wrapped!');
+          })
+          .catch(() => {
+            this.flashMessages.danger('Could Not Wrap Secret');
+          })
+          .finally(() => {
+            this.set('isWrapping', false);
+          });
+      } else {
+        this.store
+          .adapterFor('secret')
+          .queryRecord(null, null, { backend: this.model.backend, id: this.modelForData.id, wrapTTL: 1800 })
+          .then(resp => {
+            this.set('wrappedData', resp.wrap_info.token);
+            this.flashMessages.success('Secret Successfully Wrapped!');
+          })
+          .catch(() => {
+            this.flashMessages.danger('Could Not Wrap Secret');
+          })
+          .finally(() => {
+            this.set('isWrapping', false);
+          });
+      }
+    },
+
+    clearWrappedData() {
+      console.log(this.wrappedData, 'meep');
+      this.set('wrappedData', null);
+    },
+
+    handleCopySuccess() {
+      this.flashMessages.success('Copied Wrapped Data!');
+      this.send('clearWrappedData');
+    },
+
+    handleCopyError() {
+      this.flashMessages.danger('Could Not Copy Wrapped Data');
+      this.send('clearWrappedData');
+    },
+  },
+});
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index e8a56e72f009..d1081fad3bff 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -1,27 +1,29 @@
-import Ember from 'ember';
-import { isBlank, isNone } from '@ember/utils';
+/**
+ * @module SecretEdit
+ * SecretEdit component manages the secret and model data, and displays either the create, update, empty state or show view of a KV secret.
+ *
+ * @example
+ * ```js
+ * <SecretEdit @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * ```
+//  * ARG TODO FINISH THIS
+ * @param {object} requiredParam - requiredParam is...
+ * @param {string} [optionalParam] - optionalParam is...
+ * @param {string} [param1=defaultValue] - param1 is...
+ */
+
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import { computed, set } from '@ember/object';
-import { alias, or, not } from '@ember/object/computed';
-import { task, waitForEvent } from 'ember-concurrency';
+import { computed } from '@ember/object';
+import { alias, or } from '@ember/object/computed';
 import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
 import WithNavToNearestAncestor from 'vault/mixins/with-nav-to-nearest-ancestor';
-import keys from 'vault/lib/keycodes';
 import KVObject from 'vault/lib/kv-object';
 import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
-import ControlGroupError from 'vault/lib/control-group-error';
-
-const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
-const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
-const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   wizard: service(),
-  controlGroup: service(),
-  router: service(),
   store: service(),
-  flashMessages: service(),
 
   // a key model
   key: null,
@@ -36,10 +38,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
 
   secretData: null,
 
-  wrappedData: null,
-  isWrapping: false,
-  showWrapButton: not('wrappedData'),
-
   // called with a bool indicating if there's been a change in the secretData and customMetadata
   onDataChange() {},
   onRefresh() {},
@@ -58,12 +56,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   hasLintError: false,
   isV2: false,
 
-  // cp-validation related properties
-  validationMessages: null,
-  validationErrorCount: 0,
-
-  secretPaths: null,
-
   init() {
     this._super(...arguments);
     let secrets = this.model.secretData;
@@ -78,41 +70,12 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     if (data.isAdvanced()) {
       this.set('preferAdvancedEdit', true);
     }
-    this.checkRows();
     if (this.wizard.featureState === 'details' && this.mode === 'create') {
       let engine = this.model.backend.includes('kv') ? 'kv' : this.model.backend;
       this.wizard.transitionFeatureMachine('details', 'CONTINUE', engine);
     }
-    if (this.mode === 'edit') {
-      this.send('addRow');
-    }
-    this.set('validationMessages', {
-      path: '',
-      maxVersions: '',
-    });
-    // for validation, return array of path names already assigned
-    if (Ember.testing) {
-      this.set('secretPaths', ['beep', 'bop', 'boop']);
-    } else {
-      let adapter = this.store.adapterFor('secret-v2');
-      let type = { modelName: 'secret-v2' };
-      let query = { backend: this.model.backend };
-      adapter.query(this.store, type, query).then(result => {
-        this.set('secretPaths', result.data.keys);
-      });
-    }
   },
 
-  waitForKeyUp: task(function*(name, value) {
-    this.checkValidation(name, value);
-    while (true) {
-      let event = yield waitForEvent(document.body, 'keyup');
-      this.onEscape(event);
-    }
-  })
-    .on('didInsertElement')
-    .cancelOn('willDestroyElement'),
-
   updatePath: maybeQueryRecord(
     'capabilities',
     context => {
@@ -151,6 +114,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     'model.id',
     'mode'
   ),
+
   canEditV2Secret: alias('v2UpdatePath.canUpdate'),
 
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
@@ -190,250 +154,21 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     return false;
   }),
 
-  transitionToRoute() {
-    return this.router.transitionTo(...arguments);
-  },
-
-  checkValidation(name, value) {
-    if (name === 'path') {
-      !value
-        ? set(this.validationMessages, name, `${name} can't be blank.`)
-        : set(this.validationMessages, name, '');
-    }
-    // check duplicate on path
-    if (name === 'path' && value) {
-      this.secretPaths?.includes(value)
-        ? set(this.validationMessages, name, `A secret with this ${name} already exists.`)
-        : set(this.validationMessages, name, '');
-    }
-    // check maxVersions is a number
-    if (name === 'maxVersions') {
-      // checking for value because value which is blank on first load. No keyup event has occurred and default is 10.
-      if (value) {
-        let number = Number(value);
-        this.model.set('maxVersions', number);
-      }
-      if (!this.model.validations.attrs.maxVersions.isValid) {
-        set(this.validationMessages, name, this.model.validations.attrs.maxVersions.message);
-      } else {
-        set(this.validationMessages, name, '');
-      }
-    }
-    if (name === 'customMetadata') {
-      if (value) {
-        this.model.set('customMetadata', { key: 'meep', value: 'meeping' });
-      }
-      console.log(this.model, 'model');
-    }
-
-    let values = Object.values(this.validationMessages);
-
-    this.set('validationErrorCount', values.filter(Boolean).length);
-  },
-
-  updateCustomMetadata(name, key, value) {
-    console.log(name, key, value, 'here in new func');
-  },
-
-  onEscape(e) {
-    if (e.keyCode !== keys.ESC || this.mode !== 'show') {
-      return;
-    }
-    const parentKey = this.model.parentKey;
-    if (parentKey) {
-      this.transitionToRoute(LIST_ROUTE, parentKey);
-    } else {
-      this.transitionToRoute(LIST_ROOT_ROUTE);
-    }
-  },
-
-  // successCallback is called in the context of the component
-  persistKey(successCallback) {
-    let secret = this.model;
-    let secretData = this.modelForData;
-    let isV2 = this.isV2;
-    let key = secretData.get('path') || secret.id;
-
-    if (key.startsWith('/')) {
-      key = key.replace(/^\/+/g, '');
-      secretData.set(secretData.pathAttr, key);
-    }
-
-    return secretData
-      .save()
-      .then(() => {
-        if (!secretData.isError) {
-          if (isV2) {
-            secret.set('id', key);
-          }
-          if (isV2 && Object.keys(secret.changedAttributes()).length) {
-            // save secret metadata
-            secret
-              .save()
-              .then(() => {
-                this.saveComplete(successCallback, key);
-              })
-              .catch(e => {
-                this.set(e, e.errors.join(' '));
-              });
-          } else {
-            this.saveComplete(successCallback, key);
-          }
-        }
-      })
-      .catch(error => {
-        if (error instanceof ControlGroupError) {
-          let errorMessage = this.controlGroup.logFromError(error);
-          this.set('error', errorMessage.content);
-        }
-        throw error;
-      });
-  },
-  saveComplete(callback, key) {
-    if (this.wizard.featureState === 'secret') {
-      this.wizard.transitionFeatureMachine('secret', 'CONTINUE');
-    }
-    callback(key);
-  },
-
-  checkRows() {
-    if (this.secretData.length === 0) {
-      this.send('addRow');
-    }
-  },
-
   actions: {
-    //submit on shift + enter
-    handleKeyDown(e) {
-      e.stopPropagation();
-      if (!(e.keyCode === keys.ENTER && e.metaKey)) {
-        return;
-      }
-      let $form = this.element.querySelector('form');
-      if ($form.length) {
-        $form.submit();
-      }
-    },
-
-    handleChange() {
-      this.set('codemirrorString', this.secretData.toJSONString(true));
-      set(this.modelForData, 'secretData', this.secretData.toJSON());
-    },
-
-    handleWrapClick() {
-      this.set('isWrapping', true);
-      if (this.isV2) {
-        this.store
-          .adapterFor('secret-v2-version')
-          .queryRecord(this.modelForData.id, { wrapTTL: 1800 })
-          .then(resp => {
-            this.set('wrappedData', resp.wrap_info.token);
-            this.flashMessages.success('Secret Successfully Wrapped!');
-          })
-          .catch(() => {
-            this.flashMessages.danger('Could Not Wrap Secret');
-          })
-          .finally(() => {
-            this.set('isWrapping', false);
-          });
-      } else {
-        this.store
-          .adapterFor('secret')
-          .queryRecord(null, null, { backend: this.model.backend, id: this.modelForData.id, wrapTTL: 1800 })
-          .then(resp => {
-            this.set('wrappedData', resp.wrap_info.token);
-            this.flashMessages.success('Secret Successfully Wrapped!');
-          })
-          .catch(() => {
-            this.flashMessages.danger('Could Not Wrap Secret');
-          })
-          .finally(() => {
-            this.set('isWrapping', false);
-          });
-      }
-    },
-
-    clearWrappedData() {
-      this.set('wrappedData', null);
-    },
-
-    handleCopySuccess() {
-      this.flashMessages.success('Copied Wrapped Data!');
-      this.send('clearWrappedData');
-    },
-
-    handleCopyError() {
-      this.flashMessages.danger('Could Not Copy Wrapped Data');
-      this.send('clearWrappedData');
-    },
-
-    createOrUpdateKey(type, event) {
-      event.preventDefault();
-      let model = this.modelForData;
-      if (type === 'create' && isBlank(model.path || model.id)) {
-        this.checkValidation('path', '');
-        return;
-      }
-
-      this.persistKey(() => {
-        this.transitionToRoute(SHOW_ROUTE, this.model.path || this.model.id);
-      });
-    },
-
-    deleteKey() {
-      let { id } = this.model;
-      this.model.destroyRecord().then(() => {
-        this.navToNearestAncestor.perform(id);
-      });
-    },
+    // ARG TODO couldn't find this being used anywhere
+    // deleteKey() {
+    //   let { id } = this.model;
+    //   this.model.destroyRecord().then(() => {
+    //     this.navToNearestAncestor.perform(id);
+    //   });
+    // },
 
     refresh() {
       this.onRefresh();
     },
 
-    addRow() {
-      const data = this.secretData;
-      // fired off on init
-      if (isNone(data.findBy('name', ''))) {
-        data.pushObject({ name: '', value: '' });
-        this.send('handleChange');
-      }
-      this.checkRows();
-    },
-
-    deleteRow(name) {
-      const data = this.secretData;
-      const item = data.findBy('name', name);
-      if (isBlank(item.name)) {
-        return;
-      }
-      data.removeObject(item);
-      this.checkRows();
-      this.send('handleChange');
-    },
-
     toggleAdvanced(bool) {
       this.onToggleAdvancedEdit(bool);
     },
-
-    codemirrorUpdated(val, codemirror) {
-      this.set('error', null);
-      codemirror.performLint();
-      const noErrors = codemirror.state.lint.marked.length === 0;
-      if (noErrors) {
-        try {
-          this.secretData.fromJSONString(val);
-          set(this.modelForData, 'secretData', this.secretData.toJSON());
-        } catch (e) {
-          this.set('error', e.message);
-        }
-      }
-      this.set('hasLintError', !noErrors);
-      this.set('codemirrorString', val);
-    },
-
-    formatJSON() {
-      this.set('codemirrorString', this.secretData.toJSONString(true));
-    },
   },
 });
diff --git a/ui/app/templates/components/secret-create-new-version.hbs b/ui/app/templates/components/secret-create-new-version.hbs
deleted file mode 100644
index fd4e54676d6c..000000000000
--- a/ui/app/templates/components/secret-create-new-version.hbs
+++ /dev/null
@@ -1,92 +0,0 @@
-{{!-- ARG TODO test these --}}
-{{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
-{{!-- {{#if @showWriteWithoutReadWarning}}
-  {{#if (and @isV2 @model.failedServerRead)}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
-      @class="is-marginless"
-      data-test-v2-no-cas-warning
-    />
-  {{else if @isV2}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
-      @class="is-marginless"
-      data-test-v2-write-without-read
-    />
-  {{else}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
-      @class="is-marginless"
-      data-test-v1-write-without-read
-    />
-  {{/if}}
-{{/if}} --}}
-
-{{#if @showAdvancedMode}}
-  <div class="form-section">
-    <JsonEditor
-      @title={{if isV2 "Version Data" "Secret Data"}}
-      @value={{@codemirrorString}}
-      @valueUpdated={{action @editActions.codemirrorUpdated}}
-      @onFocusOut={{action @editActions.formatJSON}}>
-    </JsonEditor> 
-  </div>
-{{else}}
-  <div class="form-section">
-    <label class="title is-5">
-      {{#if isV2}}
-        Version data
-      {{else}}
-        Secret data
-      {{/if}}
-    </label>
-  {{#each @secretData as |secret index|}}
-    <div class="columns is-variable has-no-shadow">
-      <div class="column is-one-quarter ">
-        <Input 
-          data-test-secret-key={{true}}
-          @value={{secret.name}}
-          placeholder="key"
-          @change={{action @editActions.handleChange}}
-          class="input"
-          @autocomplete="off"
-          @spellcheck="false"
-          {{on "keyup" (fn @onKeyUp "key" secret.name)}}
-        />
-      </div>
-      <div class="column">
-        <MaskedInput
-          @name={{secret.name}}
-          @onKeyDown={{@editActions.handleKeyDown}}
-          @onChange={{@editActions.handleChange}}
-          @value={{secret.value}}
-          data-test-secret-value="true"
-        />
-      </div>
-      <div class="column is-narrow ">
-        {{#if (eq @secretData.length (inc index))}}
-          <button type="button" {{action @editActions.addRow}} class="button is-outlined is-primary" data-test-secret-add-row="true">
-            Add
-          </button>
-        {{else}}
-          <button
-            class="button has-text-grey is-expanded is-icon"
-            type="button"
-            {{action @editActions.deleteRow secret.name}}
-            aria-label="Delete row"
-          >
-            <Icon
-              @glyph="trash"
-              @size="l"
-              class="has-text-grey-light"
-            />
-          </button>
-        {{/if}}
-      </div>
-    </div>
-  {{/each}}
-  </div>
-{{/if}}
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
new file mode 100644
index 000000000000..5c2c52f21764
--- /dev/null
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -0,0 +1,265 @@
+{{#if (eq mode "create")}}
+{{!-- ARG TODO always passes in create. fix --}}
+  <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
+    <div class="field box is-fullwidth is-sideless is-marginless">
+      <NamespaceReminder @mode="create" @noun="secret" />
+      <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
+      <label class="is-label" for="kv-key">Path for this secret</label>
+      <p class="control is-expanded">
+        <Input 
+          @autocomplete="off" 
+          @spellcheck="false" 
+          data-test-secret-path="true"
+          @id="kv-key" 
+          class="input {{if (get validationMessages 'path') "has-error-border"}}"
+          @value={{get @modelForData @modelForData.pathAttr}} 
+          {{!-- ARG TODO revisit causes error, probably have to handle in js file --}}
+          {{!-- onkeyup={{@onKeyUp "path" value="target.value"}} --}}
+        />
+      </p>
+      {{#if (get validationMessages 'path')}}
+        <AlertInline 
+          @type="danger" 
+          @message={{get validationMessages 'path'}} 
+          @paddingTop=true
+          @isMarginless=true
+        />
+      {{/if}}
+      {{#if @modelForData.isFolder}}
+        <p class="help is-danger">
+        The secret path may not end in <code>/</code>
+        </p>
+      {{/if}}
+    </div>
+    {{#if @showAdvancedMode}}
+      <div class="form-section">
+        <JsonEditor
+          @title={{if @isV2 "Version Data" "Secret Data"}}
+          @value={{@codemirrorString}}
+          @valueUpdated={{action "codemirrorUpdated"}}
+          @onFocusOut={{action "formatJSON"}}>
+        </JsonEditor> 
+      </div>
+    {{else}}
+      <div class="form-section">
+        <label class="title is-5">
+          Secret data
+        </label>
+      {{#each @secretData as |secret index|}}
+        <div class="info-table-row">
+          <div class="column is-one-quarter info-table-row-edit">
+            <Input 
+              data-test-secret-key={{true}}
+              @value={{secret.name}}
+              placeholder="key"
+              @change={{action "handleChange"}}
+              class="input"
+              @autocomplete="off"
+              @spellcheck="false"
+            />
+          </div>
+          <div class="column info-table-row-edit">
+            <MaskedInput
+              @name={{secret.name}}
+              @onKeyDown={{action "handleKeyDown"}}
+              @onChange={{action "handleChange"}}
+              @value={{secret.value}}
+              data-test-secret-value="true"
+            />
+          </div>
+          <div class="column is-narrow info-table-row-edit">
+            {{#if (eq secretData.length (inc index))}}
+              <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
+                Add
+              </button>
+            {{else}}
+              <button
+                class="button has-text-grey is-expanded is-icon"
+                type="button"
+                {{action "deleteRow" secret.name}}
+                aria-label="Delete row"
+              >
+                <Icon
+                  @glyph="trash"
+                  @size="l"
+                  class="has-text-grey-light"
+                />
+              </button>
+            {{/if}}
+          </div>
+        </div>
+        {{#if validationMessages.key}}
+          <AlertInline 
+            @type="danger" 
+            @message={{validationMessages.key}} 
+            @paddingTop=true
+            @isMarginless=true
+          />
+        {{/if}}
+      {{/each}}
+      </div>
+    {{/if}}
+  <ToggleButton 
+    @class="is-block"
+    @toggleAttr={{"showMetadata"}}
+    @toggleTarget={{this}}
+    @openLabel="Hide secret metadata"
+    @closedLabel="Show secret metadata"
+  />
+    {{#if showMetadata}}
+      <SecretEditMetadata
+        @model={{@model}}
+        @validationMessages={{validationMessages}}
+        @mode="create"
+        {{!-- @onKeyUp={{@onKeyUp}} --}}
+      />
+    {{/if}}
+    <div class="field is-grouped box is-fullwidth is-bottomless">
+      <div class="control">
+        <button
+        type="submit"
+        disabled={{or @buttonDisabled validationErrorCount}}
+        class="button is-primary"
+        data-test-secret-save=true
+        >
+          Save
+        </button>
+      </div>
+      <div class="control">
+        <SecretLink @mode="list" @secret={{@model.parentKey}} @class="button">
+          Cancel
+        </SecretLink>
+      </div>
+    </div>
+  </form>
+{{/if}}
+
+{{#if (eq mode "edit")}}
+
+{{!-- ARG TODO test these --}}
+{{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
+{{!-- {{#if @showWriteWithoutReadWarning}}
+  {{#if (and @isV2 @model.failedServerRead)}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
+      @class="is-marginless"
+      data-test-v2-no-cas-warning
+    />
+  {{else if @isV2}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
+      @class="is-marginless"
+      data-test-v2-write-without-read
+    />
+  {{else}}
+    <AlertBanner
+      @type="warning"
+      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
+      @class="is-marginless"
+      data-test-v1-write-without-read
+    />
+  {{/if}}
+{{/if}} --}}
+  <form onsubmit={{action "createOrUpdateKey" "create"}}>
+    <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
+      <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
+      <NamespaceReminder @mode="edit" @noun="secret" />
+      {{#if (and (not @model.failedServerRead) (not @model.selectedVersion.failedServerRead) (not-eq @model.selectedVersion.version @model.currentVersion))}}
+        <div class="form-section">
+          <AlertBanner
+            @type="warning"
+            @class="is-marginless"
+            @message="You are creating a new version based on data from Version {{@model.selectedVersion.version}}. The current version for {{@model.id}} is Version {{@model.currentVersion}}."
+          />
+        </div>
+      {{/if}}
+      {{#if @showAdvancedMode}}
+        <div class="form-section">
+          <JsonEditor
+            @title={{if @isV2 "Version Data" "Secret Data"}}
+            @value={{@codemirrorString}}
+            @valueUpdated={{action "codemirrorUpdated"}}
+            @onFocusOut={{action "formatJSON"}}>
+          </JsonEditor> 
+        </div>
+      {{else}}
+        <div class="form-section">
+          <label class="title is-5">
+            {{#if @isV2}}
+              Version data
+            {{else}}
+              Secret data
+            {{/if}}
+          </label>
+        {{#each @secretData as |secret index|}}
+          <div class="columns is-variable has-no-shadow">
+            <div class="column is-one-quarter ">
+              <Input 
+                data-test-secret-key={{true}}
+                @value={{secret.name}}
+                placeholder="key"
+                @change={{action "handleChange"}}
+                class="input"
+                @autocomplete="off"
+                @spellcheck="false"
+                {{!-- ARG TODO handle inside component --}}
+                {{!-- {{on "keyup" (fn @onKeyUp "key" secret.name)}} --}}
+              />
+            </div>
+            <div class="column">
+              <MaskedInput
+                @name={{secret.name}}
+                @onKeyDown={{action "handleKeyDown"}}
+                @onChange={{action "handleChange"}}
+                @value={{secret.value}}
+                data-test-secret-value="true"
+              />
+            </div>
+            <div class="column is-narrow ">
+              {{#if (eq @secretData.length (inc index))}}
+                <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
+                  Add
+                </button>
+              {{else}}
+                <button
+                  class="button has-text-grey is-expanded is-icon"
+                  type="button"
+                  {{action "deleteRow" secret.name}}
+                  aria-label="Delete row"
+                >
+                  <Icon
+                    @glyph="trash"
+                    @size="l"
+                    class="has-text-grey-light"
+                  />
+                </button>
+              {{/if}}
+            </div>
+          </div>
+        {{/each}}
+        </div>
+      {{/if}}
+      </div>
+    <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={{or @buttonDisabled validationErrorCount}}
+            class="button is-primary"
+          >
+            Save
+          </button>
+        </div>
+        <div class="control">
+          <SecretLink @mode="show" @secret={{@model.id}} @class="button" @queryParams={{query-params version=@modelForData.version}}>
+            Cancel
+          </SecretLink>
+        </div>
+      </div>
+    </div>
+  </form>
+{{/if}}
\ No newline at end of file
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index b127dfddadcb..ccbdb03b9d2a 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -6,6 +6,7 @@
     </p>
     {{#each @model.fields as |attr|}}
     {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
+    {{!-- ARG TODO right now not passing onKeyUP into this function --}}
       {{#if (eq attr.name "customMetadata")}}
         <FormField 
           data-test-field 
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
new file mode 100644
index 000000000000..86f0dda34fda
--- /dev/null
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -0,0 +1,118 @@
+<Toolbar>
+  {{#unless (and (eq @mode 'show') @isWriteWithoutRead)}}
+    <ToolbarFilters>
+      <Toggle
+        @name="json"
+        @status="success"
+        @size="small"
+        @disabled={{and (eq @mode 'show') @secretDataIsAdvanced}}
+        @checked={{@showAdvancedMode}}
+        @onChange={{action @editActions.toggleAdvanced}}
+        >
+        <span class="has-text-grey">JSON</span>
+      </Toggle>
+    </ToolbarFilters>
+  {{/unless}}
+  <ToolbarActions>
+    {{#if (eq @mode 'show')}}
+      <SecretDeleteMenu 
+        @modelForData={{@modelForData}}
+        @model={{@model}}
+        @navToNearestAncestor={{@navToNearestAncestor}}
+        @isV2={{isV2}}
+        @refresh={{action @editActions.refresh}}
+      />
+    {{/if}}
+    {{#if (and (eq @mode 'show') (or @canEditV2Secret @canEdit))}}
+      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq @mode 'show') 'edit' 'show')) as |targetRoute|}}
+        {{#unless (and isV2 (or @isWriteWithoutRead @modelForData.destroyed @modelForData.deleted))}}
+          <BasicDropdown
+            @class="popup-menu"
+            @horizontalPosition="auto-right"
+            @verticalPosition="below"
+            @onClose={{action "clearWrappedData"}}
+            as |D|
+          >
+            <D.trigger
+              data-test-popup-menu-trigger="true"
+              @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
+              @tagName="button"
+            >
+              Copy
+              <Chevron @direction="down" @isButton={{true}} />
+            </D.trigger>
+            <D.content @class="popup-menu-content is-wide">
+              <nav class="box menu">
+                <ul class="menu-list">
+                  <li class="action">
+                    <CopyButton
+                      @class="link link-plain has-text-weight-semibold is-ghost"
+                      @clipboardText={{@codemirrorString}}
+                      @success={{action (set-flash-message "JSON Copied!")}}
+                      data-test-copy-button
+                    >
+                      Copy JSON
+                    </CopyButton>
+                  </li>
+                  <li class="action">
+                    {{#if showWrapButton}}
+                      <button
+                        class="link link-plain has-text-weight-semibold is-ghost {{if isWrapping "is-loading"}}"
+                        type="button"
+                        {{action "handleWrapClick"}}
+                        data-test-wrap-button
+                        disabled={{isWrapping}}
+                      >
+                        Wrap secret
+                      </button>
+                    {{else}}
+                      <MaskedInput
+                        @class="has-padding"
+                        @displayOnly={{true}}
+                        @allowCopy={{true}}
+                        @value={{@wrappedData}}
+                        @success={{action "handleCopySuccess"}}
+                        @error={{action "handleCopyError"}}
+                      />
+                    {{/if}}
+                  </li>
+                </ul>
+              </nav>
+            </D.content>
+          </BasicDropdown>
+        {{/unless}}
+      {{/let}}
+    {{/if}}
+
+    {{#if (and (eq @mode "show") isV2 (not @model.failedServerRead))}}
+      <SecretVersionMenu
+        @version={{modelForData}}
+        @onRefresh={{action @editActions.refresh}}
+        @model={{model}}
+      />
+    {{/if}}
+
+    {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}}
+      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
+        {{#if isV2}}
+          <ToolbarLink
+            @params={{array targetRoute model.id (query-params version=modelForData.version)}}
+            @data-test-secret-edit="true"
+            @replace={{true}}
+            @type="add"
+          >
+            Create new version
+          </ToolbarLink>
+        {{else}}
+          <ToolbarLink
+            @params={{array targetRoute model.id}}
+            @data-test-secret-edit="true"
+            @replace={{true}}
+          >
+            Edit secret
+          </ToolbarLink>
+        {{/if}}
+      {{/let}}
+    {{/if}}
+  </ToolbarActions>
+</Toolbar>
\ No newline at end of file
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index fb3e06b4fa8e..4d575a919beb 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -36,317 +36,37 @@
   </div>
 {{/if}}
 
-<Toolbar>
-  {{#unless (and (eq mode 'show') isWriteWithoutRead)}}
-    <ToolbarFilters>
-      <Toggle
-        @name="json"
-        @status="success"
-        @size="small"
-        @disabled={{and (eq mode 'show') secretDataIsAdvanced}}
-        @checked={{showAdvancedMode}}
-        @onChange={{action "toggleAdvanced"}}
-        >
-        <span class="has-text-grey">JSON</span>
-      </Toggle>
-    </ToolbarFilters>
-  {{/unless}}
-  <ToolbarActions>
-    {{#if (eq mode 'show')}}
-      <SecretDeleteMenu 
-        @modelForData={{this.modelForData}}
-        @model={{this.model}}
-        @navToNearestAncestor={{this.navToNearestAncestor}}
-        @isV2={{isV2}}
-        @refresh={{action 'refresh'}}
-      />
-    {{/if}}
-    {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}}
-      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
-        {{#unless (and isV2 (or isWriteWithoutRead modelForData.destroyed modelForData.deleted))}}
-          <BasicDropdown
-            @class="popup-menu"
-            @horizontalPosition="auto-right"
-            @verticalPosition="below"
-            @onClose={{action "clearWrappedData"}}
-            as |D|
-          >
-            <D.trigger
-              data-test-popup-menu-trigger="true"
-              @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
-              @tagName="button"
-            >
-              Copy
-              <Chevron @direction="down" @isButton={{true}} />
-            </D.trigger>
-            <D.content @class="popup-menu-content is-wide">
-              <nav class="box menu">
-                <ul class="menu-list">
-                  <li class="action">
-                    <CopyButton
-                      @class="link link-plain has-text-weight-semibold is-ghost"
-                      @clipboardText={{codemirrorString}}
-                      @success={{action (set-flash-message "JSON Copied!")}}
-                      data-test-copy-button
-                    >
-                      Copy JSON
-                    </CopyButton>
-                  </li>
-                  <li class="action">
-                    {{#if showWrapButton}}
-                      <button
-                        class="link link-plain has-text-weight-semibold is-ghost {{if isWrapping "is-loading"}}"
-                        type="button"
-                        {{action "handleWrapClick"}}
-                        data-test-wrap-button
-                        disabled={{isWrapping}}
-                      >
-                        Wrap secret
-                      </button>
-                    {{else}}
-                      <MaskedInput
-                        @class="has-padding"
-                        @displayOnly={{true}}
-                        @allowCopy={{true}}
-                        @value={{wrappedData}}
-                        @success={{action "handleCopySuccess"}}
-                        @error={{action "handleCopyError"}}
-                      />
-                    {{/if}}
-                  </li>
-                </ul>
-              </nav>
-            </D.content>
-          </BasicDropdown>
-        {{/unless}}
-      {{/let}}
-    {{/if}}
+<SecretEditToolbar
+  @mode={{mode}}
+  @model={{model}}
+  @isV2={{isV2}}
+  @isWriteWithoutRead={{isWriteWithoutRead}}
+  @secretData={{secretData}}
+  @secretDataIsAdvanced={{secretDataIsAdvanced}}
+  @showAdvancedMode={{showAdvancedMode}}
+  @modelForData={{modelForData}}
+  @navToNearestAncestor={{navToNearestAncestor}}
+  @canEditV2Secret={{canEditV2Secret}}
+  @canEdit={{canEdit}}
+  @codemirrorString={{codemirrorString}}
+  @editActions={{hash
+    toggleAdvanced=(action "toggleAdvanced")
+    refresh=(action "refresh")
+  }}
+/>
 
-    {{#if (and (eq @mode "show") this.isV2 (not @model.failedServerRead))}}
-      <SecretVersionMenu
-        @version={{this.modelForData}}
-        @onRefresh={{action 'refresh'}}
-        @model={{this.model}}
-      />
-    {{/if}}
-
-    {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}}
-      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
-        {{#if isV2}}
-          <ToolbarLink
-            @params={{array targetRoute model.id (query-params version=this.modelForData.version)}}
-            @data-test-secret-edit="true"
-            @replace={{true}}
-            @type="add"
-          >
-            Create new version
-          </ToolbarLink>
-        {{else}}
-          <ToolbarLink
-            @params={{array targetRoute model.id}}
-            @data-test-secret-edit="true"
-            @replace={{true}}
-          >
-            Edit secret
-          </ToolbarLink>
-        {{/if}}
-      {{/let}}
-    {{/if}}
-  </ToolbarActions>
-</Toolbar>
-{{#if (eq mode "create")}}
-  <form class="{{if showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
-    <div class="field box is-fullwidth is-sideless is-marginless">
-      <NamespaceReminder @mode="create" @noun="secret" />
-      <MessageError @model={{modelForData}} @errorMessage={{error}} />
-      <label class="is-label" for="kv-key">Path for this secret</label>
-      <p class="control is-expanded">
-        <Input 
-          @autocomplete="off" 
-          @spellcheck="false" 
-          data-test-secret-path="true"
-          @id="kv-key" 
-          class="input {{if (get validationMessages 'path') "has-error-border"}}"
-          @value={{get modelForData modelForData.pathAttr}} 
-          onkeyup={{perform waitForKeyUp "path" value="target.value"}}
-        />
-      </p>
-      {{#if (get validationMessages 'path')}}
-        <AlertInline 
-          @type="danger" 
-          @message={{get validationMessages 'path'}} 
-          @paddingTop=true
-          @isMarginless=true
-        />
-      {{/if}}
-      {{#if modelForData.isFolder}}
-        <p class="help is-danger">
-        The secret path may not end in <code>/</code>
-        </p>
-      {{/if}}
-    </div>
-    {{!-- Angel start here UPDATE --}}
-    {{!-- Chunk of secret data --}}
-    {{#if showAdvancedMode}}
-      <div class="form-section">
-        <JsonEditor
-          @title={{if isV2 "Version Data" "Secret Data"}}
-          @value={{codemirrorString}}
-          @valueUpdated={{action "codemirrorUpdated"}}
-          @onFocusOut={{action "formatJSON"}}>
-        </JsonEditor> 
-      </div>
-    {{else}}
-      <div class="form-section">
-        <label class="title is-5">
-          Secret data
-        </label>
-      {{#each secretData as |secret index|}}
-        <div class="info-table-row">
-          <div class="column is-one-quarter info-table-row-edit">
-            <Input 
-              data-test-secret-key={{true}}
-              @value={{secret.name}}
-              placeholder="key"
-              @change={{action "handleChange"}}
-              class="input"
-              @autocomplete="off"
-              @spellcheck="false"
-            />
-          </div>
-          <div class="column info-table-row-edit">
-            <MaskedInput
-              @name={{secret.name}}
-              @onKeyDown={{action "handleKeyDown"}}
-              @onChange={{action "handleChange"}}
-              @value={{secret.value}}
-              data-test-secret-value="true"
-            />
-          </div>
-          <div class="column is-narrow info-table-row-edit">
-            {{#if (eq secretData.length (inc index))}}
-              <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
-                Add
-              </button>
-            {{else}}
-              <button
-                class="button has-text-grey is-expanded is-icon"
-                type="button"
-                {{action "deleteRow" secret.name}}
-                aria-label="Delete row"
-              >
-                <Icon
-                  @glyph="trash"
-                  @size="l"
-                  class="has-text-grey-light"
-                />
-              </button>
-            {{/if}}
-          </div>
-        </div>
-        {{#if validationMessages.key}}
-          <AlertInline 
-            @type="danger" 
-            @message={{validationMessages.key}} 
-            @paddingTop=true
-            @isMarginless=true
-          />
-        {{/if}}
-      {{/each}}
-      </div>
-    {{/if}}
-  {{!-- Angel end --}}
-  {{!-- Angel gets hidden under toggle --}}
-  {{!-- Angel rename component to Secret metadata --}}
-  <ToggleButton 
-    @class="is-block"
-    @toggleAttr={{"showMetadata"}}
-    @toggleTarget={{this}}
-    @openLabel="Hide secret metadata"
-    @closedLabel="Show secret metadata"
+{{#if (or (eq mode "create") (eq mode "edit"))}}
+  <SecretCreateOrUpdate
+    @mode={{mode}}
+    @model={{model}}
+    @showAdvancedMode={{showAdvancedMode}}
+    @modelForData={{modelForData}}
+    @error={{error}}
+    @isV2={{isV2}}
+    @codemirrorString={{codemirrorString}}
+    @secretData={{secretData}}
+    @buttonDisabled={{buttonDisabled}}
   />
-    {{#if showMetadata}}
-      <SecretEditMetadata
-        @model={{model}}
-        {{!-- ARG TODO issue here because passing a task in secret edit but edit edit metadata not a task --}}
-        {{!-- @onKeyUp={{perform waitForKeyUp}} --}}
-        @validationMessages={{validationMessages}}
-        @mode={{mode}}
-      />
-  {{!-- Angel turn into seperate component --}}
-  
-    {{/if}}
-   
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <button
-        type="submit"
-        disabled={{or buttonDisabled validationErrorCount}}
-        class="button is-primary"
-        data-test-secret-save=true
-        >
-          Save
-        </button>
-      </div>
-      <div class="control">
-        <SecretLink @mode="list" @secret={{model.parentKey}} @class="button">
-          Cancel
-        </SecretLink>
-      </div>
-    </div>
-  </form>
-{{else if (eq mode "edit")}}
-  <form onsubmit={{action "createOrUpdateKey" "update"}}>
-    <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
-      <MessageError @model={{modelForData}} @errorMessage={{error}} />
-      <NamespaceReminder @mode="edit" @noun="secret" />
-      {{#if (and (not model.failedServerRead) (not model.selectedVersion.failedServerRead) (not-eq model.selectedVersion.version model.currentVersion))}}
-        <div class="form-section">
-          <AlertBanner
-            @type="warning"
-            @class="is-marginless"
-            @message="You are creating a new version based on data from Version {{model.selectedVersion.version}}. The current version for {{model.id}} is Version {{model.currentVersion}}."
-          />
-        </div>
-      {{/if}}
-      <SecretCreateNewVersion
-        @showAdvancedMode={{showAdvancedMode}}
-        @codemirrorString={{codemirrorString}}
-        @secretData={{secretData}}
-        @isV2={{isV2}}
-        {{!-- ARG TODO may not need model if remove validations at the top of file --}}
-        @model={{model}}
-        @canEditV2Secret={{canEditV2Secret}}
-        @editActions={{hash
-          codemirrorUpdated=(action "codemirrorUpdated")
-          formatJSON=(action "formatJSON")
-          handleKeyDown=(action "handleKeyDown")
-          handleChange=(action "handleChange")
-          deleteRow=(action "deleteRow")
-          addRow=(action "addRow")
-        }}
-      />
-    </div>
-    <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={{or buttonDisabled validationErrorCount}}
-            class="button is-primary"
-          >
-            Save
-          </button>
-        </div>
-        <div class="control">
-          <SecretLink @mode="show" @secret={{model.id}} @class="button" @queryParams={{query-params version=this.modelForData.version}}>
-            Cancel
-          </SecretLink>
-        </div>
-      </div>
-    </div>
-  </form>
 {{else if (eq mode "show")}}
   <SecretFormShow
     @isV2={{isV2}}

From fdd079c8dd216eb3097143467956dbc1d91d4f17 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 12 Aug 2021 13:32:06 -0600
Subject: [PATCH 18/40] add validation for metadata on create

---
 ui/app/components/kv-object-editor.js         |  7 ++++++
 ui/app/components/secret-create-or-update.js  | 11 ++++++--
 ui/app/models/secret-v2.js                    |  6 -----
 .../templates/components/kv-object-editor.hbs | 25 ++++++++++++++++++-
 .../components/secret-create-or-update.hbs    |  6 ++---
 .../components/secret-edit-metadata.hbs       |  2 --
 .../addon/templates/components/form-field.hbs |  3 +++
 7 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/ui/app/components/kv-object-editor.js b/ui/app/components/kv-object-editor.js
index 3a3a4217edfb..51f16a426d4f 100644
--- a/ui/app/components/kv-object-editor.js
+++ b/ui/app/components/kv-object-editor.js
@@ -90,5 +90,12 @@ export default Component.extend({
       data.removeAt(index);
       this.onChange(data.toJSON());
     },
+
+    handleKeyUp(name, value) {
+      if (!this.onKeyUp) {
+        return;
+      }
+      this.onKeyUp(name, value);
+    },
   },
 });
diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 9d9c2681c918..7c39fdd3773b 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -89,7 +89,15 @@ export default Component.extend({
     }
     if (name === 'customMetadata') {
       if (value) {
-        this.model.set('customMetadata', { key: 'meep', value: 'meeping' });
+        // ARG TODO for now set this to hardcoded.
+        this.model.set('customMetadata', { key: 'meep', value: value });
+        // Cp validations won't work on an object so performing validations here
+        let regex = /^[^\/]+$/g; // looking for a forward slash
+        if (!value.match(regex)) {
+          set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
+        } else {
+          set(this.validationMessages, name, '');
+        }
       }
     }
 
@@ -144,7 +152,6 @@ export default Component.extend({
       })
       .catch(error => {
         if (error instanceof ControlGroupError) {
-          // ARG TODO YOU NEED TO TEST THIS!
           let errorMessage = this.controlGroup.logFromError(error);
           this.set('error', errorMessage.content);
         }
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index 8d09015d30c2..7c524b55f2b4 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -7,12 +7,6 @@ import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 import { validator, buildValidations } from 'ember-cp-validations';
 
 const Validations = buildValidations({
-  // ARG TODO later:
-  //The new custom_metadata field will compete with the version history for storage space in the key metadata entry. To attempt to prevent contention, Vault will impose limits on both the keys and values within the custom_metadata field. The keys and values will be limited to 128 and 512 bytes, respectively. Vault will also impose a limit of 64 total custom_metadata keys.
-  customMetadata: validator('format', {
-    regex: /^[^\/]+$/,
-    message: 'Custom Values cannot contain a forward slash.',
-  }),
   maxVersions: [
     validator('number', {
       allowString: false,
diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs
index 9fa3dd344d13..b60cbe5fbe42 100644
--- a/ui/app/templates/components/kv-object-editor.hbs
+++ b/ui/app/templates/components/kv-object-editor.hbs
@@ -19,7 +19,30 @@
       <Input data-test-kv-key={{true}} @value={{row.name}} placeholder="key" @change={{action "updateRow" row index}} class="input" />
     </div>
     <div class="column">
-      <Textarea data-test-kv-value={{true}} @name={{row.name}} @change={{action "updateRow" row index}} @value={{row.value}} @wrap="off" class="input" placeholder="value" @rows={{1}} />
+      <Textarea 
+        data-test-kv-value={{true}}
+        @name={{row.name}}
+        class="input {{if (get validationMessages name) "has-error-border"}}"
+        @change={{action "updateRow" row index}}
+        @value={{row.value}}
+        @wrap="off"
+        class="input"
+        placeholder="value"
+        @rows={{1}}
+        onkeyup={{action
+          (action "handleKeyUp" name)
+          value="target.value"
+        }}
+      />
+      {{#if (get validationMessages name)}}
+      <div>
+        <AlertInline 
+          @type="danger" 
+          @message={{get validationMessages name}} 
+          @paddingTop=true
+        />
+      </div>
+    {{/if}}
     </div>
     <div class="column is-narrow">
       {{#if (eq kvData.length (inc index))}}
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 5c2c52f21764..8fc81890f082 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -13,8 +13,8 @@
           @id="kv-key" 
           class="input {{if (get validationMessages 'path') "has-error-border"}}"
           @value={{get @modelForData @modelForData.pathAttr}} 
-          {{!-- ARG TODO revisit causes error, probably have to handle in js file --}}
-          {{!-- onkeyup={{@onKeyUp "path" value="target.value"}} --}}
+          onkeyup={{perform waitForKeyUp "path" value="target.value"}}
+
         />
       </p>
       {{#if (get validationMessages 'path')}}
@@ -111,7 +111,7 @@
         @model={{@model}}
         @validationMessages={{validationMessages}}
         @mode="create"
-        {{!-- @onKeyUp={{@onKeyUp}} --}}
+        @onKeyUp={{perform waitForKeyUp}}
       />
     {{/if}}
     <div class="field is-grouped box is-fullwidth is-bottomless">
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index ccbdb03b9d2a..883b19408e79 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -5,8 +5,6 @@
       The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
     </p>
     {{#each @model.fields as |attr|}}
-    {{!-- ARG TODO add validation for custom metadata and potentially change look of the field. --}}
-    {{!-- ARG TODO right now not passing onKeyUP into this function --}}
       {{#if (eq attr.name "customMetadata")}}
         <FormField 
           data-test-field 
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index d0f65d01ebc7..1a8ecf3dea73 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -112,6 +112,9 @@
     subText=attr.options.subText
     small-label=(if (eq valuePath 'customMetadata') true false )
     formSection=(if (eq valuePath 'customMetadata') false true )
+    name=valuePath
+    onKeyUp=onKeyUp
+    validationMessages=validationMessages
   }}
 {{else if (eq attr.options.editType "file")}}
 {{!-- File Input --}}

From 053366d4a1b72440fdd26439a81eef701bd685a7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 12 Aug 2021 14:57:05 -0600
Subject: [PATCH 19/40] stuff, but broken now on metadata tab

---
 ui/app/components/secret-create-or-update.js  | 14 -----------
 ui/app/components/secret-edit-metadata.js     | 24 +++++++++++++++++++
 .../templates/components/kv-object-editor.hbs | 18 +++++++-------
 .../components/secret-create-or-update.hbs    |  2 --
 .../components/secret-edit-metadata.hbs       |  4 ++--
 .../cluster/secrets/backend/edit-metadata.hbs |  2 --
 6 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 7c39fdd3773b..f4c870d5aa89 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -87,20 +87,6 @@ export default Component.extend({
         set(this.validationMessages, name, '');
       }
     }
-    if (name === 'customMetadata') {
-      if (value) {
-        // ARG TODO for now set this to hardcoded.
-        this.model.set('customMetadata', { key: 'meep', value: value });
-        // Cp validations won't work on an object so performing validations here
-        let regex = /^[^\/]+$/g; // looking for a forward slash
-        if (!value.match(regex)) {
-          set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
-        } else {
-          set(this.validationMessages, name, '');
-        }
-      }
-    }
-
     let values = Object.values(this.validationMessages);
 
     this.set('validationErrorCount', values.filter(Boolean).length);
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 53a8c65b813d..6963d8e1f6a7 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -16,12 +16,23 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
 import { action } from '@ember/object';
 export default class SecretEditMetadata extends Component {
   @service router;
   @service store;
 
+  @tracked validationMesssages;
+
+  constructor() {
+    super(...arguments);
+    this.validationMessages = {
+      customMetadata: '',
+    };
+  }
+
   async save() {
     let model = this.args.model;
     try {
@@ -42,4 +53,17 @@ export default class SecretEditMetadata extends Component {
     }
     // ARG TODO else validation error?
   }
+  @action onKeyUp(name, value) {
+    if (value) {
+      // // ARG TODO for now set this to hardcoded.
+      // this.model.set('customMetadata', { key: 'meep', value: value });
+      // cp validations won't work on an object so performing validations here
+      let regex = /^[^\/]+$/g; // looking for a forward slash
+      if (!value.match(regex)) {
+        set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
+      } else {
+        set(this.validationMessages, name, '');
+      }
+    }
+  }
 }
diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs
index b60cbe5fbe42..6184df837e4f 100644
--- a/ui/app/templates/components/kv-object-editor.hbs
+++ b/ui/app/templates/components/kv-object-editor.hbs
@@ -13,6 +13,15 @@
     </p> 
   {{/if}}
 {{/if}}
+{{#if (get validationMessages name)}}
+  <div>
+    <AlertInline 
+      @type="danger" 
+      @message={{get validationMessages name}} 
+      @paddingTop=true
+    />
+  </div>
+{{/if}}
 {{#each kvData as |row index|}}
   <div class="columns is-variable" data-test-kv-row>
     <div class="column is-one-quarter">
@@ -34,15 +43,6 @@
           value="target.value"
         }}
       />
-      {{#if (get validationMessages name)}}
-      <div>
-        <AlertInline 
-          @type="danger" 
-          @message={{get validationMessages name}} 
-          @paddingTop=true
-        />
-      </div>
-    {{/if}}
     </div>
     <div class="column is-narrow">
       {{#if (eq kvData.length (inc index))}}
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 8fc81890f082..06416e4ef4e1 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -109,9 +109,7 @@
     {{#if showMetadata}}
       <SecretEditMetadata
         @model={{@model}}
-        @validationMessages={{validationMessages}}
         @mode="create"
-        @onKeyUp={{perform waitForKeyUp}}
       />
     {{/if}}
     <div class="field is-grouped box is-fullwidth is-bottomless">
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 883b19408e79..6ac894f8ad60 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -10,8 +10,8 @@
           data-test-field 
           @attr={{attr}}
           @model={{@model}}
-          @onKeyUp={{@onKeyUp}}
-          @validationMessages={{@validationMessages}}
+          @onKeyUp={{action "onKeyUp"}}
+          @validationMessages={{this.validationMessages}}
         />
         <label class="title has-padding-top is-5">
           Additional Options
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index f12f0f90ce29..9040c49131d7 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -13,7 +13,5 @@
   {{!-- metadata inputs --}}
   <SecretEditMetadata
     @model={{model}}
-    {{!-- ARG TODO handle onKeyUp --}}
-    @validationMessages={{validationMessages}}
   />
 </div>
\ No newline at end of file

From 5e2995ce83af7031cd35e080645da6c1d5002ee7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 12 Aug 2021 15:15:44 -0600
Subject: [PATCH 20/40] fix metadata route error

---
 ui/app/routes/vault/cluster/secrets/backend/metadata.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index a3d2897a857c..6d9d712ed4b0 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -2,16 +2,15 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 export default class MetadataShow extends Route {
   @service store;
-  // ARG TODO unloadmodelroute
   beforeModel() {
     const { backend } = this.paramsFor('vault.cluster.secrets.backend');
     this.backend = backend;
   }
   model(params) {
-    let { secret } = params; // of dynamic route /*secret
+    let { secret } = params;
     return this.store
       .queryRecord('secret-v2', {
-        backend: 'kv',
+        backend: this.backend,
         id: secret,
       })
       .then(record => {
@@ -23,7 +22,6 @@ export default class MetadataShow extends Route {
         };
         return record;
       });
-    // make an API request that uses the id
   }
   setupController(controller, model) {
     controller.set('backend', this.backend); // for backendCrumb

From b561af9111bcf979199b42d8376c9e9fc82c61a7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 13 Aug 2021 12:09:12 -0600
Subject: [PATCH 21/40] permissions

---
 ui/app/components/secret-delete-menu.js       | 27 +-----------
 ui/app/components/secret-edit-toolbar.js      |  7 +--
 ui/app/components/secret-edit.js              | 25 ++---------
 ui/app/models/secret-v2.js                    | 10 ++---
 .../components/secret-delete-menu.hbs         |  7 +--
 .../components/secret-edit-metadata.hbs       |  2 +-
 .../components/secret-edit-toolbar.hbs        |  6 +--
 ui/app/templates/components/secret-edit.hbs   | 14 +++---
 .../cluster/secrets/backend/edit-metadata.hbs | 43 ++++++++++++-------
 .../cluster/secrets/backend/metadata.hbs      | 13 +++---
 10 files changed, 64 insertions(+), 90 deletions(-)

diff --git a/ui/app/components/secret-delete-menu.js b/ui/app/components/secret-delete-menu.js
index e5feb32e7634..9e08f47b2fef 100644
--- a/ui/app/components/secret-delete-menu.js
+++ b/ui/app/components/secret-delete-menu.js
@@ -17,30 +17,7 @@ export default class SecretDeleteMenu extends Component {
 
   @tracked showDeleteModal = false;
 
-  @maybeQueryRecord(
-    'capabilities',
-    context => {
-      if (!context.args.model) {
-        return;
-      }
-      let backend = context.args.model.backend;
-      let id = context.args.model.id;
-      let path = context.args.isV2
-        ? `${encodeURIComponent(backend)}/data/${encodeURIComponent(id)}`
-        : `${encodeURIComponent(backend)}/${encodeURIComponent(id)}`;
-      return {
-        id: path,
-      };
-    },
-    'isV2',
-    'model',
-    'model.id',
-    'mode'
-  )
-  updatePath;
-  @alias('updatePath.canDelete') canDelete;
-  @alias('updatePath.canUpdate') canUpdate;
-
+  // canDeleteSecretData is calculated in secret-edit because it's already calling maybeQueryRecord on the data endpoint
   @maybeQueryRecord(
     'capabilities',
     context => {
@@ -82,7 +59,7 @@ export default class SecretDeleteMenu extends Component {
   )
   destroyVersionPath;
   @alias('destroyVersionPath.canUpdate') canDestroyVersion;
-
+  // ARG TODO try and move this to the model, after merge.
   @maybeQueryRecord(
     'capabilities',
     context => {
diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
index e8dce3a8b29f..286eea32acf5 100644
--- a/ui/app/components/secret-edit-toolbar.js
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -14,8 +14,8 @@
  * @showAdvancedMode={{showAdvancedMode}}
  * @modelForData={{this.modelForData}}
  * @navToNearestAncestor={{this.navToNearestAncestor}}
- * @canEditV2Secret={{canEditV2Secret}}
- * @canEdit={{canEdit}}
+ * @canUpdateSecretData={{canUpdateSecretData}}
+ * @canDeleteSecretData={{canDeleteSecretData}}
  * @codemirrorString={{codemirrorString}}
  * @wrappedData={{wrappedData}}
  * @editActions={{hash
@@ -32,7 +32,8 @@
  * @param {boolean} secretDataIsAdvanced - used to determine if show JSON toggle
  * @param {object} modelForData - a modified version of the model with secret data
  * @param {string} navToNearestAncestor - route to nav to if press cancel
- * @param {boolean} canEditV2Secret - permissions
+ * @param {boolean} canDeleteSecretData - permissions that either show or hide the Delete button, calculated in secret-edit because it's used in secret-edit-toolbar AND secret-delete-menu. deletion based on data endpoint.
+ * @param {boolean} canUpdateSecretData - permissions that show the create new version button or not.
  * @param {boolean} canEdit - permissions
  * @param {string} codemirrorString - used in JSON editor
  * @param {object} wrappedData - when copy the data it's the token of the secret returned.
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index d1081fad3bff..cac412bd9543 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -76,6 +76,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
   },
 
+  // ARG TODO this should be handled in the model??? Tried doesn't work.
   updatePath: maybeQueryRecord(
     'capabilities',
     context => {
@@ -94,28 +95,8 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     'model.id',
     'mode'
   ),
-  canDelete: alias('updatePath.canDelete'),
-  canEdit: alias('updatePath.canUpdate'),
-
-  v2UpdatePath: maybeQueryRecord(
-    'capabilities',
-    context => {
-      if (!context.model || context.mode === 'create' || context.isV2 === false) {
-        return;
-      }
-      let backend = context.get('model.engine.id');
-      let id = context.model.id;
-      return {
-        id: `${backend}/metadata/${id}`,
-      };
-    },
-    'isV2',
-    'model',
-    'model.id',
-    'mode'
-  ),
-
-  canEditV2Secret: alias('v2UpdatePath.canUpdate'),
+  canDeleteSecretData: alias('updatePath.canDelete'),
+  canEditSecretData: alias('updatePath.canUpdate'),
 
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index 7c524b55f2b4..d040ceb362e9 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -57,10 +57,10 @@ export default Model.extend(KeyMixin, Validations, {
   fields: computed(function() {
     return expandAttributeMeta(this, ['customMetadata', 'maxVersions', 'casRequired', 'deleteVersionAfter']);
   }),
-  versionPath: lazyCapabilities(apiPath`${'engineId'}/data/${'id'}`, 'engineId', 'id'),
-  secretPath: lazyCapabilities(apiPath`${'engineId'}/metadata/${'id'}`, 'engineId', 'id'),
+  secretDataPath: lazyCapabilities(apiPath`${'engineId'}/data/${'id'}`, 'engineId', 'id'),
+  secretMetadataPath: lazyCapabilities(apiPath`${'engineId'}/metadata/${'id'}`, 'engineId', 'id'),
 
-  canEdit: alias('versionPath.canUpdate'),
-  canDelete: alias('secretPath.canDelete'),
-  canRead: alias('secretPath.canRead'),
+  canListMetadata: alias('secretMetadataPath.canList'),
+  canReadMetadata: alias('secretMetadataPath.canRead'),
+  canUpdateMetadata: alias('secretMetadataPath.canUpdate'),
 });
diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index 614f50e2e403..d963983d3447 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -1,5 +1,6 @@
 {{#unless @isV2}}
-  {{#if this.canDelete}}
+{{!-- ARG TODO this is for v1 need to test --}}
+  {{#if @canDeleteSecretData}}
     <ConfirmAction
       @buttonClasses="toolbar-link"
       @confirmTitle="Delete secret?"
@@ -33,7 +34,7 @@
       </button>
       <div class="toolbar-separator"/>
     {{else}}
-      {{#if (or this.canDeleteAnyVersion (and this.isLatestVersion this.canDelete))}}
+      {{#if (or this.canDeleteAnyVersion (and this.isLatestVersion @canDeleteSecretData))}}
         <ConfirmAction
           @buttonClasses="toolbar-link"
           @confirmTitle="Delete"
@@ -59,7 +60,7 @@
       <p class="has-bottom-margin-s"><strong>How would you like to proceed?</strong></p>
       {{#unless @modelForData.destroyed}}
         {{#unless @modelForData.deleted}}
-          {{#if this.canDelete}}
+          {{#if @canDeleteSecretData}}
             <div class="modal-radio-button" data-test-delete-modal="delete-version">
               <RadioButton
                 @value="delete"
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 6ac894f8ad60..c0224fc76224 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -2,7 +2,7 @@
 <form onsubmit={{this.onSaveChanges}}>
   <div data-test-metadata-fields-meep class={{if (eq @mode "create") "box has-container is-fullwidth" "form-section is-fullwidth"}}>
     <p class="field">
-      The options below are all version-agnostic; they apply to all versions of this secret. After the secret is created, this can be edited in the Metadata tab.
+      The options below are all version-agnostic; they apply to all versions of this secret. {{if (eq @mode 'create') 'After the secret is created, this can be edited in the Metadata tab.' ''}}
     </p>
     {{#each @model.fields as |attr|}}
       {{#if (eq attr.name "customMetadata")}}
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index 86f0dda34fda..8fcb4be44ed8 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -14,7 +14,7 @@
     </ToolbarFilters>
   {{/unless}}
   <ToolbarActions>
-    {{#if (eq @mode 'show')}}
+    {{#if (and (eq @mode 'show') @canDeleteSecretData)}}
       <SecretDeleteMenu 
         @modelForData={{@modelForData}}
         @model={{@model}}
@@ -23,7 +23,7 @@
         @refresh={{action @editActions.refresh}}
       />
     {{/if}}
-    {{#if (and (eq @mode 'show') (or @canEditV2Secret @canEdit))}}
+    {{#if (and (eq @mode 'show') @canUpdateSecretData)}}
       {{#let (concat 'vault.cluster.secrets.backend.' (if (eq @mode 'show') 'edit' 'show')) as |targetRoute|}}
         {{#unless (and isV2 (or @isWriteWithoutRead @modelForData.destroyed @modelForData.deleted))}}
           <BasicDropdown
@@ -92,7 +92,7 @@
       />
     {{/if}}
 
-    {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}}
+    {{#if (and (eq mode 'show') canUpdateSecretData)}}
       {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
         {{#if isV2}}
           <ToolbarLink
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 4d575a919beb..1b0523073284 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -26,11 +26,13 @@
             Secret
           </LinkTo>
         </LinkTo>
-        <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
-          <LinkTo @route="vault.cluster.secrets.backend.metadata">
-            Metadata
+        {{#if model.canReadMetadata}}
+          <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
+            <LinkTo @route="vault.cluster.secrets.backend.metadata">
+              Metadata
+            </LinkTo>
           </LinkTo>
-        </LinkTo>
+        {{/if}}
       </ul>
     </nav>
   </div>
@@ -46,8 +48,8 @@
   @showAdvancedMode={{showAdvancedMode}}
   @modelForData={{modelForData}}
   @navToNearestAncestor={{navToNearestAncestor}}
-  @canEditV2Secret={{canEditV2Secret}}
-  @canEdit={{canEdit}}
+  @canUpdateSecretData={{canUpdateSecretData}}
+  @canDeleteSecretData={{canDeleteSecretData}}
   @codemirrorString={{codemirrorString}}
   @editActions={{hash
     toggleAdvanced=(action "toggleAdvanced")
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index 9040c49131d7..becc1e308ae5 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -1,17 +1,28 @@
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Edit secret metadata
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+{{#if model.canUpdateMetadata}}
+  <PageHeader as |p|>
+    <p.levelLeft>
+      <h1 class="title is-3">
+        Edit secret metadata
+      </h1>
+    </p.levelLeft>
+  </PageHeader>
 
-<div class="form-section">
-  <label class="title has-padding-top is-5">
-    Metadata
-  </label>
-  {{!-- metadata inputs --}}
-  <SecretEditMetadata
-    @model={{model}}
-  />
-</div>
\ No newline at end of file
+  <div class="form-section">
+    <label class="title has-padding-top is-5">
+      Options
+    </label>
+    {{!-- metadata inputs --}}
+    <SecretEditMetadata
+      @model={{model}}
+    />
+  </div>
+{{else}}
+  <EmptyState
+    @title="You do not have permissions to edit metadata"
+    @message="Ask your administrator if you think you should have access.">
+    <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{model.id}} @tagName="button" @class="link">
+      View Metadata
+    </LinkTo>
+    <DocLink @path="/api/secret/kv/kv-v2#create-update-metadata">More here</DocLink>
+  </EmptyState>
+{{/if}}
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index ca68ab6d7b53..29a68b5a9798 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -33,12 +33,13 @@
 </div>
 
 <Toolbar>
-  {{!-- ARG TODO add conditional here, shouldn't access edit if no edit to metadata access --}}
-  <ToolbarActions>  
-    <ToolbarLink @params={{array 'vault.cluster.secrets.backend.edit-metadata' this.model.id }}>
-      Edit metadata
-    </ToolbarLink>
-  </ToolbarActions>
+  {{#if this.model.canUpdateMetadata}}
+    <ToolbarActions>  
+      <ToolbarLink @params={{array 'vault.cluster.secrets.backend.edit-metadata' this.model.id }}>
+        Edit metadata
+      </ToolbarLink>
+    </ToolbarActions>
+  {{/if}}
 </Toolbar>
 
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">

From 044723241e1a8cc8c14cbf490230c0f2e04b2c5f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 17 Aug 2021 10:39:15 -0600
Subject: [PATCH 22/40] saving small text changes

---
 ui/app/models/secret-engine.js                     |  4 ++--
 ui/app/models/secret-v2.js                         |  7 +++++--
 .../vault/cluster/secrets/backend/metadata.hbs     | 14 ++++++--------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index 7e53be9afb89..718924b31d8d 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -50,7 +50,7 @@ export default Model.extend(Validations, {
   // KV 2 additional config default options
   maxVersions: attr('number', {
     defaultValue: 10,
-    label: 'Maximum Number of Versions',
+    label: 'Maximum number of versions',
     subText:
       'The number of versions to keep per key. Once the number of keys exceeds the maximum number set here, the oldest version will be permanently deleted. This value applies to all keys, but a key’s metadata settings can overwrite this value.',
   }),
@@ -58,7 +58,7 @@ export default Model.extend(Validations, {
     defaultValue: false,
     label: 'Require Check and Set',
     subText:
-      'If checked all keys will require the cas parameter to be set on all write request. A key’s metadata settings can overwrite this value.',
+      'If checked, all keys will require the cas parameter to be set on all write requests. A key’s metadata settings can overwrite this value.',
   }),
   deleteVersionAfter: attr({
     defaultValue: 0,
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index d040ceb362e9..0bd6b041b2ac 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -45,7 +45,7 @@ export default Model.extend(KeyMixin, Validations, {
     defaultValue: false,
     label: 'Require Check and Set',
     subText:
-      'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter',
+      'Writes will only be allowed if the key’s current version matches the version specified in the cas parameter.',
   }),
   deleteVersionAfter: attr({
     defaultValue: 0,
@@ -62,5 +62,8 @@ export default Model.extend(KeyMixin, Validations, {
 
   canListMetadata: alias('secretMetadataPath.canList'),
   canReadMetadata: alias('secretMetadataPath.canRead'),
-  canUpdateMetadata: alias('secretMetadataPath.canUpdate'),
+  canUpdateMetadata: alias('secretMetadataPath.canUpdate'), // ARG this work in edit-metadata, but not in secret-edit???
+
+  canUpdateMetadataRoot: belongsTo('secret-engine'),
+  canListMetadataMeep: alias('secretMetadataPath.canUpdate'),
 });
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index 29a68b5a9798..ae02789df87a 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -47,26 +47,24 @@
   <InfoTableRow @alwaysRender={{true}} @label="Check-and-Set required" @value={{this.model.casRequired}} />
   <InfoTableRow @alwaysRender={{true}} @label="Delete version after" @value={{if (eq this.model.deleteVersionAfter "0s") "Never delete" this.model.deleteVersionAfter}} />
 </div>
+{{!-- ARG TODO custom metadata on top of the other options --}}
 <div class="form-section">
   <label class="title has-padding-top is-5">
-    Metadata
+    Custom metadata
   </label>
 </div>
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
-  {{#if this.model.customMetadata}}
-    {{#each-in this.model.customMetadata as | key value|}}
+  {{#each-in this.model.customMetadata as | key value|}}
       <InfoTableRow @alwaysRender={{false}} @label={{key}} @value={{value}} />
-    {{/each-in}}
   {{else}}
-  {{!-- ARG TODO double check the link --}}
-  {{!-- Also unsure if will return empty object or not --}}
+  {{!-- ARG TODO when API merged check if returns empty object this should work if it does --}}
     <EmptyState
       @title="No custom metadata"
       @bottomBorder={{true}}
-      @message="This data is version-agnostic and usually used to describe the secret being stored.">
+      @message="This data is version-agnostic and is usually used to describe the secret being stored.">
         <LinkTo @route="vault.cluster.secrets.backend.edit-metadata" @model={{this.model.id}}>
           Add metadata
         </LinkTo>
     </EmptyState>
-  {{/if}}
+  {{/each-in}}
 </div>

From a9e97031895a29b13a47aa4e5d35319487aa458f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 17 Aug 2021 12:17:00 -0600
Subject: [PATCH 23/40] permissions

---
 ui/app/components/secret-create-or-update.js  |  2 +-
 ui/app/components/secret-edit.js              | 28 ++++++++++++++++---
 .../cluster/secrets/backend/create-root.js    |  7 ++++-
 .../components/secret-create-or-update.hbs    | 26 +++++++++--------
 .../components/secret-edit-metadata.hbs       | 27 +-----------------
 ui/app/templates/components/secret-edit.hbs   |  3 ++
 6 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index f4c870d5aa89..5d62a50112d1 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -23,7 +23,7 @@ import { task, waitForEvent } from 'ember-concurrency';
 const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
-
+// ARG TODO make this a glimmer and give documentation
 export default Component.extend({
   secretPaths: null,
   validationErrorCount: 0,
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index cac412bd9543..e2902be08d66 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -76,8 +76,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
   },
 
-  // ARG TODO this should be handled in the model??? Tried doesn't work.
-  updatePath: maybeQueryRecord(
+  checkSecretCapabilities: maybeQueryRecord(
     'capabilities',
     context => {
       if (!context.model || context.mode === 'create') {
@@ -95,8 +94,29 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     'model.id',
     'mode'
   ),
-  canDeleteSecretData: alias('updatePath.canDelete'),
-  canEditSecretData: alias('updatePath.canUpdate'),
+  canDeleteSecretData: alias('checkSecretCapabilities.canDelete'),
+  canUpdateSecretData: alias('checkSecretCapabilities.canUpdate'),
+
+  checkMetadataCapabilities: maybeQueryRecord(
+    'capabilities',
+    context => {
+      if (!context.model || !context.isV2) {
+        return;
+      }
+      let backend = context.model.backend;
+      let path = `${backend}/metadata/`;
+      return {
+        id: path,
+      };
+    },
+    'isV2',
+    'model',
+    'model.id',
+    'mode'
+  ),
+  canDeleteSecretMetadata: alias('checkMetadataCapabilities.canDelete'),
+  canUpdateSecretMetadata: alias('checkMetadataCapabilities.canUpdate'),
+  canCreateSecretMetadata: alias('checkMetadataCapabilities.canCreate'),
 
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
diff --git a/ui/app/routes/vault/cluster/secrets/backend/create-root.js b/ui/app/routes/vault/cluster/secrets/backend/create-root.js
index 37bb714580b7..75c7a5140bfa 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/create-root.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/create-root.js
@@ -47,7 +47,12 @@ export default EditBase.extend({
       }
       return this.store.createRecord(modelType);
     }
-
+    // create record in capabilities that checks for access to create metadata
+    // this record is then maybeQueryRecord in the component secret-create-or-update
+    if (modelType === 'secret-v2') {
+      // only check for kv2 secrets
+      this.store.findRecord('capabilities', `${backend}/metadata/`);
+    }
     return secretModel(this.store, backend, transition.to.queryParams.initialKey);
   },
 
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 06416e4ef4e1..09c5e8fc00aa 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -99,18 +99,20 @@
       {{/each}}
       </div>
     {{/if}}
-  <ToggleButton 
-    @class="is-block"
-    @toggleAttr={{"showMetadata"}}
-    @toggleTarget={{this}}
-    @openLabel="Hide secret metadata"
-    @closedLabel="Show secret metadata"
-  />
-    {{#if showMetadata}}
-      <SecretEditMetadata
-        @model={{@model}}
-        @mode="create"
-      />
+  {{#if (and @isV2 @canCreateSecretMetadata) }}
+    <ToggleButton 
+      @class="is-block"
+      @toggleAttr={{"showMetadata"}}
+      @toggleTarget={{this}}
+      @openLabel="Hide secret metadata"
+      @closedLabel="Show secret metadata"
+    />
+      {{#if showMetadata}}
+        <SecretEditMetadata
+          @model={{@model}}
+          @mode="create"
+        />
+      {{/if}}
     {{/if}}
     <div class="field is-grouped box is-fullwidth is-bottomless">
       <div class="control">
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index c0224fc76224..9cd8369a33ec 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -28,38 +28,13 @@
       {{/unless}}
     {{/each}}
   </div>
-
-  {{!-- ARG TODO test to see if can force these warnings and turn into validation instead --}}
-  {{!-- {{#if @showWriteWithoutReadWarning}}
-    {{#if (and @isV2 @model.failedServerRead)}}
-      <AlertBanner
-        @type="warning"
-        @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
-        @class="is-marginless"
-        data-test-v2-no-cas-warning
-      />
-    {{else if @isV2}}
-      <AlertBanner
-        @type="warning"
-        @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
-        @class="is-marginless"
-        data-test-v2-write-without-read
-      />
-    {{else}}
-      <AlertBanner
-        @type="warning"
-        @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
-        @class="is-marginless"
-        data-test-v1-write-without-read
-      />
-    {{/if}}
-  {{/if}} --}}
   {{#unless (eq @mode "create")}}
     <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
       <div class="field is-grouped">
         <div class="control">
           <button
             type="submit"
+            {{!-- ARG TODO revisit this --}}
             {{!-- disabled={{or buttonDisabled validationErrorCount}} --}}
             class="button is-primary"
           >
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 1b0523073284..8c65f7937f94 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -50,6 +50,8 @@
   @navToNearestAncestor={{navToNearestAncestor}}
   @canUpdateSecretData={{canUpdateSecretData}}
   @canDeleteSecretData={{canDeleteSecretData}}
+  @canUpdateSecretMetadata={{canUpdateSecretMetadata}}
+  @canCreateSecretMetadata={{canCreateSecretMetadata}}
   @codemirrorString={{codemirrorString}}
   @editActions={{hash
     toggleAdvanced=(action "toggleAdvanced")
@@ -68,6 +70,7 @@
     @codemirrorString={{codemirrorString}}
     @secretData={{secretData}}
     @buttonDisabled={{buttonDisabled}}
+    @canCreateSecretMetadata={{canCreateSecretMetadata}}
   />
 {{else if (eq mode "show")}}
   <SecretFormShow

From 178d1635c80307c3e5eab489b22226d86c4d132b Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 17 Aug 2021 13:30:03 -0600
Subject: [PATCH 24/40] cleanup

---
 ui/app/templates/components/secret-delete-menu.hbs  | 10 +++++-----
 ui/app/templates/components/secret-edit-toolbar.hbs |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index d963983d3447..22de812c7c24 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -25,11 +25,11 @@
   {{#if (and (not @modelForData.deleted) (not @modelForData.destroyed)) }}
     {{#if (or this.canDestroyVersion this.canDestroyAllVersions)}}
       <button
-          type="button"
-          class="toolbar-link"
-          {{on "click" (fn (mut this.showDeleteModal false))}}
-          data-test-delete-open-modal
-        >
+        type="button"
+        class="toolbar-link"
+        {{on "click" (fn (mut this.showDeleteModal false))}}
+        data-test-delete-open-modal
+      >
         {{if (and (not @modelForData.deleted) (not @modelForData.destroyed)) "Delete" "Destroy"}}
       </button>
       <div class="toolbar-separator"/>
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index 8fcb4be44ed8..e08e9cf777ff 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -21,6 +21,7 @@
         @navToNearestAncestor={{@navToNearestAncestor}}
         @isV2={{isV2}}
         @refresh={{action @editActions.refresh}}
+        @canDeleteSecretData={{canDeleteSecretData}}
       />
     {{/if}}
     {{#if (and (eq @mode 'show') @canUpdateSecretData)}}

From 1c4da5c30b22530dce4a2bc0a1be304dc929e827 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 18 Aug 2021 12:52:20 -0600
Subject: [PATCH 25/40] some test fixes and convert secret create or update to
 glimmer

---
 ui/app/components/secret-create-or-update.js  | 237 +++++++++---------
 ui/app/components/secret-edit-metadata.js     |  47 ++--
 ui/app/components/secret-edit.js              |   2 +-
 .../components/secret-create-or-update.hbs    |  36 +--
 .../components/secret-edit-metadata.hbs       |  11 +-
 ui/app/templates/components/secret-edit.hbs   |   5 +-
 .../pages/secrets/backend/kv/edit-secret.js   |   2 +
 7 files changed, 182 insertions(+), 158 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 5d62a50112d1..679f79013aac 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -11,57 +11,63 @@
  * @param {string} [param1=defaultValue] - param1 is...
  */
 
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import ControlGroupError from 'vault/lib/control-group-error';
 import Ember from 'ember';
 import keys from 'vault/lib/keycodes';
+
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { isBlank, isNone } from '@ember/utils';
 import { set } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+import { isBlank, isNone } from '@ember/utils';
 import { task, waitForEvent } from 'ember-concurrency';
 
 const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
-// ARG TODO make this a glimmer and give documentation
-export default Component.extend({
-  secretPaths: null,
-  validationErrorCount: 0,
-  validationMessages: null,
+// ARG TODO documentation
+export default class SecretCreateOrUpdate extends Component {
+  @tracked secretPaths = null;
+  @tracked validationErrorCount = 0;
+  @tracked validationMessages = null;
+  @tracked codemirrorString = null;
 
-  controlGroup: service(),
-  router: service(),
-  store: service(),
-  wizard: service(),
+  @service controlGroup;
+  @service router;
+  @service store;
+  @service wizard;
 
-  init() {
-    this._super(...arguments);
-    this.set('validationMessages', {
+  constructor() {
+    super(...arguments);
+    this.codemirrorString = this.args.secretData.toJSONString();
+    this.validationMessages = {
       path: '',
-      maxVersions: '',
-    });
+    };
     // for validation, return array of path names already assigned
     if (Ember.testing) {
-      this.set('secretPaths', ['beep', 'bop', 'boop']);
+      this.secretPaths = ['beep', 'bop', 'boop'];
     } else {
       let adapter = this.store.adapterFor('secret-v2');
       let type = { modelName: 'secret-v2' };
-      let query = { backend: this.model.backend };
+      let query = { backend: this.args.model.backend };
       adapter.query(this.store, type, query).then(result => {
-        this.set('secretPaths', result.data.keys);
+        this.secretPaths = result.data.keys;
       });
     }
     this.checkRows();
-    if (this.mode === 'edit') {
+
+    if (this.args.mode === 'edit') {
       this.send('addRow');
     }
-  },
+  }
 
   checkRows() {
-    if (this.secretData.length === 0) {
-      this.send('addRow');
+    if (this.args.secretData.length === 0) {
+      this.addRow();
     }
-  },
+  }
   checkValidation(name, value) {
     if (name === 'path') {
       !value
@@ -74,39 +80,25 @@ export default Component.extend({
         ? set(this.validationMessages, name, `A secret with this ${name} already exists.`)
         : set(this.validationMessages, name, '');
     }
-    // check maxVersions is a number
-    if (name === 'maxVersions') {
-      // checking for value because value which is blank on first load. No keyup event has occurred and default is 10.
-      if (value) {
-        let number = Number(value);
-        this.model.set('maxVersions', number);
-      }
-      if (!this.model.validations.attrs.maxVersions.isValid) {
-        set(this.validationMessages, name, this.model.validations.attrs.maxVersions.message);
-      } else {
-        set(this.validationMessages, name, '');
-      }
-    }
     let values = Object.values(this.validationMessages);
-
-    this.set('validationErrorCount', values.filter(Boolean).length);
-  },
+    this.validationErrorCount = values.filter(Boolean).length;
+  }
   onEscape(e) {
-    if (e.keyCode !== keys.ESC || this.mode !== 'show') {
+    if (e.keyCode !== keys.ESC || this.args.mode !== 'show') {
       return;
     }
-    const parentKey = this.model.parentKey;
+    const parentKey = this.args.model.parentKey;
     if (parentKey) {
       this.transitionToRoute(LIST_ROUTE, parentKey);
     } else {
       this.transitionToRoute(LIST_ROOT_ROUTE);
     }
-  },
+  }
   // successCallback is called in the context of the component
   persistKey(successCallback) {
-    let secret = this.model;
-    let secretData = this.modelForData;
-    let isV2 = this.isV2;
+    let secret = this.args.model;
+    let secretData = this.args.modelForData;
+    let isV2 = this.args.isV2;
     let key = secretData.get('path') || secret.id;
 
     if (key.startsWith('/')) {
@@ -129,7 +121,7 @@ export default Component.extend({
                 this.saveComplete(successCallback, key);
               })
               .catch(e => {
-                this.set(e, e.errors.join(' '));
+                this.e = e.errors.join(' ');
               });
           } else {
             this.saveComplete(successCallback, key);
@@ -139,22 +131,22 @@ export default Component.extend({
       .catch(error => {
         if (error instanceof ControlGroupError) {
           let errorMessage = this.controlGroup.logFromError(error);
-          this.set('error', errorMessage.content);
+          this.error = errorMessage.content;
         }
         throw error;
       });
-  },
+  }
   saveComplete(callback, key) {
     if (this.wizard.featureState === 'secret') {
       this.wizard.transitionFeatureMachine('secret', 'CONTINUE');
     }
     callback(key);
-  },
+  }
   transitionToRoute() {
     return this.router.transitionTo(...arguments);
-  },
+  }
 
-  waitForKeyUp: task(function*(name, value) {
+  @(task(function*(name, value) {
     this.checkValidation(name, value);
     while (true) {
       let event = yield waitForEvent(document.body, 'keyup');
@@ -162,72 +154,83 @@ export default Component.extend({
     }
   })
     .on('didInsertElement')
-    .cancelOn('willDestroyElement'),
+    .cancelOn('willDestroyElement'))
+  waitForKeyUp;
 
-  actions: {
-    addRow() {
-      const data = this.secretData;
-      // fired off on init
-      if (isNone(data.findBy('name', ''))) {
-        data.pushObject({ name: '', value: '' });
-        this.send('handleChange');
-      }
-      this.checkRows();
-    },
-    codemirrorUpdated(val, codemirror) {
-      this.set('error', null);
-      codemirror.performLint();
-      const noErrors = codemirror.state.lint.marked.length === 0;
-      if (noErrors) {
-        try {
-          this.secretData.fromJSONString(val);
-          set(this.modelForData, 'secretData', this.secretData.toJSON());
-        } catch (e) {
-          this.set('error', e.message);
-        }
-      }
-      this.set('hasLintError', !noErrors);
-      this.set('codemirrorString', val);
-    },
-    createOrUpdateKey(type, event) {
-      event.preventDefault();
-      if (type === 'create' && isBlank(this.modelForData.path || this.modelForData.id)) {
-        this.checkValidation('path', '');
-        return;
+  @action
+  addRow() {
+    const data = this.args.secretData;
+    // fired off on init
+    if (isNone(data.findBy('name', ''))) {
+      data.pushObject({ name: '', value: '' });
+      this.handleChange();
+    }
+    this.checkRows();
+  }
+  @action
+  codemirrorUpdated(val, codemirror) {
+    this.error = null;
+    codemirror.performLint();
+    const noErrors = codemirror.state.lint.marked.length === 0;
+    if (noErrors) {
+      try {
+        this.args.secretData.fromJSONString(val);
+        set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
+      } catch (e) {
+        this.error = e.message;
       }
+    }
+    this.hasLintError = !noErrors;
+    this.codemirrorString = val;
+  }
+  @action
+  createOrUpdateKey(type, event) {
+    event.preventDefault();
+    if (type === 'create' && isBlank(this.args.modelForData.path || this.args.modelForData.id)) {
+      this.checkValidation('path', '');
+      return;
+    }
 
-      this.persistKey(() => {
-        this.transitionToRoute(SHOW_ROUTE, this.model.path || this.model.id);
-      });
-    },
-    deleteRow(name) {
-      const data = this.secretData;
-      const item = data.findBy('name', name);
-      if (isBlank(item.name)) {
-        return;
-      }
-      data.removeObject(item);
-      this.checkRows();
-      this.send('handleChange');
-    },
-    formatJSON() {
-      this.set('codemirrorString', this.secretData.toJSONString(true));
-    },
-    handleChange() {
-      this.set('codemirrorString', this.secretData.toJSONString(true));
-      set(this.modelForData, 'secretData', this.secretData.toJSON());
-    },
+    this.persistKey(() => {
+      this.transitionToRoute(SHOW_ROUTE, this.args.model.path || this.args.model.id);
+    });
+  }
+  @action
+  deleteRow(name) {
+    const data = this.args.secretData;
+    const item = data.findBy('name', name);
+    if (isBlank(item.name)) {
+      return;
+    }
+    data.removeObject(item);
+    this.checkRows();
+    this.send('handleChange');
+  }
+  @action
+  formatJSON() {
+    this.codemirrorString = this.args.secretData.toJSONString(true);
+  }
+  @action
+  handleChange() {
+    this.codemirrorString = this.args.secretData.toJSONString(true);
+    set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
+  }
 
-    //submit on shift + enter
-    handleKeyDown(e) {
-      e.stopPropagation();
-      if (!(e.keyCode === keys.ENTER && e.metaKey)) {
-        return;
-      }
-      let $form = this.element.querySelector('form');
-      if ($form.length) {
-        $form.submit();
-      }
-    },
-  },
-});
+  //submit on shift + enter
+  // ARG TODO TEST THIS???
+  @action
+  handleKeyDown(e) {
+    e.stopPropagation();
+    if (!(e.keyCode === keys.ENTER && e.metaKey)) {
+      return;
+    }
+    let $form = this.element.querySelector('form');
+    if ($form.length) {
+      $form.submit();
+    }
+  }
+  @action
+  updateValidationErrorCount(errorCount) {
+    this.validationErrorCount = errorCount;
+  }
+}
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 6963d8e1f6a7..9fc88ce776c9 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -5,31 +5,32 @@
  * ```js
  * <SecretEditMetadata
  * @model={{model}}
- * @validationMessages={{validationMessages}}
  * @mode={{mode}}
+ * @updateValidationErrorCount={{updateValidationErrorCount}}
  * />
  * ```
  *
  * @param {object} model - name of the current cluster, passed from the parent.
- * @param {object} [validationMessages] - Object that contains form validation errors. keys are the field names and values are the messages.
- * @param {Function} mode - if the mode is create, show, edit.
+ * @param {string} mode - if the mode is create, show, edit.
+ * @param {Function} updateValidationErrorCount - function on parent that handle disabling the save button.
  */
 
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { set } from '@ember/object';
-import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 export default class SecretEditMetadata extends Component {
   @service router;
   @service store;
 
-  @tracked validationMesssages;
+  @tracked validationErrorCount = 0;
 
   constructor() {
     super(...arguments);
     this.validationMessages = {
       customMetadata: '',
+      maxVersions: '',
     };
   }
 
@@ -54,16 +55,34 @@ export default class SecretEditMetadata extends Component {
     // ARG TODO else validation error?
   }
   @action onKeyUp(name, value) {
+    console.log(name, value, 'here');
     if (value) {
-      // // ARG TODO for now set this to hardcoded.
-      // this.model.set('customMetadata', { key: 'meep', value: value });
-      // cp validations won't work on an object so performing validations here
-      let regex = /^[^\/]+$/g; // looking for a forward slash
-      if (!value.match(regex)) {
-        set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
-      } else {
-        set(this.validationMessages, name, '');
+      if (name === 'customMetadata') {
+        // // ARG TODO for now set this to hardcoded.
+        // this.model.set('customMetadata', { key: 'meep', value: value });
+        // cp validations won't work on an object so performing validations here
+        let regex = /^[^\/]+$/g; // looking for a forward slash
+        if (!value.match(regex)) {
+          set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
+        } else {
+          set(this.validationMessages, name, '');
+        }
+      }
+      if (name === 'maxVersions') {
+        let number = Number(value);
+        this.args.model.maxVersions = number;
+        if (!this.args.model.validations.attrs.maxVersions.isValid) {
+          set(this.validationMessages, name, this.args.model.validations.attrs.maxVersions.message);
+        } else {
+          set(this.validationMessages, name, '');
+        }
       }
     }
+
+    let values = Object.values(this.validationMessages);
+    this.validationErrorCount = values.filter(Boolean).length;
+    // when it's update this work, but on create we need to bubble up the count
+    // so it disables the save in the secret-creat-or-update form
+    this.args.updateValidationErrorCount(this.validationErrorCount);
   }
 }
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index e2902be08d66..9ae7e24be2fb 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -65,8 +65,8 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     }
     const data = KVObject.create({ content: [] }).fromJSON(secrets);
     this.set('secretData', data);
-
     this.set('codemirrorString', data.toJSONString());
+
     if (data.isAdvanced()) {
       this.set('preferAdvancedEdit', true);
     }
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 09c5e8fc00aa..e2885d982a91 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -1,4 +1,4 @@
-{{#if (eq mode "create")}}
+{{#if (eq @mode "create")}}
 {{!-- ARG TODO always passes in create. fix --}}
   <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
     <div class="field box is-fullwidth is-sideless is-marginless">
@@ -11,16 +11,15 @@
           @spellcheck="false" 
           data-test-secret-path="true"
           @id="kv-key" 
-          class="input {{if (get validationMessages 'path') "has-error-border"}}"
-          @value={{get @modelForData @modelForData.pathAttr}} 
-          onkeyup={{perform waitForKeyUp "path" value="target.value"}}
-
+          class="input {{if (get this.validationMessages 'path') "has-error-border"}}"
+          @value={{get @modelForData @modelForData.pathAttr}}
+          {{on "keyup" (perform this.waitForKeyUp "path" value="target.value")}}
         />
       </p>
-      {{#if (get validationMessages 'path')}}
+      {{#if (get this.validationMessages 'path')}}
         <AlertInline 
           @type="danger" 
-          @message={{get validationMessages 'path'}} 
+          @message={{get this.validationMessages 'path'}} 
           @paddingTop=true
           @isMarginless=true
         />
@@ -35,7 +34,7 @@
       <div class="form-section">
         <JsonEditor
           @title={{if @isV2 "Version Data" "Secret Data"}}
-          @value={{@codemirrorString}}
+          @value={{this.codemirrorString}}
           @valueUpdated={{action "codemirrorUpdated"}}
           @onFocusOut={{action "formatJSON"}}>
         </JsonEditor> 
@@ -68,7 +67,7 @@
             />
           </div>
           <div class="column is-narrow info-table-row-edit">
-            {{#if (eq secretData.length (inc index))}}
+            {{#if (eq @secretData.length (inc index))}}
               <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
                 Add
               </button>
@@ -76,7 +75,7 @@
               <button
                 class="button has-text-grey is-expanded is-icon"
                 type="button"
-                {{action "deleteRow" secret.name}}
+                {{on "click" (fn this.deleteRow secret.name)}}
                 aria-label="Delete row"
               >
                 <Icon
@@ -88,10 +87,10 @@
             {{/if}}
           </div>
         </div>
-        {{#if validationMessages.key}}
+        {{#if this.validationMessages.key}}
           <AlertInline 
             @type="danger" 
-            @message={{validationMessages.key}} 
+            @message={{this.validationMessages.key}} 
             @paddingTop=true
             @isMarginless=true
           />
@@ -107,10 +106,11 @@
       @openLabel="Hide secret metadata"
       @closedLabel="Show secret metadata"
     />
-      {{#if showMetadata}}
+      {{#if this.showMetadata}}
         <SecretEditMetadata
           @model={{@model}}
           @mode="create"
+          @updateValidationErrorCount={{action "updateValidationErrorCount"}}
         />
       {{/if}}
     {{/if}}
@@ -118,7 +118,7 @@
       <div class="control">
         <button
         type="submit"
-        disabled={{or @buttonDisabled validationErrorCount}}
+        disabled={{or @buttonDisabled this.validationErrorCount}}
         class="button is-primary"
         data-test-secret-save=true
         >
@@ -134,7 +134,7 @@
   </form>
 {{/if}}
 
-{{#if (eq mode "edit")}}
+{{#if (eq @mode "edit")}}
 
 {{!-- ARG TODO test these --}}
 {{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
@@ -162,7 +162,7 @@
     />
   {{/if}}
 {{/if}} --}}
-  <form onsubmit={{action "createOrUpdateKey" "create"}}>
+  <form onsubmit={{this.createOrUpdateKey "create"}}>
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
       <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
       <NamespaceReminder @mode="edit" @noun="secret" />
@@ -179,7 +179,7 @@
         <div class="form-section">
           <JsonEditor
             @title={{if @isV2 "Version Data" "Secret Data"}}
-            @value={{@codemirrorString}}
+            @value={{this.codemirrorString}}
             @valueUpdated={{action "codemirrorUpdated"}}
             @onFocusOut={{action "formatJSON"}}>
           </JsonEditor> 
@@ -248,7 +248,7 @@
           <button
             data-test-secret-save
             type="submit"
-            disabled={{or @buttonDisabled validationErrorCount}}
+            disabled={{or @buttonDisabled this.validationErrorCount}}
             class="button is-primary"
           >
             Save
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 9cd8369a33ec..d83f4a205977 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,6 +1,6 @@
 {{!-- ARG TODO add empty state if no access --}}
 <form onsubmit={{this.onSaveChanges}}>
-  <div data-test-metadata-fields-meep class={{if (eq @mode "create") "box has-container is-fullwidth" "form-section is-fullwidth"}}>
+  <div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth" "form-section is-fullwidth"}}>
     <p class="field">
       The options below are all version-agnostic; they apply to all versions of this secret. {{if (eq @mode 'create') 'After the secret is created, this can be edited in the Metadata tab.' ''}}
     </p>
@@ -18,12 +18,12 @@
         </label>
       {{/if}}
       {{#unless (eq attr.name "customMetadata")}}
-        <FormField 
+        <FormField
           data-test-field 
           @attr={{attr}}
           @model={{@model}}
-          @onKeyUp={{@onKeyUp}}
-          @validationMessages={{@validationMessages}}
+          @onKeyUp={{action "onKeyUp"}}
+          @validationMessages={{this.validationMessages}}
         />
       {{/unless}}
     {{/each}}
@@ -34,8 +34,7 @@
         <div class="control">
           <button
             type="submit"
-            {{!-- ARG TODO revisit this --}}
-            {{!-- disabled={{or buttonDisabled validationErrorCount}} --}}
+            disabled={{this.validationErrorCount}}
             class="button is-primary"
           >
             Save
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 8c65f7937f94..a6a5fbf5e153 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -27,7 +27,7 @@
           </LinkTo>
         </LinkTo>
         {{#if model.canReadMetadata}}
-          <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{key.id}} @tagName="li" @activeClass="is-active">
+          <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{key.id}} @tagName="li" @activeClass="is-active" data-test-secret-metadata-tab>
             <LinkTo @route="vault.cluster.secrets.backend.metadata">
               Metadata
             </LinkTo>
@@ -52,6 +52,7 @@
   @canDeleteSecretData={{canDeleteSecretData}}
   @canUpdateSecretMetadata={{canUpdateSecretMetadata}}
   @canCreateSecretMetadata={{canCreateSecretMetadata}}
+  {{!-- ARG TODO not sure if I need codemirrorString --}}
   @codemirrorString={{codemirrorString}}
   @editActions={{hash
     toggleAdvanced=(action "toggleAdvanced")
@@ -67,10 +68,10 @@
     @modelForData={{modelForData}}
     @error={{error}}
     @isV2={{isV2}}
-    @codemirrorString={{codemirrorString}}
     @secretData={{secretData}}
     @buttonDisabled={{buttonDisabled}}
     @canCreateSecretMetadata={{canCreateSecretMetadata}}
+    @showWriteWithoutReadWarning={{isWriteWithoutRead}}
   />
 {{else if (eq mode "show")}}
   <SecretFormShow
diff --git a/ui/tests/pages/secrets/backend/kv/edit-secret.js b/ui/tests/pages/secrets/backend/kv/edit-secret.js
index 3a7a719117a1..8989c9202dcb 100644
--- a/ui/tests/pages/secrets/backend/kv/edit-secret.js
+++ b/ui/tests/pages/secrets/backend/kv/edit-secret.js
@@ -12,6 +12,8 @@ export default create({
   visitEdit: visitable('/vault/secrets/:backend/edit/:id'),
   visitEditRoot: visitable('/vault/secrets/:backend/edit'),
   toggleJSON: clickable('[data-test-toggle-input="json"]'),
+  toggleMetadata: clickable('[data-test-show-metadata-toggle]'),
+  metadataTab: clickable('[data-test-secret-metadata-tab]'),
   hasMetadataFields: isPresent('[data-test-metadata-fields]'),
   showsNoCASWarning: isPresent('[data-test-v2-no-cas-warning]'),
   showsV2WriteWarning: isPresent('[data-test-v2-write-without-read]'),

From fba959754018484fa1323cc202d948ffe6c536fd Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 19 Aug 2021 13:44:15 -0600
Subject: [PATCH 26/40] all these changes fix secret create kv test

---
 ui/app/adapters/secret-engine.js              |  2 +-
 ui/app/components/secret-create-or-update.js  | 31 ++++++++++++++-----
 ui/app/components/secret-delete-menu.js       | 29 +++++++++++++++--
 ui/app/components/secret-edit-metadata.js     |  4 +--
 ui/app/components/secret-edit-toolbar.js      |  2 --
 ui/app/components/secret-edit.js              |  1 -
 .../components/secret-create-or-update.hbs    |  7 +++--
 .../components/secret-delete-menu.hbs         |  6 ++--
 .../components/secret-edit-toolbar.hbs        |  3 +-
 ui/app/templates/components/secret-edit.hbs   |  1 -
 .../secrets/backend/kv/secret-test.js         | 19 +++++++++---
 11 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/ui/app/adapters/secret-engine.js b/ui/app/adapters/secret-engine.js
index 257a99f3dbec..e53cad5090fa 100644
--- a/ui/app/adapters/secret-engine.js
+++ b/ui/app/adapters/secret-engine.js
@@ -33,7 +33,7 @@ export default ApplicationAdapter.extend({
     let data = serializer.serialize(snapshot);
     const path = snapshot.attr('path');
     // for kv2 we make two network requests
-    if (type.modelName === 'secret-engine') {
+    if (data.type === 'kv' && data.options.version !== 1) {
       // data has both data for sys mount and the config, we need to separate them
       let configData = (({ max_versions, delete_version_after, cas_required }) => ({
         max_versions,
diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 679f79013aac..ddb305e07f3d 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -4,11 +4,27 @@
  *
  * @example
  * ```js
- * <SecretCreateOrUpdate @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * <SecretCreateOrUpdate
+ *  @mode="create"
+ *  @model={{model}}
+ *  @showAdvancedMode=true
+ *  @modelForData={{@modelForData}}
+ *  @error={{@error}}
+ *  @isV2=true
+ *  @secretData={{@secretData}}
+ *  @canCreateSecretMetadata=true
+ *  @showWriteWithoutReadWarnings=true
+ * />
  * ```
- * @param {object} requiredParam - requiredParam is...
- * @param {string} [optionalParam] - optionalParam is...
- * @param {string} [param1=defaultValue] - param1 is...
+ * @param {string} mode - create, edit, show determines what view to display
+ * @param {object} model -  the route model, comes from secret-v2 ember record
+ * @param {boolean} showAdvancedMode - whether or not to show the JSON editor
+ * @param {object} modelForData - a class that helps track secret data, defined in secret-edit
+ * @param {object} error - keep track of errors
+ * @param {boolean} isV2 - whether or not KV 1 or KV 2
+ * @param {object} secretData - class that is created in secret-edit
+ * @param {boolean} canCreateSecretMetadata - based on permissions to the /metadata/ endpoint. If create access.
+ * @param {boolean} showWriteWithoutReadWarnings - based on permissions
  */
 
 import Component from '@glimmer/component';
@@ -27,7 +43,6 @@ import { task, waitForEvent } from 'ember-concurrency';
 const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
-// ARG TODO documentation
 export default class SecretCreateOrUpdate extends Component {
   @tracked secretPaths = null;
   @tracked validationErrorCount = 0;
@@ -59,7 +74,7 @@ export default class SecretCreateOrUpdate extends Component {
     this.checkRows();
 
     if (this.args.mode === 'edit') {
-      this.send('addRow');
+      this.addRow();
     }
   }
 
@@ -204,7 +219,7 @@ export default class SecretCreateOrUpdate extends Component {
     }
     data.removeObject(item);
     this.checkRows();
-    this.send('handleChange');
+    this.handleChange();
   }
   @action
   formatJSON() {
@@ -217,7 +232,7 @@ export default class SecretCreateOrUpdate extends Component {
   }
 
   //submit on shift + enter
-  // ARG TODO TEST THIS???
+  // ARG TODO come back and fix this.
   @action
   handleKeyDown(e) {
     e.stopPropagation();
diff --git a/ui/app/components/secret-delete-menu.js b/ui/app/components/secret-delete-menu.js
index 9e08f47b2fef..8bd1a7499ee8 100644
--- a/ui/app/components/secret-delete-menu.js
+++ b/ui/app/components/secret-delete-menu.js
@@ -17,7 +17,6 @@ export default class SecretDeleteMenu extends Component {
 
   @tracked showDeleteModal = false;
 
-  // canDeleteSecretData is calculated in secret-edit because it's already calling maybeQueryRecord on the data endpoint
   @maybeQueryRecord(
     'capabilities',
     context => {
@@ -77,6 +76,29 @@ export default class SecretDeleteMenu extends Component {
   v2UpdatePath;
   @alias('v2UpdatePath.canDelete') canDestroyAllVersions;
 
+  @maybeQueryRecord(
+    'capabilities',
+    context => {
+      if (!context.args.model || context.args.mode === 'create') {
+        return;
+      }
+      let backend = context.args.isV2 ? context.args.model.engine.id : context.args.model.backend;
+      let id = context.args.model.id;
+      let path = context.args.isV2
+        ? `${encodeURIComponent(backend)}/data/${encodeURIComponent(id)}`
+        : `${encodeURIComponent(backend)}/${encodeURIComponent(id)}`;
+      return {
+        id: path,
+      };
+    },
+    'isV2',
+    'model',
+    'model.id',
+    'mode'
+  )
+  secretDataPath;
+  @alias('secretDataPath.canDelete') canDeleteSecretData;
+
   get isLatestVersion() {
     let { model } = this.args;
     if (!model) return false;
@@ -90,13 +112,16 @@ export default class SecretDeleteMenu extends Component {
 
   @action
   handleDelete(deleteType) {
-    // deleteType should be 'delete', 'destroy', 'undelete', 'delete-latest-version', 'destroy-all-versions'
+    // deleteType should be 'delete', 'destroy', 'undelete', 'delete-latest-version', 'destroy-all-versions', 'v1'
     if (!deleteType) {
       return;
     }
     if (deleteType === 'destroy-all-versions' || deleteType === 'v1') {
       let { id } = this.args.model;
       this.args.model.destroyRecord().then(() => {
+        if (deleteType === 'v1') {
+          return this.router.transitionTo('vault.cluster.secrets.backend.list-root');
+        }
         this.args.navToNearestAncestor.perform(id);
       });
     } else {
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 9fc88ce776c9..c1044bb00dbc 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -55,12 +55,12 @@ export default class SecretEditMetadata extends Component {
     // ARG TODO else validation error?
   }
   @action onKeyUp(name, value) {
-    console.log(name, value, 'here');
     if (value) {
       if (name === 'customMetadata') {
-        // // ARG TODO for now set this to hardcoded.
+        // // ARG TODO for now set this to hardcoded. Need to write test coverage for this.
         // this.model.set('customMetadata', { key: 'meep', value: value });
         // cp validations won't work on an object so performing validations here
+        /* eslint-disable no-useless-escape */
         let regex = /^[^\/]+$/g; // looking for a forward slash
         if (!value.match(regex)) {
           set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
index 286eea32acf5..b57c9bb203b9 100644
--- a/ui/app/components/secret-edit-toolbar.js
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -15,7 +15,6 @@
  * @modelForData={{this.modelForData}}
  * @navToNearestAncestor={{this.navToNearestAncestor}}
  * @canUpdateSecretData={{canUpdateSecretData}}
- * @canDeleteSecretData={{canDeleteSecretData}}
  * @codemirrorString={{codemirrorString}}
  * @wrappedData={{wrappedData}}
  * @editActions={{hash
@@ -32,7 +31,6 @@
  * @param {boolean} secretDataIsAdvanced - used to determine if show JSON toggle
  * @param {object} modelForData - a modified version of the model with secret data
  * @param {string} navToNearestAncestor - route to nav to if press cancel
- * @param {boolean} canDeleteSecretData - permissions that either show or hide the Delete button, calculated in secret-edit because it's used in secret-edit-toolbar AND secret-delete-menu. deletion based on data endpoint.
  * @param {boolean} canUpdateSecretData - permissions that show the create new version button or not.
  * @param {boolean} canEdit - permissions
  * @param {string} codemirrorString - used in JSON editor
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index 9ae7e24be2fb..da7c28438bb8 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -94,7 +94,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     'model.id',
     'mode'
   ),
-  canDeleteSecretData: alias('checkSecretCapabilities.canDelete'),
   canUpdateSecretData: alias('checkSecretCapabilities.canUpdate'),
 
   checkMetadataCapabilities: maybeQueryRecord(
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index e2885d982a91..a87725ab358f 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -105,6 +105,7 @@
       @toggleTarget={{this}}
       @openLabel="Hide secret metadata"
       @closedLabel="Show secret metadata"
+      data-test-show-metadata-toggle
     />
       {{#if this.showMetadata}}
         <SecretEditMetadata
@@ -138,7 +139,7 @@
 
 {{!-- ARG TODO test these --}}
 {{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
-{{!-- {{#if @showWriteWithoutReadWarning}}
+{{#if @showWriteWithoutReadWarning}}
   {{#if (and @isV2 @model.failedServerRead)}}
     <AlertBanner
       @type="warning"
@@ -161,8 +162,8 @@
       data-test-v1-write-without-read
     />
   {{/if}}
-{{/if}} --}}
-  <form onsubmit={{this.createOrUpdateKey "create"}}>
+{{/if}}
+  <form onsubmit={{action "createOrUpdateKey" "create"}}>
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
       <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
       <NamespaceReminder @mode="edit" @noun="secret" />
diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index 22de812c7c24..a61d749c0efa 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -1,6 +1,6 @@
 {{#unless @isV2}}
 {{!-- ARG TODO this is for v1 need to test --}}
-  {{#if @canDeleteSecretData}}
+  {{#if this.canDeleteSecretData}}
     <ConfirmAction
       @buttonClasses="toolbar-link"
       @confirmTitle="Delete secret?"
@@ -34,7 +34,7 @@
       </button>
       <div class="toolbar-separator"/>
     {{else}}
-      {{#if (or this.canDeleteAnyVersion (and this.isLatestVersion @canDeleteSecretData))}}
+      {{#if (or this.canDeleteAnyVersion (and this.isLatestVersion this.canDeleteSecretData))}}
         <ConfirmAction
           @buttonClasses="toolbar-link"
           @confirmTitle="Delete"
@@ -60,7 +60,7 @@
       <p class="has-bottom-margin-s"><strong>How would you like to proceed?</strong></p>
       {{#unless @modelForData.destroyed}}
         {{#unless @modelForData.deleted}}
-          {{#if @canDeleteSecretData}}
+          {{#if this.canDeleteSecretData}}
             <div class="modal-radio-button" data-test-delete-modal="delete-version">
               <RadioButton
                 @value="delete"
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index e08e9cf777ff..701ba80277c3 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -14,14 +14,13 @@
     </ToolbarFilters>
   {{/unless}}
   <ToolbarActions>
-    {{#if (and (eq @mode 'show') @canDeleteSecretData)}}
+    {{#if (eq @mode 'show')}}
       <SecretDeleteMenu 
         @modelForData={{@modelForData}}
         @model={{@model}}
         @navToNearestAncestor={{@navToNearestAncestor}}
         @isV2={{isV2}}
         @refresh={{action @editActions.refresh}}
-        @canDeleteSecretData={{canDeleteSecretData}}
       />
     {{/if}}
     {{#if (and (eq @mode 'show') @canUpdateSecretData)}}
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index a6a5fbf5e153..294ce476d358 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -49,7 +49,6 @@
   @modelForData={{modelForData}}
   @navToNearestAncestor={{navToNearestAncestor}}
   @canUpdateSecretData={{canUpdateSecretData}}
-  @canDeleteSecretData={{canDeleteSecretData}}
   @canUpdateSecretMetadata={{canUpdateSecretMetadata}}
   @canCreateSecretMetadata={{canCreateSecretMetadata}}
   {{!-- ARG TODO not sure if I need codemirrorString --}}
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index 4f8a0f825a5a..bb708f21720b 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -28,7 +28,7 @@ let writeSecret = async function(backend, path, key, val) {
   return editPage.createSecret(path, key, val);
 };
 
-module('Acceptance | secrets/secret/create', function(hooks) {
+module('Acceptance | secrets/secret/create meep', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(async function() {
@@ -43,11 +43,14 @@ module('Acceptance | secrets/secret/create', function(hooks) {
   test('it creates a secret and redirects', async function(assert) {
     const path = `kv-path-${new Date().getTime()}`;
     await listPage.visitRoot({ backend: 'secret' });
+
     await settled();
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.list-root', 'navigates to the list page');
 
     await listPage.create();
     await settled();
+    await editPage.toggleMetadata();
+    await settled();
     assert.ok(editPage.hasMetadataFields, 'shows the metadata form');
     await editPage.createSecret(path, 'foo', 'bar');
     await settled();
@@ -76,19 +79,23 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     await settled();
     await click('[data-test-secret-create="true"]');
     await fillIn('[data-test-secret-path="true"]', secretPath);
+    await editPage.toggleMetadata();
+    await settled();
     await fillIn('[data-test-input="maxVersions"]', maxVersions);
-    await click('[data-test-secret-save]');
     await settled();
-    await click('[data-test-secret-edit="true"]');
+    await editPage.save();
+    await settled();
+    await editPage.metadataTab();
     await settled();
     // convert to number for IE11 browserstack test
-    let savedMaxVersions = Number(document.querySelector('[data-test-input="maxVersions"]').value);
+    let savedMaxVersions = Number(document.querySelectorAll('[data-test-value-div]')[0].innerText);
     assert.equal(
       maxVersions,
       savedMaxVersions,
       'max_version displays the saved number set when creating the secret'
     );
   });
+  // ARG TOD add test here that adds custom metadata
 
   test('it disables save when validation errors occur', async function(assert) {
     let enginePath = `kv-${new Date().getTime()}`;
@@ -105,8 +112,11 @@ module('Acceptance | secrets/secret/create', function(hooks) {
         'when duplicate path it shows correct error message'
       );
 
+    await editPage.toggleMetadata();
+    await settled();
     document.querySelector('#maxVersions').value = 'abc';
     await triggerKeyEvent('[data-test-input="maxVersions"]', 'keyup', 65);
+    await settled();
     assert
       .dom('[data-test-input="maxVersions"]')
       .hasClass('has-error-border', 'shows border error on input with error');
@@ -362,7 +372,6 @@ module('Acceptance | secrets/secret/create', function(hooks) {
       'delete kv-v2/metadata/secret',
       'write -field=client_token auth/token/create policies=kv-v2-degrade',
     ]);
-
     let userToken = consoleComponent.lastLogOutput;
     await logout.visit();
     await authPage.login(userToken);

From 25e9d459f976ed4495346c6a278a08423c1288cf Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 19 Aug 2021 15:16:02 -0600
Subject: [PATCH 27/40] remove alert banners per design request

---
 ui/app/components/secret-create-or-update.js  |  2 --
 .../components/secret-create-or-update.hbs    | 27 -------------------
 ui/app/templates/components/secret-edit.hbs   |  1 -
 .../secrets/backend/kv/secret-test.js         |  7 ++---
 .../pages/secrets/backend/kv/edit-secret.js   |  3 ---
 5 files changed, 2 insertions(+), 38 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index ddb305e07f3d..270acdeda072 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -13,7 +13,6 @@
  *  @isV2=true
  *  @secretData={{@secretData}}
  *  @canCreateSecretMetadata=true
- *  @showWriteWithoutReadWarnings=true
  * />
  * ```
  * @param {string} mode - create, edit, show determines what view to display
@@ -24,7 +23,6 @@
  * @param {boolean} isV2 - whether or not KV 1 or KV 2
  * @param {object} secretData - class that is created in secret-edit
  * @param {boolean} canCreateSecretMetadata - based on permissions to the /metadata/ endpoint. If create access.
- * @param {boolean} showWriteWithoutReadWarnings - based on permissions
  */
 
 import Component from '@glimmer/component';
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index a87725ab358f..db1a7ea789f3 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -136,33 +136,6 @@
 {{/if}}
 
 {{#if (eq @mode "edit")}}
-
-{{!-- ARG TODO test these --}}
-{{!-- ARG TODO not using canEditV2Secret and feel like I should be somewhere --}}
-{{#if @showWriteWithoutReadWarning}}
-  {{#if (and @isV2 @model.failedServerRead)}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading metadata for this secret and the current version's data. Creating a new version of the secret with this form will not be able to use the check-and-set mechanism. If this is required on the secret, then you will need access to read the secret's metadata."
-      @class="is-marginless"
-      data-test-v2-no-cas-warning
-    />
-  {{else if @isV2}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret version. Saving this form will create a new version of the secret and will utilize the available check-and-set mechanism."
-      @class="is-marginless"
-      data-test-v2-write-without-read
-    />
-  {{else}}
-    <AlertBanner
-      @type="warning"
-      @message="Your policies prevent you from reading the current secret data. Saving using this form will overwrite the existing values."
-      @class="is-marginless"
-      data-test-v1-write-without-read
-    />
-  {{/if}}
-{{/if}}
   <form onsubmit={{action "createOrUpdateKey" "create"}}>
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
       <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 294ce476d358..ff90e6b272c5 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -70,7 +70,6 @@
     @secretData={{secretData}}
     @buttonDisabled={{buttonDisabled}}
     @canCreateSecretMetadata={{canCreateSecretMetadata}}
-    @showWriteWithoutReadWarning={{isWriteWithoutRead}}
   />
 {{else if (eq mode "show")}}
   <SecretFormShow
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index bb708f21720b..6cd11cf1665b 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -28,7 +28,7 @@ let writeSecret = async function(backend, path, key, val) {
   return editPage.createSecret(path, key, val);
 };
 
-module('Acceptance | secrets/secret/create meep', function(hooks) {
+module('Acceptance | secrets/secret/create', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(async function() {
@@ -372,6 +372,7 @@ module('Acceptance | secrets/secret/create meep', function(hooks) {
       'delete kv-v2/metadata/secret',
       'write -field=client_token auth/token/create policies=kv-v2-degrade',
     ]);
+
     let userToken = consoleComponent.lastLogOutput;
     await logout.visit();
     await authPage.login(userToken);
@@ -586,7 +587,6 @@ module('Acceptance | secrets/secret/create meep', function(hooks) {
 
     await editPage.visitEdit({ backend, id: 'secret' });
     assert.notOk(editPage.hasMetadataFields, 'hides the metadata form');
-    assert.ok(editPage.showsNoCASWarning, 'shows no CAS write warning');
 
     await editPage.editSecret('bar', 'baz');
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.show', 'redirects to the show page');
@@ -605,7 +605,6 @@ module('Acceptance | secrets/secret/create meep', function(hooks) {
 
     await editPage.visitEdit({ backend, id: 'secret' });
     assert.notOk(editPage.hasMetadataFields, 'hides the metadata form');
-    assert.ok(editPage.showsV2WriteWarning, 'shows v2 warning');
 
     await editPage.editSecret('bar', 'baz');
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.show', 'redirects to the show page');
@@ -623,8 +622,6 @@ module('Acceptance | secrets/secret/create meep', function(hooks) {
     assert.ok(showPage.editIsPresent, 'shows the edit button');
 
     await editPage.visitEdit({ backend, id: 'secret' });
-    assert.ok(editPage.showsV1WriteWarning, 'shows v1 warning');
-
     await editPage.editSecret('bar', 'baz');
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.show', 'redirects to the show page');
   });
diff --git a/ui/tests/pages/secrets/backend/kv/edit-secret.js b/ui/tests/pages/secrets/backend/kv/edit-secret.js
index 8989c9202dcb..9b65e01284ae 100644
--- a/ui/tests/pages/secrets/backend/kv/edit-secret.js
+++ b/ui/tests/pages/secrets/backend/kv/edit-secret.js
@@ -15,9 +15,6 @@ export default create({
   toggleMetadata: clickable('[data-test-show-metadata-toggle]'),
   metadataTab: clickable('[data-test-secret-metadata-tab]'),
   hasMetadataFields: isPresent('[data-test-metadata-fields]'),
-  showsNoCASWarning: isPresent('[data-test-v2-no-cas-warning]'),
-  showsV2WriteWarning: isPresent('[data-test-v2-write-without-read]'),
-  showsV1WriteWarning: isPresent('[data-test-v1-write-without-read]'),
   editor: {
     fillIn: codeFillable('[data-test-component="json-editor"]'),
   },

From e95ef3a83f8b2b63eee0e685167874700021922c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 20 Aug 2021 12:31:50 -0600
Subject: [PATCH 28/40] fix error for array instead of object in jsonEditor

---
 ui/app/components/secret-create-or-update.js            | 9 +++++----
 ui/app/components/secret-edit.js                        | 4 +---
 ui/app/templates/components/secret-create-or-update.hbs | 6 +++---
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 270acdeda072..4e8ec27d3ccf 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -9,7 +9,6 @@
  *  @model={{model}}
  *  @showAdvancedMode=true
  *  @modelForData={{@modelForData}}
- *  @error={{@error}}
  *  @isV2=true
  *  @secretData={{@secretData}}
  *  @canCreateSecretMetadata=true
@@ -19,7 +18,6 @@
  * @param {object} model -  the route model, comes from secret-v2 ember record
  * @param {boolean} showAdvancedMode - whether or not to show the JSON editor
  * @param {object} modelForData - a class that helps track secret data, defined in secret-edit
- * @param {object} error - keep track of errors
  * @param {boolean} isV2 - whether or not KV 1 or KV 2
  * @param {object} secretData - class that is created in secret-edit
  * @param {boolean} canCreateSecretMetadata - based on permissions to the /metadata/ endpoint. If create access.
@@ -42,10 +40,11 @@ const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 export default class SecretCreateOrUpdate extends Component {
+  @tracked codemirrorString = null;
+  @tracked error = null;
   @tracked secretPaths = null;
   @tracked validationErrorCount = 0;
   @tracked validationMessages = null;
-  @tracked codemirrorString = null;
 
   @service controlGroup;
   @service router;
@@ -182,6 +181,7 @@ export default class SecretCreateOrUpdate extends Component {
   }
   @action
   codemirrorUpdated(val, codemirror) {
+    console;
     this.error = null;
     codemirror.performLint();
     const noErrors = codemirror.state.lint.marked.length === 0;
@@ -193,7 +193,6 @@ export default class SecretCreateOrUpdate extends Component {
         this.error = e.message;
       }
     }
-    this.hasLintError = !noErrors;
     this.codemirrorString = val;
   }
   @action
@@ -221,10 +220,12 @@ export default class SecretCreateOrUpdate extends Component {
   }
   @action
   formatJSON() {
+    console.log('formatJson in secret create upate');
     this.codemirrorString = this.args.secretData.toJSONString(true);
   }
   @action
   handleChange() {
+    console.log('handleChange in secret create upate');
     this.codemirrorString = this.args.secretData.toJSONString(true);
     set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
   }
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index da7c28438bb8..c5265f16f3a8 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -49,11 +49,9 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   // use a named action here so we don't have to pass one in
   // this will bubble to the route
   toggleAdvancedEdit: 'toggleAdvancedEdit',
-  error: null,
 
   codemirrorString: null,
 
-  hasLintError: false,
   isV2: false,
 
   init() {
@@ -119,7 +117,7 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
 
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
-  buttonDisabled: or('requestInFlight', 'model.isFolder', 'model.flagsIsInvalid', 'hasLintError', 'error'),
+  buttonDisabled: or('requestInFlight', 'model.isFolder', 'model.flagsIsInvalid'),
 
   modelForData: computed('isV2', 'model', function() {
     let { model } = this;
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index db1a7ea789f3..453130564aff 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -3,7 +3,7 @@
   <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
     <div class="field box is-fullwidth is-sideless is-marginless">
       <NamespaceReminder @mode="create" @noun="secret" />
-      <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
+      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
       <label class="is-label" for="kv-key">Path for this secret</label>
       <p class="control is-expanded">
         <Input 
@@ -119,7 +119,7 @@
       <div class="control">
         <button
         type="submit"
-        disabled={{or @buttonDisabled this.validationErrorCount}}
+        disabled={{or @buttonDisabled this.validationErrorCount this.error}}
         class="button is-primary"
         data-test-secret-save=true
         >
@@ -138,7 +138,7 @@
 {{#if (eq @mode "edit")}}
   <form onsubmit={{action "createOrUpdateKey" "create"}}>
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
-      <MessageError @model={{@modelForData}} @errorMessage={{@error}} />
+      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
       <NamespaceReminder @mode="edit" @noun="secret" />
       {{#if (and (not @model.failedServerRead) (not @model.selectedVersion.failedServerRead) (not-eq @model.selectedVersion.version @model.currentVersion))}}
         <div class="form-section">

From d4ece1ddc2ba62bd73b0b10f125336464dc405ec Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 20 Aug 2021 12:56:53 -0600
Subject: [PATCH 29/40] add changelog

---
 changelog/12169.txt                               |  3 +++
 .../vault/cluster/secrets/backend/actions.js      | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 changelog/12169.txt

diff --git a/changelog/12169.txt b/changelog/12169.txt
new file mode 100644
index 000000000000..6842cbd1d6c4
--- /dev/null
+++ b/changelog/12169.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Add custom metadata to KV secret engine and metadata to config
+```
diff --git a/ui/app/controllers/vault/cluster/secrets/backend/actions.js b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
index 7bd67c4d3d72..c65c4fe239fe 100644
--- a/ui/app/controllers/vault/cluster/secrets/backend/actions.js
+++ b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
@@ -1,4 +1,17 @@
 import Controller from '@ember/controller';
 import BackendCrumbMixin from 'vault/mixins/backend-crumb';
 
-export default Controller.extend(BackendCrumbMixin, {});
+// export default Controller.extend(BackendCrumbMixin, {});
+export default Controller.extend(BackendCrumbMixin, {
+  queryParams: {
+    selectedAction: 'action',
+  },
+
+  actions: {
+    refresh: function() {
+      // closure actions don't bubble to routes,
+      // so we have to manually bubble here
+      this.send('refreshModel');
+    },
+  },
+});

From bb00d9b607ba1e845967ba1007efd7802832ea54 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 23 Aug 2021 10:12:43 -0600
Subject: [PATCH 30/40] styling

---
 .../vault/cluster/secrets/backend/actions.js     |  1 -
 ui/app/models/secret-v2.js                       |  2 +-
 ui/app/styles/components/form-section.scss       |  4 ++++
 .../components/secret-edit-metadata.hbs          |  5 +++--
 .../cluster/secrets/backend/edit-metadata.hbs    | 13 +++----------
 .../vault/cluster/secrets/backend/metadata.hbs   | 16 ++++++++++------
 .../addon/templates/components/form-field.hbs    |  4 ++--
 7 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backend/actions.js b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
index c65c4fe239fe..17f11291f34a 100644
--- a/ui/app/controllers/vault/cluster/secrets/backend/actions.js
+++ b/ui/app/controllers/vault/cluster/secrets/backend/actions.js
@@ -1,7 +1,6 @@
 import Controller from '@ember/controller';
 import BackendCrumbMixin from 'vault/mixins/backend-crumb';
 
-// export default Controller.extend(BackendCrumbMixin, {});
 export default Controller.extend(BackendCrumbMixin, {
   queryParams: {
     selectedAction: 'action',
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index 0bd6b041b2ac..da17f2dea85b 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -37,7 +37,7 @@ export default Model.extend(KeyMixin, Validations, {
   }),
   maxVersions: attr('number', {
     defaultValue: 10,
-    label: 'Maximum Number of Versions',
+    label: 'Maximum number of versions',
     subText:
       'The number of versions to keep per key. Once the number of keys exceeds the maximum number set here, the oldest version will be permanently deleted.',
   }),
diff --git a/ui/app/styles/components/form-section.scss b/ui/app/styles/components/form-section.scss
index 81f8eedbb281..a6bbe524c22c 100644
--- a/ui/app/styles/components/form-section.scss
+++ b/ui/app/styles/components/form-section.scss
@@ -1,6 +1,10 @@
 .form-section {
   padding: 1.75rem 0;
   box-shadow: 0 -1px 0 0 rgba($black, 0.1);
+
+  > p.has-padding-bottom {
+    padding-bottom: 1.5rem;
+  }
 }
 
 .field:first-child .form-section {
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index d83f4a205977..558b865ddcb0 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -12,9 +12,10 @@
           @model={{@model}}
           @onKeyUp={{action "onKeyUp"}}
           @validationMessages={{this.validationMessages}}
+          @mode={{@mode}}
         />
-        <label class="title has-padding-top is-5">
-          Additional Options
+        <label class={{if (eq @mode "create") "title has-padding-top is-5" "title has-padding-top is-4"}}>
+          Additional options
         </label>
       {{/if}}
       {{#unless (eq attr.name "customMetadata")}}
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index becc1e308ae5..85d0d794fa09 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -6,16 +6,9 @@
       </h1>
     </p.levelLeft>
   </PageHeader>
-
-  <div class="form-section">
-    <label class="title has-padding-top is-5">
-      Options
-    </label>
-    {{!-- metadata inputs --}}
-    <SecretEditMetadata
-      @model={{model}}
-    />
-  </div>
+  <SecretEditMetadata
+    @model={{model}}
+  />
 {{else}}
   <EmptyState
     @title="You do not have permissions to edit metadata"
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index ae02789df87a..bc848142e845 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -42,12 +42,6 @@
   {{/if}}
 </Toolbar>
 
-<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
-  <InfoTableRow @alwaysRender={{true}} @label="Maximum versions" @value={{this.model.maxVersions}} />
-  <InfoTableRow @alwaysRender={{true}} @label="Check-and-Set required" @value={{this.model.casRequired}} />
-  <InfoTableRow @alwaysRender={{true}} @label="Delete version after" @value={{if (eq this.model.deleteVersionAfter "0s") "Never delete" this.model.deleteVersionAfter}} />
-</div>
-{{!-- ARG TODO custom metadata on top of the other options --}}
 <div class="form-section">
   <label class="title has-padding-top is-5">
     Custom metadata
@@ -68,3 +62,13 @@
     </EmptyState>
   {{/each-in}}
 </div>
+<div class="form-section">
+  <label class="title has-padding-top is-5">
+    Secret Metadata
+  </label>
+</div>
+<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+  <InfoTableRow @alwaysRender={{true}} @label="Maximum versions" @value={{this.model.maxVersions}} />
+  <InfoTableRow @alwaysRender={{true}} @label="Check-and-Set required" @value={{this.model.casRequired}} />
+  <InfoTableRow @alwaysRender={{true}} @label="Delete version after" @value={{if (eq this.model.deleteVersionAfter "0s") "Never delete" this.model.deleteVersionAfter}} />
+</div>
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 1a8ecf3dea73..8a28a70e8744 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -110,8 +110,8 @@
     warning=attr.options.warning
     helpText=attr.options.helpText
     subText=attr.options.subText
-    small-label=(if (eq valuePath 'customMetadata') true false )
-    formSection=(if (eq valuePath 'customMetadata') false true )
+    small-label=(if (eq mode "create") true false )
+    formSection=(if (eq mode "customMetadata") false true )
     name=valuePath
     onKeyUp=onKeyUp
     validationMessages=validationMessages

From 5ef69fe779385ca57878249e095d5d6fa828aa15 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 23 Aug 2021 10:43:44 -0600
Subject: [PATCH 31/40] turn into glimmer component

---
 ui/app/components/secret-create-or-update.js  |   1 -
 ui/app/components/secret-delete-menu.js       |   2 +-
 ui/app/components/secret-edit-metadata.js     |   2 +-
 ui/app/components/secret-edit-toolbar.js      | 117 ++++++++++--------
 .../components/secret-edit-toolbar.hbs        |  28 ++---
 5 files changed, 78 insertions(+), 72 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 4e8ec27d3ccf..dde1b584d4eb 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -231,7 +231,6 @@ export default class SecretCreateOrUpdate extends Component {
   }
 
   //submit on shift + enter
-  // ARG TODO come back and fix this.
   @action
   handleKeyDown(e) {
     e.stopPropagation();
diff --git a/ui/app/components/secret-delete-menu.js b/ui/app/components/secret-delete-menu.js
index 8bd1a7499ee8..e20b4828030a 100644
--- a/ui/app/components/secret-delete-menu.js
+++ b/ui/app/components/secret-delete-menu.js
@@ -58,7 +58,7 @@ export default class SecretDeleteMenu extends Component {
   )
   destroyVersionPath;
   @alias('destroyVersionPath.canUpdate') canDestroyVersion;
-  // ARG TODO try and move this to the model, after merge.
+
   @maybeQueryRecord(
     'capabilities',
     context => {
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index c1044bb00dbc..974f8f2c1b03 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -52,7 +52,7 @@ export default class SecretEditMetadata extends Component {
       this.save();
       return;
     }
-    // ARG TODO else validation error?
+    // ARG TODO when API figure out if changed is false what to do, likely a validation error with disable save button.
   }
   @action onKeyUp(name, value) {
     if (value) {
diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
index b57c9bb203b9..ea1996886b70 100644
--- a/ui/app/components/secret-edit-toolbar.js
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -1,4 +1,3 @@
-// ARG TODO turn into Glimmer
 /**
  * @module SecretEditToolbar
  * SecretEditToolbar component is the toolbar component displaying the JSON toggle and the actions like delete in the show mode.
@@ -38,64 +37,72 @@
  * @param {object} editActions - actions passed from parent to child
  */
 
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { not } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+export default class SecretEditToolbar extends Component {
+  @service store;
+  @service flashMessages;
 
-export default Component.extend({
-  store: service(),
+  @tracked wrappedData = null;
+  @tracked isWrapping = false;
+  @not('wrappedData') showWrapButton;
 
-  wrappedData: null,
-  isWrapping: false,
-  showWrapButton: not('wrappedData'),
+  @action
+  handleWrapClick() {
+    this.isWrapping = true;
+    if (this.args.isV2) {
+      this.store
+        .adapterFor('secret-v2-version')
+        .queryRecord(this.args.modelForData.id, { wrapTTL: 1800 })
+        .then(resp => {
+          this.wrappedData = resp.wrap_info.token;
+          console.log(this.wrappedData, 'wrapped data');
+          this.flashMessages.success('Secret Successfully Wrapped!');
+        })
+        .catch(() => {
+          this.flashMessages.danger('Could Not Wrap Secret');
+        })
+        .finally(() => {
+          this.isWrapping = false;
+        });
+    } else {
+      this.store
+        .adapterFor('secret')
+        .queryRecord(null, null, {
+          backend: this.args.model.backend,
+          id: this.args.modelForData.id,
+          wrapTTL: 1800,
+        })
+        .then(resp => {
+          this.wrappedData = resp.wrap_info.token;
+          this.flashMessages.success('Secret Successfully Wrapped!');
+        })
+        .catch(() => {
+          this.flashMessages.danger('Could Not Wrap Secret');
+        })
+        .finally(() => {
+          this.isWrapping = false;
+        });
+    }
+  }
 
-  actions: {
-    handleWrapClick() {
-      this.set('isWrapping', true);
-      if (this.isV2) {
-        this.store
-          .adapterFor('secret-v2-version')
-          .queryRecord(this.modelForData.id, { wrapTTL: 1800 })
-          .then(resp => {
-            this.set('wrappedData', resp.wrap_info.token);
-            this.flashMessages.success('Secret Successfully Wrapped!');
-          })
-          .catch(() => {
-            this.flashMessages.danger('Could Not Wrap Secret');
-          })
-          .finally(() => {
-            this.set('isWrapping', false);
-          });
-      } else {
-        this.store
-          .adapterFor('secret')
-          .queryRecord(null, null, { backend: this.model.backend, id: this.modelForData.id, wrapTTL: 1800 })
-          .then(resp => {
-            this.set('wrappedData', resp.wrap_info.token);
-            this.flashMessages.success('Secret Successfully Wrapped!');
-          })
-          .catch(() => {
-            this.flashMessages.danger('Could Not Wrap Secret');
-          })
-          .finally(() => {
-            this.set('isWrapping', false);
-          });
-      }
-    },
+  @action
+  clearWrappedData() {
+    this.wrappedData = null;
+  }
 
-    clearWrappedData() {
-      console.log(this.wrappedData, 'meep');
-      this.set('wrappedData', null);
-    },
+  @action
+  handleCopySuccess() {
+    this.flashMessages.success('Copied Wrapped Data!');
+    this.send('clearWrappedData');
+  }
 
-    handleCopySuccess() {
-      this.flashMessages.success('Copied Wrapped Data!');
-      this.send('clearWrappedData');
-    },
-
-    handleCopyError() {
-      this.flashMessages.danger('Could Not Copy Wrapped Data');
-      this.send('clearWrappedData');
-    },
-  },
-});
+  @action
+  handleCopyError() {
+    this.flashMessages.danger('Could Not Copy Wrapped Data');
+    this.send('clearWrappedData');
+  }
+}
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index 701ba80277c3..e21831140f7f 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -19,13 +19,13 @@
         @modelForData={{@modelForData}}
         @model={{@model}}
         @navToNearestAncestor={{@navToNearestAncestor}}
-        @isV2={{isV2}}
+        @isV2={{@isV2}}
         @refresh={{action @editActions.refresh}}
       />
     {{/if}}
     {{#if (and (eq @mode 'show') @canUpdateSecretData)}}
       {{#let (concat 'vault.cluster.secrets.backend.' (if (eq @mode 'show') 'edit' 'show')) as |targetRoute|}}
-        {{#unless (and isV2 (or @isWriteWithoutRead @modelForData.destroyed @modelForData.deleted))}}
+        {{#unless (and @isV2 (or @isWriteWithoutRead @modelForData.destroyed @modelForData.deleted))}}
           <BasicDropdown
             @class="popup-menu"
             @horizontalPosition="auto-right"
@@ -55,13 +55,13 @@
                     </CopyButton>
                   </li>
                   <li class="action">
-                    {{#if showWrapButton}}
+                    {{#if this.showWrapButton}}
                       <button
                         class="link link-plain has-text-weight-semibold is-ghost {{if isWrapping "is-loading"}}"
                         type="button"
-                        {{action "handleWrapClick"}}
+                        {{on "click" this.handleWrapClick}}
                         data-test-wrap-button
-                        disabled={{isWrapping}}
+                        disabled={{this.isWrapping}}
                       >
                         Wrap secret
                       </button>
@@ -70,7 +70,7 @@
                         @class="has-padding"
                         @displayOnly={{true}}
                         @allowCopy={{true}}
-                        @value={{@wrappedData}}
+                        @value={{this.wrappedData}}
                         @success={{action "handleCopySuccess"}}
                         @error={{action "handleCopyError"}}
                       />
@@ -84,19 +84,19 @@
       {{/let}}
     {{/if}}
 
-    {{#if (and (eq @mode "show") isV2 (not @model.failedServerRead))}}
+    {{#if (and (eq @mode "show") @isV2 (not @model.failedServerRead))}}
       <SecretVersionMenu
-        @version={{modelForData}}
+        @version={{@modelForData}}
         @onRefresh={{action @editActions.refresh}}
-        @model={{model}}
+        @model={{@model}}
       />
     {{/if}}
 
-    {{#if (and (eq mode 'show') canUpdateSecretData)}}
-      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
-        {{#if isV2}}
+    {{#if (and (eq @mode 'show') @canUpdateSecretData)}}
+      {{#let (concat 'vault.cluster.secrets.backend.' (if (eq @mode 'show') 'edit' 'show')) as |targetRoute|}}
+        {{#if @isV2}}
           <ToolbarLink
-            @params={{array targetRoute model.id (query-params version=modelForData.version)}}
+            @params={{array targetRoute @model.id (query-params version=@modelForData.version)}}
             @data-test-secret-edit="true"
             @replace={{true}}
             @type="add"
@@ -105,7 +105,7 @@
           </ToolbarLink>
         {{else}}
           <ToolbarLink
-            @params={{array targetRoute model.id}}
+            @params={{array targetRoute @model.id}}
             @data-test-secret-edit="true"
             @replace={{true}}
           >

From 73af76c56bc189ce4a3a14d59be91e241b653083 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 23 Aug 2021 12:46:40 -0600
Subject: [PATCH 32/40] cleanup

---
 ui/app/components/secret-edit-toolbar.js        |  4 ++--
 ui/app/components/secret-edit.js                | 17 +++--------------
 .../vault/cluster/secrets/backend/metadata.js   |  1 -
 ui/app/models/secret-v2.js                      |  7 ++++---
 .../components/secret-create-or-update.hbs      |  5 +----
 .../templates/components/secret-delete-menu.hbs |  1 -
 .../components/secret-edit-metadata.hbs         |  1 -
 ui/app/templates/components/secret-edit.hbs     |  4 ----
 .../templates/components/secret-list/item.hbs   |  6 +++---
 9 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
index ea1996886b70..0c0d1acd84d2 100644
--- a/ui/app/components/secret-edit-toolbar.js
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -28,11 +28,11 @@
  * @param {boolean} isV2 - KV type
  * @param {boolean} isWriteWithoutRead - boolean describing permissions
  * @param {boolean} secretDataIsAdvanced - used to determine if show JSON toggle
+ * @param {boolean} showAdvacnedMode - used for JSON toggle
  * @param {object} modelForData - a modified version of the model with secret data
  * @param {string} navToNearestAncestor - route to nav to if press cancel
  * @param {boolean} canUpdateSecretData - permissions that show the create new version button or not.
- * @param {boolean} canEdit - permissions
- * @param {string} codemirrorString - used in JSON editor
+ * @param {string} codemirrorString - used to copy the JSON
  * @param {object} wrappedData - when copy the data it's the token of the secret returned.
  * @param {object} editActions - actions passed from parent to child
  */
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index c5265f16f3a8..e2d26d751e56 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -4,12 +4,10 @@
  *
  * @example
  * ```js
- * <SecretEdit @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * <SecretEdit @model={{model}}/>
  * ```
-//  * ARG TODO FINISH THIS
- * @param {object} requiredParam - requiredParam is...
- * @param {string} [optionalParam] - optionalParam is...
- * @param {string} [param1=defaultValue] - param1 is...
+/
+ * @param {object} model - Model returned from route secret-v2
  */
 
 import { inject as service } from '@ember/service';
@@ -112,7 +110,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     'mode'
   ),
   canDeleteSecretMetadata: alias('checkMetadataCapabilities.canDelete'),
-  canUpdateSecretMetadata: alias('checkMetadataCapabilities.canUpdate'),
   canCreateSecretMetadata: alias('checkMetadataCapabilities.canCreate'),
 
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
@@ -153,14 +150,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
   }),
 
   actions: {
-    // ARG TODO couldn't find this being used anywhere
-    // deleteKey() {
-    //   let { id } = this.model;
-    //   this.model.destroyRecord().then(() => {
-    //     this.navToNearestAncestor.perform(id);
-    //   });
-    // },
-
     refresh() {
       this.onRefresh();
     },
diff --git a/ui/app/controllers/vault/cluster/secrets/backend/metadata.js b/ui/app/controllers/vault/cluster/secrets/backend/metadata.js
index c9b6547478bb..d97faf541775 100644
--- a/ui/app/controllers/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/controllers/vault/cluster/secrets/backend/metadata.js
@@ -3,7 +3,6 @@ import BackendCrumbMixin from 'vault/mixins/backend-crumb';
 import { action } from '@ember/object';
 
 export default class MetadataController extends Controller.extend(BackendCrumbMixin) {
-  // ARG TODO not sure if I'm going to use this yet. Set the controller up for the mixin
   @action
   refreshModel() {
     this.send('refreshModel');
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index da17f2dea85b..6b2f62e7feb8 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -62,8 +62,9 @@ export default Model.extend(KeyMixin, Validations, {
 
   canListMetadata: alias('secretMetadataPath.canList'),
   canReadMetadata: alias('secretMetadataPath.canRead'),
-  canUpdateMetadata: alias('secretMetadataPath.canUpdate'), // ARG this work in edit-metadata, but not in secret-edit???
+  canUpdateMetadata: alias('secretMetadataPath.canUpdate'),
 
-  canUpdateMetadataRoot: belongsTo('secret-engine'),
-  canListMetadataMeep: alias('secretMetadataPath.canUpdate'),
+  canReadSecretData: alias('secretDataPath.canRead'),
+  canEditSecretData: alias('secretDataPath.canUpdate'),
+  canDeleteSecretData: alias('secretDataPath.canDelete'),
 });
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 453130564aff..7366df34759a 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -1,6 +1,5 @@
 {{#if (eq @mode "create")}}
-{{!-- ARG TODO always passes in create. fix --}}
-  <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" "create"}}>
+  <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" @mode}}>
     <div class="field box is-fullwidth is-sideless is-marginless">
       <NamespaceReminder @mode="create" @noun="secret" />
       <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
@@ -178,8 +177,6 @@
                 class="input"
                 @autocomplete="off"
                 @spellcheck="false"
-                {{!-- ARG TODO handle inside component --}}
-                {{!-- {{on "keyup" (fn @onKeyUp "key" secret.name)}} --}}
               />
             </div>
             <div class="column">
diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index a61d749c0efa..116182eca0b8 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -1,5 +1,4 @@
 {{#unless @isV2}}
-{{!-- ARG TODO this is for v1 need to test --}}
   {{#if this.canDeleteSecretData}}
     <ConfirmAction
       @buttonClasses="toolbar-link"
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 558b865ddcb0..fe686a660a6a 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -1,4 +1,3 @@
-{{!-- ARG TODO add empty state if no access --}}
 <form onsubmit={{this.onSaveChanges}}>
   <div data-test-metadata-fields class={{if (eq @mode "create") "box has-container is-fullwidth" "form-section is-fullwidth"}}>
     <p class="field">
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index ff90e6b272c5..0fa637ff8641 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -43,15 +43,11 @@
   @model={{model}}
   @isV2={{isV2}}
   @isWriteWithoutRead={{isWriteWithoutRead}}
-  @secretData={{secretData}}
   @secretDataIsAdvanced={{secretDataIsAdvanced}}
   @showAdvancedMode={{showAdvancedMode}}
   @modelForData={{modelForData}}
   @navToNearestAncestor={{navToNearestAncestor}}
   @canUpdateSecretData={{canUpdateSecretData}}
-  @canUpdateSecretMetadata={{canUpdateSecretMetadata}}
-  @canCreateSecretMetadata={{canCreateSecretMetadata}}
-  {{!-- ARG TODO not sure if I need codemirrorString --}}
   @codemirrorString={{codemirrorString}}
   @editActions={{hash
     toggleAdvanced=(action "toggleAdvanced")
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index c5de91b18d66..cf981f95713b 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -45,7 +45,7 @@
                       </button>
                     </li>
                   {{else}}
-                    {{#if @item.canRead}}
+                    {{#if @item.canReadSecretData}}
                       <li class="action">
                         <SecretLink
                           @mode="show"
@@ -65,7 +65,7 @@
                         </li>
                       {{/if}}
                     {{/if}}
-                    {{#if @item.canEdit}}
+                    {{#if @item.canEditSecretData}}
                       <li class="action">
                         <SecretLink
                           @mode="edit"
@@ -78,7 +78,7 @@
                         </SecretLink>
                       </li>
                     {{/if}}
-                    {{#if @item.canDelete}}
+                    {{#if @item.canDeleteSecretData}}
                       <li class="action">
                         <c.Message
                           @id={{@item.id}}

From be143e12113703475009cf6159e6da597e187fb3 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 23 Aug 2021 14:06:53 -0600
Subject: [PATCH 33/40] test failure fix

---
 ui/app/routes/vault/cluster/secrets/backend/metadata.js | 6 +++---
 ui/app/templates/components/secret-list/item.hbs        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index 6d9d712ed4b0..f0fa0633f577 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -16,9 +16,9 @@ export default class MetadataShow extends Route {
       .then(record => {
         // ARG TODO remove when API is done
         record.customMetadata = {
-          foo: 'abc',
-          bar: '123',
-          baz: '5c07d823-3810-48f6-a147-4c06b5219e84',
+          // foo: 'abc',
+          // bar: '123',
+          // baz: '5c07d823-3810-48f6-a147-4c06b5219e84',
         };
         return record;
       });
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index cf981f95713b..1b4b9de52dfb 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -45,7 +45,7 @@
                       </button>
                     </li>
                   {{else}}
-                    {{#if @item.canReadSecretData}}
+                    {{#if (or @item.canReadSecretData @item.canRead)}}
                       <li class="action">
                         <SecretLink
                           @mode="show"
@@ -65,7 +65,7 @@
                         </li>
                       {{/if}}
                     {{/if}}
-                    {{#if @item.canEditSecretData}}
+                    {{#if (or @item.canEditSecretData @item.canEdit)}}
                       <li class="action">
                         <SecretLink
                           @mode="edit"

From 352365196fb87db4a422497b7293d31256fee97d Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 24 Aug 2021 13:07:54 -0600
Subject: [PATCH 34/40] add delete or

---
 ui/app/templates/components/secret-list/item.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index 1b4b9de52dfb..36bf9baefe1e 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -78,7 +78,7 @@
                         </SecretLink>
                       </li>
                     {{/if}}
-                    {{#if @item.canDeleteSecretData}}
+                    {{#if (or @item.canDeleteSecretData @item.canDelete)}}
                       <li class="action">
                         <c.Message
                           @id={{@item.id}}

From d6c7543ad0896efebea3e4592b66c54d492a86ea Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 24 Aug 2021 14:17:54 -0600
Subject: [PATCH 35/40] clean up

---
 ui/app/components/kv-object-editor.js         |  1 +
 ui/app/components/mount-backend-form.js       |  8 ++---
 ui/app/components/secret-create-or-update.js  | 12 +++----
 ui/app/components/secret-edit-metadata.js     | 24 ++++++-------
 ui/app/components/secret-edit-toolbar.js      | 36 +++++++++----------
 ui/app/components/secret-edit.js              |  1 -
 .../cluster/secrets/backend/edit-metadata.js  |  1 -
 .../vault/cluster/secrets/backend/metadata.js |  4 +++
 .../components/secret-create-or-update.hbs    |  2 +-
 .../components/secret-edit-metadata.hbs       |  2 +-
 .../cluster/secrets/backend/edit-metadata.hbs |  2 +-
 .../secrets/backend/kv/secret-test.js         |  1 -
 12 files changed, 43 insertions(+), 51 deletions(-)

diff --git a/ui/app/components/kv-object-editor.js b/ui/app/components/kv-object-editor.js
index 51f16a426d4f..46e45d2040ec 100644
--- a/ui/app/components/kv-object-editor.js
+++ b/ui/app/components/kv-object-editor.js
@@ -12,6 +12,7 @@
  * ```
  * @param {string} value - the value is captured from the model.
  * @param {function} onChange - function that captures the value on change
+ * @param {function} onKeyUp - function passed in that handles the dom keyup event. Used for validation on the kv custom metadata.
  * @param {string} [label] - label displayed over key value inputs
  * @param {string} [warning] - warning that is displayed
  * @param {string} [helpText] - helper text. In tooltip.
diff --git a/ui/app/components/mount-backend-form.js b/ui/app/components/mount-backend-form.js
index 75fde89e45ea..0d2320a82c7e 100644
--- a/ui/app/components/mount-backend-form.js
+++ b/ui/app/components/mount-backend-form.js
@@ -126,11 +126,9 @@ export default Component.extend({
           let number = Number(value);
           this.mountModel.set('maxVersions', number);
         }
-        if (!this.mountModel.validations.attrs.maxVersions.isValid) {
-          set(this.validationMessages, name, this.mountModel.validations.attrs.maxVersions.message);
-        } else {
-          set(this.validationMessages, name, '');
-        }
+        this.mountModel.validations.attrs.maxVersions.isValid
+          ? set(this.validationMessages, name, '')
+          : set(this.validationMessages, name, this.mountModel.validations.attrs.maxVersions.message);
       }
     },
     onTypeChange(path, value) {
diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index dde1b584d4eb..ad8f7bcd92eb 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -15,12 +15,12 @@
  * />
  * ```
  * @param {string} mode - create, edit, show determines what view to display
- * @param {object} model -  the route model, comes from secret-v2 ember record
+ * @param {object} model - the route model, comes from secret-v2 ember record
  * @param {boolean} showAdvancedMode - whether or not to show the JSON editor
  * @param {object} modelForData - a class that helps track secret data, defined in secret-edit
- * @param {boolean} isV2 - whether or not KV 1 or KV 2
+ * @param {boolean} isV2 - whether or not KV1 or KV2
  * @param {object} secretData - class that is created in secret-edit
- * @param {boolean} canCreateSecretMetadata - based on permissions to the /metadata/ endpoint. If create access.
+ * @param {boolean} canCreateSecretMetadata - based on permissions to the /metadata/ endpoint. If user has secret create access.
  */
 
 import Component from '@glimmer/component';
@@ -39,6 +39,7 @@ import { task, waitForEvent } from 'ember-concurrency';
 const LIST_ROUTE = 'vault.cluster.secrets.backend.list';
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
+
 export default class SecretCreateOrUpdate extends Component {
   @tracked codemirrorString = null;
   @tracked error = null;
@@ -74,7 +75,6 @@ export default class SecretCreateOrUpdate extends Component {
       this.addRow();
     }
   }
-
   checkRows() {
     if (this.args.secretData.length === 0) {
       this.addRow();
@@ -181,7 +181,6 @@ export default class SecretCreateOrUpdate extends Component {
   }
   @action
   codemirrorUpdated(val, codemirror) {
-    console;
     this.error = null;
     codemirror.performLint();
     const noErrors = codemirror.state.lint.marked.length === 0;
@@ -220,16 +219,13 @@ export default class SecretCreateOrUpdate extends Component {
   }
   @action
   formatJSON() {
-    console.log('formatJson in secret create upate');
     this.codemirrorString = this.args.secretData.toJSONString(true);
   }
   @action
   handleChange() {
-    console.log('handleChange in secret create upate');
     this.codemirrorString = this.args.secretData.toJSONString(true);
     set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
   }
-
   //submit on shift + enter
   @action
   handleKeyDown(e) {
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 974f8f2c1b03..cc35258b8d6b 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -12,7 +12,7 @@
  *
  * @param {object} model - name of the current cluster, passed from the parent.
  * @param {string} mode - if the mode is create, show, edit.
- * @param {Function} updateValidationErrorCount - function on parent that handle disabling the save button.
+ * @param {Function} updateValidationErrorCount - function on parent that handles disabling the save button.
  */
 
 import Component from '@glimmer/component';
@@ -20,6 +20,7 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+
 export default class SecretEditMetadata extends Component {
   @service router;
   @service store;
@@ -57,32 +58,27 @@ export default class SecretEditMetadata extends Component {
   @action onKeyUp(name, value) {
     if (value) {
       if (name === 'customMetadata') {
-        // // ARG TODO for now set this to hardcoded. Need to write test coverage for this.
+        // ARG TODO for now set this to hardcoded. Need to write test coverage for this.
         // this.model.set('customMetadata', { key: 'meep', value: value });
         // cp validations won't work on an object so performing validations here
         /* eslint-disable no-useless-escape */
         let regex = /^[^\/]+$/g; // looking for a forward slash
-        if (!value.match(regex)) {
-          set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
-        } else {
-          set(this.validationMessages, name, '');
-        }
+        value.match(regex)
+          ? set(this.validationMessages, name, '')
+          : set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
       }
       if (name === 'maxVersions') {
         let number = Number(value);
         this.args.model.maxVersions = number;
-        if (!this.args.model.validations.attrs.maxVersions.isValid) {
-          set(this.validationMessages, name, this.args.model.validations.attrs.maxVersions.message);
-        } else {
-          set(this.validationMessages, name, '');
-        }
+        this.args.model.validations.attrs.maxVersions.isValid
+          ? set(this.validationMessages, name, '')
+          : set(this.validationMessages, name, this.args.model.validations.attrs.maxVersions.message);
       }
     }
 
     let values = Object.values(this.validationMessages);
     this.validationErrorCount = values.filter(Boolean).length;
-    // when it's update this work, but on create we need to bubble up the count
-    // so it disables the save in the secret-creat-or-update form
+    // when mode is "update" this work, but on mode "create" we need to bubble up the count
     this.args.updateValidationErrorCount(this.validationErrorCount);
   }
 }
diff --git a/ui/app/components/secret-edit-toolbar.js b/ui/app/components/secret-edit-toolbar.js
index 0c0d1acd84d2..09e2433f1629 100644
--- a/ui/app/components/secret-edit-toolbar.js
+++ b/ui/app/components/secret-edit-toolbar.js
@@ -42,6 +42,7 @@ import { action } from '@ember/object';
 import { not } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+
 export default class SecretEditToolbar extends Component {
   @service store;
   @service flashMessages;
@@ -50,6 +51,23 @@ export default class SecretEditToolbar extends Component {
   @tracked isWrapping = false;
   @not('wrappedData') showWrapButton;
 
+  @action
+  clearWrappedData() {
+    this.wrappedData = null;
+  }
+
+  @action
+  handleCopyError() {
+    this.flashMessages.danger('Could Not Copy Wrapped Data');
+    this.send('clearWrappedData');
+  }
+
+  @action
+  handleCopySuccess() {
+    this.flashMessages.success('Copied Wrapped Data!');
+    this.send('clearWrappedData');
+  }
+
   @action
   handleWrapClick() {
     this.isWrapping = true;
@@ -59,7 +77,6 @@ export default class SecretEditToolbar extends Component {
         .queryRecord(this.args.modelForData.id, { wrapTTL: 1800 })
         .then(resp => {
           this.wrappedData = resp.wrap_info.token;
-          console.log(this.wrappedData, 'wrapped data');
           this.flashMessages.success('Secret Successfully Wrapped!');
         })
         .catch(() => {
@@ -88,21 +105,4 @@ export default class SecretEditToolbar extends Component {
         });
     }
   }
-
-  @action
-  clearWrappedData() {
-    this.wrappedData = null;
-  }
-
-  @action
-  handleCopySuccess() {
-    this.flashMessages.success('Copied Wrapped Data!');
-    this.send('clearWrappedData');
-  }
-
-  @action
-  handleCopyError() {
-    this.flashMessages.danger('Could Not Copy Wrapped Data');
-    this.send('clearWrappedData');
-  }
 }
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index e2d26d751e56..f49ac0e770c9 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -62,7 +62,6 @@ export default Component.extend(FocusOnInsertMixin, WithNavToNearestAncestor, {
     const data = KVObject.create({ content: [] }).fromJSON(secrets);
     this.set('secretData', data);
     this.set('codemirrorString', data.toJSONString());
-
     if (data.isAdvanced()) {
       this.set('preferAdvancedEdit', true);
     }
diff --git a/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
index 0dcc58dba6bc..2d033069d3d1 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/edit-metadata.js
@@ -1,4 +1,3 @@
-// import Route from '@ember/routing/route';
 import Metadata from './metadata';
 
 export default class EditMetadataRoute extends Metadata {}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index f0fa0633f577..380a48e5c5ae 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -1,11 +1,14 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+
 export default class MetadataShow extends Route {
   @service store;
+
   beforeModel() {
     const { backend } = this.paramsFor('vault.cluster.secrets.backend');
     this.backend = backend;
   }
+
   model(params) {
     let { secret } = params;
     return this.store
@@ -23,6 +26,7 @@ export default class MetadataShow extends Route {
         return record;
       });
   }
+
   setupController(controller, model) {
     controller.set('backend', this.backend); // for backendCrumb
     controller.set('model', model);
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 7366df34759a..21e6cc4b6e30 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -233,4 +233,4 @@
       </div>
     </div>
   </form>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index fe686a660a6a..7b2ee5c4a581 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -52,4 +52,4 @@
       </div>
     </div>
   {{/unless}}
-</form>
\ No newline at end of file
+</form>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
index 85d0d794fa09..dd74d84537ac 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/edit-metadata.hbs
@@ -18,4 +18,4 @@
     </LinkTo>
     <DocLink @path="/api/secret/kv/kv-v2#create-update-metadata">More here</DocLink>
   </EmptyState>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index 6cd11cf1665b..9033044a4176 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -43,7 +43,6 @@ module('Acceptance | secrets/secret/create', function(hooks) {
   test('it creates a secret and redirects', async function(assert) {
     const path = `kv-path-${new Date().getTime()}`;
     await listPage.visitRoot({ backend: 'secret' });
-
     await settled();
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.list-root', 'navigates to the list page');
 

From cd534e34f5ecbb2f9b75bf231186cf0b3fa43415 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 25 Aug 2021 11:09:10 -0600
Subject: [PATCH 36/40] remove all hardcoded for api integration

---
 ui/app/components/secret-edit-metadata.js      | 18 +++++++-----------
 .../vault/cluster/secrets/backend/metadata.js  | 18 ++++--------------
 .../vault/cluster/secrets/backend/metadata.hbs |  1 -
 3 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index cc35258b8d6b..78d46b8a6f42 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -12,7 +12,7 @@
  *
  * @param {object} model - name of the current cluster, passed from the parent.
  * @param {string} mode - if the mode is create, show, edit.
- * @param {Function} updateValidationErrorCount - function on parent that handles disabling the save button.
+ * @param {Function} [updateValidationErrorCount] - function on parent that handles disabling the save button.
  */
 
 import Component from '@glimmer/component';
@@ -48,18 +48,12 @@ export default class SecretEditMetadata extends Component {
   @action
   onSaveChanges(event) {
     event.preventDefault();
-    const changed = this.args.model.hasDirtyAttributes; // ARG TODO when API done double check this is working
-    if (changed) {
-      this.save();
-      return;
-    }
-    // ARG TODO when API figure out if changed is false what to do, likely a validation error with disable save button.
+    this.save();
+    return;
   }
   @action onKeyUp(name, value) {
     if (value) {
       if (name === 'customMetadata') {
-        // ARG TODO for now set this to hardcoded. Need to write test coverage for this.
-        // this.model.set('customMetadata', { key: 'meep', value: value });
         // cp validations won't work on an object so performing validations here
         /* eslint-disable no-useless-escape */
         let regex = /^[^\/]+$/g; // looking for a forward slash
@@ -78,7 +72,9 @@ export default class SecretEditMetadata extends Component {
 
     let values = Object.values(this.validationMessages);
     this.validationErrorCount = values.filter(Boolean).length;
-    // when mode is "update" this work, but on mode "create" we need to bubble up the count
-    this.args.updateValidationErrorCount(this.validationErrorCount);
+    // when mode is "update" this works, but on mode "create" we need to bubble up the count
+    if (this.args.updateValidationErrorCount) {
+      this.args.updateValidationErrorCount(this.validationErrorCount);
+    }
   }
 }
diff --git a/ui/app/routes/vault/cluster/secrets/backend/metadata.js b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
index 380a48e5c5ae..b47b0ddc9e21 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/metadata.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/metadata.js
@@ -11,20 +11,10 @@ export default class MetadataShow extends Route {
 
   model(params) {
     let { secret } = params;
-    return this.store
-      .queryRecord('secret-v2', {
-        backend: this.backend,
-        id: secret,
-      })
-      .then(record => {
-        // ARG TODO remove when API is done
-        record.customMetadata = {
-          // foo: 'abc',
-          // bar: '123',
-          // baz: '5c07d823-3810-48f6-a147-4c06b5219e84',
-        };
-        return record;
-      });
+    return this.store.queryRecord('secret-v2', {
+      backend: this.backend,
+      id: secret,
+    });
   }
 
   setupController(controller, model) {
diff --git a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
index bc848142e845..476e45126fb5 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@@ -51,7 +51,6 @@
   {{#each-in this.model.customMetadata as | key value|}}
       <InfoTableRow @alwaysRender={{false}} @label={{key}} @value={{value}} />
   {{else}}
-  {{!-- ARG TODO when API merged check if returns empty object this should work if it does --}}
     <EmptyState
       @title="No custom metadata"
       @bottomBorder={{true}}

From 408000db3bd7c95f6259cf35ad4f4e036aadebc4 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 26 Aug 2021 14:02:43 -0600
Subject: [PATCH 37/40] add helper and fix create mode on create new version

---
 ui/app/adapters/secret-engine.js              | 13 ++++-------
 ui/app/components/mount-backend-form.js       | 21 +++++++++---------
 ui/app/components/secret-edit-metadata.js     |  3 +--
 ui/app/helpers/split-object.js                | 22 +++++++++++++++++++
 ui/app/models/secret-engine.js                |  2 +-
 ui/app/models/secret-v2.js                    |  2 +-
 .../components/secret-create-or-update.hbs    |  2 +-
 7 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/helpers/split-object.js

diff --git a/ui/app/adapters/secret-engine.js b/ui/app/adapters/secret-engine.js
index e53cad5090fa..3d542329f274 100644
--- a/ui/app/adapters/secret-engine.js
+++ b/ui/app/adapters/secret-engine.js
@@ -1,6 +1,7 @@
 import { assign } from '@ember/polyfills';
 import ApplicationAdapter from './application';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
+import { splitObject } from 'vault/helpers/split-object';
 
 export default ApplicationAdapter.extend({
   url(path) {
@@ -35,15 +36,9 @@ export default ApplicationAdapter.extend({
     // for kv2 we make two network requests
     if (data.type === 'kv' && data.options.version !== 1) {
       // data has both data for sys mount and the config, we need to separate them
-      let configData = (({ max_versions, delete_version_after, cas_required }) => ({
-        max_versions,
-        delete_version_after,
-        cas_required,
-      }))(data);
-      // remove extra params from data
-      /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
-      let { max_versions, delete_version_after, cas_required, ...newData } = data;
-      data = newData;
+      let splitObjects = splitObject(data, ['max_versions', 'delete_version_after', 'cas_required']);
+      let configData = splitObjects[0];
+      data = splitObjects[1];
       // first create the engine
       return this.ajax(this.url(path), 'POST', { data })
         .then(() => {
diff --git a/ui/app/components/mount-backend-form.js b/ui/app/components/mount-backend-form.js
index 0d2320a82c7e..0bd3f446ec52 100644
--- a/ui/app/components/mount-backend-form.js
+++ b/ui/app/components/mount-backend-form.js
@@ -114,22 +114,21 @@ export default Component.extend({
         this.mountModel.validations.attrs.path.isValid
           ? set(this.validationMessages, 'path', '')
           : set(this.validationMessages, 'path', this.mountModel.validations.attrs.path.message);
-
-        this.mountModel.validate().then(({ validations }) => {
-          this.set('isFormInvalid', !validations.isValid);
-        });
       }
       // check maxVersions is a number
       if (name === 'maxVersions') {
-        // checking for value because value which is blank on first load. No keyup event has occurred and default is 10.
-        if (value) {
-          let number = Number(value);
-          this.mountModel.set('maxVersions', number);
-        }
+        this.mountModel.set('maxVersions', value);
         this.mountModel.validations.attrs.maxVersions.isValid
-          ? set(this.validationMessages, name, '')
-          : set(this.validationMessages, name, this.mountModel.validations.attrs.maxVersions.message);
+          ? set(this.validationMessages, 'maxVersions', '')
+          : set(
+              this.validationMessages,
+              'maxVersions',
+              this.mountModel.validations.attrs.maxVersions.message
+            );
       }
+      this.mountModel.validate().then(({ validations }) => {
+        this.set('isFormInvalid', !validations.isValid);
+      });
     },
     onTypeChange(path, value) {
       if (path === 'type') {
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 78d46b8a6f42..3a62292ec6a6 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -62,8 +62,7 @@ export default class SecretEditMetadata extends Component {
           : set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
       }
       if (name === 'maxVersions') {
-        let number = Number(value);
-        this.args.model.maxVersions = number;
+        this.args.model.maxVersions = value;
         this.args.model.validations.attrs.maxVersions.isValid
           ? set(this.validationMessages, name, '')
           : set(this.validationMessages, name, this.args.model.validations.attrs.maxVersions.message);
diff --git a/ui/app/helpers/split-object.js b/ui/app/helpers/split-object.js
new file mode 100644
index 000000000000..566c8f116200
--- /dev/null
+++ b/ui/app/helpers/split-object.js
@@ -0,0 +1,22 @@
+import { helper as buildHelper } from '@ember/component/helper';
+
+export function splitObject(originalObject, array) {
+  let object1 = {};
+  let object2 = {};
+  // convert object to key's array
+  let keys = Object.keys(originalObject);
+  // iterate over keys to see if they match values in the array
+  keys.forEach(key => {
+    array.forEach(item => {
+      if (key === item) {
+        object1[key] = originalObject[key];
+      }
+    });
+    if (!array.includes(key)) {
+      object2[key] = originalObject[key];
+    }
+  });
+  return [object1, object2];
+}
+
+export default buildHelper(splitObject);
diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index 718924b31d8d..0adac7f39882 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -15,7 +15,7 @@ const Validations = buildValidations({
   }),
   maxVersions: [
     validator('number', {
-      allowString: false,
+      allowString: true,
       integer: true,
       message: 'Maximum versions must be a number.',
     }),
diff --git a/ui/app/models/secret-v2.js b/ui/app/models/secret-v2.js
index 6b2f62e7feb8..c8f5e97ca996 100644
--- a/ui/app/models/secret-v2.js
+++ b/ui/app/models/secret-v2.js
@@ -9,7 +9,7 @@ import { validator, buildValidations } from 'ember-cp-validations';
 const Validations = buildValidations({
   maxVersions: [
     validator('number', {
-      allowString: false,
+      allowString: true,
       integer: true,
       message: 'Maximum versions must be a number.',
     }),
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 21e6cc4b6e30..144d0f2c5b5d 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -135,7 +135,7 @@
 {{/if}}
 
 {{#if (eq @mode "edit")}}
-  <form onsubmit={{action "createOrUpdateKey" "create"}}>
+  <form onsubmit={{action "createOrUpdateKey" "edit"}}>
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
       <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
       <NamespaceReminder @mode="edit" @noun="secret" />

From 643faeded54d00f420b7772e1d367e4930838bf4 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 30 Aug 2021 13:32:53 -0600
Subject: [PATCH 38/40] address chelseas pr comments

---
 ui/app/adapters/secret-engine.js              |  4 ++--
 ui/app/components/secret-create-or-update.js  | 23 +++++++++++++++++--
 ui/app/components/secret-edit-metadata.js     | 12 +++++-----
 ui/app/helpers/split-object.js                | 10 +++-----
 .../templates/components/kv-object-editor.hbs |  2 +-
 .../components/secret-create-or-update.hbs    |  2 +-
 .../components/secret-edit-metadata.hbs       |  1 +
 7 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/ui/app/adapters/secret-engine.js b/ui/app/adapters/secret-engine.js
index 3d542329f274..c2bd214f089b 100644
--- a/ui/app/adapters/secret-engine.js
+++ b/ui/app/adapters/secret-engine.js
@@ -37,8 +37,8 @@ export default ApplicationAdapter.extend({
     if (data.type === 'kv' && data.options.version !== 1) {
       // data has both data for sys mount and the config, we need to separate them
       let splitObjects = splitObject(data, ['max_versions', 'delete_version_after', 'cas_required']);
-      let configData = splitObjects[0];
-      data = splitObjects[1];
+      let configData;
+      [configData, data] = splitObjects;
       // first create the engine
       return this.ajax(this.url(path), 'POST', { data })
         .then(() => {
diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index ad8f7bcd92eb..1122131d6f56 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -125,7 +125,7 @@ export default class SecretCreateOrUpdate extends Component {
           if (isV2) {
             secret.set('id', key);
           }
-          if (isV2 && Object.keys(secret.changedAttributes()).length) {
+          if (isV2 && Object.keys(secret.changedAttributes()).length > 0) {
             // save secret metadata
             secret
               .save()
@@ -133,7 +133,11 @@ export default class SecretCreateOrUpdate extends Component {
                 this.saveComplete(successCallback, key);
               })
               .catch(e => {
-                this.e = e.errors.join(' ');
+                // when mode is not create the metadata error is handled in secret-edit-metadata
+                if (this.mode === 'create') {
+                  this.error = e.errors.join(' ');
+                }
+                return;
               });
           } else {
             this.saveComplete(successCallback, key);
@@ -158,6 +162,21 @@ export default class SecretCreateOrUpdate extends Component {
     return this.router.transitionTo(...arguments);
   }
 
+  get isCreateNewVersionFromOldVersion() {
+    let model = this.args.model;
+    if (!model) {
+      return false;
+    }
+    if (
+      !model.failedServerRead &&
+      !model.selectedVersion.failedServerRead &&
+      model.selectedVersion.version !== model.currentVersion
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   @(task(function*(name, value) {
     this.checkValidation(name, value);
     while (true) {
diff --git a/ui/app/components/secret-edit-metadata.js b/ui/app/components/secret-edit-metadata.js
index 3a62292ec6a6..e62e1e924303 100644
--- a/ui/app/components/secret-edit-metadata.js
+++ b/ui/app/components/secret-edit-metadata.js
@@ -39,8 +39,9 @@ export default class SecretEditMetadata extends Component {
     let model = this.args.model;
     try {
       await model.save();
-    } catch (err) {
-      // error
+    } catch (e) {
+      this.error = e;
+      return;
     }
     this.router.transitionTo('vault.cluster.secrets.backend.metadata', this.args.model.id);
   }
@@ -48,18 +49,17 @@ export default class SecretEditMetadata extends Component {
   @action
   onSaveChanges(event) {
     event.preventDefault();
-    this.save();
-    return;
+    return this.save();
   }
   @action onKeyUp(name, value) {
     if (value) {
       if (name === 'customMetadata') {
         // cp validations won't work on an object so performing validations here
         /* eslint-disable no-useless-escape */
-        let regex = /^[^\/]+$/g; // looking for a forward slash
+        let regex = /^[^\\]+$/g; // looking for a backward slash
         value.match(regex)
           ? set(this.validationMessages, name, '')
-          : set(this.validationMessages, name, 'Custom values cannot contain a forward slash.');
+          : set(this.validationMessages, name, 'Custom values cannot contain a backward slash.');
       }
       if (name === 'maxVersions') {
         this.args.model.maxVersions = value;
diff --git a/ui/app/helpers/split-object.js b/ui/app/helpers/split-object.js
index 566c8f116200..94a6bdc2414b 100644
--- a/ui/app/helpers/split-object.js
+++ b/ui/app/helpers/split-object.js
@@ -5,14 +5,10 @@ export function splitObject(originalObject, array) {
   let object2 = {};
   // convert object to key's array
   let keys = Object.keys(originalObject);
-  // iterate over keys to see if they match values in the array
   keys.forEach(key => {
-    array.forEach(item => {
-      if (key === item) {
-        object1[key] = originalObject[key];
-      }
-    });
-    if (!array.includes(key)) {
+    if (array.includes(key)) {
+      object1[key] = originalObject[key];
+    } else {
       object2[key] = originalObject[key];
     }
   });
diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs
index 6184df837e4f..7e323cf4e9f2 100644
--- a/ui/app/templates/components/kv-object-editor.hbs
+++ b/ui/app/templates/components/kv-object-editor.hbs
@@ -7,7 +7,7 @@
       </InfoTooltip>
     {{/if}}
   </label>
-  {{#if true}}
+  {{#if subText}}
     <p class="has-padding-bottom">
       {{subText}}
     </p> 
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 144d0f2c5b5d..771d59b09ef5 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -139,7 +139,7 @@
     <div class="box is-sideless is-fullwidth is-marginless is-paddingless">
       <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
       <NamespaceReminder @mode="edit" @noun="secret" />
-      {{#if (and (not @model.failedServerRead) (not @model.selectedVersion.failedServerRead) (not-eq @model.selectedVersion.version @model.currentVersion))}}
+      {{#if this.isCreateNewVersionFromOldVersion}}
         <div class="form-section">
           <AlertBanner
             @type="warning"
diff --git a/ui/app/templates/components/secret-edit-metadata.hbs b/ui/app/templates/components/secret-edit-metadata.hbs
index 7b2ee5c4a581..3613883a906b 100644
--- a/ui/app/templates/components/secret-edit-metadata.hbs
+++ b/ui/app/templates/components/secret-edit-metadata.hbs
@@ -5,6 +5,7 @@
     </p>
     {{#each @model.fields as |attr|}}
       {{#if (eq attr.name "customMetadata")}}
+      <MessageError @errorMessage={{this.error}} @model={{@model}} />
         <FormField 
           data-test-field 
           @attr={{attr}}

From abff87d13ea4ed04d322293127e1f5f265ad9c19 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 30 Aug 2021 13:41:18 -0600
Subject: [PATCH 39/40] add jsdocs to helper

---
 ui/app/helpers/split-object.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/ui/app/helpers/split-object.js b/ui/app/helpers/split-object.js
index 94a6bdc2414b..8da0401f1fe4 100644
--- a/ui/app/helpers/split-object.js
+++ b/ui/app/helpers/split-object.js
@@ -1,3 +1,17 @@
+/**
+ * @module SplitObject
+ * SplitObject helper takes in a class of data as the first param and an array of keys that you want to split into another object as the second param. 
+ * You will end up with an array of two objects. One no longer with the array of params, and the second with just the array of params.
+ *
+ * @example
+ * ```js
+ * splitObject(data, ['max_versions', 'delete_version_after', 'cas_required'])
+ * ```
+ 
+ * @param {object} - The object you want to split into two. This object will have all the keys from the second param (the array param).
+ * @param {array} - An array of params that you want to split off the object and turn into its own object.
+
+ */
 import { helper as buildHelper } from '@ember/component/helper';
 
 export function splitObject(originalObject, array) {

From 89bc4862a5c509757581e356c248fc4e094cb8a7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 30 Aug 2021 14:02:35 -0600
Subject: [PATCH 40/40] fix test

---
 ui/app/components/secret-create-or-update.js        | 4 ++--
 ui/tests/integration/components/secret-edit-test.js | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/secret-create-or-update.js b/ui/app/components/secret-create-or-update.js
index 1122131d6f56..f58e9605e785 100644
--- a/ui/app/components/secret-create-or-update.js
+++ b/ui/app/components/secret-create-or-update.js
@@ -169,8 +169,8 @@ export default class SecretCreateOrUpdate extends Component {
     }
     if (
       !model.failedServerRead &&
-      !model.selectedVersion.failedServerRead &&
-      model.selectedVersion.version !== model.currentVersion
+      !model.selectedVersion?.failedServerRead &&
+      model.selectedVersion?.version !== model.currentVersion
     ) {
       return true;
     }
diff --git a/ui/tests/integration/components/secret-edit-test.js b/ui/tests/integration/components/secret-edit-test.js
index 3f92b6b9b354..89c1474db44e 100644
--- a/ui/tests/integration/components/secret-edit-test.js
+++ b/ui/tests/integration/components/secret-edit-test.js
@@ -97,6 +97,7 @@ module('Integration | Component | secret edit', function(hooks) {
     });
 
     await render(hbs`{{secret-edit mode=mode model=model preferAdvancedEdit=true }}`);
+    await settled();
     let instance = this.codeMirror.instanceFor(find('[data-test-component=json-editor]').id);
     instance.setValue(JSON.stringify([{ foo: 'bar' }]));
     await settled();