Restructure SSH and AWS configuration screens

changelog/27831.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: For AWS and SSH secret engines hide mount configuration details in toggle and display configuration details or cta.
+```

ui/app/adapters/aws/root-config.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import ApplicationAdapter from '../application';
+import { encodePath } from 'vault/utils/path-encoding-helpers';
+
+export default class AwsRootConfig extends ApplicationAdapter {
+  namespace = 'v1';
+  // For now this is only being used on the vault.cluster.secrets.backend.configuration route. This is a read-only route.
+  // Eventually, this will be used to create the root config for the AWS secret backend, replacing the requests located on the secret-engine adapter.
+  queryRecord(store, type, query) {
+    const { backend } = query;
+    return this.ajax(`/v1/${encodePath(backend)}/config/root`, 'GET').then((resp) => {
+      resp.id = backend;
+      return resp;
+    });
+  }
+}

ui/app/adapters/ssh/ca-config.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import ApplicationAdapter from '../application';
+import { encodePath } from 'vault/utils/path-encoding-helpers';
+
+export default class SshCaConfig extends ApplicationAdapter {
+  namespace = 'v1';
+  // For now this is only being used on the vault.cluster.secrets.backend.configuration route. This is a read-only route.
+  // Eventually, this will be used to create the ca config for the SSH secret backend, replacing the requests located on the secret-engine adapter.
+  queryRecord(store, type, query) {
+    const { backend } = query;
+    return this.ajax(`/v1/${encodePath(backend)}/config/ca`, 'GET').then((resp) => {
+      resp.id = backend;
+      return resp;
+    });
+  }
+}

ui/app/components/secret-engine/configuration-details.hbs

@@ -0,0 +1,44 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+{{#if this.configError}}
+  {{! Surface API errors not associated with empty configuration details }}
+  <Page::Error @error={{this.configError}} />
+{{else if this.configModel}}
+  {{#each this.configModel.attrs as |attr|}}
+    {{#if attr.options.sensitive}}
+      <InfoTableRow
+        alwaysRender={{not (is-empty-value (get @model attr.name))}}
+        @label={{or attr.options.label (to-label attr.name)}}
+        @value={{get this.configModel (or attr.options.fieldValue attr.name)}}
+      >
+        {{#if attr.options.sensitive}}
+          <MaskedInput @value={{get @model attr.name}} @name={{attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
+        {{/if}}
+      </InfoTableRow>
+    {{else}}
+      <InfoTableRow
+        @alwaysRender={{not (is-empty-value (get @model attr.name))}}
+        @label={{or attr.options.label (to-label attr.name)}}
+        @value={{get this.configModel (or attr.options.fieldValue attr.name)}}
+      />
+    {{/if}}
+  {{/each}}
+{{else}}
+  {{! Prompt for a user to configure the secret engine }}
+  <EmptyState
+    data-test-config-cta
+    @title="{{this.typeDisplay}} not configured"
+    @message="Get started by configuring your {{this.typeDisplay}} engine."
+  >
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Configure {{this.typeDisplay}}"
+      @route="vault.cluster.settings.configure-secret-backend"
+      @model={{@model.id}}
+    />
+  </EmptyState>
+{{/if}}

ui/app/components/secret-engine/configuration-details.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { allEngines } from 'vault/helpers/mountable-secret-engines';
+
+import type Store from '@ember-data/store';
+import type SecretEngineModel from 'vault/models/secret-engine';
+import type AdapterError from '@ember-data/adapter';
+import type Model from '@ember-data/model';
+
+/**
+ * @module ConfigurationDetails
+ * `ConfigurationDetails` is used by configurable secret engines (AWS, SSH) to show either an API error, configuration details, or a prompt to configure the engine. Which of these is shown is determined by the engine type and whether the user has configured the engine yet.
+ *
+ * @example
+ * ```js
+ * <SecretEngine::ConfigurationDetails @model={{this.model}} />
+ * ```
+ *
+ * @param {object} model - The secret-engine model to be configured.
+ */
+
+interface Args {
+  model: SecretEngineModel;
+}
+
+interface ConfigError {
+  httpStatus: number | null;
+  message: string | null;
+  errors: object | null;
+}
+
+export default class ConfigurationDetails extends Component<Args> {
+  @service declare readonly store: Store;
+  @tracked configError: ConfigError | null = null;
+  @tracked configModel: Model | null = null;
+
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    const { model } = this.args;
+    // Should not be able to get here without a model, but in case an upstream change allows it, catching the failure.
+    if (!model) {
+      this.configError = {
+        message:
+          'We are unable to access the mount information for this engine. Ask you administrator if you think you should have access to this secret engine.',
+      };
+      return;
+    }
+    const { id, type } = model;
+    // Fetch the config for the engine type.
+    switch (type) {
+      case 'aws':
+        this.fetchAwsRootConfig(id);
+        break;
+      case 'ssh':
+        this.fetchSshCaConfig(id);
+        break;
+    }
+  }
+
+  async fetchAwsRootConfig(backend: string) {
+    try {
+      this.configModel = await this.store.queryRecord('aws/root-config', { backend });
+    } catch (e: AdapterError) {
+      // If the error is something other than 404 "not found" then an API error has come back and this will be displayed to the user as an error.
+      // If it's 404 then configError is not set nor is the configModel and a prompt to configure will be shown.
+      if (e.httpStatus !== 404) {
+        this.configError = e;
+      }
+      return;
+    }
+  }
+
+  async fetchSshCaConfig(backend: string) {
+    try {
+      this.configModel = await this.store.queryRecord('ssh/ca-config', { backend });
+    } catch (e: AdapterError) {
+      // The SSH api does not return a 404 not found but a 400 error after first mounting the engine with the
+      // message that keys have not been configured yet.
+      // We need to check the message of the 400 error and if it's the keys message, return a prompt instead of a configError.
+      if (e.httpStatus !== 404 && e.errors[0] !== `keys haven't been configured yet`) {
+        this.configError = e;
+      }
+      return;
+    }
+  }
+
+  get typeDisplay() {
+    const { type } = this.args.model;
+    return allEngines().find((engine) => engine.type === type)?.displayName;
+  }
+}

ui/app/models/aws/root-config.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Model, { attr } from '@ember-data/model';
+import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
+
+export default class AwsRootConfig extends Model {
+  @attr('string') backend; // dynamic path of secret -- set on response from value passed to queryRecord
+  @attr('string') accessKey;
+  @attr('string') region;
+  @attr('string', {
+    label: 'IAM endpoint',
+  })
+  iamEndpoint;
+  @attr('string', {
+    label: 'STS endpoint',
+  })
+  stsEndpoint;
+  @attr('number', {
+    defaultValue: -1,
+    label: 'Maximum retries',
+    subText: 'Number of max retries the client should use for recoverable errors. Default is -1.',
+  })
+  maxRetries;
+  // there are more options available on the API, but the UI does not support them yet.
+  get attrs() {
+    const keys = ['accessKey', 'region', 'iamEndpoint', 'stsEndpoint', 'maxRetries'];
+    return expandAttributeMeta(this, keys);
+  }
+}

ui/app/models/ssh/ca-config.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Model, { attr } from '@ember-data/model';
+import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
+
+export default class SshCaConfig extends Model {
+  @attr('string') backend; // dynamic path of secret -- set on response from value passed to queryRecord
+  @attr('string', { sensitive: true }) privateKey; // obfuscated, never returned by API
+  @attr('string', { sensitive: true }) publicKey;
+  @attr('boolean', { defaultValue: true })
+  generateSigningKey;
+  // there are more options available on the API, but the UI does not support them yet.
+  get attrs() {
+    const keys = ['publicKey', 'generateSigningKey'];
+    return expandAttributeMeta(this, keys);
+  }
+}

ui/app/templates/vault/cluster/secrets/backend/configuration.hbs

@@ -26,23 +26,28 @@
       </ToolbarLink>
     </ToolbarActions>
   </Toolbar>
-{{/if}}
 
-<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
-  {{#each this.model.attrs as |attr|}}
-    {{#if (eq attr.type "object")}}
-      <InfoTableRow
-        @alwaysRender={{not (is-empty-value (get this.model attr.name))}}
-        @label={{or attr.options.label (to-label attr.name)}}
-        @value={{stringify (get this.model (or attr.options.fieldValue attr.name))}}
-      />
-    {{else}}
-      <InfoTableRow
-        @alwaysRender={{and (not (is-empty-value (get this.model attr.name))) (not-eq attr.name "version")}}
-        @formatTtl={{eq attr.options.editType "ttl"}}
-        @label={{or attr.options.label (to-label attr.name)}}
-        @value={{get this.model (or attr.options.fieldValue attr.name)}}
-      />
-    {{/if}}
-  {{/each}}
-</div>
+  <SecretEngine::ConfigurationDetails @model={{this.model}} />
+
+  <SecretsEngineMountConfig @model={{this.model}} class="has-top-margin-xl has-bottom-margin-xl" data-test-mount-config />
+
+{{else}}
+  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+    {{#each this.model.attrs as |attr|}}
+      {{#if (eq attr.type "object")}}
+        <InfoTableRow
+          @alwaysRender={{not (is-empty-value (get this.model attr.name))}}
+          @label={{or attr.options.label (to-label attr.name)}}
+          @value={{stringify (get this.model (or attr.options.fieldValue attr.name))}}
+        />
+      {{else}}
+        <InfoTableRow
+          @alwaysRender={{and (not (is-empty-value (get this.model attr.name))) (not-eq attr.name "version")}}
+          @formatTtl={{eq attr.options.editType "ttl"}}
+          @label={{or attr.options.label (to-label attr.name)}}
+          @value={{get this.model (or attr.options.fieldValue attr.name)}}
+        />
+      {{/if}}
+    {{/each}}
+  </div>
+{{/if}}

ui/lib/core/addon/components/page/error.hbs

@@ -8,17 +8,17 @@
   data-test-page-error
 >
   {{#if (eq @error.httpStatus 404)}}
-    <h1 class="title is-3 has-text-grey-light">
+    <h1 class="title is-3 has-text-grey-light" data-test-page-error-title={{@error.httpStatus}}>
       404 Not Found
     </h1>
     <p>Sorry, we were unable to find any content at <code>{{@error.path}}</code>.</p>
   {{else if (eq @error.httpStatus 403)}}
-    <h1 class="title is-3 has-text-grey-light">
+    <h1 class="title is-3 has-text-grey-light" data-test-page-error-title={{@error.httpStatus}}>
       Not authorized
     </h1>
     <p>You are not authorized to access content at <code>{{@error.path}}</code>.</p>
   {{else}}
-    <h1 class="title is-3 has-text-grey-light">
+    <h1 class="title is-3 has-text-grey-light" data-test-page-error-title={{@error.httpStatus}}>
       Error
     </h1>
     <p>