UI: fix delete for SSH engine config (#19448)

* fix delete not working for ssh config

* add test

* add changelog;

changelog/19448.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes SSH engine config deletion
+```

ui/app/components/configure-ssh-secret.js

@@ -7,19 +7,27 @@ import { action } from '@ember/object';
  * @example
  * ```js
  * <ConfigureSshSecret
-      @model={{model}} 
+ *    @model={{this.model}}
-      @configured={{configured}} 
+ *    @configured={{this.configured}}
-      @saveConfig={{action "saveConfig"}} />
+ *    @saveConfig={{action "saveConfig"}}
+ *    @loading={{this.loading}}
+ *  />
  * ```
  *
  * @param {string} model - ssh secret engine model
  * @param {Function} saveConfig - parent action which updates the configuration
+ * @param {boolean} loading - property in parent that updates depending on status of parent's action
  *
  */
 export default class ConfigureSshSecretComponent extends Component {
   @action
-  saveConfig(data, event) {
+  delete() {
+    this.args.saveConfig({ delete: true });
+  }
+
+  @action
+  saveConfig(event) {
     event.preventDefault();
-    this.args.saveConfig(data);
+    this.args.saveConfig({ delete: false });
   }
 }

ui/app/controllers/vault/cluster/settings/configure-secret-backend.js

@@ -31,7 +31,6 @@ export default Controller.extend(CONFIG_ATTRS, {
         this.model
           .saveCA({ isDelete })
           .then(() => {
-            this.set('loading', false);
             this.send('refreshRoute');
             this.set('configured', !isDelete);
             if (isDelete) {
@@ -43,6 +42,9 @@ export default Controller.extend(CONFIG_ATTRS, {
           .catch((error) => {
             const errorMessage = error.errors ? error.errors.join('. ') : error;
             this.flashMessages.danger(errorMessage);
+          })
+          .finally(() => {
+            this.set('loading', false);
           });
       }
     },

ui/app/templates/components/configure-ssh-secret.hbs

@@ -31,14 +31,14 @@
       <ConfirmAction
         @buttonClasses="button"
         @confirmMessage="This will remove the CA certificate information."
-        @onConfirmAction={{action "saveConfig" (hash delete=true)}}
+        @onConfirmAction={{this.delete}}
       >
         Delete
       </ConfirmAction>
     </div>
   </div>
 {{else}}
-  <form onsubmit={{action "saveConfig" (hash delete=false)}} data-test-ssh-configure-form="true">
+  <form {{on "submit" this.saveConfig}} data-test-ssh-configure-form="true">
     <div class="box is-fullwidth is-sideless is-marginless">
       <NamespaceReminder @mode="save" @noun="configuration" />
       <div class="field">
@@ -58,13 +58,13 @@
         </div>
       </div>
       <div class="b-checkbox">
-        <input
+        <Input
-          type="checkbox"
+          @type="checkbox"
           id="generateSigningKey"
           class="styled"
-          checked={{@model.generateSigningKey}}
+          @checked={{@model.generateSigningKey}}
-          onchange={{action (mut @model.generateSigningKey) value="target.checked"}}
+          {{on "change" (fn (mut @model.generateSigningKey) (not @model.generateSigningKey))}}
-          data-test-ssh-input={{this.generateSigningKey}}
+          data-test-ssh-input="generate-signing-key-checkbox"
         />
         <label for="generateSigningKey" class="is-label">
           Generate signing key
@@ -78,8 +78,8 @@
       <div class="control">
         <button
           type="submit"
-          class="button is-primary {{if this.loading 'is-loading'}}"
+          class="button is-primary {{if @loading 'is-loading'}}"
-          disabled={{this.loading}}
+          disabled={{@loading}}
           data-test-ssh-input="configure-submit"
         >
           Save

ui/app/templates/vault/cluster/settings/configure-secret-backend.hbs

@@ -38,7 +38,12 @@
 {{else if (eq this.model.type "pki")}}
   <Pki::ConfigurePkiSecret />
 {{else if (eq this.model.type "ssh")}}
-  <ConfigureSshSecret @model={{this.model}} @configured={{this.configured}} @saveConfig={{action "saveConfig"}} />
+  <ConfigureSshSecret
+    @model={{this.model}}
+    @configured={{this.configured}}
+    @saveConfig={{action "saveConfig"}}
+    @loading={{this.loading}}
+  />
 {{/if}}
 
 {{outlet}}

ui/tests/acceptance/settings/configure-secret-backends/configure-ssh-secret-test.js

@@ -0,0 +1,40 @@
+import { click, settled } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import page from 'vault/tests/pages/settings/configure-secret-backends/pki/index';
+import authPage from 'vault/tests/pages/auth';
+import enablePage from 'vault/tests/pages/settings/mount-secret-backend';
+import { create } from 'ember-cli-page-object';
+import fm from 'vault/tests/pages/components/flash-message';
+const flashMessage = create(fm);
+const SELECTORS = {
+  generateSigningKey: '[data-test-ssh-input="generate-signing-key-checkbox"]',
+  saveConfig: '[data-test-ssh-input="configure-submit"]',
+  publicKey: '[data-test-ssh-input="public-key"]',
+};
+module('Acceptance | settings/configure/secrets/ssh', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    return authPage.login();
+  });
+
+  test('it configures ssh ca', async function (assert) {
+    const path = `ssh-${new Date().getTime()}`;
+    await enablePage.enable('ssh', path);
+    await settled();
+    await page.visit({ backend: path });
+    await settled();
+    assert.dom(SELECTORS.generateSigningKey).isChecked('generate_signing_key defaults to true');
+    await click(SELECTORS.generateSigningKey);
+    await click(SELECTORS.saveConfig);
+    assert.strictEqual(
+      flashMessage.latestMessage,
+      'missing public_key',
+      'renders warning flash message for failed save'
+    );
+    await click(SELECTORS.generateSigningKey);
+    await click(SELECTORS.saveConfig);
+    assert.dom(SELECTORS.publicKey).exists('renders public key after saving config');
+  });
+});