Icu 6034 update tags in create page to support multi input fields (#1325)

* feat: 🎸 Change tags to be multi part input fields

✅ Closes: ICU-6034

ui/admin/app/components/form/worker/create-worker-led/index.hbs

@@ -45,13 +45,64 @@
       />
     {{/if}}
 
-    <form.input
-      @name='worker_tags'
-      @value={{this.workerTags}}
-      @label={{t 'resources.worker.form.worker_tags.label'}}
-      @helperText={{t 'resources.worker.form.worker_tags.help'}}
-      placeholder='dev-worker, ubuntu'
-    />
+    <Rose::Form::Fieldset>
+      <:title>{{t 'resources.worker.form.worker_tags.label'}}</:title>
+      <:description>{{t
+          'resources.worker.form.worker_tags.help'
+        }}</:description>
+      <:body>
+        <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'}}
+                  {{on 'click' this.addWorkerTag}}
+                >
+                  {{t 'actions.add'}}
+                </Rose::Button>
+              </row.cell>
+            </body.row>
+          </table.body>
+        </Rose::Table>
+      </:body>
+    </Rose::Form::Fieldset>
 
     <Rose::CodeEditor @codeValue={{this.createConfigText}} as |c|>
       <c.toolbar>

ui/admin/app/components/form/worker/create-worker-led/index.js

@@ -1,6 +1,18 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+
+class Tag {
+  @tracked key;
+  @tracked value;
+
+  constructor(key, value) {
+    this.key = key;
+    this.value = value;
+  }
+}
 
 export default class FormWorkerCreateWorkerLedComponent extends Component {
   // =services
@@ -11,18 +23,10 @@ export default class FormWorkerCreateWorkerLedComponent extends Component {
   @tracked clusterId;
   @tracked ipAddress;
   @tracked configFilePath;
-  @tracked workerTags;
   @tracked initialUpstreams;
-
-  // =methods
-
-  convertCommaSeparatedValuesToArray(input) {
-    return input
-      .split(',')
-      .filter((value) => value.trim())
-      .map((value) => `"${value?.trim()}"`)
-      .join(', ');
-  }
+  @tracked workerTags = A([]);
+  @tracked newWorkerKey;
+  @tracked newWorkerValue;
 
   // =properties
 
@@ -46,10 +50,13 @@ touch ${this.configFilePath || '<path>'}/pki-worker.hcl`;
     }"`;
 
     const tagsText = `tags {
-    type = [${
-      this.workerTags ? this.convertCommaSeparatedValuesToArray(this.workerTags) : '"<tag1>", "<tag2>"'
-    }]
+    ${
+      this.workerTags.length
+        ? this.getTagConfigString()
+        : 'key = ["<tag1>", "<tag2>"]'
+    }
   }`;
+
     const upstreamText = `
   initial_upstreams = [${
     this.initialUpstreams
@@ -109,6 +116,7 @@ boundary server -config="${this.configFilePath || '<path>'}/pki-worker.hcl"`;
       styleActiveLine: false,
     };
   }
+
   /**
    * Returns `hcl` configuration object for `<Rose::CodeEditor>`.
    * @type {Object}
@@ -121,4 +129,35 @@ boundary server -config="${this.configFilePath || '<path>'}/pki-worker.hcl"`;
       styleActiveLine: false,
     };
   }
+
+  //=methods
+
+  convertCommaSeparatedValuesToArray(input) {
+    return input
+      .split(',')
+      .filter((value) => value.trim())
+      .map((value) => `"${value?.trim()}"`)
+      .join(', ');
+  }
+
+  getTagConfigString() {
+    return this.workerTags
+      .map(
+        (tag) =>
+          `${tag.key} = [${this.convertCommaSeparatedValuesToArray(tag.value)}]`
+      )
+      .join('\n    ');
+  }
+
+  @action
+  addWorkerTag() {
+    this.workerTags.pushObject(new Tag(this.newWorkerKey, this.newWorkerValue));
+    this.newWorkerKey = '';
+    this.newWorkerValue = '';
+  }
+
+  @action
+  removeWorkerTagByIndex(index) {
+    this.workerTags.removeAt(index);
+  }
 }