Skip to content

Commit c09efba

Browse files
author
Devon Anderson
authored
chore: 🤖 Migrate form.inut to Hds::TextInput::Field (#2151)
* chore: 🤖 Migrate `form.inut` to `Hds::TextInput::Field` Migrate `form/create-worker-led` form to use `Hds:Text::InputField` instead of `form.input` ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12477 * refactor: 💡 Added `optional` and `requred` arguments for fields Added `optional` and `require` arguments for all needed fields. ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12477 * refactor: 💡 fix failing test fix failing test ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12477
1 parent 060f995 commit c09efba

File tree

3 files changed

+105
-55
lines changed

3 files changed

+105
-55
lines changed

‎ui/admin/app/components/form/worker/create-worker-led/index.hbs‎

Lines changed: 97 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,75 @@
1212
<h3>{{t 'resources.worker.form.steps.1.title'}}</h3>
1313
<div class='worker-create-section'>
1414
{{#if (feature-flag 'byow-pki-hcp-cluster-id')}}
15-
<form.input
16-
@name='cluster_id'
15+
<Hds::Form::TextInput::Field
16+
name='cluster_id'
1717
@value={{this.clusterID}}
18-
@label={{t 'resources.worker.form.cluster_id.label'}}
19-
@helperText={{t 'resources.worker.form.cluster_id.help'}}
20-
@linkText={{t 'actions.learn-more'}}
21-
@link={{doc-url 'worker.manage-workers'}}
18+
@isOptional={{true}}
2219
placeholder='69b6ddb3-ffec-42ab-a994-f43a6519470a'
23-
/>
20+
{{on 'input' (set-from-event this 'clusterID')}}
21+
as |F|
22+
>
23+
<F.Label>{{t 'resources.worker.form.cluster_id.label'}}</F.Label>
24+
<F.HelperText>
25+
{{t 'resources.worker.form.cluster_id.help'}}
26+
<Hds::Link::Inline @href={{doc-url 'worker.manage-workers'}}>
27+
{{t 'actions.learn-more'}}
28+
</Hds::Link::Inline>
29+
</F.HelperText>
30+
</Hds::Form::TextInput::Field>
2431
{{/if}}
2532

26-
<form.input
27-
@name='ip_address'
33+
<Hds::Form::TextInput::Field
34+
name='ip_address'
2835
@value={{this.ipAddress}}
29-
@label={{t 'resources.worker.form.ip_address.label'}}
30-
@helperText={{t 'resources.worker.form.ip_address.help'}}
31-
@linkText={{t 'actions.learn-more'}}
32-
@link={{doc-url 'worker'}}
36+
@isOptional={{true}}
3337
placeholder='worker1.example.com'
34-
/>
35-
36-
<form.input
37-
@name='config_file_path'
38+
{{on 'input' (set-from-event this 'ipAddress')}}
39+
as |F|
40+
>
41+
<F.Label>{{t 'resources.worker.form.ip_address.label'}}</F.Label>
42+
<F.HelperText>
43+
{{t 'resources.worker.form.ip_address.help'}}
44+
<Hds::Link::Inline @href={{doc-url 'worker'}}>
45+
{{t 'actions.learn-more'}}
46+
</Hds::Link::Inline>
47+
</F.HelperText>
48+
</Hds::Form::TextInput::Field>
49+
50+
<Hds::Form::TextInput::Field
51+
name='config_file_path'
3852
@value={{this.configFilePath}}
39-
@label={{t 'resources.worker.form.config_file_path.label'}}
40-
@helperText={{t 'resources.worker.form.config_file_path.help'}}
53+
@isOptional={{true}}
4154
placeholder='/home/ubuntu/boundary'
42-
/>
55+
{{on 'input' (set-from-event this 'configFilePath')}}
56+
as |F|
57+
>
58+
<F.Label>{{t 'resources.worker.form.config_file_path.label'}}</F.Label>
59+
<F.HelperText>
60+
{{t 'resources.worker.form.config_file_path.help'}}
61+
</F.HelperText>
62+
</Hds::Form::TextInput::Field>
4363

4464
{{#if (not (feature-flag 'byow-pki-hcp-cluster-id'))}}
45-
<form.input
46-
@name='initial_upstreams'
65+
<Hds::Form::TextInput::Field
66+
name='initial_upstreams'
4767
@value={{this.initialUpstreams}}
48-
@label={{t 'resources.worker.form.initial_upstreams.label'}}
49-
@helperText={{t 'resources.worker.form.initial_upstreams.help'}}
68+
@isOptional={{true}}
5069
placeholder='10.0.0.1, 10.0.0.2, 10.0.0.3'
51-
/>
70+
{{on 'input' (set-from-event this 'initialUpstreams')}}
71+
as |F|
72+
>
73+
<F.Label>{{t 'resources.worker.form.initial_upstreams.label'}}</F.Label>
74+
<F.HelperText>
75+
{{t 'resources.worker.form.initial_upstreams.help'}}
76+
</F.HelperText>
77+
</Hds::Form::TextInput::Field>
5278
{{/if}}
53-
<Form::Field::ListWrapper @layout='horizontal' @disabled={{form.disabled}}>
79+
<Form::Field::ListWrapper
80+
@layout='horizontal'
81+
@disabled={{form.disabled}}
82+
@isOptional={{true}}
83+
>
5484
<:fieldset as |F|>
5585
<F.Legend>{{t 'resources.worker.form.worker_tags.label'}}</F.Legend>
5686
<F.HelperText>
@@ -70,7 +100,7 @@
70100
</Form::Field::ListWrapper>
71101

72102
{{#if (feature-flag 'ssh-session-recording')}}
73-
<Hds::Form::Fieldset as |F|>
103+
<Hds::Form::Fieldset @isOptional={{true}} as |F|>
74104
<F.Legend>{{t
75105
'resources.worker.form.local_session_recording_storage.label'
76106
}}</F.Legend>
@@ -94,15 +124,19 @@
94124
</F.Control>
95125
{{#if this.enableRecordingStoragePath}}
96126
<F.Control>
97-
<form.input
98-
@name='recording_storage_path'
127+
<Hds::Form::TextInput::Field
128+
name='recording_storage_path'
99129
@value={{this.recording_storage_path}}
100-
@label={{t 'resources.worker.form.recording_storage_path.label'}}
101-
@helperText={{t
102-
'resources.worker.form.recording_storage_path.help'
103-
}}
104130
placeholder='/tmp/worker1'
105-
/>
131+
as |F|
132+
>
133+
<F.Label>{{t
134+
'resources.worker.form.recording_storage_path.label'
135+
}}</F.Label>
136+
<F.HelperText>
137+
{{t 'resources.worker.form.recording_storage_path.help'}}
138+
</F.HelperText>
139+
</Hds::Form::TextInput::Field>
106140
</F.Control>
107141
{{/if}}
108142
</Hds::Form::Fieldset>
@@ -160,26 +194,38 @@
160194
<h3>{{t 'resources.worker.form.steps.3.title'}}</h3>
161195
<div class='worker-create-section'>
162196
<div class='worker-auth-token'>
163-
<form.input
164-
@name='worker_auth_registration_request'
197+
<Hds::Form::TextInput::Field
198+
name='worker_auth_registration_request'
165199
@value={{this.generatedWorkerAuthToken}}
166-
@disabled={{@model.cannotSave}}
167-
@label={{t
168-
'resources.worker.form.steps.3.worker_auth_registration_request.label'
169-
}}
170-
@helperText={{t
171-
'resources.worker.form.steps.3.worker_auth_registration_request.help'
172-
}}
173-
/>
200+
@isRequired={{true}}
201+
@isInvalid={{@model.errors.worker_generated_auth_token}}
202+
disabled={{form.disabled}}
203+
{{on 'input' (set-from-event this 'generatedWorkerAuthToken')}}
204+
as |F|
205+
>
206+
<F.Label>{{t
207+
'resources.worker.form.steps.3.worker_auth_registration_request.label'
208+
}}</F.Label>
209+
<F.HelperText>
210+
{{t
211+
'resources.worker.form.steps.3.worker_auth_registration_request.help'
212+
}}
213+
</F.HelperText>
214+
{{#if @model.errors.worker_generated_auth_token}}
215+
<F.Error as |E|>
216+
{{#each @model.errors.worker_generated_auth_token as |error|}}
217+
<E.Message>{{error.message}}</E.Message>
218+
{{/each}}
219+
</F.Error>
220+
{{/if}}
221+
</Hds::Form::TextInput::Field>
174222
{{#if (can 'save worker' @model)}}
175-
<Rose::Button
176-
@onSubmit={{true}}
177-
@style='primary'
223+
<Hds::Button
224+
@text={{t 'resources.worker.actions.register'}}
225+
type='submit'
226+
disabled={{@model.cannotSave}}
178227
class='nowrap'
179-
@disabled={{@model.cannotSave}}
180-
>
181-
{{t 'resources.worker.actions.register'}}
182-
</Rose::Button>
228+
/>
183229
{{/if}}
184230
</div>
185231

‎ui/admin/app/styles/app.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,10 @@
299299
align-items: flex-end;
300300
display: flex;
301301
gap: sizing.rems(m);
302+
303+
[class*='hds-form-field--layout'] {
304+
margin-bottom: 0;
305+
}
302306
}
303307

304308
.worker-success {

‎ui/admin/tests/acceptance/workers/create-test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,18 @@ module('Acceptance | workers | create', function (hooks) {
5353
const featuresService = this.owner.lookup('service:features');
5454
featuresService.enable('byow-pki-hcp-cluster-id');
5555
await visit(newWorkerURL);
56-
const labels = findAll('label.rose-form-label');
57-
assert.dom(labels[0]).hasText('Boundary Cluster ID');
56+
const labels = findAll('label.hds-form-label');
57+
assert.dom(labels[0]).hasText('Boundary Cluster ID (Optional)');
5858
assert.dom(labels[2]).doesNotIncludeText('Initial Upstreams');
5959
});
6060

6161
test('initial upstreams input field is visible for `oss` binary', async function (assert) {
6262
const featuresService = this.owner.lookup('service:features');
6363
await visit(newWorkerURL);
64-
const labels = findAll('label.rose-form-label');
64+
const labels = findAll('label.hds-form-label');
6565
assert.false(featuresService.isEnabled('byow-pki-hcp-cluster-id'));
6666
assert.dom(labels[0]).doesNotIncludeText('Boundary Cluster ID');
67-
assert.dom(labels[2]).hasText('Initial Upstreams');
67+
assert.dom(labels[2]).hasText('Initial Upstreams (Optional)');
6868
});
6969

7070
test('download and install step shows correct oss instructions', async function (assert) {

0 commit comments

Comments
 (0)