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

…pis (#1756) * fix(entities-*): unify table tags and add compat support for filter apis * fix(entities-shared): fix tag max width, add test
Kong · Nov 4, 2024 · ee0e55a · ee0e55a
1 parent 27b95f8
commit ee0e55a
Show file tree

Hide file tree

Showing 22 changed files with 181 additions and 145 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')
+  })
+})