deps(*): upgrade Kongponents

package.json

@@ -32,16 +32,16 @@
     "@kong-ui-public/entities-key-sets": "^3.1.0",
     "@kong-ui-public/entities-keys": "^3.1.0",
     "@kong-ui-public/entities-plugins": "^4.3.0",
-    "@kong-ui-public/entities-routes": "^3.1.5",
-    "@kong-ui-public/entities-shared": "^3.1.1",
+    "@kong-ui-public/entities-routes": "^3.2.0",
+    "@kong-ui-public/entities-shared": "^3.2.0",
     "@kong-ui-public/entities-snis": "^3.1.0",
     "@kong-ui-public/entities-upstreams-targets": "^3.1.0",
     "@kong-ui-public/entities-vaults": "^3.2.0",
-    "@kong-ui-public/forms": "3",
+    "@kong-ui-public/forms": "^3.1.5",
     "@kong-ui-public/i18n": "^2.1.5",
     "@kong-ui-public/misc-widgets": "^2.0.39",
-    "@kong/icons": "^1.8.8",
-    "@kong/kongponents": "^9.0.0-alpha.146",
+    "@kong/icons": "^1.9.1",
+    "@kong/kongponents": "^9.0.0-alpha.154",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",

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

@@ -11,8 +11,8 @@
         :error-state-message="errorMessage"
         :error-state-title="t('entities.dp-nodes.error.title')"
         :fetcher="fetcher"
-        :has-error="!!errorMessage"
-        pagination-type="offset"
+        :error="!!errorMessage"
+        pagination-offset
       >
         <template #toolbar>
           <KDropdown v-if="visibleNodes.length">

tests/playwright/commands/expectEmptyEntityList.ts

@@ -2,6 +2,6 @@ import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 export const expectEmptyEntityList = async (page: Page, entity: string, description: string) => {
-  await expect(page.locator(`.kong-ui-entities-${entity}-list .k-table-empty-state .primary`)).toBeVisible()
-  await expect(page.locator(`.kong-ui-entities-${entity}-list .k-table-empty-state .empty-state-title`)).toHaveText(description)
+  await expect(page.locator(`.kong-ui-entities-${entity}-list .table-empty-state .primary`)).toBeVisible()
+  await expect(page.locator(`.kong-ui-entities-${entity}-list .table-empty-state .empty-state-title`)).toHaveText(description)
 }

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

@@ -37,7 +37,7 @@ test.describe('consumers', () => {
 
   test('consumer create from - entrance and exit', async ({ page }) => {
     // from create button in empty placeholder
-    await withNavigation(page, () => page.click('.k-table-empty-state .primary'))
+    await withNavigation(page, () => page.click('.table-empty-state .primary'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
 
     // exit from cancel button
@@ -46,13 +46,13 @@ test.describe('consumers', () => {
   })
 
   test('consumer create - save button is disabled', async ({ page }) => {
-    await withNavigation(page, () => page.click('.k-table-empty-state .primary'))
+    await withNavigation(page, () => page.click('.table-empty-state .primary'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
     await expect(page.getByTestId('form-submit')).toBeDisabled()
   })
 
   test('consumer create - success', async ({ page }) => {
-    await withNavigation(page, () => page.click('.k-table-empty-state .primary'))
+    await withNavigation(page, () => page.click('.table-empty-state .primary'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
 
     await fillEntityForm({

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

@@ -63,7 +63,7 @@ test.describe('consumer plugins', () => {
       page,
       () => page.locator('[data-testid="form-actions"] .primary').click(),
     )
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
 
     await withNavigation(page, () => clickEntityListAction(page, 'edit'))
     await expandAdvancedFields(page)
@@ -72,7 +72,7 @@ test.describe('consumer plugins', () => {
       page,
       async () => await page.locator('[data-testid="form-cancel"]').click()
     )
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })
 
   test('change scope from global to scoped', async ({ page }) => {

tests/playwright/specs/data-plane-nodes/01-DataPlaneNodes.spec.ts

@@ -26,7 +26,7 @@ test.describe('data plane nodes', () => {
     ]
 
     headers.forEach(async (header: string) => {
-      await expect(table.getByTestId(`k-table-header-${header}`)).toBeVisible()
+      await expect(table.getByTestId(`table-header-${header}`)).toBeVisible()
     })
   })
 
@@ -69,8 +69,8 @@ test.describe('data plane nodes', () => {
     const globalCheckbox = table.locator('thead input[type="checkbox"]')
 
     await globalCheckbox.check()
-    await page.locator('.k-table-toolbar .dropdown-trigger').click()
-    await page.locator('.k-table-toolbar [data-testid="dropdown-item-change-log-level"]').click()
+    await page.locator('.table-toolbar .dropdown-trigger').click()
+    await page.locator('.table-toolbar [data-testid="dropdown-item-change-log-level"]').click()
 
     await expect(page.locator('.k-modal .modal-title')).toContainText('3 Nodes')
     await page.locator('.log-level-select input').click()

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

@@ -27,14 +27,14 @@ test.describe('keySets', () => {
   })
 
   test('cancel the creation of a key set', async ({ page }) => {
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
-    await withNavigation(page, () => page.locator('.k-table-empty-state .primary').click())
+    await expect(page.locator('.table-empty-state')).toBeVisible()
+    await withNavigation(page, () => page.locator('.table-empty-state .primary').click())
     await withNavigation(page, () => page.locator('.form-actions [data-testid="form-cancel"]').click())
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
+    await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 
   test('create a key set', async ({ page }) => {
-    await withNavigation(page, () => page.locator('.k-table-empty-state .primary').click())
+    await withNavigation(page, () => page.locator('.table-empty-state .primary').click())
     await withNavigation(page, () => fillEntityForm({
       page,
       formData: {
@@ -45,7 +45,7 @@ test.describe('keySets', () => {
     }))
     await waitAndDismissToasts(page)
 
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockName)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockName)
     await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
   })
 
@@ -66,8 +66,8 @@ test.describe('keySets', () => {
       withAction: 'submit',
     }))
 
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockName)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTags)
+    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)
   })
 
@@ -82,8 +82,8 @@ test.describe('keySets', () => {
       withAction: 'cancel',
     }))
 
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockName)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTags)
+    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)
   })
 
@@ -92,6 +92,6 @@ test.describe('keySets', () => {
     await expect(page.locator('.kong-ui-entity-delete-modal .modal-container')).toBeVisible()
     await autocompleteDeleteModal(page)
     await waitAndDismissToasts(page)
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
+    await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 })

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

@@ -52,7 +52,7 @@ test.describe('key-set keys tab', () => {
 
     await waitAndDismissToasts(page)
 
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockJwName)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockJwName)
     await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
   })
 
@@ -73,6 +73,6 @@ test.describe('key-set keys tab', () => {
     await expect(page.locator('.kong-ui-entity-delete-modal .modal-container')).toBeVisible()
     await page.locator('.kong-ui-entity-delete-modal [data-testid="modal-action-button"]').click()
     await waitAndDismissToasts(page)
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
+    await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 })

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

@@ -37,7 +37,7 @@ test.describe('keys', () => {
   })
 
   test('cancel a create behavior', async ({ page }) => {
-    await withNavigation(page, () => page.locator('.k-table-empty-state .primary').click())
+    await withNavigation(page, () => page.locator('.table-empty-state .primary').click())
 
     await withNavigation(page, () => fillEntityForm({
       page,
@@ -51,11 +51,11 @@ test.describe('keys', () => {
       withAction: 'cancel',
     }))
 
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
+    await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 
   test('create a jwk key with required fields only', async ({ page }) => {
-    await withNavigation(page, () => page.locator('.k-table-empty-state .primary').click())
+    await withNavigation(page, () => page.locator('.table-empty-state .primary').click())
 
     await withNavigation(page, () => fillEntityForm({
       page,
@@ -71,9 +71,9 @@ test.describe('keys', () => {
     await waitAndDismissToasts(page)
 
     await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText('-')
-    await expect(page.locator('.k-table [data-testid="kid"]')).toContainText(mockJwk.kid)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText('-')
+    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText('-')
+    await expect(page.locator('.k-table .table-wrapper [data-testid="kid"]')).toContainText(mockJwk.kid)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText('-')
   })
 
   test('view keys detail page - 1', async ({ page }) => {
@@ -112,9 +112,9 @@ test.describe('keys', () => {
 
     await waitAndDismissToasts(page)
 
-    await expect(page.locator('.k-table [data-testid="kid"]')).toContainText(mockPemKid)
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockPemName)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTags)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="kid"]')).toContainText(mockPemKid)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockPemName)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTags)
     await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
   })
 
@@ -140,9 +140,9 @@ test.describe('keys', () => {
 
     await waitAndDismissToasts(page)
 
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText('-')
-    await expect(page.locator('.k-table [data-testid="kid"]')).toContainText(mockPemKid)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText('-')
+    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('-')
   })
 
   test('view keys detail page - 3', async ({ page }) => {
@@ -200,17 +200,17 @@ test.describe('keys', () => {
       method: 'fill',
       withAction: 'cancel',
     }))
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText('-')
-    await expect(page.locator('.k-table [data-testid="kid"]')).toContainText(mockPemKid)
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText('-')
+    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('-')
   })
 
   test('delete a key', async ({ page }) => {
     await clickEntityListAction(page, 'delete')
     await expect(page.locator('.kong-ui-entity-delete-modal .modal-container')).toBeVisible()
     await page.locator('.kong-ui-entity-delete-modal [data-testid="modal-action-button"]').click()
     await waitAndDismissToasts(page)
-    await expect(page.locator('.k-table-empty-state')).toBeVisible()
+    await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 
   test('create a key with pem', async ({ page }) => {
@@ -228,7 +228,7 @@ test.describe('keys', () => {
       withAction: 'submit',
     }))
     await waitAndDismissToasts(page)
-    await expect(page.locator('.k-table [data-testid="name"]')).toContainText(mockPemName)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="name"]')).toContainText(mockPemName)
     await expect(page.locator('.k-table tbody tr')).toHaveCount(1)
   })
 

tests/playwright/specs/routes/01-Routes.spec.ts

@@ -83,23 +83,23 @@ test.describe('routes', () => {
 
   test('route create - cancel button', async ({ page }) => {
     await withNavigation(page, () =>
-      page.locator('.k-table-empty-state .primary').click()
+      page.locator('.table-empty-state .primary').click()
     )
     await page.locator('[data-testid="form-cancel"]').click()
     await expectEmptyEntityList(page, 'routes', 'Configure a New Route')
   })
 
   test('route create - save button is disabled', async ({ page }) => {
     await withNavigation(page, () =>
-      page.locator('.k-table-empty-state .primary').click()
+      page.locator('.table-empty-state .primary').click()
     )
 
     await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
   })
 
   test('route create - cannot be submit if only protocol is clicked', async ({ page }) => {
     await withNavigation(page, () =>
-      page.locator('.k-table-empty-state .primary').click()
+      page.locator('.table-empty-state .primary').click()
     )
 
     await page.locator('[data-testid="route-form-protocols"]').fill('http')
@@ -108,7 +108,7 @@ test.describe('routes', () => {
 
   test('route create - fail with invalid paths', async ({ page }) => {
     await withNavigation(page, () =>
-      page.locator('.k-table-empty-state .primary').click()
+      page.locator('.table-empty-state .primary').click()
     )
 
     await fillArrayField(page, 'paths', ['kong(-ee){0,1}.com'], true)
@@ -126,7 +126,7 @@ test.describe('routes', () => {
 
   test('route create - can open/close advanced fields', async ({ page }) => {
     await withNavigation(page, () =>
-      page.locator('.k-table-empty-state .primary').click()
+      page.locator('.table-empty-state .primary').click()
     )
 
     // default the advanced field status
@@ -160,7 +160,7 @@ test.describe('routes', () => {
     for (const protocol of protocols) {
       test(`route create - sni field appears and hide correctly with protocols (${protocol})`, async ({ page }) => {
         await withNavigation(page, () =>
-          page.locator('.k-table-empty-state .primary').click()
+          page.locator('.table-empty-state .primary').click()
         )
 
         await selectProtocols(page, `${protocol}`)
@@ -176,7 +176,7 @@ test.describe('routes', () => {
   test(`route create - successful create`, async ({ page }) => {
     await withNavigation(
       page,
-      async () => await page.locator('.kong-ui-entities-routes-list .k-table-empty-state .primary').click()
+      async () => await page.locator('.kong-ui-entities-routes-list .table-empty-state .primary').click()
     )
 
     await page.waitForSelector('.k-breadcrumbs', { state: 'hidden' })
@@ -263,10 +263,10 @@ test.describe('routes', () => {
         })
       })
 
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTag)
-    await expect(page.locator('.k-table [data-testid="paths"]')).toContainText(mockPaths[0])
-    await expect(page.locator('.k-table [data-testid="paths"]')).toContainText(mockPaths[1])
-    await expect(page.locator('.k-table [data-testid="paths"] .k-badge')).toHaveCount(mockPaths.length)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="paths"]')).toContainText(mockPaths[0])
+    await expect(page.locator('.k-table .table-wrapper [data-testid="paths"]')).toContainText(mockPaths[1])
+    await expect(page.locator('.k-table .table-wrapper [data-testid="paths"] .k-badge')).toHaveCount(mockPaths.length)
   })
 
   test('route update changing protocols from http to grpc - successful', async ({ page }) => {
@@ -335,7 +335,7 @@ test.describe('routes', () => {
 
     await withNavigation(
       page,
-      async () => await page.locator('.k-table-empty-state .primary').click()
+      async () => await page.locator('.table-empty-state .primary').click()
     )
 
     await init()
@@ -573,7 +573,7 @@ test.describe('routes', () => {
     await page.goto('/services')
     await withNavigation(page, () => clickEntityListAction(page, 'view'))
     await switchDetailTab(page, 'routes')
-    await page.click('.kong-ui-entities-routes-list .k-table-empty-state .primary')
+    await page.click('.kong-ui-entities-routes-list .table-empty-state .primary')
     await expect(page.locator('[data-testid="route-form-service-id"]')).not.toBeVisible()
   })
 

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

@@ -92,7 +92,7 @@ test.describe('routes plugins', () => {
           withAction: 'submit',
         }),
     )
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
 
     await clickEntityListAction(page, 'edit')
     await withNavigation(
@@ -106,7 +106,7 @@ test.describe('routes plugins', () => {
           withAction: 'cancel',
         })
     )
-    await expect(page.locator('.k-table [data-testid="tags"]')).toHaveText(mockTag)
+    await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })
 
   test('change scope from global to scoped', async ({ page, pluginListPage, routeListPage }) => {