From 8ad4e93ff7ccba6c25423089a7648e1f659aa6d6 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Thu, 11 Jan 2024 17:23:24 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Migrate=20`workers-t?=
 =?UTF-8?q?ags`=20over=20to=20use=20`Hds::Table`=20(#2070)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Migrate `workers-tags` over to use `Hds::Table`

Migrate `workers-tags` in `worker-create` form to use `Hds::Table`
instead of `Rose::Table`

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

* refactor: 💡 Use `Form::Field::List::Wrapper` for table

Use `Form::Field::List::Wrapper` for table implementation.

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

* refactor: 💡 Refactored how `worker_tags` is used in `table`

Cleaned up how `worker_tags` is used in the `Form::Field::ListWrapper`
component

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

* refactor: 💡 removed `console.log`

removed console.log

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11722
---
 .../form/worker/create-worker-led/index.hbs   | 76 +++++--------------
 .../form/worker/create-worker-led/index.js    |  8 +-
 2 files changed, 19 insertions(+), 65 deletions(-)

diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.hbs b/ui/admin/app/components/form/worker/create-worker-led/index.hbs
index c083c7085..2f1efc4fe 100644
--- a/ui/admin/app/components/form/worker/create-worker-led/index.hbs
+++ b/ui/admin/app/components/form/worker/create-worker-led/index.hbs
@@ -50,66 +50,24 @@
         placeholder='10.0.0.1, 10.0.0.2, 10.0.0.3'
       />
     {{/if}}
+    <Form::Field::ListWrapper @layout='horizontal' @disabled={{form.disabled}}>
+      <:fieldset as |F|>
+        <F.Legend>{{t 'resources.worker.form.worker_tags.label'}}</F.Legend>
+        <F.HelperText>
+          {{t 'resources.worker.form.worker_tags.help'}}
+        </F.HelperText>
+      </:fieldset>
 
-    <Hds::Form::Fieldset as |F|>
-      <F.Legend>{{t 'resources.worker.form.worker_tags.label'}}</F.Legend>
-      <F.HelperText>{{t
-          'resources.worker.form.worker_tags.help'
-        }}</F.HelperText>
-      <F.Control>
-        <Rose::Table @style='condensed' as |table|>
-          <table.body as |body|>
-            {{#each this.workerTags as |tag index|}}
-              <body.row as |row|>
-                <row.cell>
-                  <form.input @type='text' @value={{tag.key}} />
-                </row.cell>
-                <row.cell>
-                  <form.input @type='text' @value={{tag.value}} />
-                </row.cell>
-                <row.cell @shrink={{true}}>
-                  <Rose::Button
-                    @style='warning'
-                    @iconOnly='flight-icons/svg/trash-16'
-                    title={{t 'actions.remove'}}
-                    {{on 'click' (fn this.removeWorkerTagByIndex index)}}
-                  >
-                    {{t 'actions.remove'}}
-                  </Rose::Button>
-                </row.cell>
-              </body.row>
-            {{/each}}
-
-            <body.row as |row|>
-              <row.cell>
-                <form.input
-                  @type='text'
-                  @value={{this.newWorkerKey}}
-                  placeholder='Key'
-                />
-              </row.cell>
-              <row.cell>
-                <form.input
-                  @type='text'
-                  @value={{this.newWorkerValue}}
-                  placeholder='Value'
-                />
-              </row.cell>
-              <row.cell @shrink={{true}}>
-                <Rose::Button
-                  @style='secondary'
-                  title={{t 'actions.add'}}
-                  @disabled={{not this.newWorkerKey}}
-                  {{on 'click' this.addWorkerTag}}
-                >
-                  {{t 'actions.add'}}
-                </Rose::Button>
-              </row.cell>
-            </body.row>
-          </table.body>
-        </Rose::Table>
-      </F.Control>
-    </Hds::Form::Fieldset>
+      <:field as |F|>
+        <F.KeyValue
+          @name='worker_tags'
+          @options={{this.workerTags}}
+          @disabled={{form.disabled}}
+          @addOption={{this.addWorkerTag}}
+          @removeOptionByIndex={{this.removeWorkerTagByIndex}}
+        />
+      </:field>
+    </Form::Field::ListWrapper>
 
     {{#if (feature-flag 'ssh-session-recording')}}
       <Hds::Form::Fieldset as |F|>
diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.js b/ui/admin/app/components/form/worker/create-worker-led/index.js
index 40c607f32..21379f0e1 100644
--- a/ui/admin/app/components/form/worker/create-worker-led/index.js
+++ b/ui/admin/app/components/form/worker/create-worker-led/index.js
@@ -31,8 +31,6 @@ export default class FormWorkerCreateWorkerLedComponent extends Component {
   @tracked configFilePath;
   @tracked initialUpstreams;
   @tracked workerTags = A([]);
-  @tracked newWorkerKey;
-  @tracked newWorkerValue;
   @tracked enableRecordingStoragePath = false;
   @tracked recording_storage_path = '';
 
@@ -189,10 +187,8 @@ unzip *.zip ;\\
   }
 
   @action
-  addWorkerTag() {
-    this.workerTags.pushObject(new Tag(this.newWorkerKey, this.newWorkerValue));
-    this.newWorkerKey = '';
-    this.newWorkerValue = '';
+  addWorkerTag(e) {
+    this.workerTags.pushObject(new Tag(e.key, e.value));
   }
 
   @action