final copy of ssh back

hashicorp · Jan 8, 2025 · 69cefbf · 69cefbf
1 parent 4b5e4e7
commit 69cefbf
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 43 deletions.
diff --git a/ui/app/components/secret-engine/configure-ssh.hbs b/ui/app/components/secret-engine/configure-ssh.hbs
@@ -3,38 +3,73 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-{{! Model is not new and keys have already been created. Require user deletes the keys before creating new ones }}
-<p class="has-text-grey-dark has-top-bottom-margin">
-  NOTE: You must delete your existing certificate and key before saving new values.
-</p>
+<form {{on "submit" (perform this.save)}} aria-label="save ssh creds" class="has-top-padding-m" data-test-configure-form>
+  <NamespaceReminder @mode="save" @noun="configuration" />
+  <MessageError @errorMessage={{this.errorMessage}} />
+  {{#if @model.isNew}}
+    {{#each @model.formFields as |attr|}}
+      <FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.modelValidations}} />
+    {{/each}}
+    <hr class="has-background-gray-300" />
+    <Hds::ButtonSet>
+      <Hds::Button
+        @text="Save"
+        @icon={{if this.save.isRunning "loading"}}
+        type="submit"
+        disabled={{this.save.isRunning}}
+        data-test-configure-save-button
+      />
+      <Hds::Button
+        @text="Cancel"
+        @color="secondary"
+        disabled={{this.save.isRunning}}
+        {{on "click" this.onCancel}}
+        data-test-cancel-button
+      />
+    </Hds::ButtonSet>
+    {{#if this.invalidFormAlert}}
+      <AlertInline
+        data-test-invalid-form-alert
+        class="has-top-padding-s"
+        @type="danger"
+        @message={{this.invalidFormAlert}}
+      />
+    {{/if}}
+  {{else}}
+    {{! Model is not new and keys have already been created. Require user deletes the keys before creating new ones }}
+    <p class="has-text-grey-dark has-top-bottom-margin">
+      NOTE: You must delete your existing certificate and key before saving new values.
+    </p>
 
-<div class="box is-fullwidth is-sideless" data-test-key-section>
-  <label for="publicKey" class="is-label">
-    Public key
-  </label>
-  <div class="control">
-    <MaskedInput
-      @name="publickey"
-      @id="publicKey"
-      @value={{@model.publicKey}}
-      @displayOnly={{true}}
-      @allowCopy={{true}}
-      data-test-input="public-key"
-    />
-  </div>
-</div>
-<Hds::ButtonSet>
-  <Hds::Copy::Button
-    @text="Copy"
-    @textToCopy={{@model.publicKey}}
-    @onError={{fn (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")}}
-    class="primary"
-  />
-  <ConfirmAction
-    @buttonText="Delete"
-    @buttonColor="secondary"
-    @confirmMessage="Confirming will remove the CA certificate information."
-    @onConfirmAction={{this.deleteCaConfig}}
-    data-test-delete-key
-  />
-</Hds::ButtonSet>
+    <div class="box is-fullwidth is-sideless" data-test-edit-config-section>
+      <label for="publicKey" class="is-label">
+        Public key
+      </label>
+      <div class="control">
+        <MaskedInput
+          @name="publickey"
+          @id="publicKey"
+          @value={{@model.publicKey}}
+          @displayOnly={{true}}
+          @allowCopy={{true}}
+          data-test-input="public-key"
+        />
+      </div>
+    </div>
+    <Hds::ButtonSet>
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@model.publicKey}}
+        @onError={{fn (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")}}
+        class="primary"
+      />
+      <ConfirmAction
+        @buttonText="Delete"
+        @buttonColor="secondary"
+        @confirmMessage="Confirming will remove the CA certificate information."
+        @onConfirmAction={{this.deleteCaConfig}}
+        data-test-delete-public-key
+      />
+    </Hds::ButtonSet>
+  {{/if}}
+</form>
diff --git a/ui/app/components/secret-engine/configure-ssh.ts b/ui/app/components/secret-engine/configure-ssh.ts
@@ -24,17 +24,17 @@ import type FlashMessageService from 'vault/services/flash-messages';
  * ```js
  * <SecretEngine::ConfigureSsh
  *    @model={{this.model.ssh-ca-config}}
- *    @backendPath={{this.model.id}}
+ *    @id={{this.model.id}}
  *  />
  * ```
  *
  * @param {string} model - SSH ca-config model
- * @param {string} backendPath - name of the SSH secret engine, ex: 'ssh-123'
+ * @param {string} id - name of the SSH secret engine, ex: 'ssh-123'
  */
 
 interface Args {
   model: CaConfigModel;
-  backendPath: string;
+  id: string;
 }
 
 export default class ConfigureSshComponent extends Component<Args> {
@@ -51,7 +51,7 @@ export default class ConfigureSshComponent extends Component<Args> {
   *save(event: Event) {
     event.preventDefault();
     this.resetErrors();
-    const { backendPath, model } = this.args;
+    const { id, model } = this.args;
     const isValid = this.validate(model);
 
     if (!isValid) return;
@@ -67,7 +67,7 @@ export default class ConfigureSshComponent extends Component<Args> {
     try {
       yield model.save();
       this.transition();
-      this.flashMessages.success(`Successfully saved ${backendPath}'s root configuration.`);
+      this.flashMessages.success(`Successfully saved ${id}'s root configuration.`);
     } catch (error) {
       this.errorMessage = errorMessage(error);
       this.invalidFormAlert = 'There was an error submitting this form.';
@@ -82,11 +82,11 @@ export default class ConfigureSshComponent extends Component<Args> {
 
   transition(isDelete = false) {
     // deleting a key is the only case in which we want to stay on the create/edit page.
-    const { backendPath } = this.args;
+    const { id } = this.args;
     if (isDelete) {
-      this.router.transitionTo('vault.cluster.secrets.backend.configuration.edit', backendPath);
+      this.router.transitionTo('vault.cluster.secrets.backend.configuration.edit', id);
     } else {
-      this.router.transitionTo('vault.cluster.secrets.backend.configuration', backendPath);
+      this.router.transitionTo('vault.cluster.secrets.backend.configuration', id);
     }
   }
 

diff --git a/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs b/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs
@@ -29,7 +29,7 @@
 </Toolbar>
 {{! Currently all WIF configurable engines are covered under one component. SSH is not a WIF engine and has a different workflow deserving of its own component }}
 {{#if (eq this.model.type "ssh")}}
-  <SecretEngine::ConfigureSsh @model={{this.model.first-model}} @backendPath={{this.model.id}} />
+  <SecretEngine::ConfigureSsh @model={{this.model.first-model}} @id={{this.model.id}} />
 {{else}}
   <SecretEngine::ConfigureCreateEdit
     @backendPath={{this.model.id}}