From f1c5c99664f673353cc430936a5d51978d63f802 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Wed, 28 Feb 2024 10:18:22 -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(#2147)?=
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/host-set/aws`, `form/host-set/azure` and
`form/host-set/static` forms to use `Hds::TextInputField` instead of
`form.input`

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

* Update index.hbs

removed `@isOptional` field.

* Update index.hbs

removed `@isOptional` argument

* refactor: 💡 fix lint errors

fix lint

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

* refactor: 💡 field argument cleanup

field argument cleanup

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

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

switch `disabled` argument to `readonly`

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

* refactor: 💡 order of attributes

change order of attributes

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12469
---
 .../components/form/host-set/aws/index.hbs    | 73 ++++++++++---------
 .../components/form/host-set/azure/index.hbs  | 72 +++++++++---------
 .../components/form/host-set/static/index.hbs | 31 ++++----
 .../host-catalogs/host-sets/create-test.js    |  2 +-
 .../host-catalogs/host-sets/update-test.js    |  4 +-
 5 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/ui/admin/app/components/form/host-set/aws/index.hbs b/ui/admin/app/components/form/host-set/aws/index.hbs
index dcc0d4820..415445380 100644
--- a/ui/admin/app/components/form/host-set/aws/index.hbs
+++ b/ui/admin/app/components/form/host-set/aws/index.hbs
@@ -12,30 +12,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|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.name}}
+    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}}
-    @value={{@model.description}}
-    @isInvalid={{@model.errors.description}}
     name='description'
+    @value={{@model.description}}
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.description}}
     disabled={{form.disabled}}
     as |F|
   >
@@ -50,12 +51,9 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
+  <InfoField @value={{@model.type}} disabled={{form.disabled}} as |F|>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </InfoField>
 
   <InfoField
     @value={{t 'descriptions.provider'}}
@@ -125,27 +123,30 @@
     </:field>
   </Form::Field::ListWrapper>
 
-  <form.input
-    @name='sync_interval_seconds'
-    @type='number'
+  <Hds::Form::TextInput::Field
+    name='sync_interval_seconds'
     @value={{@model.sync_interval_seconds}}
-    @label={{t 'form.sync-interval.label'}}
-    @error={{@model.errors.sync_interval_seconds}}
-    @helperText={{t 'form.sync-interval.help'}}
-    @link={{doc-url 'host-set.sync-interval-seconds'}}
-    @linkText={{t 'actions.learn-more'}}
-    min='0'
-    step='1'
-    as |field|
+    @isInvalid={{@model.errors.sync_interval_seconds}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'sync_interval_seconds')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.name.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-set.sync-interval-seconds'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
     {{#if @model.errors.sync_interval_seconds}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.sync_interval_seconds 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/app/components/form/host-set/azure/index.hbs b/ui/admin/app/components/form/host-set/azure/index.hbs
index 0f8067d00..ac303d047 100644
--- a/ui/admin/app/components/form/host-set/azure/index.hbs
+++ b/ui/admin/app/components/form/host-set/azure/index.hbs
@@ -12,30 +12,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|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.name}}
+    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|
   >
@@ -50,17 +51,14 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <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>
 
   <InfoField
     @value={{t 'descriptions.provider'}}
     @icon='azure-color'
-    disabled={{form.disabled}}
+    readonly={{true}}
     as |F|
   >
     <F.Label>{{t 'titles.provider'}}</F.Label>
@@ -101,10 +99,10 @@
   </Form::Field::ListWrapper>
 
   <Hds::Form::Textarea::Field
+    name='filter'
     @value={{@model.filter_string}}
     @isOptional={{true}}
     @isInvalid={{@model.errors.filter_string}}
-    name='filter'
     disabled={{form.disabled}}
     as |F|
   >
@@ -121,27 +119,29 @@
     {{/if}}
   </Hds::Form::Textarea::Field>
 
-  <form.input
-    @name='sync_interval_seconds'
-    @type='number'
+  <Hds::Form::TextInput::Field
+    name='sync_interval_seconds'
     @value={{@model.sync_interval_seconds}}
-    @label={{t 'form.sync-interval.label'}}
-    @error={{@model.errors.sync_interval_seconds}}
-    @helperText={{t 'form.sync-interval.help'}}
-    @link={{doc-url 'host-set.sync-interval-seconds'}}
-    @linkText={{t 'actions.learn-more'}}
-    min='0'
-    step='1'
-    as |field|
+    @isInvalid={{@model.errors.sync_interval_seconds}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'sync_interval_seconds')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'form.name.help'}}
+      <Hds::Link::Inline @href={{doc-url 'host-set.sync-interval-seconds'}}>
+        {{t 'actions.learn-more'}}
+      </Hds::Link::Inline>
+    </F.HelperText>
     {{#if @model.errors.sync_interval_seconds}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.sync_interval_seconds 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
diff --git a/ui/admin/app/components/form/host-set/static/index.hbs b/ui/admin/app/components/form/host-set/static/index.hbs
index 9dda5c39d..27da5bdb2 100644
--- a/ui/admin/app/components/form/host-set/static/index.hbs
+++ b/ui/admin/app/components/form/host-set/static/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|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.name}}
+    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}}
-    @value={{@model.description}}
-    @isInvalid={{@model.errors.description}}
     name='description'
+    @value={{@model.description}}
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.description}}
     disabled={{form.disabled}}
     as |F|
   >
diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
index a8813acc6..81e06ca16 100644
--- a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
@@ -213,7 +213,7 @@ module('Acceptance | host-catalogs | host sets | 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/host-sets/update-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
index 495c4e031..9a00e4c6c 100644
--- a/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
@@ -154,7 +154,7 @@ module('Acceptance | host-catalogs | host sets | 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.',
     );
   });
@@ -297,7 +297,7 @@ module('Acceptance | host-catalogs | host sets | 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.',
     );
   });