KV alert banner for white space in KV path

changelog/12921.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds warning about white space in KV secret engine.
+```

ui/app/components/secret-create-or-update.js

@@ -44,6 +44,7 @@ export default class SecretCreateOrUpdate extends Component {
   @tracked codemirrorString = null;
   @tracked error = null;
   @tracked secretPaths = null;
+  @tracked pathWhiteSpaceWarning = false;
   @tracked validationErrorCount = 0;
   @tracked validationMessages = null;
 
@@ -82,6 +83,8 @@ export default class SecretCreateOrUpdate extends Component {
   }
   checkValidation(name, value) {
     if (name === 'path') {
+      // check for whitespace
+      this.pathHasWhiteSpace(value);
       !value
         ? set(this.validationMessages, name, `${name} can't be blank.`)
         : set(this.validationMessages, name, '');
@@ -106,6 +109,14 @@ export default class SecretCreateOrUpdate extends Component {
       this.transitionToRoute(LIST_ROOT_ROUTE);
     }
   }
+  pathHasWhiteSpace(value) {
+    let validation = new RegExp('\\s', 'g'); // search for whitespace
+    if (validation.test(value)) {
+      this.pathWhiteSpaceWarning = true;
+    } else {
+      this.pathWhiteSpaceWarning = false;
+    }
+  }
   // successCallback is called in the context of the component
   persistKey(successCallback) {
     let secret = this.args.model;

ui/app/models/secret-engine.js

@@ -52,7 +52,7 @@ export default Model.extend(Validations, {
     defaultValue: 0,
     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.',
+      '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. When 0 is used or the value is unset, Vault will keep 10 versions.',
   }),
   casRequired: attr('boolean', {
     defaultValue: false,

ui/app/styles/core/alert-banner.scss

@@ -4,3 +4,7 @@
 
   color: $black;
 }
+
+.margin-top {
+  margin-top: $spacing-xs;
+}

ui/app/templates/components/secret-create-or-update.hbs

@@ -28,6 +28,14 @@
         The secret path may not end in <code>/</code>
         </p>
       {{/if}}
+      {{#if this.pathWhiteSpaceWarning}}
+        <AlertBanner
+          @type="warning"
+          @message="Your secret path contains whitespace. If this is desired, you'll need to encode it with %20 in API calls."
+          @marginTop=true
+          data-test-whitespace-warning
+        />
+      {{/if}}     
     </div>
     {{#if @showAdvancedMode}}
       <div class="form-section">

ui/lib/core/addon/components/alert-banner.js

@@ -17,6 +17,7 @@ import layout from '../templates/components/alert-banner';
  * @param {Object} [progressBar=null] - An object containing a value and maximum for a progress bar. Will be displayed next to the message title.
  * @param {String} [message=null] - The message to display within the banner.
  * @param {String} [title=null] - A title to show above the message. If this is not provided, there are default values for each type of alert.
+ * @param [marginTop=false]{Boolean} - Whether or not to add margin above component.
  *
  */
 
@@ -29,7 +30,7 @@ export default Component.extend({
   progressBar: null,
   yieldWithoutColumn: false,
   marginless: false,
-  classNameBindings: ['containerClass'],
+  classNameBindings: ['containerClass', 'marginTop:margin-top'],
 
   containerClass: computed('type', 'marginless', function() {
     const base = this.marginless ? 'message message-marginless ' : 'message ';

ui/tests/acceptance/secrets/backend/kv/secret-test.js

@@ -440,7 +440,7 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     }
   });
 
-  test('create secret with space shows version data', async function(assert) {
+  test('create secret with space shows version data and shows space warning', async function(assert) {
     let enginePath = `kv-${new Date().getTime()}`;
     let secretPath = 'space space';
     // mount version 2
@@ -452,7 +452,13 @@ module('Acceptance | secrets/secret/create', function(hooks) {
       .submit();
     await settled();
     await listPage.create();
-    await editPage.createSecret(secretPath, 'foo', 'bar');
+    await editPage.createSecretDontSave(secretPath, 'foo', 'bar');
+    // to trigger warning need to hit keyup on the secret path
+    await triggerKeyEvent('[data-test-secret-path="true"]', 'keyup', 65);
+    await settled();
+    assert.dom('[data-test-whitespace-warning]').exists('renders warning about their being a space');
+    await settled();
+    await click('[data-test-secret-save="true"]');
     await settled();
     await click('[data-test-popup-menu-trigger="version"]');
     await settled();

ui/tests/pages/secrets/backend/kv/edit-secret.js

@@ -29,6 +29,11 @@ export default create({
       .secretValue(value)
       .save();
   },
+  createSecretDontSave: async function(path, key, value) {
+    return this.path(path)
+      .secretKey(key)
+      .secretValue(value);
+  },
   createSecretWithMetadata: async function(path, key, value, maxVersion) {
     return this.path(path)
       .secretKey(key)