UI: glimmerize generate credentials component

changelog/27405.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: AWS credentials form sets credential_type from backing role
+```

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

@@ -40,7 +40,7 @@
             autocomplete="off"
             spellcheck="false"
             @value={{@accessKey}}
-            data-test-aws-input="accessKey"
+            data-test-input="accessKey"
           />
         </div>
       </div>
@@ -56,7 +56,7 @@
             name="secret"
             class="input"
             @value={{@secretKey}}
-            data-test-aws-input="secretKey"
+            data-test-input="secretKey"
           />
         </div>
       </div>
@@ -104,7 +104,7 @@
       {{/if}}
 
       <div class="box is-bottomless is-fullwidth">
-        <Hds::Button @text="Save" data-test-aws-input="root-save" type="submit" />
+        <Hds::Button @text="Save" data-test-save type="submit" />
       </div>
     </form>
   </T.Panel>
@@ -134,7 +134,7 @@
         @onChange={{fn this.handleTtlChange "leaseMax"}}
       />
       <div class="box is-bottomless is-fullwidth">
-        <Hds::Button @text="Save" data-test-aws-input="lease-save" type="submit" />
+        <Hds::Button @text="Save" data-test-save type="submit" />
       </div>
     </form>
   </T.Panel>

ui/app/templates/components/generate-credentials.hbs → ui/app/components/generate-credentials.hbs

@@ -7,13 +7,13 @@
   <p.top>
     <Hds::Breadcrumb>
       <Hds::Breadcrumb::Item
-        @text={{this.backendPath}}
+        @text={{@backendPath}}
         @route="vault.cluster.secrets.backend"
-        @model={{this.backendPath}}
+        @model={{@backendPath}}
         data-test-link="role-list"
       />
-      <Hds::Breadcrumb::Item @text="Credentials" @route="vault.cluster.secrets.backend" @model={{this.backendPath}} />
-      <Hds::Breadcrumb::Item @text={{this.roleName}} @route="vault.cluster.secrets.backend.show" @model={{this.roleName}} />
+      <Hds::Breadcrumb::Item @text="Credentials" @route="vault.cluster.secrets.backend" @model={{@backendPath}} />
+      <Hds::Breadcrumb::Item @text={{@roleName}} @route="vault.cluster.secrets.backend.show" @model={{@roleName}} />
       <Hds::Breadcrumb::Item @text={{this.options.title}} @current={{true}} />
     </Hds::Breadcrumb>
   </p.top>
@@ -24,7 +24,7 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if this.model.hasGenerated}}
+{{#if this.hasGenerated}}
   <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
     <MessageError @model={{this.model}} />
     {{#unless this.model.isError}}
@@ -35,48 +35,42 @@
         </A.Description>
       </Hds::Alert>
     {{/unless}}
-    {{#each this.model.attrs as |attr|}}
-      {{#if (eq attr.type "object")}}
-        <InfoTableRow
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{stringify (get this.model attr.name)}}
-        />
-      {{else}}
-        {{#if
-          (or
-            (eq attr.name "key")
-            (eq attr.name "secretKey")
-            (eq attr.name "securityToken")
-            (eq attr.name "privateKey")
-            attr.options.masked
-          )
-        }}
-          {{#if (get this.model attr.name)}}
-            <InfoTableRow
-              @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-              @value={{get this.model attr.name}}
-            >
-              <MaskedInput
-                @value={{get this.model attr.name}}
-                @name={{attr.name}}
-                @displayOnly={{true}}
-                @allowCopy={{true}}
-              />
-            </InfoTableRow>
-          {{/if}}
-        {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
+    {{#each this.displayFields as |key|}}
+      {{#let (get this.model.allByKey key) as |attr|}}
+        {{#if (eq attr.type "object")}}
           <InfoTableRow
-            data-test-table-row
             @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-            @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a"}}
+            @value={{stringify (get this.model attr.name)}}
           />
         {{else}}
-          <InfoTableRow
-            @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-            @value={{get this.model attr.name}}
-          />
+          {{#if attr.options.masked}}
+            {{#if (get this.model attr.name)}}
+              <InfoTableRow
+                @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
+                @value={{get this.model attr.name}}
+              >
+                <MaskedInput
+                  @value={{get this.model attr.name}}
+                  @name={{attr.name}}
+                  @displayOnly={{true}}
+                  @allowCopy={{true}}
+                />
+              </InfoTableRow>
+            {{/if}}
+          {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
+            <InfoTableRow
+              data-test-table-row
+              @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
+              @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a"}}
+            />
+          {{else}}
+            <InfoTableRow
+              @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
+              @value={{get this.model attr.name}}
+            />
+          {{/if}}
         {{/if}}
-      {{/if}}
+      {{/let}}
     {{/each}}
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
@@ -106,34 +100,25 @@
           @text="Back"
           @color="secondary"
           @route="vault.cluster.secrets.backend.list-root"
-          @model={{this.backendPath}}
-          data-test-secret-generate-back={{true}}
+          @model={{@backendPath}}
+          data-test-back-button
         />
       {{else}}
-        <Hds::Button
-          @text="Back"
-          @color="secondary"
-          {{on "click" (action "newModel")}}
-          data-test-secret-generate-back="true"
-        />
+        <Hds::Button @text="Back" @color="secondary" {{on "click" this.reset}} data-test-back-button />
       {{/if}}
     </div>
   </div>
 {{else}}
-  <form {{action "create" on="submit"}} data-test-secret-generate-form="true">
+  <form {{on "submit" this.create}} data-test-secret-generate-form>
     <div class="box is-sideless no-padding-top is-fullwidth is-marginless">
       <NamespaceReminder @mode="generate" @noun="credential" />
       <MessageError @model={{this.model}} />
-      {{#if this.model.helpText}}
-        <p class="is-hint">{{this.model.helpText}}</p>
-      {{/if}}
-      {{#if this.model.fieldGroups}}
-        <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
-      {{else}}
-        {{#each this.model.attrs as |attr|}}
-          <FormField data-test-field={{true}} @attr={{attr}} @model={{this.model}} />
-        {{/each}}
+      {{#if this.helpText}}
+        <p class="is-hint">{{this.helpText}}</p>
       {{/if}}
+      {{#each this.formFields as |key|}}
+        <FormField data-test-field @attr={{get this.model.allByKey key}} @model={{this.model}} />
+      {{/each}}
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">
       <Hds::ButtonSet>
@@ -142,14 +127,14 @@
           @icon={{if this.loading "loading"}}
           type="submit"
           disabled={{this.loading}}
-          data-test-secret-generate={{true}}
+          data-test-save
         />
         <Hds::Button
           @text="Cancel"
           @route="vault.cluster.secrets.backend.list-root"
           @color="secondary"
-          @model={{this.backendPath}}
-          data-test-secret-generate-cancel={{true}}
+          @model={{@backendPath}}
+          data-test-cancel
         />
       </Hds::ButtonSet>
     </div>