From 7dab184bb9d0beb029c419a6d02ed2804d18e37d Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Thu, 7 Mar 2024 10:12:33 -0500
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Migrate=20`form.input`?=
 =?UTF-8?q?=20to=20`Hds:TExtInput::Field`=20(#2149)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 Migrate `form.input` to `Hds:TExtInput::Field`

Migrate `form/account/oidc` and `form/account/password` forms to use
`Hds::TextInput::Field` instead of `form.input`

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

* refactor: 💡 argument clean up

argument clean up

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

* refactor: 💡 switch to `readonly` arument instead of `disabled`

switch to `readonly` arument instead of `disabled`

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

* refactor: 💡 fix incorrect attributes

fix incorrect attributes

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

* refactor: 💡 fix failing test

fix failing test

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12457
---
 .../components/form/account/oidc/index.hbs    | 118 ++++++++----------
 .../form/account/password/index.hbs           |  84 ++++++-------
 .../tests/acceptance/accounts/create-test.js  |  10 +-
 .../tests/acceptance/accounts/update-test.js  |   2 +-
 4 files changed, 102 insertions(+), 112 deletions(-)

diff --git a/ui/admin/app/components/form/account/oidc/index.hbs b/ui/admin/app/components/form/account/oidc/index.hbs
index 706858b92..2d01efbcf 100644
--- a/ui/admin/app/components/form/account/oidc/index.hbs
+++ b/ui/admin/app/components/form/account/oidc/index.hbs
@@ -10,58 +10,48 @@
   @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}} readonly={{true}} as |F|>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </InfoField>
 
   {{#unless @model.isNew}}
-    <form.input
-      @value={{@model.issuer}}
-      @label={{t 'form.issuer.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-    <form.input
-      @value={{@model.subject}}
-      @label={{t 'form.subject.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-    <form.input
-      @value={{@model.email}}
-      @label={{t 'form.email.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-    <form.input
-      @value={{@model.full_name}}
-      @label={{t 'form.full_name.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
+
+    <InfoField @value={{@model.issuer}} readonly={{true}} as |F|>
+      <F.Label>{{t 'form.issuer.label'}}</F.Label>
+    </InfoField>
+
+    <InfoField @value={{@model.subject}} readonly={{true}} as |F|>
+      <F.Label>{{t 'form.subject.label'}}</F.Label>
+    </InfoField>
+
+    <InfoField @value={{@model.email}} readonly={{true}} as |F|>
+      <F.Label>{{t 'form.email.label'}}</F.Label>
+    </InfoField>
+
+    <InfoField @value={{@model.full_name}} readonly={{true}} as |F|>
+      <F.Label>{{t 'form.full_name.label'}}</F.Label>
+    </InfoField>
   {{/unless}}
 
-  <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
     @isOptional={{true}}
@@ -83,41 +73,41 @@
   </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
-    <form.input
-      @name='issuer'
-      @type='text'
+    <Hds::Form::TextInput::Field
+      name='issuer'
       @value={{@model.issuer}}
-      @label={{t 'form.issuer.label'}}
-      @error={{@model.errors.issuer}}
-      readonly={{false}}
-      as |field|
+      @isInvalid={{@model.errors.issuer}}
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'issuer')}}
+      as |F|
     >
+      <F.Label>{{t 'form.issuer.label'}}</F.Label>
       {{#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>
 
-    <form.input
-      @name='subject'
-      @type='text'
+    <Hds::Form::TextInput::Field
+      name='subject'
       @value={{@model.subject}}
-      @label={{t 'form.subject.label'}}
-      @error={{@model.errors.subject}}
-      readonly={{false}}
-      as |field|
+      @isInvalid={{@model.errors.subject}}
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'subject')}}
+      as |F|
     >
+      <F.Label>{{t 'form.subject.label'}}</F.Label>
       {{#if @model.errors.subject}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.subject 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>
   {{/if}}
 
   {{#if (can 'save model' @model)}}
diff --git a/ui/admin/app/components/form/account/password/index.hbs b/ui/admin/app/components/form/account/password/index.hbs
index bc1a2bcd9..0487dbcfb 100644
--- a/ui/admin/app/components/form/account/password/index.hbs
+++ b/ui/admin/app/components/form/account/password/index.hbs
@@ -10,37 +10,35 @@
   @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}} readonly={{true}} 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
-    @isOptional={{true}}
+    name='description'
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
-    name='description'
+    @isOptional={{true}}
     disabled={{form.disabled}}
     as |F|
   >
@@ -55,43 +53,45 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @name='login_name'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='login_name'
     @value={{@model.login_name}}
-    @label={{t 'form.login_name.label'}}
-    @error={{@model.errors.login_name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.login_name}}
+    @isRequired={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'login_name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.login_name.label'}}</F.Label>
     {{#if @model.errors.login_name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.login_name 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>
 
   {{#if @model.isNew}}
-    <form.input
-      @name='password'
+    <Hds::Form::TextInput::Field
+      name='password'
       @type='password'
-      @value={{this.password}}
-      @label={{t 'form.password.label'}}
-      @error={{@model.errors.password}}
-      readonly={{false}}
+      @value={{@model.password}}
+      @isInvalid={{@model.errors.password}}
+      disabled={{form.disabled}}
       autocomplete='new-password'
-      as |field|
+      {{on 'input' (set-from-event @model 'password')}}
+      as |F|
     >
+      <F.Label>{{t 'form.password.label'}}</F.Label>
       {{#if @model.errors.password}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.password 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>
   {{/if}}
 
   {{#if (can 'save model' @model)}}
diff --git a/ui/admin/tests/acceptance/accounts/create-test.js b/ui/admin/tests/acceptance/accounts/create-test.js
index a5cc8ec3c..809db716d 100644
--- a/ui/admin/tests/acceptance/accounts/create-test.js
+++ b/ui/admin/tests/acceptance/accounts/create-test.js
@@ -134,18 +134,18 @@ module('Acceptance | accounts | create', function (hooks) {
     const accountsCount = this.server.db.accounts.length;
     await visit(urls.newAccount);
     await fillIn('[name="name"]', 'Account name');
-    await click('form button:not([type="submit"])');
-    assert.strictEqual(this.server.db.accounts.length, accountsCount);
+    await click('.rose-form-actions [type="button"]');
     assert.strictEqual(currentURL(), urls.accounts);
+    assert.strictEqual(this.server.db.accounts.length, accountsCount);
   });
 
   test('can cancel a new LDAP account creation', async function (assert) {
     const accountsCount = this.server.db.accounts.length;
     await visit(urls.newAccount);
     await fillIn('[name="name"]', 'Account name');
-    await click('form button:not([type="submit"])');
-    assert.strictEqual(this.server.db.accounts.length, accountsCount);
+    await click('.rose-form-actions [type="button"]');
     assert.strictEqual(currentURL(), urls.accounts);
+    assert.strictEqual(this.server.db.accounts.length, accountsCount);
   });
 
   test('saving a new account with invalid fields displays error messages', async function (assert) {
@@ -178,7 +178,7 @@ module('Acceptance | accounts | create', function (hooks) {
       'Displays primary error message.',
     );
     assert.strictEqual(
-      find('.rose-form-error-message').textContent.trim(),
+      find('[data-test-error-message-name]').textContent.trim(),
       'Name is required.',
       'Displays field-level errors.',
     );
diff --git a/ui/admin/tests/acceptance/accounts/update-test.js b/ui/admin/tests/acceptance/accounts/update-test.js
index b25e18446..a3ef29512 100644
--- a/ui/admin/tests/acceptance/accounts/update-test.js
+++ b/ui/admin/tests/acceptance/accounts/update-test.js
@@ -158,7 +158,7 @@ module('Acceptance | accounts | update', function (hooks) {
       'Displays primary error message.',
     );
     assert.strictEqual(
-      find('.rose-form-error-message').textContent.trim(),
+      find('[data-test-error-message-name]').textContent.trim(),
       'Name is required.',
       'Displays field-level errors.',
     );