chore: 🤖 Migrate form.input to Hds:TExtInput::Field (#2149)

* 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

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

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

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

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