chore: 🤖 Migrate form.input to Hds::TextInput:Field (#2150)

* 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

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

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|
   >

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

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) {

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) {

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) {

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.',
     );