refactor: 💡 update scope form to use HDS input and textarea (#1459)

* refactor: 💡 update scope form to use HDS input and textarea

* chore: 🤖 tweak "optional" label text color in dark mode

* fix: 🐛 add HDS field margins and fix form tests

* fix: 🐛 fix acceptance tests and add TextInput event handlers

* fix: 🐛 use input event and fix set-from-event to handle empty

* fix: 🐛 fix linting and add @type='text' on HDS text input

* fix: 🐛 fix HDS field margin overrides

* chore: 🤖 simplify selector

ui/admin/app/components/form/scope/index.hbs

@@ -6,44 +6,47 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @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}}
+    @type='text'
+    name='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>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @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

ui/admin/tests/acceptance/scopes-test.js

@@ -192,6 +192,6 @@ module('Acceptance | scopes', function (hooks) {
     await visit(urls.newOrgScope);
     await click('[type="submit"]');
     assert.dom('.rose-notification-body').hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('.hds-form-error__message').hasText('Name is required.');
   });
 });

ui/admin/tests/acceptance/scopes/update-test.js

@@ -130,7 +130,7 @@ module('Acceptance | scopes | update', function (hooks) {
       'The request was invalid.'
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('.hds-form-error__message').textContent.trim(),
       'Name is required.'
     );
   });