Skip to content

Commit

Permalink
refactor: 💡 worker filter clean-up (#2592)
Browse files Browse the repository at this point in the history 
* refactor: 💡 worker filter clean-up

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15816

* refactor: 💡 add aria labels & missing can save check

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15816

* refactor: 💡 pr feedback of using uuid

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15816

* Add missing copyright headers

* refactor: 💡 use unique-id helper for aria labels (pr feedback)

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15816

---------

Co-authored-by: lisbet-alvarez <lisbet-alvarez@users.noreply.github.com>
  • Loading branch information
@lisbet-alvarez @cameronperera
2 people authored and cameronperera committed Dec 5, 2024
1 parent 28e55ba commit 122f138
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 142 deletions.
62 changes: 35 additions & 27 deletions ui/admin/app/components/form/storage-bucket/aws/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,33 +453,41 @@
{{/if}}

{{! worker_filter }}
<Hds::Form::Fieldset
class='storage-bucket-worker-filter'
@isRequired={{true}}
as |F|
>
<F.Legend>{{t
'resources.storage-bucket.form.worker_filter.label'
}}</F.Legend>
<F.HelperText>
{{t 'resources.storage-bucket.form.worker_filter.help'}}
<Hds::Link::Inline @href={{doc-url 'storage-bucket.worker-filter'}}>
{{t 'actions.learn-more'}}
</Hds::Link::Inline>
</F.HelperText>
<F.Control>
{{#if form.disabled}}
<Hds::CodeBlock
@language='bash'
@value={{@model.worker_filter}}
@hasCopyButton={{true}}
data-test-worker-filter
/>
{{else}}
<WorkerFilterGenerator @model={{@model}} @name='worker_filter' />
{{/if}}
</F.Control>
</Hds::Form::Fieldset>
{{#let (unique-id) (unique-id) as |labelId helpId|}}
<Hds::Form::Fieldset
aria-labelledby={{labelId}}
aria-describedby={{helpId}}
class='storage-bucket-worker-filter'
@isRequired={{true}}
as |F|
>
<F.Legend id={{labelId}}>{{t
'resources.storage-bucket.form.worker_filter.label'
}}</F.Legend>
<F.HelperText id={{helpId}}>
{{t 'resources.storage-bucket.form.worker_filter.help'}}
<Hds::Link::Inline @href={{doc-url 'storage-bucket.worker-filter'}}>
{{t 'actions.learn-more'}}
</Hds::Link::Inline>
</F.HelperText>
<F.Control>
{{#if form.disabled}}
<Hds::CodeBlock
@language='bash'
@value={{@model.worker_filter}}
@hasCopyButton={{true}}
data-test-worker-filter
/>
{{else}}
<WorkerFilterGenerator
@model={{@model}}
@name='worker_filter'
@hideToolbar={{true}}
/>
{{/if}}
</F.Control>
</Hds::Form::Fieldset>
{{/let}}

{{! JUST for static credentials }}
{{#unless this.showDynamicCredentials}}
Expand Down
5 changes: 3 additions & 2 deletions ui/admin/app/components/form/storage-bucket/aws/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ import { tracked } from '@glimmer/tracking';

export default class FormStorageBucketAwsIndexComponent extends Component {
// =attributes
@tracked selectedCredentialType = this.args.model.credentialType;

@tracked selectedCredentialType = this.args.model.credentialType;
@tracked showDynamicCredentials =
this.args.model.credentialType === TYPE_CREDENTIAL_DYNAMIC;

/**
* returns an array of available credential types
* @type {array}
Expand All @@ -28,7 +29,7 @@ export default class FormStorageBucketAwsIndexComponent extends Component {
// =actions
/**
* Allows to update the credential type
* @param type {string}
* @param {string} type
*/
@action
updateCredentialTypeSelection(type) {
Expand Down
62 changes: 35 additions & 27 deletions ui/admin/app/components/form/storage-bucket/minio/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,33 +311,41 @@
{{/if}}

{{! worker_filter }}
<Hds::Form::Fieldset
class='storage-bucket-worker-filter'
@isRequired={{true}}
as |F|
>
<F.Legend>{{t
'resources.storage-bucket.form.worker_filter.label'
}}</F.Legend>
<F.HelperText>
{{t 'resources.storage-bucket.form.worker_filter.help'}}
<Hds::Link::Inline @href={{doc-url 'storage-bucket.worker-filter'}}>
{{t 'actions.learn-more'}}
</Hds::Link::Inline>
</F.HelperText>
<F.Control>
{{#if form.disabled}}
<Hds::CodeBlock
@language='bash'
@value={{@model.worker_filter}}
@hasCopyButton={{true}}
data-test-worker-filter
/>
{{else}}
<WorkerFilterGenerator @model={{@model}} @name='worker_filter' />
{{/if}}
</F.Control>
</Hds::Form::Fieldset>
{{#let (unique-id) (unique-id) as |labelId helpId|}}
<Hds::Form::Fieldset
aria-labelledby={{labelId}}
aria-describedby={{helpId}}
class='storage-bucket-worker-filter'
@isRequired={{true}}
as |F|
>
<F.Legend id={{labelId}}>{{t
'resources.storage-bucket.form.worker_filter.label'
}}</F.Legend>
<F.HelperText {{helpId}}>
{{t 'resources.storage-bucket.form.worker_filter.help'}}
<Hds::Link::Inline @href={{doc-url 'storage-bucket.worker-filter'}}>
{{t 'actions.learn-more'}}
</Hds::Link::Inline>
</F.HelperText>
<F.Control>
{{#if form.disabled}}
<Hds::CodeBlock
@language='bash'
@value={{@model.worker_filter}}
@hasCopyButton={{true}}
data-test-worker-filter
/>
{{else}}
<WorkerFilterGenerator
@model={{@model}}
@name='worker_filter'
@hideToolbar={{true}}
/>
{{/if}}
</F.Control>
</Hds::Form::Fieldset>
{{/let}}

{{! disable_credential_rotation }}
<Hds::Form::Checkbox::Field
Expand Down
10 changes: 6 additions & 4 deletions ui/admin/app/components/form/worker-filter/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@
>
<WorkerFilterGenerator @model={{@model}} @name={{@name}} />

<form.actions
@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
{{#if (can 'save model' @model)}}
<form.actions
@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
{{/if}}
</Rose::Form>
182 changes: 102 additions & 80 deletions ui/admin/app/components/worker-filter-generator/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
<Hds::Form::Field as |F|>
<F.Control>
<Rose::CodeEditor as |c|>
<c.toolbar @copyText={{get @model @name}} />
{{#unless @hideToolbar}}
<c.toolbar @copyText={{get @model @name}} />
{{/unless}}
<c.fieldEditor
@onInput={{fn this.setWorkerFilter @model @name}}
@value={{or (get @model @name) ''}}
Expand Down Expand Up @@ -86,89 +88,109 @@
</G.RadioField>
</Hds::Form::Radio::Group>

<Hds::Form::Fieldset class='input-values' as |F|>
<F.Legend>{{t
'worker-filter-generator.filter-generator.input-values.title'
}}</F.Legend>
<F.HelperText>{{t
'worker-filter-generator.filter-generator.input-values.description'
}}</F.HelperText>
<F.Control>
{{#if (eq this.selectedGeneratorType this.generatorTagType)}}
{{#let (unique-id) (unique-id) as |labelId helpId|}}
<Hds::Form::Fieldset
aria-labelledby={{labelId}}
aria-describedby={{helpId}}
class='input-values'
as |F|
>
<F.Legend id={{labelId}}>{{t
'worker-filter-generator.filter-generator.input-values.title'
}}</F.Legend>
<F.HelperText id={{helpId}}>{{t
'worker-filter-generator.filter-generator.input-values.description'
}}</F.HelperText>
<F.Control>
{{#if (eq this.selectedGeneratorType this.generatorTagType)}}
<Hds::Form::TextInput::Field
@value={{this.key}}
name='tag_key'
@width='320px'
{{on 'input' (set-from-event this 'key')}}
as |F|
>
<F.Label>{{t 'form.key.label'}}</F.Label>
</Hds::Form::TextInput::Field>
{{else}}
<Hds::Form::Select::Field
name='name_operator'
@value={{this.operator}}
@width='320px'
{{on 'change' (set-from-event this 'operator')}}
as |F|
>
<F.Label>{{t 'form.operator.label'}}</F.Label>
<F.Options>
<option value=''>
{{t
'worker-filter-generator.filter-generator.operator.default'
}}
</option>
{{#each this.operatorOptions as |operator|}}
<option
value={{operator}}
selected={{eq operator this.operator}}
>
{{#if (eq operator '==')}}
{{operator}}
{{else}}
{{t
(concat
'worker-filter-generator.filter-generator.operator.'
operator
)
}}
{{/if}}
</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
{{/if}}
</F.Control>
<F.Control>
<Hds::Form::TextInput::Field
@value={{this.key}}
name='tag_key'
@value={{this.value}}
name='tag_value'
@width='320px'
{{on 'input' (set-from-event this 'key')}}
{{on 'input' (set-from-event this 'value')}}
as |F|
>
<F.Label>{{t 'form.key.label'}}</F.Label>
<F.Label>{{t 'form.value.label'}}</F.Label>
</Hds::Form::TextInput::Field>
{{else}}
<Hds::Form::Select::Field
name='name_operator'
@value={{this.operator}}
@width='320px'
{{on 'change' (set-from-event this 'operator')}}
as |F|
>
<F.Label>{{t 'form.operator.label'}}</F.Label>
<F.Options>
<option value=''>
{{t 'worker-filter-generator.filter-generator.operator.default'}}
</option>
{{#each this.operatorOptions as |operator|}}
<option value={{operator}} selected={{eq operator this.operator}}>
{{#if (eq operator '==')}}
{{operator}}
{{else}}
{{t
(concat
'worker-filter-generator.filter-generator.operator.'
operator
)
}}
{{/if}}
</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
{{/if}}
</F.Control>
<F.Control>
<Hds::Form::TextInput::Field
@value={{this.value}}
name='tag_value'
@width='320px'
{{on 'input' (set-from-event this 'value')}}
as |F|
>
<F.Label>{{t 'form.value.label'}}</F.Label>
</Hds::Form::TextInput::Field>
</F.Control>
</Hds::Form::Fieldset>
</F.Control>
</Hds::Form::Fieldset>
{{/let}}

<Hds::Form::Fieldset class='formatted-results' @layout='vertical' as |F|>
<F.Legend>{{t
'worker-filter-generator.filter-generator.formatted-result.title'
}}</F.Legend>
<F.HelperText>{{t
'worker-filter-generator.filter-generator.formatted-result.description'
}}</F.HelperText>
<F.Control>
<Hds::Text::Body @tag='p' @weight='semibold'>{{t
'worker-filter-generator.filter-generator.formatted-result.label'
}}</Hds::Text::Body>
<div class='generated-results-container'>
<Hds::Form::TextInput::Base
readonly
id='generated-value'
name='generated_value'
@value={{this.generatedResult}}
@width='320px'
/>
<Hds::Copy::Button @text='Copy' @targetToCopy='#generated-value' />
</div>
</F.Control>
</Hds::Form::Fieldset>
{{#let (unique-id) (unique-id) as |labelId helpId|}}
<Hds::Form::Fieldset
aria-labelledby={{labelId}}
aria-describedby={{helpId}}
class='formatted-results'
@layout='vertical'
as |F|
>
<F.Legend id={{labelId}}>{{t
'worker-filter-generator.filter-generator.formatted-result.title'
}}</F.Legend>
<F.HelperText id={{helpId}}>{{t
'worker-filter-generator.filter-generator.formatted-result.description'
}}</F.HelperText>
<F.Control>
<Hds::Text::Body @tag='p' @weight='semibold'>{{t
'worker-filter-generator.filter-generator.formatted-result.label'
}}</Hds::Text::Body>
<div class='generated-results-container'>
<Hds::Form::TextInput::Base
readonly
id='generated-value'
name='generated_value'
@value={{this.generatedResult}}
@width='320px'
/>
<Hds::Copy::Button @text='Copy' @targetToCopy='#generated-value' />
</div>
</F.Control>
</Hds::Form::Fieldset>
{{/let}}
{{/if}}
2 changes: 1 addition & 1 deletion ui/admin/app/templates/scopes/scope/targets/target/workers.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
'resources.target.workers.accordion-label.ingress-workers'
}}</span>
<Hds::Link::Standalone
@icon='edit'
@icon={{if @model.ingress_worker_filter 'edit' 'plus-circle'}}
@text={{t
(if
@model.ingress_worker_filter
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/config/environment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ module.exports = function (environment) {
'target.enable-session-recording':
'/docs/configuration/session-recording/enable-session-recording',
'worker-filters-format':
'/docs/concepts/filtering/worker-tags#worker-filtering',
'/docs/concepts/filtering/worker-tags#filter-examples',
user: '/docs/concepts/domain-model/users',
downloads: '/install',
'getting-started.desktop':
Expand Down

0 comments on commit 122f138

Please sign in to comment.