chore: 🤖 Migrate form.inpu to use Hds::TextInput::Field` (#2145)

* 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
This commit is contained in:
Devon Anderson authored and GitHub committed 2024-02-27 13:52:50 -05:00
1 parent 3fc865d226
commit 26a77edbc7
11 files changed
+198 -160

No files matched your search

+15 -14
View File
@@ -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|
>
@@ -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'
@@ -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'
@@ -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|
>
@@ -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'}}
@@ -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.',
);
@@ -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.',
);
@@ -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.',
);
});
@@ -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.',
);
});
@@ -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.',
);
});
@@ -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) {