From 20181c978fc8b5e5509d084f2b211b5891be254d Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Thu, 22 Feb 2024 13:22:18 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Migrate=20`form.inpu?=
 =?UTF-8?q?t`=20to=20`Hds::TextInput::Field`=20(#2142)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Migrate `form.input` to `Hds::TextInput::Field`

Migrate the use of `form.input` to `Hds::TextInput::Field` for OIDC and
Password auth-method form

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459

* Update index.hbs

move `name` attribute to top of attribute list for readers

* refactor: 💡 fix `step` and `min` arguments

fix `step` and `min` arguments

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459

* refactor: 💡 clean up order of arguments and add `data-test` att

clean up order of arguments and add `data-test` attributes

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459

* refactor: 💡 Add `@isOptional` attribute to all needed fields

Add `@isOptiona` attributes to all needed fields

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459

* Update index.hbs

add `@hasVisibilityToggle`

* refactor: 💡 fix lint

fix lint

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459

* refactor: 💡 quick attribute refactor

quick attribute refactor

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12459
---
 .../form/auth-method/oidc/index.hbs           | 188 +++++++++---------
 .../form/auth-method/password/index.hbs       |  43 ++--
 .../acceptance/auth-methods/update-test.js    |   3 +-
 3 files changed, 114 insertions(+), 120 deletions(-)

diff --git a/ui/admin/app/components/form/auth-method/oidc/index.hbs b/ui/admin/app/components/form/auth-method/oidc/index.hbs
index cec2c67eb..3f080377e 100644
--- a/ui/admin/app/components/form/auth-method/oidc/index.hbs
+++ b/ui/admin/app/components/form/auth-method/oidc/index.hbs
@@ -12,37 +12,35 @@
   as |form|
 >
 
-  <form.input
-    @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
+  <InfoField @value={{@model.type}} disabled={{form.disabled}} as |F|>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </InfoField>
 
-  <form.input
-    @name='name'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.name}}
+    @isOptional={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
     {{#if @model.errors.name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message data-test-error-message-name>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Textarea::Field
-    @isOptional={{true}}
+    name='description'
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
-    name='description'
+    @isOptional={{true}}
     disabled={{form.disabled}}
     as |F|
   >
@@ -57,24 +55,25 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @name='issuer'
-    @type='text'
+  <Hds::Form::TextInput::Field
     @value={{@model.issuer}}
-    @label={{t 'form.issuer.label'}}
-    @helperText={{t 'form.issuer.help'}}
-    @error={{@model.errors.issuer}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.issuer}}
+    @isOptional={{true}}
+    disabled={{form.disabled}}
+    name='issuer'
+    {{on 'input' (set-from-event @model 'issuer')}}
+    as |F|
   >
+    <F.Label>{{t 'form.issuer.label'}}</F.Label>
+    <F.HelperText>{{t 'form.issuer.help'}}</F.HelperText>
     {{#if @model.errors.issuer}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.issuer as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Checkbox::Field
     name='disable_discovered_config_validation'
@@ -95,52 +94,56 @@
     </F.HelperText>
   </Hds::Form::Checkbox::Field>
 
-  <form.input
-    @name='client_id'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='client_id'
     @value={{@model.client_id}}
-    @label={{t 'form.client_id.label'}}
-    @helperText={{t 'form.client_id.help'}}
-    @error={{@model.errors.client_id}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.client_id}}
+    @isOptional={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'client_id')}}
+    as |F|
   >
+    <F.Label>{{t 'form.client_id.label'}}</F.Label>
+    <F.HelperText>{{t 'form.client_id.help'}}</F.HelperText>
     {{#if @model.errors.client_id}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.client_id as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='client_secret'
-    @type='password'
+  <Hds::Form::TextInput::Field
+    name='client_secret'
     @value={{@model.client_secret}}
-    @label={{t 'form.client_secret.label'}}
-    @helperText={{t 'form.client_secret.help'}}
-    @error={{@model.errors.client_secret}}
-    readonly={{false}}
+    @isInvalid={{@model.errors.client_secret}}
+    @isOptional={{true}}
+    disabled={{form.disabled}}
     @hasVisibilityToggle={{false}}
-    as |field|
+    type='password'
+    {{on 'input' (set-from-event @model 'client_secret')}}
+    as |F|
   >
+    <F.Label>{{t 'form.client_secret.label'}}</F.Label>
+    <F.HelperText>{{t 'form.client_secret.help'}}</F.HelperText>
     {{#if @model.errors.client_secret}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.client_secret as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   {{#unless @model.isNew}}
-    <form.input
+    <Hds::Form::TextInput::Field
       @value={{@model.client_secret_hmac}}
-      @label={{t 'form.client_secret_hmac.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>{{t 'form.client_secret_hmac.label'}}</F.Label>
+    </Hds::Form::TextInput::Field>
   {{/unless}}
 
   {{! Signing Algorithms }}
@@ -406,45 +409,43 @@
 
   </Form::Field::ListWrapper>
 
-  <form.input
-    @name='max_age'
-    @type='number'
+  <Hds::Form::TextInput::Field
+    name='max_age'
     @value={{@model.max_age}}
-    @label={{t 'form.max_age.label'}}
-    @helperText={{t 'form.max_age.help'}}
-    @error={{@model.errors.max_age}}
-    readonly={{false}}
-    step='1'
-    min='0'
-    as |field|
+    @isInvalid={{@model.errors.max_age}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'max_age')}}
+    as |F|
   >
+    <F.Label>{{t 'form.max_age.label'}}</F.Label>
+    <F.HelperText>{{t 'form.max_age.help'}}</F.HelperText>
     {{#if @model.errors.max_age}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.max_age as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='api_url_prefix'
-    @type='test'
+  <Hds::Form::TextInput::Field
+    name='api_url_prefix'
     @value={{@model.api_url_prefix}}
-    @label={{t 'form.api_url_prefix.label'}}
-    @helperText={{t 'form.api_url_prefix.help'}}
-    @error={{@model.errors.api_url_prefix}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.api_url_prefix}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'api_url_prefix')}}
+    as |F|
   >
+    <F.Label>{{t 'form.api_url_prefix.label'}}</F.Label>
+    <F.HelperText>{{t 'form.api_url_prefix.help'}}</F.HelperText>
     {{#if @model.errors.api_url_prefix}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.api_url_prefix as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Fieldset @isOptional={{true}} as |F|>
     <F.Legend>{{t 'form.prompts.label'}}</F.Legend>
@@ -499,13 +500,14 @@
   </Hds::Form::Fieldset>
 
   {{#unless @model.isNew}}
-    <form.input
+    <Hds::Form::TextInput::Field
       @value={{@model.callback_url}}
-      @label={{t 'form.callback_url.label'}}
-      @helperText={{t 'form.callback_url.help'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>{{t 'form.callback_url.label'}}</F.Label>
+      <F.HelperText>{{t 'form.callback_url.help'}}</F.HelperText>
+    </Hds::Form::TextInput::Field>
   {{/unless}}
 
   {{#if (can 'save model' @model)}}
diff --git a/ui/admin/app/components/form/auth-method/password/index.hbs b/ui/admin/app/components/form/auth-method/password/index.hbs
index 8970d3541..eb7af17e1 100644
--- a/ui/admin/app/components/form/auth-method/password/index.hbs
+++ b/ui/admin/app/components/form/auth-method/password/index.hbs
@@ -10,49 +10,40 @@
   @showEditToggle={{if @model.isNew false true}}
   as |form|
 >
-  <form.input
-    @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
+  <InfoField @value={{@model.type}} disabled={{form.disabled}} as |F|>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </InfoField>
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.name}}
+    @isOptional={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
     {{#if @model.errors.name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message data-test-error-message-name>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Textarea::Field
+    name='description'
     @isOptional={{true}}
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
-    name='description'
     disabled={{form.disabled}}
     as |F|
   >
     <F.Label>{{t 'form.description.label'}}</F.Label>
     <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
-    {{#if @model.errors.description}}
-      <F.Error as |E|>
-        {{#each @model.errors.description as |error|}}
-          <E.Message>{{error.message}}</E.Message>
-        {{/each}}
-      </F.Error>
-    {{/if}}
   </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
diff --git a/ui/admin/tests/acceptance/auth-methods/update-test.js b/ui/admin/tests/acceptance/auth-methods/update-test.js
index 7ff7e80f2..a75a96f88 100644
--- a/ui/admin/tests/acceptance/auth-methods/update-test.js
+++ b/ui/admin/tests/acceptance/auth-methods/update-test.js
@@ -355,8 +355,9 @@ module('Acceptance | auth-methods | update', function (hooks) {
     await fillIn(NAME_INPUT_SELECTOR, 'existing auth method');
     await click(SAVE_BTN_SELECTOR);
     await a11yAudit();
+
     assert.dom(ERROR_MSG_SELECTOR).hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('.hds-form-error__message').hasText('Name is required.');
   });
 
   test('saving an existing ldap auth method with invalid fields displays error messages', async function (assert) {