From eb539b9c5b87ebf7a9bfe69ac7f0306a6c66f1de Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Tue, 20 Sep 2022 20:51:06 -0400
Subject: [PATCH] Icu 6036 update filter dropdown for tags in list view (#1337)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-6036
---
 addons/api/addon/models/worker.js             | 14 +++++++
 .../app/routes/scopes/scope/workers/index.js  | 38 +++++++++++++++----
 .../templates/scopes/scope/workers/index.hbs  | 38 ++++++++++++-------
 3 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/addons/api/addon/models/worker.js b/addons/api/addon/models/worker.js
index 042c61554..c1fb4c8b5 100644
--- a/addons/api/addon/models/worker.js
+++ b/addons/api/addon/models/worker.js
@@ -36,6 +36,20 @@ export default class WorkerModel extends GeneratedWorkerModel {
     );
   }
 
+  /**
+   * Returns the config tags as an array of key/value pair objects.
+   * @type {[object]}
+   */
+  getConfigTagList() {
+    if (!this.config_tags) {
+      return null;
+    }
+
+    return Object.entries(this.config_tags).flatMap(([key, value]) =>
+      value.map((tag) => ({ key, value: tag }))
+    );
+  }
+
   @attr({
     description:
       'The deduplicated union of the tags reported by the worker ' +
diff --git a/ui/admin/app/routes/scopes/scope/workers/index.js b/ui/admin/app/routes/scopes/scope/workers/index.js
index 61b3b33e4..d275ecc1f 100644
--- a/ui/admin/app/routes/scopes/scope/workers/index.js
+++ b/ui/admin/app/routes/scopes/scope/workers/index.js
@@ -14,12 +14,23 @@ export default class ScopesScopeWorkersIndexRoute extends Route {
       const configTags = route
         .modelFor('scopes.scope.workers')
         .toArray()
-        .flatMap((worker) => worker.config_tags?.type)
+        .flatMap((worker) => worker.getConfigTagList())
         .filter(Boolean);
 
       // Filter out duplicate tags
-      return [...new Set(configTags)];
+      return configTags.reduce((uniqueConfigTags, currentTag) => {
+        const isDuplicateTag = uniqueConfigTags.some(
+          (tag) => tag.key === currentTag.key && tag.value === currentTag.value
+        );
+
+        if (!isDuplicateTag) {
+          uniqueConfigTags.push(currentTag);
+        }
+        return uniqueConfigTags;
+      }, []);
     },
+    findBySerialized: ({ key: itemKey, value: itemValue }, { key, value }) =>
+      itemKey === key && itemValue === value,
     refreshRouteOnChange: false,
   })
   tags;
@@ -32,11 +43,19 @@ export default class ScopesScopeWorkersIndexRoute extends Route {
     if (this.tags?.length) {
       // Return workers that have config tags that have at
       // least one intersection with the filter tags
-      return workers.filter(
-        (worker) =>
-          worker.config_tags.type.filter(Set.prototype.has, new Set(this.tags))
-            .length > 0
-      );
+      return workers.filter((worker) => {
+        if (!worker.config_tags) {
+          return null;
+        }
+
+        const workerTags = worker.getConfigTagList();
+        return this.tags.some((tag) =>
+          workerTags.some(
+            (workerTag) =>
+              tag.key === workerTag.key && tag.value === workerTag.value
+          )
+        );
+      });
     }
     return workers;
   }
@@ -61,6 +80,11 @@ export default class ScopesScopeWorkersIndexRoute extends Route {
     this.refresh();
   }
 
+  @action
+  isEqual(firstTag, secondTag) {
+    return firstTag.key === secondTag.key && firstTag.value === secondTag.value;
+  }
+
   setupController(controller) {
     const scope = this.modelFor('scopes.scope');
     super.setupController(...arguments);
diff --git a/ui/admin/app/templates/scopes/scope/workers/index.hbs b/ui/admin/app/templates/scopes/scope/workers/index.hbs
index f489b3353..ac9cf75be 100644
--- a/ui/admin/app/templates/scopes/scope/workers/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/workers/index.hbs
@@ -37,20 +37,30 @@
                   @ignoreClickInside={{true}}
                   as |dropdown|
                 >
-                  <form.checkboxGroup
-                    @name={{filter.name}}
-                    @items={{filter.allowedValues}}
-                    @selectedItems={{filter.selectedValue}}
-                    @onChange={{route-action 'filterBy' filter.name}}
-                    as |group|
-                  >
-                    <dropdown.item>
-                      <group.checkbox
-                        @label={{group.item}}
-                        value={{group.item}}
-                      />
-                    </dropdown.item>
-                  </form.checkboxGroup>
+                  {{#each-in
+                    (group-by 'key' filter.allowedValues)
+                    as |key tags|
+                  }}
+                    <dropdown.section
+                      @title={{key}}
+                      @icon='flight-icons/svg/tag-16'
+                    />
+                    <form.checkboxGroup
+                      @name={{key}}
+                      @items={{tags}}
+                      @selectedItems={{filter.selectedValue}}
+                      @onChange={{route-action 'filterBy' filter.name}}
+                      @itemEqualityFunc={{route-action 'isEqual'}}
+                      as |group|
+                    >
+                      <dropdown.item class='indent-label-1'>
+                        <group.checkbox
+                          @label={{group.item.value}}
+                          value={{group.item}}
+                        />
+                      </dropdown.item>
+                    </form.checkboxGroup>
+                  {{/each-in}}
                 </Rose::Dropdown>
               {{/if}}
             {{/let}}