UI: Migrate <ConfigureAwsSecret /> to HDS & TS (#27367)

* feat: migrate configure-aws-secret to HDS::Tabs

* chore: co-locate configure-aws-secret template

* chore: convert configure-aws-secret to TS

* tests: fix aws acceptance tests

ui/app/components/configure-aws-secret.hbs

@@ -0,0 +1,141 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Hds::Tabs class="has-top-margin-l" as |T|>
+  <T.Tab data-test-tab="access-to-aws">
+    Dynamic IAM root credentials
+  </T.Tab>
+  <T.Tab data-test-tab="lease">
+    Leases
+  </T.Tab>
+  <T.Panel>
+    <form
+      onsubmit={{action
+        "saveRootCreds"
+        (hash access_key=@accessKey iam_endpoint=@iamEndpoint sts_endpoint=@stsEndpoint secret_key=@secretKey region=@region)
+      }}
+      data-test-aws-root-creds-form="true"
+      aria-label="save root creds form"
+    >
+      <div class="box is-fullwidth is-shadowless is-marginless">
+        <NamespaceReminder @mode="save" @noun="configuration" />
+        <p class="has-text-grey-dark">
+          Note: the client uses the official AWS SDK and will use the specified credentials, environment credentials, shared
+          file credentials, or IAM role/ECS task credentials in that order.
+        </p>
+      </div>
+
+      <div class="field">
+        <label for="access" class="is-label">
+          Access key
+        </label>
+        <div class="control">
+          <Input
+            @type="text"
+            id="access"
+            name="access"
+            class="input"
+            autocomplete="off"
+            spellcheck="false"
+            @value={{@accessKey}}
+            data-test-aws-input="accessKey"
+          />
+        </div>
+      </div>
+
+      <div class="field">
+        <label for="secret" class="is-label">
+          Secret key
+        </label>
+        <div class="control">
+          <Input
+            @type="password"
+            id="secret"
+            name="secret"
+            class="input"
+            @value={{@secretKey}}
+            data-test-aws-input="secretKey"
+          />
+        </div>
+      </div>
+
+      <ToggleButton @isOpen={{this.showOptions}} @onClick={{fn (mut this.showOptions)}} />
+      {{#if this.showOptions}}
+        <div class="box is-marginless">
+          <div class="field">
+            <label for="region" class="is-label">
+              Region
+            </label>
+            <div class="control is-expanded">
+              <div class="select is-fullwidth">
+                <select
+                  name="region"
+                  id="region"
+                  onchange={{action (mut @region) value="target.value"}}
+                  data-test-input="region"
+                >
+                  <option value=""></option>
+                  {{#each (aws-regions) as |val|}}
+                    <option>{{val}}</option>
+                  {{/each}}
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="field">
+            <label for="iam" class="is-label">
+              IAM endpoint
+            </label>
+            <div class="control">
+              <Input @type="text" id="iam" name="iam" class="input" @value={{@iamEndpoint}} />
+            </div>
+          </div>
+          <div class="field">
+            <label for="sts" class="is-label">
+              STS endpoint
+            </label>
+            <div class="control">
+              <Input @type="text" id="sts" name="sts" class="input" @value={{@stsEndpoint}} />
+            </div>
+          </div>
+        </div>
+      {{/if}}
+
+      <div class="box is-bottomless is-fullwidth">
+        <Hds::Button @text="Save" data-test-aws-input="root-save" type="submit" />
+      </div>
+    </form>
+  </T.Panel>
+  <T.Panel>
+    <form
+      onsubmit={{action "saveLease" (hash lease=@model.lease lease_max=@model.leaseMax)}}
+      aria-label="save lease form"
+      data-test-aws-leases-form="true"
+    >
+      <div class="box is-fullwidth is-shadowless is-marginless">
+        <NamespaceReminder @mode="saved" @noun="configuration" />
+        <MessageError @model={{@model}} />
+        <p class="has-text-grey-dark">
+          If you do not supply lease settings, we will use the default values in AWS.
+        </p>
+      </div>
+      <TtlPicker
+        @label="Lease"
+        @initialValue={{@model.lease}}
+        @initialEnabled={{@model.lease}}
+        @onChange={{fn this.handleTtlChange "lease"}}
+      />
+      <TtlPicker
+        @label="Maximum Lease"
+        @initialValue={{@model.leaseMax}}
+        @initialEnabled={{@model.leaseMax}}
+        @onChange={{fn this.handleTtlChange "leaseMax"}}
+      />
+      <div class="box is-bottomless is-fullwidth">
+        <Hds::Button @text="Save" data-test-aws-input="lease-save" type="submit" />
+      </div>
+    </form>
+  </T.Panel>
+</Hds::Tabs>

ui/app/components/configure-aws-secret.js → ui/app/components/configure-aws-secret.ts

@@ -6,6 +6,9 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
+import type SecretEngineModel from 'vault/models/secret-engine';
+import type { TtlEvent } from 'vault/app-types';
+
 /**
  * @module ConfigureAwsSecretComponent
  *
@@ -34,21 +37,44 @@ import { action } from '@ember/object';
  * @param {Function} saveAWSLease - parent action which updates AWS lease information
  *
  */
-export default class ConfigureAwsSecretComponent extends Component {
+
+type AWSRootCredsFields = {
+  access_key: string | null;
+  iam_endpoint: string | null;
+  sts_endpoint: string | null;
+  secret_key: string | null;
+  region: string | null;
+};
+
+type LeaseFields = { lease: string; lease_max: string };
+
+interface Args {
+  model: SecretEngineModel;
+  tab?: string;
+  accessKey: string;
+  secretKey: string;
+  region: string;
+  iamEndpoint: string;
+  stsEndpoint: string;
+  saveAWSRoot: (data: AWSRootCredsFields) => void;
+  saveAWSLease: (data: LeaseFields) => void;
+}
+
+export default class ConfigureAwsSecretComponent extends Component<Args> {
   @action
-  saveRootCreds(data, event) {
+  saveRootCreds(data: AWSRootCredsFields, event: Event) {
     event.preventDefault();
     this.args.saveAWSRoot(data);
   }
 
   @action
-  saveLease(data, event) {
+  saveLease(data: LeaseFields, event: Event) {
     event.preventDefault();
     this.args.saveAWSLease(data);
   }
 
   @action
-  handleTtlChange(name, ttlObj) {
+  handleTtlChange(name: string, ttlObj: TtlEvent) {
     // lease values cannot be undefined, set to 0 to use default
     const valueToSet = ttlObj.enabled ? ttlObj.goSafeTimeString : 0;
     this.args.model.set(name, valueToSet);