Icu 13889 update tags column to action that opens hds flyout and add link to tags tab if more than 10 tags (#2355)

* refactor: 💡 update worker factory to include api_tags

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

* feat: 🎸 add tags flyout for workers table

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

* refactor: 💡 move test selector to const

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

* refactor: 💡 only show 'view more tags' if more than 10 tags

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

* test: 💍 update test name

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

* refactor: 💡 update how worker tags are shown in flyout

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

* refactor: 💡 add one more api tag for worker in mirage

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

* refactor: 💡 fix tagDisplayName signature

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

* refactor: 💡 update tag shortener styling

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

addons/api/mirage/factories/worker.js

@@ -20,30 +20,54 @@ export default factory.extend({
       'delete',
     ],
   type: (i) => types[i % types.length],
-  canonical_tags: (i) => {
-    if (i % 3 === 0) {
-      return { os: ['ubuntu'] };
-    }
-    if (i % 2 === 0) {
-      return {
-        type: [faker.word.words(1), faker.word.words(1)],
-        os: ['ubuntu'],
-        env: ['dev', 'local'],
-      };
-    }
-    return undefined;
-  },
   config_tags: (i) => {
     if (i % 3 === 0) {
-      return { os: ['ubuntu'] };
-    }
-    if (i % 2 === 0) {
       return {
-        type: [faker.word.words(1), faker.word.words(1)],
         os: ['ubuntu'],
         env: ['dev', 'local'],
       };
     }
+    if (i % 2 === 0) {
+      return { os: ['ubuntu'] };
+    }
     return undefined;
   },
+  api_tags: (i) => {
+    if (i % 3 === 0) {
+      return {
+        type: [faker.word.words(1), faker.word.words(1)],
+        os: ['z-os'],
+        env: ['prod', 'qa'],
+        sample: [faker.word.words(1), faker.word.words(1)],
+        path: [faker.word.words(1)],
+      };
+    }
+    if (i % 2 === 0) {
+      return { os: ['z-os'] };
+    }
+    return undefined;
+  },
+  canonical_tags() {
+    const configTags = this.config_tags || {};
+    const apiTags = this.api_tags || {};
+    const canonicalTags = {};
+
+    Object.keys(configTags).forEach((key) => {
+      canonicalTags[key] = new Set(configTags[key]);
+    });
+
+    Object.keys(apiTags).forEach((key) => {
+      if (canonicalTags[key]) {
+        apiTags[key].forEach((tag) => canonicalTags[key].add(tag));
+      } else {
+        canonicalTags[key] = new Set(apiTags[key]);
+      }
+    });
+
+    Object.keys(canonicalTags).forEach((key) => {
+      canonicalTags[key] = Array.from(canonicalTags[key]);
+    });
+
+    return canonicalTags;
+  },
 });