feat(*): adopt new entity lists with KTableData (#309)

package.json

@@ -24,24 +24,24 @@
   },
   "dependencies": {
     "@kong-ui-public/app-layout": "^4.2.45",
-    "@kong-ui-public/entities-certificates": "^3.6.29",
-    "@kong-ui-public/entities-consumer-credentials": "^3.3.27",
-    "@kong-ui-public/entities-consumers": "^3.5.28",
-    "@kong-ui-public/entities-data-plane-nodes": "^0.3.26",
-    "@kong-ui-public/entities-gateway-services": "^3.8.14",
-    "@kong-ui-public/entities-key-sets": "^3.5.28",
-    "@kong-ui-public/entities-keys": "^3.5.29",
-    "@kong-ui-public/entities-plugins": "8.13.17",
-    "@kong-ui-public/entities-routes": "3.8.20",
-    "@kong-ui-public/entities-shared": "^3.9.14",
-    "@kong-ui-public/entities-snis": "^3.5.28",
-    "@kong-ui-public/entities-upstreams-targets": "^3.5.28",
-    "@kong-ui-public/entities-vaults": "^3.13.21",
-    "@kong-ui-public/forms": "4.7.12",
+    "@kong-ui-public/entities-certificates": "^3.6.33",
+    "@kong-ui-public/entities-consumer-credentials": "^3.4.4",
+    "@kong-ui-public/entities-consumers": "^3.5.32",
+    "@kong-ui-public/entities-data-plane-nodes": "^0.3.30",
+    "@kong-ui-public/entities-gateway-services": "^3.8.18",
+    "@kong-ui-public/entities-key-sets": "^3.5.32",
+    "@kong-ui-public/entities-keys": "^3.5.33",
+    "@kong-ui-public/entities-plugins": "9.1.1",
+    "@kong-ui-public/entities-routes": "3.8.25",
+    "@kong-ui-public/entities-shared": "^3.9.18",
+    "@kong-ui-public/entities-snis": "^3.5.32",
+    "@kong-ui-public/entities-upstreams-targets": "^3.5.32",
+    "@kong-ui-public/entities-vaults": "^3.13.25",
+    "@kong-ui-public/forms": "4.7.16",
     "@kong-ui-public/i18n": "^2.2.3",
     "@kong-ui-public/misc-widgets": "^2.1.32",
     "@kong/icons": "^1.18.1",
-    "@kong/kongponents": "^9.11.2",
+    "@kong/kongponents": "^9.12.0",
     "@material-design-icons/font": "^0.14.13",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",

src/pages/data-plane-nodes/List.vue

@@ -170,7 +170,7 @@ import {
   KUI_COLOR_BACKGROUND_NEUTRAL,
 } from '@kong/design-tokens'
 import { ProgressIcon, InfoIcon, ChevronDownIcon, MoreIcon } from '@kong/icons'
-import type { FetcherParams } from '@kong-ui-public/entities-shared'
+import type { TableDataFetcherParams } from '@kong/kongponents'
 import type { LogLevel } from '@kong-ui-public/entities-data-plane-nodes'
 import { ChangeLogLevelModal, composables } from '@kong-ui-public/entities-data-plane-nodes'
 import { capitalize, formatDate } from '@/utils'
@@ -245,7 +245,7 @@ const isSomeVisibleNodesSelected = computed<boolean>(() => {
   return selectedNodeCount.value > 0 && selectedNodeCount.value < visibleNodes.value.length
 })
 
-const fetcher = async (props: FetcherParams) => {
+const fetcher = async (props: TableDataFetcherParams) => {
   errorMessage.value = ''
   requestScheduler.cancelAll()
 

tests/playwright/commands/clickEntityListAction.ts

@@ -6,11 +6,11 @@ export const clickEntityListAction = async (
   nth = 1,
 ) => {
   const row = pageOrLocator
-    .locator('.k-table')
+    .locator('.k-table-data')
     .locator('tr')
     .nth(nth)
 
-  await row.locator('[data-testid="overflow-actions-button"]').click()
+  await row.locator('[data-testid="row-actions-dropdown-trigger"]').click()
   await row
     .locator('[data-testid="dropdown-list"]')
     .locator(`[data-testid="action-entity-${action}"]`)

tests/playwright/specs/ca-certificates/01-CACertificates.spec.ts

@@ -34,12 +34,12 @@ test.describe('CA certificates', () => {
   })
 
   test('create a CA certificate - fail', async ({ page }) => {
-    await page.getByTestId('new-ca-certificate').click()
+    await page.getByTestId('empty-state-action').click()
     await expect(page.getByTestId('ca_certificate-create-form-submit')).toBeDisabled()
   })
 
   test('create a CA certificate', async ({ page }) => {
-    await page.getByTestId('new-ca-certificate').click()
+    await page.getByTestId('empty-state-action').click()
     await fillEntityForm({
       page,
       formData: {

tests/playwright/specs/certificates/01-Certificates.spec.ts

@@ -34,13 +34,13 @@ test.describe('certificates', () => {
   })
 
   test('create a certificate - fail', async ({ page }) => {
-    await page.getByTestId('new-certificate').click()
+    await page.getByTestId('empty-state-action').click()
     await page.waitForSelector('.k-breadcrumbs', { state: 'hidden' })
     await expect(page.getByTestId('certificate-create-form-submit')).toBeDisabled()
   })
 
   test('create a certificate', async ({ page }) => {
-    await page.getByTestId('new-certificate').click()
+    await page.getByTestId('empty-state-action').click()
     await page.waitForSelector('.k-breadcrumbs', { state: 'hidden' })
     await fillEntityForm({
       page,
@@ -115,7 +115,7 @@ test.describe('certificates', () => {
   })
 
   test('create a certificate with subject alternative name (SAN) extension', async ({ page }) => {
-    await page.getByTestId('new-certificate').click()
+    await page.getByTestId('empty-state-action').click()
     await fillEntityForm({
       page,
       formData: {

tests/playwright/specs/consumers/01-Consumers.spec.ts

@@ -195,7 +195,7 @@ test.describe('consumers', () => {
     await waitAndDismissToasts(page)
 
     // Add an api key to the consumer from empty
-    await page.click('[data-testid="new-key-auth-credential"]')
+    await page.click('[data-testid="empty-state-action"]')
     await page.waitForSelector('#key')
     await page.fill('#key', 'my-api-key')
     await page.click(consumerListPage.$.submitButton)

tests/playwright/specs/consumers/02-ConsumerCredentials.spec.ts

@@ -39,7 +39,7 @@ test.describe('consumer credentials', () => {
 
     const basicAuthLocator = page.locator('.credential-list-wrapper').filter({ hasText: 'Basic Authentication' })
 
-    await basicAuthLocator.locator('[data-testid="new-basic-auth-credential"]').click()
+    await basicAuthLocator.locator('[data-testid="empty-state-action"]').click()
     await page.locator('#username').fill(mockCredential)
     await page.locator('#password').fill(mockCredentialPassword)
     await page.locator('[data-testid="form-actions"] .primary').click()

tests/playwright/specs/consumers/03-ConsumerPlugins.spec.ts

@@ -62,7 +62,7 @@ test.describe('consumer plugins', () => {
       page,
       () => page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
 
     await withNavigation(page, () => clickEntityListAction(page, 'edit'))
     await expandAdvancedFields(page)
@@ -71,7 +71,7 @@ test.describe('consumer plugins', () => {
       page,
       async () => await page.locator('[data-testid="plugin-edit-form-cancel"]').click(),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })
 
   test('change scope from global to scoped', async ({ page }) => {
@@ -86,7 +86,7 @@ test.describe('consumer plugins', () => {
 
     // create a global plugin
     await pluginListPage.goto()
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.locator('[data-testid="Rate Limiting"]').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await expandAdvancedFields(page)

tests/playwright/specs/key-sets/01-KeySets.spec.ts

@@ -82,9 +82,9 @@ test.describe('keySets', () => {
       withAction: 'cancel',
     }))
 
-    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockName)
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTags)
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="name"]')).toContainText(mockName)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTags)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
   })
 
   test('delete a key set', async ({ page }) => {

tests/playwright/specs/key-sets/02-Keys.spec.ts

@@ -36,7 +36,7 @@ test.describe('key-set keys tab', () => {
   test(`create key "${mockJwName}" from the Keys tab `, async ({ page }) => {
     await withNavigation(page, () => clickEntityListAction(page, 'view'))
     await switchDetailTab(page, 'keys')
-    await withNavigation(page, () => page.locator('.empty-state-action [data-testid="new-key"]').click())
+    await withNavigation(page, () => page.locator('.empty-state-action [data-testid="empty-state-action"]').click())
 
     withNavigation(page, () => fillEntityForm({
       page,
@@ -52,8 +52,8 @@ test.describe('key-set keys tab', () => {
 
     await waitAndDismissToasts(page)
 
-    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockJwName)
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="name"]')).toContainText(mockJwName)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
   })
 
   test('view keys detail page', async ({ page }) => {

tests/playwright/specs/keys/01-Keys.spec.ts

@@ -197,9 +197,9 @@ test.describe('keys', () => {
       method: 'fill',
       withAction: 'cancel',
     }))
-    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText('-')
-    await expect(page.locator('.k-table .table-wrapper [data-testid="kid"]')).toContainText(mockPemKid)
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText('-')
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="name"]')).toContainText('-')
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="kid"]')).toContainText(mockPemKid)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText('-')
   })
 
   test('delete a key', async ({ page }) => {
@@ -211,7 +211,7 @@ test.describe('keys', () => {
   })
 
   test('create a key with pem', async ({ page }) => {
-    await withNavigation(page, () => page.locator('.kong-ui-entities-keys-list [data-testid="new-key"]').click())
+    await withNavigation(page, () => page.locator('.kong-ui-entities-keys-list [data-testid="empty-state-action"]').click())
     await withNavigation(page, () => fillEntityForm({
       page,
       formData: {

tests/playwright/specs/plugins/01-Plugins.spec.ts

@@ -74,7 +74,7 @@ test.describe('plugins', () => {
 
     await withNavigation(
       page,
-      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="new-plugin"]'),
+      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]'),
     )
 
     await withNavigation(
@@ -93,12 +93,12 @@ test.describe('plugins', () => {
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
     await expect(page.locator('td[data-testid="name"]')).toContainText('Basic Authentication')
   })
 
   test('plugin list should have one plugin now', async ({ page }) => {
-    await expect(page.locator('.kong-ui-entities-plugins-list .k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.kong-ui-entities-plugins-list .k-table-data tbody tr')).toHaveCount(1)
   })
 
   test('plugin icons - plugin select', async ({ browserName, page }) => {
@@ -187,7 +187,7 @@ test.describe('plugins', () => {
 
     await withNavigation(
       page,
-      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="new-plugin"]'),
+      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]'),
     )
 
     await withNavigation(
@@ -202,7 +202,7 @@ test.describe('plugins', () => {
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
     await expect(page.locator('td[data-testid="name"]')).toContainText('Basic Authentication')
   })
 
@@ -230,7 +230,7 @@ test.describe('plugins', () => {
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
     await expect(page.locator('td[data-testid="name"]')).toContainText('Datadog')
   })
 
@@ -414,7 +414,7 @@ test.describe('plugins', () => {
     await clearKongResources('/plugins')
     await pluginListPage.goto()
 
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.locator('[data-testid="Key Authentication"]').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await page.waitForSelector('[data-testid="config-key_names-item-0"]')
@@ -444,7 +444,7 @@ test.describe('plugins', () => {
 
     let selectItem: Locator
 
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.locator('[data-testid="IP Restriction"]').click()
 
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
@@ -521,7 +521,7 @@ test.describe('plugins', () => {
     }))?.data
 
     await pluginListPage.goto()
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.getByTestId('basic-auth-card').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await expect(page.locator('input#service-id')).not.toBeVisible()
@@ -571,7 +571,7 @@ test.describe('plugins', () => {
     await pluginListPage.goto()
 
     // create a scoped plugin
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.getByTestId('basic-auth-card').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await page.click('.selection-group .Scoped-check')

tests/playwright/specs/plugins/02-PluginFilter.spec.ts

@@ -39,7 +39,7 @@ test.describe('plugins filter', () => {
     await page.fill('[data-testid="search-input"]', 'foo')
     await expect(page.locator('.empty-state-title')).toHaveText('No results found')
     // clear the filter
-    await page.locator('[data-testid="clear"]').click()
+    await page.locator('[data-testid="empty-state-action"]').click()
     await expect(page.locator('.kong-ui-entities-plugins-list tr[data-testid="basic-auth"]')).toBeVisible()
     await expect(page.locator('.kong-ui-entities-plugins-list tr[data-testid="hmac-auth"]')).toBeVisible()
   })

tests/playwright/specs/routes/02-RoutesPlugins.spec.ts

@@ -56,7 +56,7 @@ test.describe('routes plugins', () => {
 
     await withNavigation(
       page,
-      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="new-plugin"]'),
+      async () => await page.click('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]'),
     )
 
     await withNavigation(
@@ -71,7 +71,7 @@ test.describe('routes plugins', () => {
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
+    await expect(page.locator('.k-table-data tbody tr')).toHaveCount(1)
     await expect(page.locator('td[data-testid="name"]')).toContainText('Basic Authentication')
   })
 
@@ -90,7 +90,7 @@ test.describe('routes plugins', () => {
           withAction: 'submit',
         }),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
 
     await clickEntityListAction(page, 'edit')
     await withNavigation(
@@ -104,7 +104,7 @@ test.describe('routes plugins', () => {
           withAction: 'cancel',
         }),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })
 
   test('change scope from global to scoped', async ({ page, pluginListPage, routeListPage }) => {
@@ -125,7 +125,7 @@ test.describe('routes plugins', () => {
 
     // create a global plugin
     await pluginListPage.goto()
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.locator('[data-testid="Key Authentication"]').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await withNavigation(page, async () => await page.click(routeListPage.$.submitButton))

tests/playwright/specs/services/03-ServicePlugins.spec.ts

@@ -43,7 +43,7 @@ test.describe('service plugins', () => {
     await switchDetailTab(page, 'plugins')
     await page.waitForSelector('.kong-ui-entities-plugins-list .k-empty-state')
     await withNavigation(page, () =>
-      page.click('.kong-ui-entities-plugins-list [data-testid="new-plugin"]'),
+      page.click('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]'),
     )
     await withNavigation(page, () =>
       page.getByTestId('basic-auth-card').click(),
@@ -111,7 +111,7 @@ test.describe('service plugins', () => {
 
     // create a global plugin
     await pluginListPage.goto()
-    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="new-plugin"]').click())
+    await withNavigation(page, async () => await page.locator('.kong-ui-entities-plugins-list [data-testid="empty-state-action"]').click())
     await page.getByTestId('key-auth-card').click()
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
     await withNavigation(page, async () => await page.click(serviceListPage.$.submitButton))

tests/playwright/specs/services/04-Filtering.spec.ts

@@ -33,7 +33,7 @@ test.describe('Filtering', () => {
   test('displays all services before search', async ({ page, serviceListPage }) => {
     await serviceListPage.goto()
     for (let i = 0; i <= 10; i++) {
-      await expect(page.locator(`.kong-ui-entities-gateway-services-list tr [data-testid="service-${i}"]`)).toBeVisible()
+      await expect(page.locator(`.kong-ui-entities-gateway-services-list tr[data-testid="service-${i}"]`)).toBeVisible()
     }
   })
 

tests/playwright/specs/snis/01-SNIs.spec.ts

@@ -93,7 +93,7 @@ test.describe('snis', () => {
           withAction: 'submit',
         }),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
 
     await clickEntityListAction(page, 'edit')
     await withNavigation(
@@ -107,7 +107,7 @@ test.describe('snis', () => {
           withAction: 'cancel',
         }),
     )
-    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table-data .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })
 
   test('delete an sni', async ({ page }) => {