From 0adca934147cc9e389c708070616013536ee077b Mon Sep 17 00:00:00 2001
From: NatashaKab <133793701+NatashaKab@users.noreply.github.com>
Date: Wed, 28 Jun 2023 18:05:36 -0400
Subject: [PATCH] Icu 9881 remove use of rose form textarea from admin UI
 (#1744)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Changing rose textarea to hds
---
 .../components/form/account/oidc/index.hbs    |  25 ++--
 .../form/account/password/index.hbs           |  25 ++--
 .../form/auth-method/oidc/index.hbs           |  51 ++++----
 .../form/auth-method/password/index.hbs       |  26 ++--
 .../form/credential-store/static/index.hbs    |  25 ++--
 .../form/credential-store/vault/index.hbs     | 113 +++++++++---------
 .../components/form/credential/json/index.hbs |  22 ++--
 .../form/credential/ssh_private_key/index.hbs |  46 +++----
 .../credential/username_password/index.hbs    |  23 ++--
 ui/admin/app/components/form/group/index.hbs  |  25 ++--
 .../form/host-catalog/aws/index.hbs           |  24 ++--
 .../form/host-catalog/azure/index.hbs         |  24 ++--
 .../form/host-catalog/static/index.hbs        |  25 ++--
 .../components/form/host-set/aws/index.hbs    |  25 ++--
 .../components/form/host-set/azure/index.hbs  |  54 ++++-----
 .../components/form/host-set/static/index.hbs |  25 ++--
 .../app/components/form/host/static/index.hbs |  25 ++--
 .../components/form/managed-group/index.hbs   |  25 ++--
 ui/admin/app/components/form/user/index.hbs   |  25 ++--
 ui/admin/app/components/form/worker/index.hbs |  24 ++--
 .../credentials/create-test.js                |   2 +-
 21 files changed, 336 insertions(+), 323 deletions(-)

diff --git a/ui/admin/app/components/form/account/oidc/index.hbs b/ui/admin/app/components/form/account/oidc/index.hbs
index 108272215..706858b92 100644
--- a/ui/admin/app/components/form/account/oidc/index.hbs
+++ b/ui/admin/app/components/form/account/oidc/index.hbs
@@ -63,25 +63,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
     <form.input
diff --git a/ui/admin/app/components/form/account/password/index.hbs b/ui/admin/app/components/form/account/password/index.hbs
index 1115a72d6..bc1a2bcd9 100644
--- a/ui/admin/app/components/form/account/password/index.hbs
+++ b/ui/admin/app/components/form/account/password/index.hbs
@@ -36,25 +36,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @name='login_name'
diff --git a/ui/admin/app/components/form/auth-method/oidc/index.hbs b/ui/admin/app/components/form/auth-method/oidc/index.hbs
index 37bd2d9a1..1a089a85d 100644
--- a/ui/admin/app/components/form/auth-method/oidc/index.hbs
+++ b/ui/admin/app/components/form/auth-method/oidc/index.hbs
@@ -43,24 +43,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='text'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @name='issuer'
@@ -573,15 +573,22 @@
           {{#each @model.idp_ca_certs as |cert i|}}
             <body.row as |row|>
               <row.cell>
-                <form.textarea
+                <Hds::Form::Textarea::Field
                   @value={{cert.value}}
-                  @error={{@model.errors.idp_ca_certs}}
-                  @contextual={{true}}
-                  as |field|
+                  @isOptional={{true}}
+                  @isInvalid={{@model.errors.idp_ca_certs}}
+                  disabled={{form.disabled}}
+                  aria-label={{t 'form.certificate.label'}}
+                  as |F|
                 >
-                  <field.label>{{t 'form.certificate.label'}}</field.label>
-                  <field.field />
-                </form.textarea>
+                  {{#if @model.errors.idp_ca_certs}}
+                    <F.Error as |E|>
+                      {{#each @model.errors.idp_ca_certs as |error|}}
+                        <E.Message>{{error.message}}</E.Message>
+                      {{/each}}
+                    </F.Error>
+                  {{/if}}
+                </Hds::Form::Textarea::Field>
               </row.cell>
               <row.cell @shrink={{true}}>
                 <Rose::Button
@@ -603,9 +610,11 @@
 
           <body.row as |row|>
             <row.cell>
-              <form.textarea
+              <Hds::Form::Textarea::Field
                 @value={{this.newCertificate}}
-                @label={{t 'resources.auth-method.titles.new-certificate'}}
+                @isOptional={{true}}
+                disabled={{form.disabled}}
+                aria-label={{t 'resources.auth-method.titles.new-certificate'}}
               />
             </row.cell>
             <row.cell @shrink={{true}}>
diff --git a/ui/admin/app/components/form/auth-method/password/index.hbs b/ui/admin/app/components/form/auth-method/password/index.hbs
index 62f0ec96c..8970d3541 100644
--- a/ui/admin/app/components/form/auth-method/password/index.hbs
+++ b/ui/admin/app/components/form/auth-method/password/index.hbs
@@ -36,25 +36,25 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
+
   {{#if (can 'save model' @model)}}
     <form.actions
       @enableEditText={{t 'actions.edit-form'}}
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 8e22b34b4..f583a8994 100644
--- a/ui/admin/app/components/form/credential-store/static/index.hbs
+++ b/ui/admin/app/components/form/credential-store/static/index.hbs
@@ -29,25 +29,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (feature-flag 'static-credentials')}}
     {{#if @model.isNew}}
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 a71880c6b..c1493a946 100644
--- a/ui/admin/app/components/form/credential-store/vault/index.hbs
+++ b/ui/admin/app/components/form/credential-store/vault/index.hbs
@@ -30,25 +30,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (feature-flag 'static-credentials')}}
     {{#if @model.isNew}}
@@ -220,47 +219,51 @@
     {{/if}}
   </form.checkbox>
 
-  <form.textarea
-    @name='client_certificate'
-    @type='text'
+  <Hds::Form::Textarea::Field
     @value={{@model.client_certificate}}
-    @label={{t 'resources.credential-store.form.client_certificate.label'}}
-    @error={{@model.errors.client_certificate}}
-    @helperText={{t 'resources.credential-store.form.client_certificate.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.client_certificate}}
+    @isOptional={{true}}
+    name='client_certificate'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t
+        'resources.credential-store.form.client_certificate.label'
+      }}</F.Label>
+    <F.HelperText>{{t
+        'resources.credential-store.form.client_certificate.help'
+      }}</F.HelperText>
     {{#if @model.errors.client_certificate}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.client_certificate as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
-  <form.textarea
-    @name='client_certificate_key'
-    @type='text'
+  <Hds::Form::Textarea::Field
     @value={{@model.client_certificate_key}}
-    @label={{t 'resources.credential-store.form.client_certificate_key.label'}}
-    @error={{@model.errors.client_certificate_key}}
-    @helperText={{t
-      'resources.credential-store.form.client_certificate_key.help'
-    }}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.client_certificate_key}}
+    name='client_certificate_key'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t
+        'resources.credential-store.form.client_certificate_key.label'
+      }}</F.Label>
+    <F.HelperText>{{t
+        'resources.credential-store.form.client_certificate_key.help'
+      }}</F.HelperText>
     {{#if @model.errors.client_certificate_key}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.client_certificate_key as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#unless @model.isNew}}
     <form.input
@@ -273,25 +276,27 @@
     />
   {{/unless}}
 
-  <form.textarea
-    @name='ca_cert'
-    @type='text'
+  <Hds::Form::Textarea::Field
     @value={{@model.ca_cert}}
-    @label={{t 'resources.credential-store.form.ca_cert.label'}}
-    @error={{@model.errors.ca_cert}}
-    @helperText={{t 'resources.credential-store.form.ca_cert.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.ca_cert}}
+    @name='ca_cert'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'resources.credential-store.form.ca_cert.label'}}</F.Label>
+    <F.HelperText>{{t
+        'resources.credential-store.form.ca_cert.help'
+      }}</F.HelperText>
     {{#if @model.errors.ca_cert}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.ca_cert as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
+
   {{#if (can 'save model' @model)}}
     <form.actions
       @enableEditText={{t 'actions.edit-form'}}
diff --git a/ui/admin/app/components/form/credential/json/index.hbs b/ui/admin/app/components/form/credential/json/index.hbs
index 009b12492..4188565cb 100644
--- a/ui/admin/app/components/form/credential/json/index.hbs
+++ b/ui/admin/app/components/form/credential/json/index.hbs
@@ -28,22 +28,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
     <form.fieldset>
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 dd12f33bd..6f06ef732 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
@@ -28,22 +28,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
   {{#if @model.isNew}}
     <Hds::Form::RadioCard::Group @name='type' as |G|>
       <G.Legend>{{t 'form.type.label'}}</G.Legend>
@@ -95,22 +97,26 @@
   </form.input>
 
   {{#if (or @model.isNew form.isEditable)}}
-    <form.textarea
-      @name='private_key'
+    <Hds::Form::Textarea::Field
+      @isOptional={{false}}
       @value={{@model.private_key}}
-      @label={{t 'resources.credential.form.private_key.label'}}
-      @helperText={{t 'resources.credential.form.private_key.help'}}
-      @error={{@model.errors.private_key}}
-      as |field|
+      @isInvalid={{@model.errors.private_key}}
+      name='private_key'
+      disabled={{form.disabled}}
+      as |F|
     >
+      <F.Label>{{t 'resources.credential.form.private_key.label'}}</F.Label>
+      <F.HelperText>{{t
+          'resources.credential.form.private_key.help'
+        }}</F.HelperText>
       {{#if @model.errors.private_key}}
-        <field.errors as |errors|>
+        <F.Error as |E|>
           {{#each @model.errors.private_key as |error|}}
-            <errors.message>{{error.message}}</errors.message>
+            <E.Message>{{error.message}}</E.Message>
           {{/each}}
-        </field.errors>
+        </F.Error>
       {{/if}}
-    </form.textarea>
+    </Hds::Form::Textarea::Field>
     <form.input
       @type='password'
       @name='private_key_passphrase'
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 6c956f9ca..fd70790d9 100644
--- a/ui/admin/app/components/form/credential/username_password/index.hbs
+++ b/ui/admin/app/components/form/credential/username_password/index.hbs
@@ -27,23 +27,24 @@
       </field.errors>
     {{/if}}
   </form.input>
-
-  <form.textarea
-    @name='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
   {{#if @model.isNew}}
     <Hds::Form::RadioCard::Group @name='type' as |G|>
       <G.Legend>{{t 'form.type.label'}}</G.Legend>
diff --git a/ui/admin/app/components/form/group/index.hbs b/ui/admin/app/components/form/group/index.hbs
index bc328317d..9dda5c39d 100644
--- a/ui/admin/app/components/form/group/index.hbs
+++ b/ui/admin/app/components/form/group/index.hbs
@@ -30,25 +30,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions
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 abfbb5401..79f40669b 100644
--- a/ui/admin/app/components/form/host-catalog/aws/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/aws/index.hbs
@@ -29,24 +29,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
 
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 238a3e334..697a7b385 100644
--- a/ui/admin/app/components/form/host-catalog/azure/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/azure/index.hbs
@@ -29,24 +29,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
     <Hds::Form::RadioCard::Group @name='type' as |G|>
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 23bed2624..e0a1dc1a8 100644
--- a/ui/admin/app/components/form/host-catalog/static/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/static/index.hbs
@@ -30,25 +30,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
 
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 28e99317b..52616e421 100644
--- a/ui/admin/app/components/form/host-set/aws/index.hbs
+++ b/ui/admin/app/components/form/host-set/aws/index.hbs
@@ -31,25 +31,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @value={{@model.type}}
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 818b2637d..c5bac365d 100644
--- a/ui/admin/app/components/form/host-set/azure/index.hbs
+++ b/ui/admin/app/components/form/host-set/azure/index.hbs
@@ -31,25 +31,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @value={{@model.type}}
@@ -161,26 +160,27 @@
     </:body>
   </Rose::Form::Fieldset>
 
-  <form.textarea
-    @name='filter'
-    @type='filter'
+  <Hds::Form::Textarea::Field
     @value={{@model.filter_string}}
-    @label={{t 'resources.host-set.form.filter.label'}}
-    @helperText={{t 'resources.host-set.form.filter.azure.help'}}
-    @linkText={{t 'actions.learn-more'}}
-    @error={{@model.errors.filter_string}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isOptional={{true}}
+    @isInvalid={{@model.errors.filter_string}}
+    name='filter'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'resources.host-set.form.filter.label'}}</F.Label>
+    <F.HelperText>{{t
+        'resources.host-set.form.filter.azure.help'
+      }}</F.HelperText>
     {{#if @model.errors.filter_string}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.filter_string as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
+
   <form.input
     @name='sync_interval_seconds'
     @type='number'
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 bc328317d..9dda5c39d 100644
--- a/ui/admin/app/components/form/host-set/static/index.hbs
+++ b/ui/admin/app/components/form/host-set/static/index.hbs
@@ -30,25 +30,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/app/components/form/host/static/index.hbs b/ui/admin/app/components/form/host/static/index.hbs
index 3b88cd256..5f28e163d 100644
--- a/ui/admin/app/components/form/host/static/index.hbs
+++ b/ui/admin/app/components/form/host/static/index.hbs
@@ -37,25 +37,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @name='address'
diff --git a/ui/admin/app/components/form/managed-group/index.hbs b/ui/admin/app/components/form/managed-group/index.hbs
index 6db233d78..316c7fb75 100644
--- a/ui/admin/app/components/form/managed-group/index.hbs
+++ b/ui/admin/app/components/form/managed-group/index.hbs
@@ -36,25 +36,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <form.input
     @name='filter'
diff --git a/ui/admin/app/components/form/user/index.hbs b/ui/admin/app/components/form/user/index.hbs
index bc328317d..9dda5c39d 100644
--- a/ui/admin/app/components/form/user/index.hbs
+++ b/ui/admin/app/components/form/user/index.hbs
@@ -30,25 +30,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/app/components/form/worker/index.hbs b/ui/admin/app/components/form/worker/index.hbs
index bcb23de9a..c30f355dc 100644
--- a/ui/admin/app/components/form/worker/index.hbs
+++ b/ui/admin/app/components/form/worker/index.hbs
@@ -39,24 +39,24 @@
     {{/if}}
   </form.input>
 
-  <form.textarea
-    @name='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
   <form.fieldset>
     <:title>{{t 'resources.worker.form.worker_tags.label'}}</:title>
     <:description>{{t 'resources.worker.form.worker_tags.help'}}</:description>
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 67133fb92..ff4529c69 100644
--- a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js
+++ b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js
@@ -280,7 +280,7 @@ module(
         .dom('.rose-notification-body')
         .hasText('Error in provided request.');
       assert
-        .dom('.rose-form-error-message')
+        .dom('.hds-form-error__message')
         .hasText('Field required for creating a username-key-pair credential.');
     });