fix(entities-shared): fix tag max width, add test

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')
+  })
+})

packages/entities/entities-shared/src/components/common/TableTags.vue

@@ -3,7 +3,7 @@
     <KBadge
       v-for="tag in tags"
       :key="tag"
-      :tag-max-width="tagMaxWidth"
+      :max-width="tagMaxWidth"
       @click.stop
     >
       {{ tag }}
@@ -13,13 +13,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed } from 'vue'
 import { KTruncate, KBadge } from '@kong/kongponents'
 
 const props = defineProps({
   /** The tags to display in the table */
   tags: {
-    type: [Array, String] as PropType<string[] | string>,
+    type: [Array, String],
     required: true,
   },
   tagMaxWidth: {