From 3a361e8c72e05a00a5022e4d968eec371c351c03 Mon Sep 17 00:00:00 2001 From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com> Date: Mon, 18 Nov 2024 09:34:45 -0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20move=20worker=20filt?= =?UTF-8?q?er=20generator=20outside=20of=20rose::form=20(#2574)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 💡 move worker filter generator outside of rose::form --- addons/core/translations/en-us.yaml | 2 +- .../components/form/worker-filter/index.hbs | 19 ++ .../worker-filter-generator/index.hbs | 174 ++++++++++++++++ .../index.js | 4 +- .../app/components/worker-filter/index.hbs | 194 ------------------ .../target/edit-egress-worker-filter.hbs | 2 +- .../target/edit-ingress-worker-filter.hbs | 2 +- .../worker-filter-generator/index-test.js | 135 ++++++++++++ .../components/worker-filter/index-test.js | 148 ------------- 9 files changed, 333 insertions(+), 347 deletions(-) create mode 100644 ui/admin/app/components/form/worker-filter/index.hbs create mode 100644 ui/admin/app/components/worker-filter-generator/index.hbs rename ui/admin/app/components/{worker-filter => worker-filter-generator}/index.js (92%) delete mode 100644 ui/admin/app/components/worker-filter/index.hbs create mode 100644 ui/admin/tests/integration/components/worker-filter-generator/index-test.js delete mode 100644 ui/admin/tests/integration/components/worker-filter/index-test.js diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml index 44ea773fc9..b02bee843f 100644 --- a/addons/core/translations/en-us.yaml +++ b/addons/core/translations/en-us.yaml @@ -156,5 +156,5 @@ worker-filter-generator: helper: Format a worker name operator: matches: matches - includes: includes + contains: contains default: --Select an option-- diff --git a/ui/admin/app/components/form/worker-filter/index.hbs b/ui/admin/app/components/form/worker-filter/index.hbs new file mode 100644 index 0000000000..c2d48d8e85 --- /dev/null +++ b/ui/admin/app/components/form/worker-filter/index.hbs @@ -0,0 +1,19 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: BUSL-1.1 +}} + + + + + + \ No newline at end of file diff --git a/ui/admin/app/components/worker-filter-generator/index.hbs b/ui/admin/app/components/worker-filter-generator/index.hbs new file mode 100644 index 0000000000..6366d70ea7 --- /dev/null +++ b/ui/admin/app/components/worker-filter-generator/index.hbs @@ -0,0 +1,174 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: BUSL-1.1 +}} + + + + + + + + + {{#if (get @model.errors @name)}} + + {{#each (get @model.errors @name) as |error|}} + {{error.message}} + {{/each}} + + {{/if}} + + + + + + {{t 'worker-filter-generator.toggle.title'}} + {{t + 'worker-filter-generator.toggle.description' + }} + + + + +{{#if this.showFilterGenerator}} + + {{t 'worker-filter-generator.filter-generator.title'}} + + {{t 'worker-filter-generator.filter-generator.description'}} +
+ + {{t 'worker-filter-generator.filter-generator.link'}} + + + + {{t + 'worker-filter-generator.filter-generator.tag.label' + }} + {{t + 'worker-filter-generator.filter-generator.tag.helper' + }} + + + {{t + 'worker-filter-generator.filter-generator.name.label' + }} + {{t + 'worker-filter-generator.filter-generator.name.helper' + }} + + + + + {{t + 'worker-filter-generator.filter-generator.input-values.title' + }} + {{t + 'worker-filter-generator.filter-generator.input-values.description' + }} + + {{#if (eq this.selectedGeneratorType this.generatorTagType)}} + + {{t 'form.key.label'}} + + {{else}} + + {{t 'form.operator.label'}} + + + {{#each this.operatorOptions as |operator|}} + + {{/each}} + + + {{/if}} + + + + {{t 'form.value.label'}} + + + + + + {{t + 'worker-filter-generator.filter-generator.formatted-result.title' + }} + {{t + 'worker-filter-generator.filter-generator.formatted-result.description' + }} + + {{t + 'worker-filter-generator.filter-generator.formatted-result.label' + }} +
+ + +
+ + +{{/if}} \ No newline at end of file diff --git a/ui/admin/app/components/worker-filter/index.js b/ui/admin/app/components/worker-filter-generator/index.js similarity index 92% rename from ui/admin/app/components/worker-filter/index.js rename to ui/admin/app/components/worker-filter-generator/index.js index bdc939a8fd..bd3afe7e76 100644 --- a/ui/admin/app/components/worker-filter/index.js +++ b/ui/admin/app/components/worker-filter-generator/index.js @@ -7,12 +7,12 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; -export default class WorkerFilterComponent extends Component { +export default class WorkerFilterGeneratorIndexComponent extends Component { // =attributes generatorTagType = 'tag'; generatorNameType = 'name'; - operatorOptions = ['==', 'matches', 'includes']; + operatorOptions = ['==', 'matches', 'contains']; @tracked showFilterGenerator; @tracked selectedGeneratorType = this.generatorTagType; @tracked key = ''; diff --git a/ui/admin/app/components/worker-filter/index.hbs b/ui/admin/app/components/worker-filter/index.hbs deleted file mode 100644 index 4dafac5880..0000000000 --- a/ui/admin/app/components/worker-filter/index.hbs +++ /dev/null @@ -1,194 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - - - - - - - - - - {{#if (get @model.errors @name)}} - - {{#each (get @model.errors @name) as |error|}} - {{error.message}} - {{/each}} - - {{/if}} - - - - - - {{t 'worker-filter-generator.toggle.title'}} - {{t - 'worker-filter-generator.toggle.description' - }} - - - - - {{#if this.showFilterGenerator}} - - {{t - 'worker-filter-generator.filter-generator.title' - }} - - {{t 'worker-filter-generator.filter-generator.description'}} -
- - {{t 'worker-filter-generator.filter-generator.link'}} - - - - {{t - 'worker-filter-generator.filter-generator.tag.label' - }} - {{t - 'worker-filter-generator.filter-generator.tag.helper' - }} - - - {{t - 'worker-filter-generator.filter-generator.name.label' - }} - {{t - 'worker-filter-generator.filter-generator.name.helper' - }} - - - - - {{t - 'worker-filter-generator.filter-generator.input-values.title' - }} - {{t - 'worker-filter-generator.filter-generator.input-values.description' - }} - - {{#if (eq this.selectedGeneratorType this.generatorTagType)}} - - {{t 'form.key.label'}} - - {{else}} - - {{t 'form.operator.label'}} - - - {{#each this.operatorOptions as |operator|}} - - {{/each}} - - - {{/if}} - - - - {{t 'form.value.label'}} - - - - - - {{t - 'worker-filter-generator.filter-generator.formatted-result.title' - }} - {{t - 'worker-filter-generator.filter-generator.formatted-result.description' - }} - - {{t - 'worker-filter-generator.filter-generator.formatted-result.label' - }} -
- - -
- - - {{/if}} - - - \ No newline at end of file diff --git a/ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs b/ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs index e1b02e3280..3a5778062c 100644 --- a/ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs +++ b/ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs @@ -25,7 +25,7 @@ - - `, + ); + + 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) { + this.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + + 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) { + this.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + + assert.dom(FILTER_GENERATOR).isNotVisible(); + + await click(SHOW_FILTER_GENERATOR); + + assert.dom(FILTER_GENERATOR).isVisible(); + }); + + test('filter generator tag type shows key and value input boxes', async function (assert) { + this.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + await click(SHOW_FILTER_GENERATOR); + await click(TAG_TYPE_OPTION); + + 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) { + this.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + 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.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + + 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.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + + 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.model = { ingress_worker_filter: 'ingress filter' }; + await render( + hbs``, + ); + + 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(GENERATED_VALUE).hasNoValue(); + }); + }, +); diff --git a/ui/admin/tests/integration/components/worker-filter/index-test.js b/ui/admin/tests/integration/components/worker-filter/index-test.js deleted file mode 100644 index 2a993ba459..0000000000 --- a/ui/admin/tests/integration/components/worker-filter/index-test.js +++ /dev/null @@ -1,148 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -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 = () => {}; - this.model = { egress_worker_filter: 'egress filter' }; - await render( - hbs``, - ); - - 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) { - this.submit = () => {}; - this.cancel = () => {}; - this.model = { ingress_worker_filter: 'ingress filter' }; - await render( - hbs``, - ); - - 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) { - this.submit = () => {}; - this.cancel = () => {}; - this.model = { ingress_worker_filter: 'ingress filter' }; - await render( - hbs``, - ); - - assert.dom(FILTER_GENERATOR).isNotVisible(); - - await click(SHOW_FILTER_GENERATOR); - - assert.dom(FILTER_GENERATOR).isVisible(); - }); - - test('filter generator tag type shows key and value input boxes', async function (assert) { - this.submit = () => {}; - this.cancel = () => {}; - this.model = { ingress_worker_filter: 'ingress filter' }; - await render( - hbs``, - ); - await click(SHOW_FILTER_GENERATOR); - await click(TAG_TYPE_OPTION); - - 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) { - this.submit = () => {}; - this.cancel = () => {}; - this.model = { ingress_worker_filter: 'ingress filter' }; - await render( - hbs``, - ); - 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``, - ); - - 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``, - ); - - 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``, - ); - - 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(GENERATED_VALUE).hasNoValue(); - }); -});