From ee0e55ad95926acbb81ec8837d15fd98d8e2a8a0 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Mon, 4 Nov 2024 20:37:46 +0800
Subject: [PATCH] fix(entities-*): unify table tags and add compat support for
 filter apis (#1756)

* fix(entities-*): unify table tags and add compat support for filter apis

* fix(entities-shared): fix tag max width, add test
---
 cypress.config.ts                             |  1 -
 .../sandbox/pages/CACertificateListPage.vue   |  1 +
 .../sandbox/pages/CertificateListPage.vue     |  1 +
 .../src/components/CACertificateList.vue      | 12 +--
 .../src/components/CertificateList.vue        | 12 +--
 .../src/components/ConsumerCredentialList.vue | 12 +--
 .../src/components/ConsumerGroupList.vue      | 12 +--
 .../src/components/ConsumerList.vue           | 12 +--
 .../src/components/GatewayServiceList.vue     | 12 +--
 .../src/components/KeySetList.vue             | 12 +--
 .../entities-keys/src/components/KeyList.vue  | 12 +--
 .../src/components/PluginList.vue             | 12 +--
 .../src/components/RouteList.vue              | 12 +--
 .../src/components/common/TableTags.cy.ts     | 80 +++++++++++++++++++
 .../src/components/common/TableTags.vue       | 54 +++++++++++++
 .../src/composables/useHelpers.ts             |  8 +-
 .../entities/entities-shared/src/index.ts     |  3 +-
 .../src/components/SniForm.cy.ts              |  6 +-
 .../entities-snis/src/components/SniList.vue  | 12 +--
 .../src/components/TargetsList.vue            | 14 ++--
 .../src/components/UpstreamsList.vue          | 14 ++--
 .../src/components/VaultList.vue              | 12 +--
 22 files changed, 181 insertions(+), 145 deletions(-)
 create mode 100644 packages/entities/entities-shared/src/components/common/TableTags.cy.ts
 create mode 100644 packages/entities/entities-shared/src/components/common/TableTags.vue

diff --git a/cypress.config.ts b/cypress.config.ts
index 38f5d5e70e..eb94f2b5cd 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -19,7 +19,6 @@ export default defineConfig({
   screenshotsFolder: 'cypress/screenshots',
   video: true,
   videosFolder: 'cypress/videos',
-  videoUploadOnPasses: false,
   retries: {
     runMode: 1,
   },
diff --git a/packages/entities/entities-certificates/sandbox/pages/CACertificateListPage.vue b/packages/entities/entities-certificates/sandbox/pages/CACertificateListPage.vue
index daf9ff4fd9..66cbd27ea8 100644
--- a/packages/entities/entities-certificates/sandbox/pages/CACertificateListPage.vue
+++ b/packages/entities/entities-certificates/sandbox/pages/CACertificateListPage.vue
@@ -50,6 +50,7 @@ const konnectConfig = ref<KonnectCertificateListConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   createRoute: { name: 'create-ca-certificate' },
+  isExactMatch: true,
   getViewRoute: (id: string) => ({ name: 'view-ca-certificate', params: { id } }),
   getEditRoute: (id: string) => ({ name: 'edit-ca-certificate', params: { id } }),
 })
diff --git a/packages/entities/entities-certificates/sandbox/pages/CertificateListPage.vue b/packages/entities/entities-certificates/sandbox/pages/CertificateListPage.vue
index eead13c185..29ea3e315d 100644
--- a/packages/entities/entities-certificates/sandbox/pages/CertificateListPage.vue
+++ b/packages/entities/entities-certificates/sandbox/pages/CertificateListPage.vue
@@ -50,6 +50,7 @@ const konnectConfig = ref<KonnectCertificateListConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   createRoute: { name: 'create-certificate' },
+  isExactMatch: true,
   getViewRoute: (id: string) => ({ name: 'view-certificate', params: { id } }),
   getEditRoute: (id: string) => ({ name: 'edit-certificate', params: { id } }),
   getCreateSniRoute: (id: string) => ({ name: 'add-sni', params: { id } }),
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
index a908022c96..d281e7951f 100644
--- a/packages/entities/entities-certificates/src/components/CACertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -59,16 +59,7 @@
         </span>
       </template>
       <template #tags="{ row }">
-        <KTruncate v-if="row?.tags?.length > 0">
-          <KBadge
-            v-for="tag in row?.tags"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="row?.tags" />
       </template>
 
       <!-- Row actions -->
@@ -158,6 +149,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerCertificateListConfig,
diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
index 859ae5ad6c..45e5dd2aa3 100644
--- a/packages/entities/entities-certificates/src/components/CertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -75,16 +75,7 @@
         <span v-else>-</span>
       </template>
       <template #tags="{ row }">
-        <KTruncate v-if="row?.tags?.length > 0">
-          <KBadge
-            v-for="tag in row?.tags"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="row?.tags" />
       </template>
 
       <!-- Row actions -->
@@ -183,6 +174,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerCertificateListConfig,
diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
index 659dfad664..cdc7f4bdbc 100644
--- a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
+++ b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -79,16 +79,7 @@
         {{ formatUnixTimeStamp(rowValue) }}
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -202,6 +193,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   CredentialPlugins,
diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
index e020869c74..9230e9464f 100644
--- a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
+++ b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -59,16 +59,7 @@
         {{ rowValue ?? '-' }}
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -193,6 +184,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerConsumerGroupListConfig,
diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
index 105651dfaf..446956c9e0 100644
--- a/packages/entities/entities-consumers/src/components/ConsumerList.vue
+++ b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -59,16 +59,7 @@
         {{ getRowValue(rowValue) }}
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue && rowValue.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -193,6 +184,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerConsumerListConfig,
diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
index e32b6557c7..f6ad40456d 100644
--- a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
+++ b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -80,16 +80,7 @@
         </PermissionsWrapper>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
       <template #created_at="{ rowValue }">
         {{ formatUnixTimeStamp(rowValue) }}
@@ -200,6 +191,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import '@kong-ui-public/entities-shared/dist/style.css'
 
diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
index 563d20969c..9bb21f418f 100644
--- a/packages/entities/entities-key-sets/src/components/KeySetList.vue
+++ b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -51,16 +51,7 @@
         <b>{{ rowValue ?? '-' }}</b>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
       <template #id="{ rowValue }">
         <KCopy
@@ -145,6 +136,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerKeySetListConfig,
diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
index 7a7a48044e..ee77449168 100644
--- a/packages/entities/entities-keys/src/components/KeyList.vue
+++ b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -54,16 +54,7 @@
         <KCopy :text="rowValue" />
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
       <template #id="{ rowValue }">
         <KCopy
@@ -149,6 +140,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerKeyListConfig,
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 49d0cdd554..130326243b 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -125,16 +125,7 @@
       </template>
 
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -235,6 +226,7 @@ import {
   useFetcher,
   useDeleteUrlBuilder,
   useGatewayFeatureSupported,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import '@kong-ui-public/entities-shared/dist/style.css'
 
diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
index 0dfa656a2e..31e6006ac1 100644
--- a/packages/entities/entities-routes/src/components/RouteList.vue
+++ b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -110,16 +110,7 @@
         <span v-else>-</span>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
       <template #expression="{ rowValue }">
         <span class="route-list-cell-expression">
@@ -210,6 +201,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerRouteListConfig,
diff --git a/packages/entities/entities-shared/src/components/common/TableTags.cy.ts b/packages/entities/entities-shared/src/components/common/TableTags.cy.ts
new file mode 100644
index 0000000000..5226beb1d8
--- /dev/null
+++ b/packages/entities/entities-shared/src/components/common/TableTags.cy.ts
@@ -0,0 +1,80 @@
+import TableTags from './TableTags.vue'
+
+const tagsArray = ['tag1', 'tag2', 'tag3']
+const tagsString = JSON.stringify(tagsArray)
+
+const emptyArray = [] as string[]
+const emptyString = '[]'
+const nullString = 'null'
+
+describe('<TableTags />', () => {
+  it('renders normal array correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: tagsArray,
+      },
+    })
+
+    cy.get('.k-truncate').should('exist')
+    cy.get('.k-badge').should('have.length', tagsArray.length)
+  })
+
+  it('renders JSON string correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: tagsString,
+      },
+    })
+
+    cy.get('.k-truncate').should('exist')
+    cy.get('.k-badge').should('have.length', tagsArray.length)
+  })
+
+  it('renders empty array correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: emptyArray,
+      },
+    })
+
+    cy.get('.k-truncate').should('not.exist')
+    cy.get('.k-badge').should('not.exist')
+    cy.get('span').should('have.text', '-')
+  })
+
+  it('renders empty string correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: emptyString,
+      },
+    })
+
+    cy.get('.k-truncate').should('not.exist')
+    cy.get('.k-badge').should('not.exist')
+    cy.get('span').should('have.text', '-')
+  })
+
+  it('renders null string correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: nullString,
+      },
+    })
+
+    cy.get('.k-truncate').should('not.exist')
+    cy.get('.k-badge').should('not.exist')
+    cy.get('span').should('have.text', '-')
+  })
+
+  it('renders tag max width correctly', () => {
+    cy.mount(TableTags, {
+      props: {
+        tags: tagsArray,
+        tagMaxWidth: '100',
+      },
+    })
+
+    cy.get('.k-truncate').should('exist')
+    cy.get('.badge-content-wrapper').should('have.css', 'max-width', '100px')
+  })
+})
diff --git a/packages/entities/entities-shared/src/components/common/TableTags.vue b/packages/entities/entities-shared/src/components/common/TableTags.vue
new file mode 100644
index 0000000000..08f957d83e
--- /dev/null
+++ b/packages/entities/entities-shared/src/components/common/TableTags.vue
@@ -0,0 +1,54 @@
+<template>
+  <KTruncate v-if="tags?.length > 0">
+    <KBadge
+      v-for="tag in tags"
+      :key="tag"
+      :max-width="tagMaxWidth"
+      @click.stop
+    >
+      {{ tag }}
+    </KBadge>
+  </KTruncate>
+  <span v-else>-</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { KTruncate, KBadge } from '@kong/kongponents'
+
+const props = defineProps({
+  /** The tags to display in the table */
+  tags: {
+    type: [Array, String],
+    required: true,
+  },
+  tagMaxWidth: {
+    type: String,
+    default: undefined,
+  },
+})
+
+/**
+ * Normalize tags to an array
+ * Filtering APIs sometimes return tags as a stringified array so we need to normalize it
+ */
+const tags = computed(() => {
+  if (Array.isArray(props.tags)) {
+    return props.tags
+  }
+
+  if (typeof props.tags === 'string') {
+    try {
+      const parsedTags = JSON.parse(props.tags)
+      if (Array.isArray(parsedTags)) {
+        return parsedTags
+      }
+      return []
+    } catch (e) {
+      return []
+    }
+  }
+
+  return []
+})
+</script>
diff --git a/packages/entities/entities-shared/src/composables/useHelpers.ts b/packages/entities/entities-shared/src/composables/useHelpers.ts
index f100615dbc..f0647cb9b8 100644
--- a/packages/entities/entities-shared/src/composables/useHelpers.ts
+++ b/packages/entities/entities-shared/src/composables/useHelpers.ts
@@ -83,10 +83,10 @@ export default function useHelpers() {
   }
 
   /**
- * Check if a string is a valid uuid
- * @param {String} str - the string to check
- * @returns {boolean}
- */
+   * Check if a string is a valid uuid
+   * @param {String} str - the string to check
+   * @returns {boolean}
+   */
   const isValidUuid = (str: string) => {
     if (!str) return false
 
diff --git a/packages/entities/entities-shared/src/index.ts b/packages/entities/entities-shared/src/index.ts
index 25b34b4dca..e76058cc88 100644
--- a/packages/entities/entities-shared/src/index.ts
+++ b/packages/entities/entities-shared/src/index.ts
@@ -13,13 +13,14 @@ import EntityLink from './components/entity-link/EntityLink.vue'
 import JsonCodeBlock from './components/common/JsonCodeBlock.vue'
 import TerraformCodeBlock from './components/common/TerraformCodeBlock.vue'
 import YamlCodeBlock from './components/common/YamlCodeBlock.vue'
+import TableTags from './components/common/TableTags.vue'
 import composables from './composables'
 
 // Extract specific composables to export
 const { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators, useSchemaProvider } = composables
 
 // Components
-export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, TerraformCodeBlock, YamlCodeBlock }
+export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, TerraformCodeBlock, YamlCodeBlock, TableTags }
 
 // Composables
 export { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators, useSchemaProvider }
diff --git a/packages/entities/entities-snis/src/components/SniForm.cy.ts b/packages/entities/entities-snis/src/components/SniForm.cy.ts
index c7aece955c..7aa6ae9357 100644
--- a/packages/entities/entities-snis/src/components/SniForm.cy.ts
+++ b/packages/entities/entities-snis/src/components/SniForm.cy.ts
@@ -20,7 +20,11 @@ const baseConfigKM: KongManagerSniFormConfig = {
   cancelRoute,
 }
 
-describe('<SniForm />', () => {
+describe('<SniForm />', {
+  // workaround the `ResizeObserver loop completed with undelivered notifications` error
+  viewportWidth: 1024,
+  viewportHeight: 768,
+}, () => {
   describe('Kong Manager', () => {
     const interceptKMCerts = (params?: {
       mockData?: object
diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
index 324871439f..2fe6bf178e 100644
--- a/packages/entities/entities-snis/src/components/SniList.vue
+++ b/packages/entities/entities-snis/src/components/SniList.vue
@@ -62,16 +62,7 @@
         <span v-else>-</span>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -142,6 +133,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
   KongManagerSniListConfig,
diff --git a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
index 47be247dd2..9305702a53 100644
--- a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
@@ -43,15 +43,10 @@
         <span class="target-address">{{ rowValue }}</span>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate>
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            max-width="auto"
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
+        <TableTags
+          tag-max-width="auto"
+          :tags="rowValue"
+        />
       </template>
 
       <!-- Row actions -->
@@ -149,6 +144,7 @@ import {
   EntityDeleteModal,
   useAxios,
   EntityTypes,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type { PropType } from 'vue'
 import { computed, onBeforeMount, ref, watch } from 'vue'
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
index 7a9a3d1403..de05e28020 100644
--- a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -52,15 +52,10 @@
         <span class="upstream-name">{{ rowValue }}</span>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate>
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            max-width="auto"
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
+        <TableTags
+          tag-max-width="auto"
+          :tags="rowValue"
+        />
       </template>
 
       <!-- Row actions -->
@@ -132,6 +127,7 @@ import {
   EntityDeleteModal,
   useAxios,
   EntityTypes,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 import type { PropType } from 'vue'
 import { computed, onBeforeMount, ref, watch } from 'vue'
diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
index 1583af7275..3dd90cf392 100644
--- a/packages/entities/entities-vaults/src/components/VaultList.vue
+++ b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -61,16 +61,7 @@
         </div>
       </template>
       <template #tags="{ rowValue }">
-        <KTruncate v-if="rowValue?.length > 0">
-          <KBadge
-            v-for="tag in rowValue"
-            :key="tag"
-            @click.stop
-          >
-            {{ tag }}
-          </KBadge>
-        </KTruncate>
-        <span v-else>-</span>
+        <TableTags :tags="rowValue" />
       </template>
 
       <!-- Row actions -->
@@ -148,6 +139,7 @@ import {
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  TableTags,
 } from '@kong-ui-public/entities-shared'
 
 import type {