From 060f995f940ff7b337857682684c19b70d78db13 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Wed, 28 Feb 2024 12:21:37 -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(#2143)?=
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/credential` forms for for `json`, `ssh_private_key`,
`username_password`, and `form/credential-store` forms for `static` and
`vault` to use `Hds::TextInput::Field` instead of `form.input`.

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

* refactor: 💡 fix broken test

fix broken test

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

* refactor: 💡 fix broken test

fix broken test

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

* refactor: 💡 added `@hasVisibilityToggle` back and clean up test

Added `@hasVisibilityToggle` back and clean up test by use `data-test-*`
attributes for error messaging

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

* refactor: 💡 set `@hasVisiblityToggle` to default

set `@hasVisiblityToggle` to default

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

* refactor: 💡 field argument clean up

field argument cleanup

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

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

switch `disabled` argument to `readonly`

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

* refactor: 💡 clean up attribute order

clean up field attribute order

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12461
---
 addons/core/translations/resources/en-us.yaml |   1 -
 .../form/credential-store/static/index.hbs    |  31 +--
 .../form/credential-store/vault/index.hbs     | 217 ++++++++++--------
 .../components/form/credential/json/index.hbs |  29 ++-
 .../form/credential/ssh_private_key/index.hbs |  88 ++++---
 .../credential/username_password/index.hbs    |  89 ++++---
 .../credential-store/create-test.js           |   2 +-
 .../credentials/create-test.js                |   4 +-
 .../credentials/update-test.js                |   6 +-
 .../credential-store/update-test.js           |   4 +-
 10 files changed, 266 insertions(+), 205 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index f582e5af4..e8b0e2932 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -853,7 +853,6 @@ credential:
       help: The private key to use when connecting with this credential store.
     private_key_passphrase:
       label: Passphrase
-      help: Optional.
     json:
       label: JSON
       help: This is the JSON blob that provides credentials to the host. After this data is saved, you will not be able to edit it again without replacing it.
diff --git a/ui/admin/app/components/form/credential-store/static/index.hbs b/ui/admin/app/components/form/credential-store/static/index.hbs
index f583a8994..108bb6d3d 100644
--- a/ui/admin/app/components/form/credential-store/static/index.hbs
+++ b/ui/admin/app/components/form/credential-store/static/index.hbs
@@ -10,30 +10,33 @@
   @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 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/credential-store/vault/index.hbs b/ui/admin/app/components/form/credential-store/vault/index.hbs
index dab9de53a..a436ce8a5 100644
--- a/ui/admin/app/components/form/credential-store/vault/index.hbs
+++ b/ui/admin/app/components/form/credential-store/vault/index.hbs
@@ -11,30 +11,33 @@
   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|
   >
@@ -76,6 +79,7 @@
       <InfoField
         @value={{t (concat 'resources.credential-store.types.' @model.type)}}
         @icon='vault'
+        readonly={{true}}
         as |F|
       >
         <F.Label>{{t 'form.type.label'}}</F.Label>
@@ -85,119 +89,135 @@
       </InfoField>
     {{/if}}
   {{/if}}
-  <form.input
-    @name='address'
-    @type='text'
+
+  <Hds::Form::TextInput::Field
+    name='address'
     @value={{@model.address}}
-    @label={{t 'resources.credential-store.form.address.label'}}
-    @error={{@model.errors.address}}
-    @helperText={{t 'resources.credential-store.form.address.help'}}
-    disabled={{@model.isSaving}}
-    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 'resources.credential-store.form.address.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.credential-store.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 (feature-flag 'vault-worker-filter')}}
-    <form.input
-      @name='worker_filter'
-      @type='text'
+    <Hds::Form::TextInput::Field
+      name='worker_filter'
       @value={{@model.worker_filter}}
-      @label={{t 'resources.credential-store.form.worker_filter.label'}}
-      @error={{@model.errors.worker_filter}}
-      @helperText={{t 'resources.credential-store.form.worker_filter.help'}}
-      @linkText={{t 'actions.learn-more'}}
-      @link={{doc-url 'worker-filters'}}
-      disabled={{@model.isSaving}}
-      readonly={{false}}
-      as |field|
+      @isInvalid={{@model.errors.worker_filter}}
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'worker_filter')}}
+      as |F|
     >
+      <F.Label>
+        {{t 'resources.credential-store.form.worker_filter.label'}}
+      </F.Label>
+      <F.HelperText>
+        {{t 'resources.credential-store.form.worker_filter.help'}}
+        <Hds::Link::Inline @href={{doc-url 'worker-filters'}}>
+          {{t 'actions.learn-more'}}
+        </Hds::Link::Inline>
+      </F.HelperText>
       {{#if @model.errors.worker_filter}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.worker_filter 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 (or @model.isNew form.isEditable)}}
-    <form.input
-      @name='token'
-      @type='text'
+    <Hds::Form::TextInput::Field
+      name='token'
       @value={{@model.token}}
-      @label={{t 'resources.credential-store.form.token.label'}}
-      @error={{@model.errors.token}}
-      @helperText={{t 'resources.credential-store.form.token.help'}}
-      disabled={{@model.isSaving}}
-      readonly={{false}}
-      as |field|
+      @isInvalid={{@model.errors.token}}
+      @isRequired={{true}}
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'token')}}
+      as |F|
     >
+      <F.Label>{{t 'resources.credential-store.form.token.label'}}</F.Label>
+      <F.HelperText>
+        {{t 'resources.credential-store.form.token.help'}}
+      </F.HelperText>
       {{#if @model.errors.token}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.token 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}}
 
   {{#unless @model.isNew}}
-    <form.input
+    <Hds::Form::TextInput::Field
       @value={{@model.token_hmac}}
-      @label={{t 'resources.credential-store.form.token_hmac.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>
+        {{t 'resources.credential-store.form.token_hmac.label'}}
+      </F.Label>
+    </Hds::Form::TextInput::Field>
   {{/unless}}
-
-  <form.input
-    @name='namespace'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='namespace'
     @value={{@model.namespace}}
-    @label={{t 'resources.credential-store.form.namespace.label'}}
-    @error={{@model.errors.namespace}}
-    @helperText={{t 'resources.credential-store.form.namespace.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.namespace}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'namespace')}}
+    as |F|
   >
+    <F.Label>{{t 'resources.credential-store.form.namespace.label'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.credential-store.form.namespace.help'}}
+    </F.HelperText>
     {{#if @model.errors.namespace}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.namespace 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='tls_server_name'
-    @type='text'
+  <Hds::Form::TextInput::Field
+    name='tls_server_name'
     @value={{@model.tls_server_name}}
-    @label={{t 'resources.credential-store.form.tls_server_name.label'}}
-    @error={{@model.errors.tls_server_name}}
-    @helperText={{t 'resources.credential-store.form.tls_server_name.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.tls_server_name}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'tls_server_name')}}
+    as |F|
   >
+    <F.Label>
+      {{t 'resources.credential-store.form.tls_server_name.label'}}
+    </F.Label>
+    <F.HelperText>
+      {{t 'resources.credential-store.form.tls_server_name.help'}}
+    </F.HelperText>
     {{#if @model.errors.tls_server_name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.tls_server_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::Checkbox::Field
     name='tls_skip_verify'
@@ -225,10 +245,10 @@
   </Hds::Form::Checkbox::Field>
 
   <Hds::Form::Textarea::Field
+    name='client_certificate'
     @value={{@model.client_certificate}}
     @isInvalid={{@model.errors.client_certificate}}
     @isOptional={{true}}
-    name='client_certificate'
     disabled={{form.disabled}}
     as |F|
   >
@@ -248,10 +268,10 @@
   </Hds::Form::Textarea::Field>
 
   <Hds::Form::Textarea::Field
+    name='client_certificate_key'
     @value={{@model.client_certificate_key}}
     @isOptional={{true}}
     @isInvalid={{@model.errors.client_certificate_key}}
-    name='client_certificate_key'
     disabled={{form.disabled}}
     as |F|
   >
@@ -271,21 +291,24 @@
   </Hds::Form::Textarea::Field>
 
   {{#unless @model.isNew}}
-    <form.input
+    <Hds::Form::TextInput::Field
       @value={{@model.client_certificate_key_hmac}}
-      @label={{t
-        'resources.credential-store.form.client_certificate_key_hmac.label'
-      }}
-      readonly={{true}}
-      @disabled={{true}}
-    />
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>
+        {{t
+          'resources.credential-store.form.client_certificate_key_hmac.label'
+        }}
+      </F.Label>
+    </Hds::Form::TextInput::Field>
   {{/unless}}
 
   <Hds::Form::Textarea::Field
+    name='ca_cert'
     @value={{@model.ca_cert}}
     @isOptional={{true}}
     @isInvalid={{@model.errors.ca_cert}}
-    @name='ca_cert'
     disabled={{form.disabled}}
     as |F|
   >
diff --git a/ui/admin/app/components/form/credential/json/index.hbs b/ui/admin/app/components/form/credential/json/index.hbs
index 5e8389919..06b99f5fc 100644
--- a/ui/admin/app/components/form/credential/json/index.hbs
+++ b/ui/admin/app/components/form/credential/json/index.hbs
@@ -11,28 +11,33 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    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/credential/ssh_private_key/index.hbs b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
index 31fe07ab8..c4541d38a 100644
--- a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
+++ b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
@@ -11,28 +11,33 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    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|
   >
@@ -71,6 +76,7 @@
   {{else}}
     <InfoField
       @value={{t (concat 'resources.credential.types.' @model.type)}}
+      readonly={{true}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
@@ -79,29 +85,33 @@
     </InfoField>
   {{/if}}
 
-  <form.input
-    @name='username'
+  <Hds::Form::TextInput::Field
+    name='username'
     @value={{@model.username}}
-    @label={{t 'resources.credential.form.username.label'}}
-    @helperText={{t 'resources.credential.form.username.help'}}
-    @error={{@model.errors.username}}
-    as |field|
+    @isInvalid={{@model.errors.username}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'username')}}
+    as |F|
   >
+    <F.Label>{{t 'resources.credential.form.username.label'}}</F.Label>
+    <F.HelperText>{{t 'resources.credential.form.username.help'}}</F.HelperText>
     {{#if @model.errors.username}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.username as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message data-test-error-message-username>
+            {{error.message}}
+          </E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
   {{#if (or @model.isNew form.isEditable)}}
     <Hds::Form::Textarea::Field
-      @isOptional={{false}}
+      name='private_key'
       @value={{@model.private_key}}
       @isInvalid={{@model.errors.private_key}}
-      name='private_key'
+      @isRequired={{true}}
       disabled={{form.disabled}}
       as |F|
     >
@@ -112,30 +122,36 @@
       {{#if @model.errors.private_key}}
         <F.Error as |E|>
           {{#each @model.errors.private_key as |error|}}
-            <E.Message>{{error.message}}</E.Message>
+            <E.Message data-test-error-message-private-key>
+              {{error.message}}
+            </E.Message>
           {{/each}}
         </F.Error>
       {{/if}}
     </Hds::Form::Textarea::Field>
-    <form.input
+
+    <Hds::Form::TextInput::Field
+      name='private_key_passphrase'
       @type='password'
-      @name='private_key_passphrase'
       @value={{@model.private_key_passphrase}}
-      @label={{t 'resources.credential.form.private_key_passphrase.label'}}
-      @helperText={{t 'resources.credential.form.private_key_passphrase.help'}}
-      @error={{@model.errors.private_key_passphrase}}
-      @hasVisibilityToggle={{false}}
+      @isInvalid={{@model.errors.private_key_passphrase}}
+      @isOptional={{true}}
+      disabled={{form.disabled}}
       autocomplete='new-password'
-      as |field|
+      {{on 'input' (set-from-event @model 'private_key_passphrase')}}
+      as |F|
     >
+      <F.Label>
+        {{t 'resources.credential.form.private_key_passphrase.label'}}
+      </F.Label>
       {{#if @model.errors.private_key_passphrase}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.private_key_passphrase 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)}}
diff --git a/ui/admin/app/components/form/credential/username_password/index.hbs b/ui/admin/app/components/form/credential/username_password/index.hbs
index fd70790d9..30ee913f1 100644
--- a/ui/admin/app/components/form/credential/username_password/index.hbs
+++ b/ui/admin/app/components/form/credential/username_password/index.hbs
@@ -11,27 +11,33 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
+  <Hds::Form::TextInput::Field
+    name='name'
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    as |field|
-  >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-  <Hds::Form::Textarea::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}}
+      <F.Error as |E|>
+        {{#each @model.errors.name as |error|}}
+          <E.Message data-test-error-message-name>
+            {{error.message}}
+          </E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  <Hds::Form::Textarea::Field
+    name='description'
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
-    name='description'
+    @isOptional={{true}}
     disabled={{form.disabled}}
     as |F|
   >
@@ -70,6 +76,7 @@
   {{else}}
     <InfoField
       @value={{t (concat 'resources.credential.types.' @model.type)}}
+      readonly={{true}}
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
@@ -78,42 +85,50 @@
     </InfoField>
   {{/if}}
 
-  <form.input
-    @name='username'
+  <Hds::Form::TextInput::Field
+    name='username'
     @value={{@model.username}}
-    @label={{t 'resources.credential.form.username.label'}}
-    @helperText={{t 'resources.credential.form.username.help'}}
-    @error={{@model.errors.username}}
-    as |field|
+    @isInvalid={{@model.errors.username}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'username')}}
+    as |F|
   >
+    <F.Label>{{t 'resources.credential.form.username.label'}}</F.Label>
+    <F.HelperText>{{t 'resources.credential.form.username.help'}}</F.HelperText>
     {{#if @model.errors.username}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.username 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 (or @model.isNew form.isEditable)}}
-    <form.input
-      @name='password'
+    <Hds::Form::TextInput::Field
+      name='password'
       @type='password'
       @value={{@model.password}}
-      @label={{t 'resources.credential.form.password.label'}}
-      @helperText={{t 'resources.credential.form.password.help'}}
-      @error={{@model.errors.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 'resources.credential.form.password.label'}}</F.Label>
+      <F.HelperText>{{t
+          'resources.credential.form.password.help'
+        }}</F.HelperText>
       {{#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 data-test-error-message-password>
+              {{error.message}}
+            </E.Message>
           {{/each}}
-        </field.errors>
+        </F.Error>
       {{/if}}
-    </form.input>
+    </Hds::Form::TextInput::Field>
   {{/if}}
 
   {{#if (can 'save model' @model)}}
diff --git a/ui/admin/tests/acceptance/credential-store/create-test.js b/ui/admin/tests/acceptance/credential-store/create-test.js
index af805a791..5fe0d7eb8 100644
--- a/ui/admin/tests/acceptance/credential-store/create-test.js
+++ b/ui/admin/tests/acceptance/credential-store/create-test.js
@@ -134,7 +134,7 @@ module('Acceptance | credential-stores | 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/credential-store/credentials/create-test.js b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js
index cf1e39453..d346db2bc 100644
--- a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js
+++ b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js
@@ -235,7 +235,7 @@ module(
         .dom('.rose-notification-body')
         .hasText('Error in provided request.');
       assert
-        .dom('.rose-form-error-message')
+        .dom('[data-test-error-message-password]')
         .hasText('Field required for creating a username-password credential.');
     });
 
@@ -270,7 +270,7 @@ module(
         .dom('.rose-notification-body')
         .hasText('Error in provided request.');
       assert
-        .dom('.hds-form-error__message')
+        .dom('[data-test-error-message-private-key]')
         .hasText('Field required for creating a username-key-pair credential.');
     });
 
diff --git a/ui/admin/tests/acceptance/credential-store/credentials/update-test.js b/ui/admin/tests/acceptance/credential-store/credentials/update-test.js
index d09f59fec..d4869e4e3 100644
--- a/ui/admin/tests/acceptance/credential-store/credentials/update-test.js
+++ b/ui/admin/tests/acceptance/credential-store/credentials/update-test.js
@@ -232,7 +232,7 @@ module(
         'Error in provided request.',
       );
       assert.ok(
-        find('.rose-form-error-message').textContent.trim(),
+        find('[data-test-error-message-name]').textContent.trim(),
         'Name is required.',
       );
     });
@@ -267,7 +267,7 @@ module(
         'Error in provided request.',
       );
       assert.ok(
-        find('.rose-form-error-message').textContent.trim(),
+        find('[data-test-error-message-name]').textContent.trim(),
         'Name is required.',
       );
     });
@@ -302,7 +302,7 @@ module(
         'Error in provided request.',
       );
       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/credential-store/update-test.js b/ui/admin/tests/acceptance/credential-store/update-test.js
index f6f8c7768..75200f169 100644
--- a/ui/admin/tests/acceptance/credential-store/update-test.js
+++ b/ui/admin/tests/acceptance/credential-store/update-test.js
@@ -159,7 +159,7 @@ module('Acceptance | credential-stores | 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.',
     );
   });
@@ -193,7 +193,7 @@ module('Acceptance | credential-stores | 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.',
     );
   });