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:
1 parent
3fc865d226
commit
26a77edbc7
11 files changed
+198
-160
No files matched your search
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user