From cf5334556f68d0c6351481c53b69678fef6b39ac Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Tue, 27 Feb 2024 14:57:54 -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(#2150)?=
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/manage-groups/oidc`, `form/user` and `form/worker` forms
to use `Hds::TextInput::Field` instead of `form.input`

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

* refactor: 💡 argument clean up

argument clean up

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

* refactor: 💡 refactor InfoField arguments for `readonly`

Refactor InfoField component's arguments for `readonly` instead of
`disabled`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12473
---
 .../form/managed-group/oidc/index.hbs         | 60 ++++++++---------
 ui/admin/app/components/form/user/index.hbs   | 29 ++++----
 ui/admin/app/components/form/worker/index.hbs | 67 +++++++++----------
 .../acceptance/managed-groups/create-test.js  |  2 +-
 .../tests/acceptance/users/create-test.js     |  2 +-
 .../tests/acceptance/users/update-test.js     |  2 +-
 .../tests/acceptance/workers/update-test.js   |  2 +-
 7 files changed, 79 insertions(+), 85 deletions(-)

diff --git a/ui/admin/app/components/form/managed-group/oidc/index.hbs b/ui/admin/app/components/form/managed-group/oidc/index.hbs
index 316c7fb75..8fc6e7732 100644
--- a/ui/admin/app/components/form/managed-group/oidc/index.hbs
+++ b/ui/admin/app/components/form/managed-group/oidc/index.hbs
@@ -10,31 +10,29 @@
   @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.error.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}}
@@ -55,23 +53,25 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @name='filter'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='filter'
     @value={{@model.filter_string}}
-    @label={{t 'form.filter.label'}}
-    @error={{@model.errors.filter_string}}
-    @helperText={{t 'form.filter.help'}}
-    as |field|
+    @isInvalid={{@model.errors.filter_string}}
+    @isRequired={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'filter_string')}}
+    as |F|
   >
+    <F.Label>{{t 'form.filter.label'}}</F.Label>
+    <F.HelperText>{{t 'form.filter.help'}}</F.HelperText>
     {{#if @model.errors.filter_string}}
-      <field.errors as |errors|>
-        {{#each @model.errors.filter_string as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+      <F.Error as |E|>
+        {{#each @model.errors.name as |error|}}
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/app/components/form/user/index.hbs b/ui/admin/app/components/form/user/index.hbs
index 9dda5c39d..c0d84d690 100644
--- a/ui/admin/app/components/form/user/index.hbs
+++ b/ui/admin/app/components/form/user/index.hbs
@@ -11,30 +11,31 @@
   as |form|
 >
 
-  <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|
   >
diff --git a/ui/admin/app/components/form/worker/index.hbs b/ui/admin/app/components/form/worker/index.hbs
index be89cfa1a..d72c77307 100644
--- a/ui/admin/app/components/form/worker/index.hbs
+++ b/ui/admin/app/components/form/worker/index.hbs
@@ -11,30 +11,31 @@
   as |form|
 >
 
-  <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|
   >
@@ -73,42 +74,34 @@
     </F.Control>
   </Hds::Form::Fieldset>
 
-  <form.input
-    @name='address'
-    @type='url'
-    @value={{@model.address}}
-    @label={{t 'form.address.label'}}
-    @helperText={{t 'form.worker_address.help'}}
-    @disabled={{true}}
-    readonly={{true}}
-  />
+  <InfoField @value={{@model.address}} disabled={{form.disabled}} as |F|>
+    <F.Label>{{t 'form.address.label'}}</F.Label>
+    <F.HelperText>{{t 'form.worker_address.help'}}</F.HelperText>
+  </InfoField>
+
   {{#let
     (relative-datetime-live @model.last_status_time)
     (format-date @model.last_status_time format='yymmddt')
     as |relativeDate customFormat|
   }}
-    <form.input
-      @name='last seen'
-      @type='datetime'
+    <InfoField
       @value={{if
         @model.last_status_time
         (concat relativeDate ', ' customFormat)
       }}
-      @label={{t 'form.worker_last_seen.label'}}
-      @helperText={{t 'form.worker_last_seen.help'}}
-      @disabled={{true}}
       readonly={{true}}
-    />
+      as |F|
+    >
+      <F.Label>{{t 'form.worker_last_seen.label'}}</F.Label>
+      <F.HelperText>{{t 'form.worker_last_seen.help'}}</F.HelperText>
+    </InfoField>
+
   {{/let}}
 
-  <form.input
-    @name='release version'
-    @value={{@model.release_version}}
-    @label={{t 'form.worker_release_version.label'}}
-    @helperText={{t 'form.worker_release_version.help'}}
-    @disabled={{true}}
-    readonly={{true}}
-  />
+  <InfoField @value={{@model.release_version}} readonly={{true}} as |F|>
+    <F.Label>{{t 'form.worker_release_version.label'}}</F.Label>
+    <F.HelperText>{{t 'form.worker_release_version.help'}}</F.HelperText>
+  </InfoField>
 
   {{#if (can 'save worker' @model)}}
     <form.actions
diff --git a/ui/admin/tests/acceptance/managed-groups/create-test.js b/ui/admin/tests/acceptance/managed-groups/create-test.js
index c84a49306..b306ce51d 100644
--- a/ui/admin/tests/acceptance/managed-groups/create-test.js
+++ b/ui/admin/tests/acceptance/managed-groups/create-test.js
@@ -201,7 +201,7 @@ module('Acceptance | managed-groups | create', function (hooks) {
     await a11yAudit();
 
     assert.dom(ERROR_MSG_SELECTOR).hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('[data-test-error-message-name]').hasText('Name is required.');
   });
 
   test('When user saving a new ldap managed group with invalid fields displays error message', async function (assert) {
diff --git a/ui/admin/tests/acceptance/users/create-test.js b/ui/admin/tests/acceptance/users/create-test.js
index d4e88e0a9..f8aee7c97 100644
--- a/ui/admin/tests/acceptance/users/create-test.js
+++ b/ui/admin/tests/acceptance/users/create-test.js
@@ -138,7 +138,7 @@ module('Acceptance | users | create', function (hooks) {
 
     assert.strictEqual(getUsersCount(), usersCount);
     assert.dom('.rose-notification-body').hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('[data-test-error-message-name]').hasText('Name is required.');
   });
 
   test('users cannot directly navigate to new user route without proper authorization', async function (assert) {
diff --git a/ui/admin/tests/acceptance/users/update-test.js b/ui/admin/tests/acceptance/users/update-test.js
index e552173de..a1017dafa 100644
--- a/ui/admin/tests/acceptance/users/update-test.js
+++ b/ui/admin/tests/acceptance/users/update-test.js
@@ -115,7 +115,7 @@ module('Acceptance | users | update', function (hooks) {
     await click('[type="submit"]');
 
     assert.dom('.rose-notification-body').hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('[data-test-error-message-name]').hasText('Name is required.');
   });
 
   test('can discard unsaved user changes via dialog', async function (assert) {
diff --git a/ui/admin/tests/acceptance/workers/update-test.js b/ui/admin/tests/acceptance/workers/update-test.js
index 8a3832cea..d93802320 100644
--- a/ui/admin/tests/acceptance/workers/update-test.js
+++ b/ui/admin/tests/acceptance/workers/update-test.js
@@ -92,7 +92,7 @@ module('Acceptance | workers | 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.',
     );