From bff9ec27ebc9e47563f151c43d4eb25eeea8606d Mon Sep 17 00:00:00 2001
From: cameronperera <cameron.perera@hashicorp.com>
Date: Wed, 13 Nov 2024 13:29:57 -0600
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20tag=20generato?=
 =?UTF-8?q?r=20workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15743
---
 addons/core/translations/en-us.yaml           |  7 +++
 .../app/components/worker-filter/index.hbs    | 62 ++++++++++++++++++-
 .../app/components/worker-filter/index.js     | 17 ++++-
 ui/admin/app/styles/app.scss                  | 14 +++++
 4 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
index 7f5c9dd21f..3a45a8b281 100644
--- a/addons/core/translations/en-us.yaml
+++ b/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
diff --git a/ui/admin/app/components/worker-filter/index.hbs b/ui/admin/app/components/worker-filter/index.hbs
index 4a3bde3413..f96bbb30b9 100644
--- a/ui/admin/app/components/worker-filter/index.hbs
+++ b/ui/admin/app/components/worker-filter/index.hbs
@@ -64,7 +64,10 @@
           {{t 'worker-filter-generator.filter-generator.link'}}
         </Hds::Link::Inline>
       </G.HelperText>
-      <G.RadioField as |F|>
+      <G.RadioField
+        checked={{eq this.filterGeneratorType this.generatorTagType}}
+        as |F|
+      >
         <F.Label>{{t
             'worker-filter-generator.filter-generator.tag.label'
           }}</F.Label>
@@ -73,6 +76,63 @@
           }}</F.HelperText>
       </G.RadioField>
     </Hds::Form::Radio::Group>
+
+    {{#if (eq this.filterGeneratorType 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='generatedValue'
+            name='generated_value'
+            @value={{this.generatedResult}}
+            @width='320px'
+          />
+          <Hds::Copy::Button @text='Copy' @targetToCopy='#generatedValue' />
+        </div>
+      </F.Control>
+    </Hds::Form::Fieldset>
   {{/if}}
 
   <form.actions
diff --git a/ui/admin/app/components/worker-filter/index.js b/ui/admin/app/components/worker-filter/index.js
index 4620d091f6..e9e9b27646 100644
--- a/ui/admin/app/components/worker-filter/index.js
+++ b/ui/admin/app/components/worker-filter/index.js
@@ -10,7 +10,22 @@ import { tracked } from '@glimmer/tracking';
 export default class WorkerFilterComponent extends Component {
   // =attributes
 
-  @tracked showFilterGenerator;
+  generatorTagType = 'tag';
+  generatorNameType = 'name';
+  @tracked showFilterGenerator = true;
+  @tracked filterGeneratorType = 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
 
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 13fbd6fadd..6254157abd 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;
+}

From 4fb735010cdce8a7836cc4a45cbc9671136f88f4 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <lisbet.alvarez@hashicorp.com>
Date: Wed, 13 Nov 2024 13:02:54 -0800
Subject: [PATCH 2/5] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20test=20cases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15743
---
 .../app/components/worker-filter/index.hbs    |  1 +
 .../app/components/worker-filter/index.js     |  2 +-
 .../components/worker-filter/index-test.js    | 31 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/ui/admin/app/components/worker-filter/index.hbs b/ui/admin/app/components/worker-filter/index.hbs
index f96bbb30b9..acd8bf830d 100644
--- a/ui/admin/app/components/worker-filter/index.hbs
+++ b/ui/admin/app/components/worker-filter/index.hbs
@@ -65,6 +65,7 @@
         </Hds::Link::Inline>
       </G.HelperText>
       <G.RadioField
+        @value={{this.generatorTagType}}
         checked={{eq this.filterGeneratorType this.generatorTagType}}
         as |F|
       >
diff --git a/ui/admin/app/components/worker-filter/index.js b/ui/admin/app/components/worker-filter/index.js
index e9e9b27646..b11a08e95d 100644
--- a/ui/admin/app/components/worker-filter/index.js
+++ b/ui/admin/app/components/worker-filter/index.js
@@ -12,7 +12,7 @@ export default class WorkerFilterComponent extends Component {
 
   generatorTagType = 'tag';
   generatorNameType = 'name';
-  @tracked showFilterGenerator = true;
+  @tracked showFilterGenerator;
   @tracked filterGeneratorType = this.generatorTagType;
   @tracked tagKey = '';
   @tracked tagValue = '';
diff --git a/ui/admin/tests/integration/components/worker-filter/index-test.js b/ui/admin/tests/integration/components/worker-filter/index-test.js
index 29a17c0108..6ad6fc464b 100644
--- a/ui/admin/tests/integration/components/worker-filter/index-test.js
+++ b/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"');
+  });
 });

From c8b96984ede765e7413abae9f9fcacd362b3f255 Mon Sep 17 00:00:00 2001
From: cameronperera <cameron.perera@hashicorp.com>
Date: Wed, 13 Nov 2024 15:07:52 -0600
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20update=20selecte?=
 =?UTF-8?q?d=20type=20name=20to=20selectedGeneratorType?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15743
---
 ui/admin/app/components/worker-filter/index.hbs | 4 ++--
 ui/admin/app/components/worker-filter/index.js  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/admin/app/components/worker-filter/index.hbs b/ui/admin/app/components/worker-filter/index.hbs
index acd8bf830d..ed9d1b0d84 100644
--- a/ui/admin/app/components/worker-filter/index.hbs
+++ b/ui/admin/app/components/worker-filter/index.hbs
@@ -66,7 +66,7 @@
       </G.HelperText>
       <G.RadioField
         @value={{this.generatorTagType}}
-        checked={{eq this.filterGeneratorType this.generatorTagType}}
+        checked={{eq this.selectedGeneratorType this.generatorTagType}}
         as |F|
       >
         <F.Label>{{t
@@ -78,7 +78,7 @@
       </G.RadioField>
     </Hds::Form::Radio::Group>
 
-    {{#if (eq this.filterGeneratorType this.generatorTagType)}}
+    {{#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'
diff --git a/ui/admin/app/components/worker-filter/index.js b/ui/admin/app/components/worker-filter/index.js
index b11a08e95d..ec84d668c4 100644
--- a/ui/admin/app/components/worker-filter/index.js
+++ b/ui/admin/app/components/worker-filter/index.js
@@ -13,7 +13,7 @@ export default class WorkerFilterComponent extends Component {
   generatorTagType = 'tag';
   generatorNameType = 'name';
   @tracked showFilterGenerator;
-  @tracked filterGeneratorType = this.generatorTagType;
+  @tracked selectedGeneratorType = this.generatorTagType;
   @tracked tagKey = '';
   @tracked tagValue = '';
 

From 8af16bad0d952eb4c9d51ef995a52d6689c12279 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 13 Nov 2024 16:03:58 -0600
Subject: [PATCH 4/5] Apply suggestions from code review

minor translation change

Co-authored-by: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
---
 addons/core/translations/en-us.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
index 3a45a8b281..f4406af5e2 100644
--- a/addons/core/translations/en-us.yaml
+++ b/addons/core/translations/en-us.yaml
@@ -143,10 +143,10 @@ worker-filter-generator:
     link: Learn more about formatting a worker filter.
     input-values:
       title: Input values
-      description: Next, input what you want to format
+      description: Next, input what you want to format.
     formatted-result:
       title: Formatted result
-      description: Copy and paste this into the editor above
+      description: Copy and paste this into the editor above.
       label: Generated result
     tag:
       label: Tag

From 1d4c24811d37478172ed1b6eaf774c245a453caa Mon Sep 17 00:00:00 2001
From: cameronperera <cameron.perera@hashicorp.com>
Date: Wed, 13 Nov 2024 16:15:06 -0600
Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20update=20id=20fo?=
 =?UTF-8?q?r=20generated-value?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15743
---
 ui/admin/app/components/worker-filter/index.hbs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/admin/app/components/worker-filter/index.hbs b/ui/admin/app/components/worker-filter/index.hbs
index ed9d1b0d84..569d628586 100644
--- a/ui/admin/app/components/worker-filter/index.hbs
+++ b/ui/admin/app/components/worker-filter/index.hbs
@@ -125,12 +125,12 @@
         <div class='generated-results-container'>
           <Hds::Form::TextInput::Base
             readonly
-            id='generatedValue'
+            id='generated-value'
             name='generated_value'
             @value={{this.generatedResult}}
             @width='320px'
           />
-          <Hds::Copy::Button @text='Copy' @targetToCopy='#generatedValue' />
+          <Hds::Copy::Button @text='Copy' @targetToCopy='#generated-value' />
         </div>
       </F.Control>
     </Hds::Form::Fieldset>