Icu 15743 tag workflow

addons/core/translations/en-us.yaml

@@ -141,6 +141,13 @@ worker-filter-generator:
     title: Filter generator
     description: Choose what you want to format into a filter.
     link: Learn more about formatting a worker filter.
+    input-values:
+      title: Input values
+      description: Next, input what you want to format.
+    formatted-result:
+      title: Formatted result
+      description: Copy and paste this into the editor above.
+      label: Generated result
     tag:
       label: Tag
       helper: Format a worker tag

ui/admin/app/components/worker-filter/index.hbs

@@ -64,7 +64,11 @@
           {{t 'worker-filter-generator.filter-generator.link'}}
         </Hds::Link::Inline>
       </G.HelperText>
-      <G.RadioField as |F|>
+      <G.RadioField
+        @value={{this.generatorTagType}}
+        checked={{eq this.selectedGeneratorType this.generatorTagType}}
+        as |F|
+      >
         <F.Label>{{t
             'worker-filter-generator.filter-generator.tag.label'
           }}</F.Label>
@@ -73,6 +77,63 @@
           }}</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>
+        <F.HelperText>{{t
+            'worker-filter-generator.filter-generator.input-values.description'
+          }}</F.HelperText>
+        <F.Control>
+          <Hds::Form::TextInput::Field
+            @value={{this.tagKey}}
+            name='tag_key'
+            @width='320px'
+            {{on 'input' (set-from-event this 'tagKey')}}
+            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'
+            @width='320px'
+            {{on 'input' (set-from-event this 'tagValue')}}
+            as |F|
+          >
+            <F.Label>{{t 'form.value.label'}}</F.Label>
+          </Hds::Form::TextInput::Field>
+        </F.Control>
+      </Hds::Form::Fieldset>
+    {{/if}}
+
+    <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>
   {{/if}}
 
   <form.actions

ui/admin/app/components/worker-filter/index.js

@@ -10,7 +10,22 @@ import { tracked } from '@glimmer/tracking';
 export default class WorkerFilterComponent extends Component {
   // =attributes
 
+  generatorTagType = 'tag';
+  generatorNameType = 'name';
   @tracked showFilterGenerator;
+  @tracked selectedGeneratorType = this.generatorTagType;
+  @tracked tagKey = '';
+  @tracked tagValue = '';
+
+  /**
+   * @return {string}
+   */
+  get generatedResult() {
+    let keyValue = this.tagKey ? `"/tags/${this.tagKey}"` : '';
+    let tagValue = this.tagValue ? `"${this.tagValue}"` : '';
+
+    return keyValue || tagValue ? `${tagValue} in ${keyValue}` : '';
+  }
 
   // =actions
 

ui/admin/app/styles/app.scss

@@ -1078,3 +1078,17 @@
     margin-bottom: 0;
   }
 }
+
+// worker filter generator
+.formatted-results {
+  p {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.generated-results-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: flex-start;
+}

ui/admin/tests/integration/components/worker-filter/index-test.js

@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
+import { render, click, fillIn } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
@@ -55,4 +55,33 @@ module('Integration | Component | worker-filter/index', function (hooks) {
 
     assert.dom('[name="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`<WorkerFilter @name='ingress_worker_filter' @model={{this.model}} @submit={{this.submit}} @cancel={{this.cancel}}/>`,
+    );
+    await click('[name="show_filter_generator"]');
+    await click('[value="tag"]');
+
+    assert.dom('[name="tag_key"]').isVisible();
+    assert.dom('[name="tag_value"]').isVisible();
+  });
+
+  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`<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');
+
+    assert.dom('[name="generated_value"]').hasValue('"val1" in "/tags/key1"');
+  });
 });