From 66fb4b24512570ec6cb083a714e0c3ae6675c5b3 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Tue, 16 Jul 2024 17:48:35 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20update=20workers=20tags?=
 =?UTF-8?q?=20filter=20to=20include=20api=5Ftags=20(#2394)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-14436
---
 .../app/routes/scopes/scope/workers/index.js  | 18 +++++++-------
 ui/admin/app/styles/app.scss                  |  7 ++++++
 .../templates/scopes/scope/workers/index.hbs  |  2 +-
 .../tests/acceptance/workers/list-test.js     | 24 +++++++++++++++++--
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/ui/admin/app/routes/scopes/scope/workers/index.js b/ui/admin/app/routes/scopes/scope/workers/index.js
index 9b0f77965..b1cb00cc9 100644
--- a/ui/admin/app/routes/scopes/scope/workers/index.js
+++ b/ui/admin/app/routes/scopes/scope/workers/index.js
@@ -17,21 +17,21 @@ export default class ScopesScopeWorkersIndexRoute extends Route {
   // it's loaded.
   @resourceFilter({
     allowed: (route) => {
-      const configTags = route
+      const allTags = route
         .modelFor('scopes.scope.workers')
-        .flatMap((worker) => worker.configTagList)
+        .flatMap((worker) => worker.allTags)
         .filter(Boolean);
 
       // Filter out duplicate tags
-      return configTags.reduce((uniqueConfigTags, currentTag) => {
-        const isDuplicateTag = uniqueConfigTags.some(
+      return allTags.reduce((uniqueTags, currentTag) => {
+        const isDuplicateTag = uniqueTags.some(
           (tag) => tag.key === currentTag.key && tag.value === currentTag.value,
         );
 
         if (!isDuplicateTag) {
-          uniqueConfigTags.push(currentTag);
+          uniqueTags.push(currentTag);
         }
-        return uniqueConfigTags;
+        return uniqueTags;
       }, []);
     },
     findBySerialized: ({ key: itemKey, value: itemValue }, { key, value }) =>
@@ -49,14 +49,14 @@ export default class ScopesScopeWorkersIndexRoute extends Route {
     );
 
     if (this.tags?.length) {
-      // Return workers that have config tags that have at
+      // Return workers that have config and/or api tags that have at
       // least one intersection with the filter tags
       return workers.filter((worker) => {
-        if (!worker.config_tags) {
+        if (!worker.config_tags && !worker.api_tags) {
           return null;
         }
 
-        const workerTags = worker.configTagList;
+        const workerTags = worker.allTags;
         return this.tags.some((tag) =>
           workerTags.some(
             (workerTag) =>
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index b79823621..b790e8f44 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -1047,6 +1047,13 @@
 }
 
 // workers
+.workers {
+  .rose-dropdown-content {
+    max-height: 300px;
+    overflow: scroll;
+  }
+}
+
 .view-more-tags {
   margin-top: 1.5rem;
 }
diff --git a/ui/admin/app/templates/scopes/scope/workers/index.hbs b/ui/admin/app/templates/scopes/scope/workers/index.hbs
index 054eb45ff..0fc830bf8 100644
--- a/ui/admin/app/templates/scopes/scope/workers/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/workers/index.hbs
@@ -27,7 +27,7 @@
     {{/if}}
   </page.actions>
 
-  <page.body>
+  <page.body class='workers'>
     {{#if @model}}
       <Rose::Toolbar as |toolbar|>
         <toolbar.primary>
diff --git a/ui/admin/tests/acceptance/workers/list-test.js b/ui/admin/tests/acceptance/workers/list-test.js
index 2e73cb327..092a0d441 100644
--- a/ui/admin/tests/acceptance/workers/list-test.js
+++ b/ui/admin/tests/acceptance/workers/list-test.js
@@ -23,6 +23,9 @@ const WORKERS_FLYOUT_VIEW_MORE_TAGS =
   '[data-test-worker-tags-flyout] .view-more-tags a';
 const WORKER_TAGS_BUTTON = (workerId) =>
   `[data-test-worker-tags-flyout-button="${workerId}"]`;
+const TAGS_FILTER_TOGGLE = '.workers details summary';
+const TAGS_FILTER_FIRST_ITEM_SELECTOR =
+  '.workers details div input:first-child';
 
 module('Acceptance | workers | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -36,6 +39,7 @@ module('Acceptance | workers | list', function (hooks) {
       global: null,
     },
     worker: null,
+    worker2: null,
   };
 
   const urls = {
@@ -47,8 +51,12 @@ module('Acceptance | workers | list', function (hooks) {
 
   hooks.beforeEach(function () {
     instances.scopes.global = this.server.create('scope', { id: 'global' });
-    const scope = instances.scopes.global;
-    instances.worker = this.server.create('worker', { scopeId: scope.id });
+    instances.worker = this.server.create('worker', {
+      scope: instances.scopes.global,
+    });
+    instances.worker2 = this.server.create('worker', {
+      scope: instances.scopes.global,
+    });
     urls.globalScope = `/scopes/global/scopes`;
     urls.workers = `/scopes/global/workers`;
     urls.worker = `${urls.workers}/${instances.worker.id}`;
@@ -94,6 +102,18 @@ module('Acceptance | workers | list', function (hooks) {
     assert.dom(`[href="${urls.workers}"]`).isVisible();
   });
 
+  test('Users can filter by tags', async function (assert) {
+    featuresService.enable('byow');
+    await visit(urls.workers);
+
+    assert.dom('tbody tr').exists({ count: 2 });
+
+    await click(TAGS_FILTER_TOGGLE);
+    await click(TAGS_FILTER_FIRST_ITEM_SELECTOR);
+
+    assert.dom('tbody tr').exists({ count: 1 });
+  });
+
   test('Users can open and close tags flyout for a specific worker', async function (assert) {
     featuresService.enable('byow');
     await visit(urls.workers);