feat(entities): add resizable + show hide columns for all GM entity tables [KHCP-11568]

packages/core/core/src/constants.ts

@@ -1,10 +1,12 @@
-import type { UserTablePreferences } from './useTablePreferences/types'
+import type { TablePreferences } from '@kong/kongponents'
 
 /** The localStorage key to store user table preferences */
 export const USER_TABLE_PREFERENCES_LOCAL_STORAGE_KEY = 'khcp-user-table-preferences'
 
-export const DEFAULT_USER_TABLE_PREFERENCES: UserTablePreferences = {
+export const DEFAULT_USER_TABLE_PREFERENCES: TablePreferences = {
   pageSize: 30,
   sortColumnKey: undefined,
   sortColumnOrder: undefined,
+  columnWidths: {},
+  columnVisibility: {},
 }

packages/core/core/src/index.ts

@@ -8,7 +8,6 @@ export { default as useWindow } from './useWindow'
 
 // Export explicit type interfaces as needed
 export * from './usePackage/types'
-export * from './useTablePreferences/types'
 export * from './useWindow/types'
 
 // Constants

packages/core/core/src/useTablePreferences/index.ts

@@ -1,5 +1,5 @@
 import { USER_TABLE_PREFERENCES_LOCAL_STORAGE_KEY, DEFAULT_USER_TABLE_PREFERENCES } from '../constants'
-import type { UserTablePreferences } from './types'
+import type { TablePreferences } from '@kong/kongponents'
 
 export default function useTablePreferences() {
   /**
@@ -41,9 +41,9 @@ export default function useTablePreferences() {
   /**
    * Store the preferences for a table, by unique id string, to localStorage for persistence
    * @param {string} tableKey The table identifier
-   * @param {UserTablePreferences} newPreferences The table preferences object to store
+   * @param {TablePreferences} newPreferences The table preferences object to store
    */
-  const setTablePreferences = (tableKey: string, newPreferences: UserTablePreferences): void => {
+  const setTablePreferences = (tableKey: string, newPreferences: TablePreferences): void => {
     // Wrap in a try/catch in case localStorage is full
     try {
       const existingPreferencesMap = getAllTablePreferences()
@@ -60,9 +60,9 @@ export default function useTablePreferences() {
   /**
    * Retrieve the stored table preferences for a table, by unique id string. Fallback to the default table preferences
    * @param {string} tableKey The table identifier
-   * @returns {UserTablePreferences} The stored preferences for the given tableKey
+   * @returns {TablePreferences} The stored preferences for the given tableKey
    */
-  const getTablePreferences = (tableKey: string): UserTablePreferences => {
+  const getTablePreferences = (tableKey: string): TablePreferences => {
     const existingPreferences = getAllTablePreferences()
 
     const tablePreferences = existingPreferences?.get(tableKey) || undefined

packages/entities/entities-certificates/src/components/CACertificateList.cy.ts

@@ -80,7 +80,7 @@ describe('<CACertificateList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-id').should('be.visible')
     })
 
@@ -354,13 +354,15 @@ describe('<CACertificateList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `ca-certificate-list-${uuidv4()}`
+
       interceptKMMultiPage({
         mockData: caCertificate100,
       })
 
       cy.mount(CACertificateList, {
         props: {
-          cacheIdentifier: `ca-certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -400,7 +402,7 @@ describe('<CACertificateList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(CACertificateList, {
         props: {
-          cacheIdentifier: `ca-certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -652,13 +654,15 @@ describe('<CACertificateList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `ca-certificate-list-${uuidv4()}`
+
       interceptKonnectMultiPage({
         mockData: caCertificate100,
       })
 
       cy.mount(CACertificateList, {
         props: {
-          cacheIdentifier: `ca-certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},
@@ -698,7 +702,7 @@ describe('<CACertificateList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(CACertificateList, {
         props: {
-          cacheIdentifier: `ca-certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},

packages/entities/entities-certificates/src/components/CertificateList.cy.ts

@@ -80,7 +80,7 @@ describe('<CertificateList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-id').should('be.visible')
     })
 
@@ -394,13 +394,15 @@ describe('<CertificateList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `certificate-list-${uuidv4()}`
+
       interceptKMMultiPage({
         mockData: certificate100,
       })
 
       cy.mount(CertificateList, {
         props: {
-          cacheIdentifier: `certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -440,7 +442,7 @@ describe('<CertificateList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(CertificateList, {
         props: {
-          cacheIdentifier: `certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -699,13 +701,15 @@ describe('<CertificateList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `certificate-list-${uuidv4()}`
+
       interceptKonnectMultiPage({
         mockData: certificate100,
       })
 
       cy.mount(CertificateList, {
         props: {
-          cacheIdentifier: `certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},
@@ -745,7 +749,7 @@ describe('<CertificateList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(CertificateList, {
         props: {
-          cacheIdentifier: `certificate-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},

packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.cy.ts

@@ -74,7 +74,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-id').should('be.visible')
     })
 
@@ -91,7 +91,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-credential').should('be.visible')
     })
 
@@ -111,7 +111,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-key').should('be.visible')
     })
 
@@ -131,7 +131,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-key').should('be.visible')
     })
 
@@ -151,7 +151,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-key').should('be.visible')
     })
 
@@ -171,7 +171,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-secret').should('be.visible')
     })
 
@@ -191,7 +191,7 @@ describe('<ConsumerCredentialList />', () => {
         },
       })
 
-      cy.getTestId('dropdown-trigger').eq(0).click()
+      cy.getTestId('overflow-actions-button').eq(0).click()
       cy.getTestId('action-entity-copy-secret').should('be.visible')
     })
 
@@ -210,7 +210,7 @@ describe('<ConsumerCredentialList />', () => {
             },
           })
 
-          cy.getTestId('dropdown-trigger').eq(0).click()
+          cy.getTestId('overflow-actions-button').eq(0).click()
           cy.getTestId('action-entity-edit').should(`${expected ? '' : 'not.'}exist`)
         })
 
@@ -227,7 +227,7 @@ describe('<ConsumerCredentialList />', () => {
             },
           })
 
-          cy.getTestId('dropdown-trigger').eq(0).click()
+          cy.getTestId('overflow-actions-button').eq(0).click()
           cy.getTestId('action-entity-delete').should(`${expected ? '' : 'not.'}exist`)
         })
       })
@@ -450,13 +450,15 @@ describe('<ConsumerCredentialList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `consumer-credential-list-${uuidv4()}`
+
       interceptKMMultiPage({
         mockData: basicAuthCredentials100,
       })
 
       cy.mount(ConsumerCredentialList, {
         props: {
-          cacheIdentifier: `consumer-credential-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -496,7 +498,7 @@ describe('<ConsumerCredentialList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(ConsumerCredentialList, {
         props: {
-          cacheIdentifier: `consumer-credential-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -743,13 +745,15 @@ describe('<ConsumerCredentialList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `consumer-credential-list-${uuidv4()}`
+
       interceptKonnectMultiPage({
         mockData: basicAuthCredentials100,
       })
 
       cy.mount(ConsumerCredentialList, {
         props: {
-          cacheIdentifier: `consumer-credential-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},
@@ -788,7 +792,7 @@ describe('<ConsumerCredentialList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(ConsumerCredentialList, {
         props: {
-          cacheIdentifier: `consumer-credential-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},

packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.cy.ts

@@ -300,13 +300,15 @@ describe('<ConsumerGroupList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `consumer-group-list-${uuidv4()}`
+
       interceptKMMultiPage({
         mockData: consumerGroups100,
       })
 
       cy.mount(ConsumerGroupList, {
         props: {
-          cacheIdentifier: `consumer-group-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -346,7 +348,7 @@ describe('<ConsumerGroupList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(ConsumerGroupList, {
         props: {
-          cacheIdentifier: `consumer-group-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKM,
           canCreate: () => {},
           canEdit: () => {},
@@ -916,13 +918,15 @@ describe('<ConsumerGroupList />', () => {
     })
 
     it('should allow picking different page sizes and persist the preference', () => {
+      const cacheIdentifier = `consumer-group-list-${uuidv4()}`
+
       interceptKonnectMultiPage({
         mockData: consumerGroups100,
       })
 
       cy.mount(ConsumerGroupList, {
         props: {
-          cacheIdentifier: `consumer-group-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},
@@ -962,7 +966,7 @@ describe('<ConsumerGroupList />', () => {
       cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
       cy.mount(ConsumerGroupList, {
         props: {
-          cacheIdentifier: `consumer-group-list-${uuidv4()}`,
+          cacheIdentifier,
           config: baseConfigKonnect,
           canCreate: () => {},
           canEdit: () => {},