From 26a77edbc7d00f37460c72dcd907fd89dbe0a1e3 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Tue, 27 Feb 2024 13:52:50 -0500
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Migrate=20`form.inpu`?=
 =?UTF-8?q?=20to=20use=20Hds::TextInput::Field`=20(#2145)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 Migrate `form.inpu` to use Hds::TextInput::Field`

Migrate `form/group`, `form/host-static`, `form/host-catalog/aws` and
`form/host-catalog/azure` forms to use `Hds::TextInputField instead of
`form.input`

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

* refactor: 💡 use `data-test` attributes for testing

use `data-test` attributes for testing error messaging.

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

* refactor: 💡 field argument cleanup

field argument cleanup

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

* refactor: 💡 switch `disabled` argument to `readonly`

switch `disabled` argument to `readonly`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12466
---
 ui/admin/app/components/form/group/index.hbs  |  29 +++--
 .../form/host-catalog/aws/index.hbs           | 100 ++++++++------
 .../form/host-catalog/azure/index.hbs         | 123 ++++++++++--------
 .../form/host-catalog/static/index.hbs        |  30 ++---
 .../app/components/form/host/static/index.hbs |  64 ++++-----
 .../tests/acceptance/groups/create-test.js    |   2 +-
 .../tests/acceptance/groups/update-test.js    |   2 +-
 .../acceptance/host-catalogs/create-test.js   |   2 +-
 .../host-catalogs/hosts/create-test.js        |   2 +-
 .../host-catalogs/hosts/update-test.js        |   2 +-
 .../acceptance/host-catalogs/update-test.js   |   2 +-
 11 files changed, 198 insertions(+), 160 deletions(-)

diff --git a/ui/admin/app/components/form/group/index.hbs b/ui/admin/app/components/form/group/index.hbs
index 9dda5c39d..c0d84d690 100644
--- a/ui/admin/app/components/form/group/index.hbs
+++ b/ui/admin/app/components/form/group/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/host-catalog/aws/index.hbs b/ui/admin/app/components/form/host-catalog/aws/index.hbs
index a6ab6c7d1..3a72e5b23 100644
--- a/ui/admin/app/components/form/host-catalog/aws/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/aws/index.hbs
@@ -10,30 +10,31 @@
   @showEditToggle={{if @model.isNew false true}}
   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>{{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|
   >
@@ -94,7 +95,7 @@
     <InfoField
       @value={{t 'resources.host-catalog.types.aws'}}
       @icon='aws-color'
-      disabled={{form.disabled}}
+      readonly={{true}}
       as |F|
     >
       <F.Label>{{t 'titles.provider'}}</F.Label>
@@ -103,38 +104,53 @@
     </InfoField>
   {{/if}}
 
-  <form.input
-    @name='region'
-    @type='region'
+  <Hds::Form::TextInput::Field
+    name='region'
     @value={{@model.region}}
-    @label={{t 'resources.host-catalog.form.aws_region.label'}}
-    @helperText={{t 'resources.host-catalog.form.aws_region.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.aws.region'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'region')}}
+    as |F|
+  >
+    <F.Label>{{t 'resources.host-catalog.form.aws_region.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.form.aws_region.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.aws.region'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='access_key_id'
-    @type='access_key_id'
+  <Hds::Form::TextInput::Field
+    name='access_key_id'
     @value={{@model.access_key_id}}
-    @label={{t 'form.access_key_id.label'}}
-    @helperText={{t 'form.access_key_id.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.aws'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'access_key_id')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.access_key_id.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.access_key_id.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.aws'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='secret_access_key'
-    @type='secret_access_key'
+  <Hds::Form::TextInput::Field
+    name='secret_access_key'
     @value={{@model.secret_access_key}}
-    @label={{t 'form.secret_access_key.label'}}
-    @helperText={{t 'form.secret_access_key.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.aws'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'secret_access_key')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.secret_access_key.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.secret_access_key.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.aws'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Checkbox::Field
     name='disable_credential_rotation'
diff --git a/ui/admin/app/components/form/host-catalog/azure/index.hbs b/ui/admin/app/components/form/host-catalog/azure/index.hbs
index 41dc5a79c..93102306e 100644
--- a/ui/admin/app/components/form/host-catalog/azure/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/azure/index.hbs
@@ -10,30 +10,31 @@
   @showEditToggle={{if @model.isNew false true}}
   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>{{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|
   >
@@ -94,7 +95,7 @@
     <InfoField
       @value={{t 'resources.host-catalog.types.azure'}}
       @icon='azure-color'
-      disabled={{form.disabled}}
+      readonly={{true}}
       as |F|
     >
       <F.Label>{{t 'titles.provider'}}</F.Label>
@@ -103,49 +104,69 @@
     </InfoField>
   {{/if}}
 
-  <form.input
-    @name='tenant_id'
-    @type='tenant_id'
+  <Hds::Form::TextInput::Field
+    name='tenant_id'
     @value={{@model.tenant_id}}
-    @label={{t 'form.tenant_id.label'}}
-    @helperText={{t 'form.tenant_id.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.azure'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'tenant_id')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.tenant_id.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.tenant_id.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.azure'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='subscription_id'
-    @type='subscription_id'
+  <Hds::Form::TextInput::Field
+    name='subscription_id'
     @value={{@model.subscription_id}}
-    @label={{t 'form.subscription_id.label'}}
-    @helperText={{t 'form.subscription_id.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.azure'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'subscription_id')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.subscription_id.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.subscription_id.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.azure'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='client_id'
-    @type='client_id'
+  <Hds::Form::TextInput::Field
+    name='client_id'
     @value={{@model.client_id}}
-    @label={{t 'resources.host-catalog.form.azure_client_id.label'}}
-    @helperText={{t 'resources.host-catalog.form.azure_client_id.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.azure'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'client_id')}}
+    as |F|
+  >
+    <F.Label>{{t 'resources.host-catalog.form.azure_client_id.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.form.azure_client_id.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.azure'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='secret_value'
-    @type='secret_value'
+  <Hds::Form::TextInput::Field
+    name='secret_value'
     @value={{@model.secret_value}}
-    @label={{t 'form.secret.label'}}
-    @helperText={{t 'form.secret.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @link={{doc-url 'host-catalog.azure'}}
-    readonly={{false}}
-  />
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'secret_value')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.secret.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.secret.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-catalog.azure'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
+  </Hds::Form::TextInput::Field>
 
   <Hds::Form::Checkbox::Field
     name='disable_credential_rotation'
diff --git a/ui/admin/app/components/form/host-catalog/static/index.hbs b/ui/admin/app/components/form/host-catalog/static/index.hbs
index e0a1dc1a8..56a27efb8 100644
--- a/ui/admin/app/components/form/host-catalog/static/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/static/index.hbs
@@ -10,31 +10,31 @@
   @showEditToggle={{if @model.isNew false true}}
   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}}
-    disabled={{@model.isSaving}}
-    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/host/static/index.hbs b/ui/admin/app/components/form/host/static/index.hbs
index 5f28e163d..2c0074262 100644
--- a/ui/admin/app/components/form/host/static/index.hbs
+++ b/ui/admin/app/components/form/host/static/index.hbs
@@ -11,37 +11,35 @@
   as |form|
 >
 
-  <form.input
-    @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
+  <Hds::Form::TextInput::Field @value={{@model.type}} disabled={{true}} as |F|>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </Hds::Form::TextInput::Field>
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    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|
   >
@@ -56,24 +54,26 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @name='address'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='address'
     @value={{@model.address}}
-    @label={{t 'form.address.label'}}
-    @error={{@model.errors.address}}
-    @helperText={{t 'form.address.help'}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.address}}
+    @isRequired={{true}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'address')}}
+    as |F|
   >
+    <F.Label>{{t 'form.address.label'}}</F.Label>
+    <F.HelperText>{{t 'form.address.help'}}</F.HelperText>
     {{#if @model.errors.address}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.address 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 (can 'save model' @model)}}
     <form.actions
       @enableEditText={{t 'actions.edit-form'}}
diff --git a/ui/admin/tests/acceptance/groups/create-test.js b/ui/admin/tests/acceptance/groups/create-test.js
index a6e733361..f531075e9 100644
--- a/ui/admin/tests/acceptance/groups/create-test.js
+++ b/ui/admin/tests/acceptance/groups/create-test.js
@@ -115,7 +115,7 @@ module('Acceptance | groups | 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/groups/update-test.js b/ui/admin/tests/acceptance/groups/update-test.js
index 912401827..d7406d1b8 100644
--- a/ui/admin/tests/acceptance/groups/update-test.js
+++ b/ui/admin/tests/acceptance/groups/update-test.js
@@ -102,7 +102,7 @@ module('Acceptance | groups | 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.',
     );
diff --git a/ui/admin/tests/acceptance/host-catalogs/create-test.js b/ui/admin/tests/acceptance/host-catalogs/create-test.js
index 7a69b26f8..ef1b02c82 100644
--- a/ui/admin/tests/acceptance/host-catalogs/create-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/create-test.js
@@ -188,7 +188,7 @@ module('Acceptance | host-catalogs | create', function (hooks) {
       'The request was invalid.',
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('[data-test-error-message-name]').textContent.trim(),
       'Name is required.',
     );
   });
diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js
index 1be18eab2..61cf3fe43 100644
--- a/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js
@@ -151,7 +151,7 @@ module('Acceptance | host-catalogs | hosts | create', function (hooks) {
       'The request was invalid.',
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('[data-test-error-message-name]').textContent.trim(),
       'Name is required.',
     );
   });
diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js
index 6ec67739d..64bf54c29 100644
--- a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js
@@ -130,7 +130,7 @@ module('Acceptance | host-catalogs | hosts | update', function (hooks) {
       'The request was invalid.',
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('[data-test-error-message-name]').textContent.trim(),
       'Name is required.',
     );
   });
diff --git a/ui/admin/tests/acceptance/host-catalogs/update-test.js b/ui/admin/tests/acceptance/host-catalogs/update-test.js
index 128a20e5f..7603c2c93 100644
--- a/ui/admin/tests/acceptance/host-catalogs/update-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/update-test.js
@@ -123,7 +123,7 @@ module('Acceptance | host-catalogs | update', function (hooks) {
     await click('[type="submit"]');
 
     assert.dom('[role="alert"] div').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 host catalog changes via dialog', async function (assert) {