UI add custom metadata to KV2

changelog/12169.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Add custom metadata to KV secret engine and metadata to config
+```

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 (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;
+      // 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) {

ui/app/components/kv-object-editor.js

@@ -1,3 +1,25 @@
+/**
+ * @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';
@@ -7,12 +29,15 @@ import KVObject from 'vault/lib/kv-object';
 
 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() {},
 
@@ -65,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);
+    },
   },
 });

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') {