Skip to content

Commit

Permalink
Icu 15744 name workflow (#2566)
Browse files Browse the repository at this point in the history
* feat: 🎸 add name workflow

βœ… Closes: https://hashicorp.atlassian.net/browse/ICU-15744

* test: πŸ’ add "name" workflow tests for filter generator

βœ… Closes: https://hashicorp.atlassian.net/browse/ICU-15744

* refactor: πŸ’‘ use const test selectors for filter generator

βœ… Closes: https://hashicorp.atlassian.net/browse/ICU-15744

* refactor: πŸ’‘ add default option

βœ… Closes: https://hashicorp.atlassian.net/browse/ICU-15744

* docs: ✏️ fix comment

βœ… Closes: https://hashicorp.atlassian.net/browse/ICU-15744

---------

Co-authored-by: cameronperera <cameron.perera@hashicorp.com>
  • Loading branch information
lisbet-alvarez and cameronperera committed Dec 5, 2024
1 parent 171e001 commit b5d0c65
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 50 deletions.
7 changes: 7 additions & 0 deletions addons/core/translations/en-us.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -151,3 +151,10 @@ worker-filter-generator:
tag:
label: Tag
helper: Format a worker tag
name:
label: Name
helper: Format a worker name
operator:
matches: matches
includes: includes
default: --Select an option--
2 changes: 2 additions & 0 deletions addons/core/translations/form/en-us.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ key:
label: Key
value:
label: Value
operator:
label: Operator
callback_url:
label: Callback URL
help: The URL to which the third-party provider sends the authentication response. Paste this into the provider configuration.
Expand Down
97 changes: 74 additions & 23 deletions ui/admin/app/components/worker-filter/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,12 @@
<Hds::Separator />

{{#if this.showFilterGenerator}}
<Hds::Form::Radio::Group @name='filter_generator' as |G|>
<Hds::Form::Radio::Group
class='filter-generator-selection'
@name='filter_generator'
{{on 'change' this.setGeneratorType}}
as |G|
>
<G.Legend>{{t
'worker-filter-generator.filter-generator.title'
}}</G.Legend>
Expand All @@ -76,40 +81,86 @@
'worker-filter-generator.filter-generator.tag.helper'
}}</F.HelperText>
</G.RadioField>
</Hds::Form::Radio::Group>

{{#if (eq this.selectedGeneratorType this.generatorTagType)}}
<Hds::Form::Fieldset class='input-values' as |F|>
<F.Legend>{{t
'worker-filter-generator.filter-generator.input-values.title'
}}</F.Legend>
<G.RadioField
@value={{this.generatorNameType}}
checked={{eq this.selectedGeneratorType this.generatorNameType}}
as |F|
>
<F.Label>{{t
'worker-filter-generator.filter-generator.name.label'
}}</F.Label>
<F.HelperText>{{t
'worker-filter-generator.filter-generator.input-values.description'
'worker-filter-generator.filter-generator.name.helper'
}}</F.HelperText>
<F.Control>
</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)}}
<Hds::Form::TextInput::Field
@value={{this.tagKey}}
@value={{this.key}}
name='tag_key'
@width='320px'
{{on 'input' (set-from-event this 'tagKey')}}
{{on 'input' (set-from-event this 'key')}}
as |F|
>
<F.Label>{{t 'form.key.label'}}</F.Label>
</Hds::Form::TextInput::Field>
</F.Control>
<F.Control>
<Hds::Form::TextInput::Field
@value={{this.tagValue}}
name='tag_value'
{{else}}
<Hds::Form::Select::Field
name='name_operator'
@value={{this.operator}}
@width='320px'
{{on 'input' (set-from-event this 'tagValue')}}
{{on 'change' (set-from-event this 'operator')}}
as |F|
>
<F.Label>{{t 'form.value.label'}}</F.Label>
</Hds::Form::TextInput::Field>
</F.Control>
</Hds::Form::Fieldset>
{{/if}}
<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>

<Hds::Form::Fieldset class='formatted-results' @layout='vertical' as |F|>
<F.Legend>{{t
Expand Down
32 changes: 26 additions & 6 deletions ui/admin/app/components/worker-filter/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,26 @@ export default class WorkerFilterComponent extends Component {

generatorTagType = 'tag';
generatorNameType = 'name';
operatorOptions = ['==', 'matches', 'includes'];
@tracked showFilterGenerator;
@tracked selectedGeneratorType = this.generatorTagType;
@tracked tagKey = '';
@tracked tagValue = '';
@tracked key = '';
@tracked value = '';
@tracked operator = '';

/**
* @return {string}
*/
get generatedResult() {
let keyValue = this.tagKey ? `"/tags/${this.tagKey}"` : '';
let tagValue = this.tagValue ? `"${this.tagValue}"` : '';

return keyValue || tagValue ? `${tagValue} in ${keyValue}` : '';
let valueResult = this.value ? `"${this.value}"` : '';
if (this.selectedGeneratorType === 'tag') {
let keyResult = this.key ? `"/tags/${this.key}"` : '';
return keyResult || valueResult ? `${valueResult} in ${keyResult}` : '';
} else {
return valueResult || this.operator
? `"/name" ${this.operator} ${valueResult}`
: '';
}
}

// =actions
Expand All @@ -47,4 +54,17 @@ export default class WorkerFilterComponent extends Component {
toggleFilterGenerator() {
this.showFilterGenerator = !this.showFilterGenerator;
}

/**
* Clears out key, value, and operator.
* Sets selectedGeneratorType to a value.
* @param {object} event
*/
@action
setGeneratorType(event) {
this.key = '';
this.value = '';
this.operator = '';
this.selectedGeneratorType = event.target.value;
}
}
6 changes: 6 additions & 0 deletions ui/admin/app/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1058,6 +1058,12 @@
}

// worker filter generator
.filter-generator-selection {
.hds-form-group__control-field {
margin-bottom: 0;
}
}

.formatted-results {
p {
margin-bottom: 0.5rem;
Expand Down
103 changes: 82 additions & 21 deletions ui/admin/tests/integration/components/worker-filter/index-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,26 @@

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, fillIn } from '@ember/test-helpers';
import { render, click, fillIn, select } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { setupIntl } from 'ember-intl/test-support';

module('Integration | Component | worker-filter/index', function (hooks) {
setupRenderingTest(hooks);
setupIntl(hooks, 'en-us');

const CODE_EDITOR = '[data-test-code-editor-field-editor]';
const CODE_EDITOR_LINE =
'[data-test-code-editor-field-editor] .CodeMirror-line';
const FILTER_GENERATOR = '[name="filter_generator"]';
const SHOW_FILTER_GENERATOR = '[name="show_filter_generator"]';
const TAG_TYPE_OPTION = '[value="tag"]';
const NAME_TYPE_OPTION = '[value="name"]';
const TAG_KEY = '[name="tag_key"]';
const TAG_VALUE = '[name="tag_value"]';
const NAME_OPERATOR = '[name="name_operator"]';
const GENERATED_VALUE = '[name="generated_value"]';

test('it renders correct content when egress_worker_filter is passed in', async function (assert) {
this.submit = () => {};
this.cancel = () => {};
Expand All @@ -21,10 +33,8 @@ module('Integration | Component | worker-filter/index', function (hooks) {
hbs`<WorkerFilter @name='egress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}} />`,
);

assert.dom('[data-test-code-editor-field-editor]').isVisible();
assert
.dom('[data-test-code-editor-field-editor] .CodeMirror-line')
.hasText(this.model.egress_worker_filter);
assert.dom(CODE_EDITOR).isVisible();
assert.dom(CODE_EDITOR_LINE).hasText(this.model.egress_worker_filter);
});

test('it renders correct content when ingress_worker_filter is passed in', async function (assert) {
Expand All @@ -35,10 +45,8 @@ module('Integration | Component | worker-filter/index', function (hooks) {
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);

assert.dom('[data-test-code-editor-field-editor]').isVisible();
assert
.dom('[data-test-code-editor-field-editor] .CodeMirror-line')
.hasText(this.model.ingress_worker_filter);
assert.dom(CODE_EDITOR).isVisible();
assert.dom(CODE_EDITOR_LINE).hasText(this.model.ingress_worker_filter);
});

test('toggleFilterGenerator shows filter generator when toggled on', async function (assert) {
Expand All @@ -49,11 +57,11 @@ module('Integration | Component | worker-filter/index', function (hooks) {
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);

assert.dom('[name="filter_generator"]').isNotVisible();
assert.dom(FILTER_GENERATOR).isNotVisible();

await click('[name="show_filter_generator"]');
await click(SHOW_FILTER_GENERATOR);

assert.dom('[name="filter_generator"]').isVisible();
assert.dom(FILTER_GENERATOR).isVisible();
});

test('filter generator tag type shows key and value input boxes', async function (assert) {
Expand All @@ -63,11 +71,12 @@ module('Integration | Component | worker-filter/index', function (hooks) {
await render(
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);
await click('[name="show_filter_generator"]');
await click('[value="tag"]');
await click(SHOW_FILTER_GENERATOR);
await click(TAG_TYPE_OPTION);

assert.dom('[name="tag_key"]').isVisible();
assert.dom('[name="tag_value"]').isVisible();
assert.dom(TAG_KEY).isVisible();
assert.dom(TAG_VALUE).isVisible();
assert.dom(NAME_OPERATOR).isNotVisible();
});

test('filter generator tag type generates correctly formatted filter', async function (assert) {
Expand All @@ -77,11 +86,63 @@ module('Integration | Component | worker-filter/index', function (hooks) {
await render(
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);
await click('[name="show_filter_generator"]');
await click('[value="tag"]');
await fillIn('[name="tag_key"]', 'key1');
await fillIn('[name="tag_value"]', 'val1');
await click(SHOW_FILTER_GENERATOR);
await click(TAG_TYPE_OPTION);
await fillIn(TAG_KEY, 'key1');
await fillIn(TAG_VALUE, 'val1');

assert.dom(GENERATED_VALUE).hasValue('"val1" in "/tags/key1"');
});

test('filter generator name type shows operator and value fields', async function (assert) {
this.submit = () => {};
this.cancel = () => {};
this.model = { ingress_worker_filter: 'ingress filter' };
await render(
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);

await click(SHOW_FILTER_GENERATOR);
await click(NAME_TYPE_OPTION);

assert.dom(NAME_OPERATOR).isVisible();
assert.dom(TAG_VALUE).isVisible();
assert.dom(TAG_KEY).isNotVisible();
});

test('filter generator name type generates correctly formatted filter', async function (assert) {
this.submit = () => {};
this.cancel = () => {};
this.model = { ingress_worker_filter: 'ingress filter' };
await render(
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);

await click(SHOW_FILTER_GENERATOR);
await click(NAME_TYPE_OPTION);
await fillIn(TAG_VALUE, 'val1');
await select(NAME_OPERATOR, '==');

assert.dom(GENERATED_VALUE).hasValue('"/name" == "val1"');
});

test('generated result is cleared when switching filter types', async function (assert) {
this.submit = () => {};
this.cancel = () => {};
this.model = { ingress_worker_filter: 'ingress filter' };
await render(
hbs`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
);

await click(SHOW_FILTER_GENERATOR);
await click(NAME_TYPE_OPTION);
await fillIn(TAG_VALUE, 'val1');
await select(NAME_OPERATOR, '==');

assert.dom(GENERATED_VALUE).hasValue('"/name" == "val1"');

await click(TAG_TYPE_OPTION);

assert.dom('[name="generated_value"]').hasValue('"val1" in "/tags/key1"');
assert.dom(GENERATED_VALUE).hasNoValue();
});
});

0 comments on commit b5d0c65

Please sign in to comment.