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,10 @@ export default class SecretCreateOrUpdate extends Component {
       this.transitionToRoute(LIST_ROOT_ROUTE);
     }
   }
+  pathHasWhiteSpace(value) {
+    let validation = new RegExp('\\s', 'g'); // search for whitespace
+    this.pathWhiteSpaceWarning = validation.test(value);
+  }
   // 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/templates/components/secret-create-or-update.hbs

@@ -28,6 +28,16 @@
         The secret path may not end in <code>/</code>
         </p>
       {{/if}}
+      {{#if this.pathWhiteSpaceWarning}}
+        <div class="has-top-margin-m">
+          <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
+          />
+        </div>
+      {{/if}}     
     </div>
     {{#if @showAdvancedMode}}
       <div class="form-section">

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)