feat: 🎸 update workers tags filter to include api_tags (#2394)

✅ Closes: ICU-14436

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) =>

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;
 }

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>

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);