feat(*): adopt reskinned Kongponents phase 4

package.json

@@ -23,25 +23,25 @@
     "src/**/*.{css,scss,sass,less,styl,vue}": "stylelint --allow-empty-input --fix 'src/**/*.{css,scss,sass,less,styl,vue}'"
   },
   "dependencies": {
-    "@kong-ui-public/app-layout": "^2.2.17",
-    "@kong-ui-public/copy-uuid": "^2.0.21",
-    "@kong-ui-public/entities-certificates": "^2.2.7",
-    "@kong-ui-public/entities-consumer-credentials": "^2.1.29",
-    "@kong-ui-public/entities-consumers": "^2.4.7",
-    "@kong-ui-public/entities-gateway-services": "^2.3.7",
-    "@kong-ui-public/entities-key-sets": "^2.2.7",
-    "@kong-ui-public/entities-keys": "^2.2.7",
-    "@kong-ui-public/entities-plugins": "^2.7.1",
-    "@kong-ui-public/entities-routes": "^2.2.9",
-    "@kong-ui-public/entities-shared": "^2.2.0",
-    "@kong-ui-public/entities-snis": "^2.2.7",
-    "@kong-ui-public/entities-upstreams-targets": "^2.2.7",
-    "@kong-ui-public/entities-vaults": "^2.2.7",
-    "@kong-ui-public/forms": "^2.1.16",
-    "@kong-ui-public/i18n": "^2.0.5",
-    "@kong-ui-public/misc-widgets": "^2.0.9",
+    "@kong-ui-public/app-layout": "^2.2.21",
+    "@kong-ui-public/copy-uuid": "^2.0.26",
+    "@kong-ui-public/entities-certificates": "^2.3.2",
+    "@kong-ui-public/entities-consumer-credentials": "^2.1.35",
+    "@kong-ui-public/entities-consumers": "^2.5.2",
+    "@kong-ui-public/entities-gateway-services": "^2.4.4",
+    "@kong-ui-public/entities-key-sets": "^2.3.2",
+    "@kong-ui-public/entities-keys": "^2.3.2",
+    "@kong-ui-public/entities-plugins": "^2.8.5",
+    "@kong-ui-public/entities-routes": "^2.4.2",
+    "@kong-ui-public/entities-shared": "^2.5.2",
+    "@kong-ui-public/entities-snis": "^2.3.2",
+    "@kong-ui-public/entities-upstreams-targets": "^2.3.2",
+    "@kong-ui-public/entities-vaults": "^2.3.2",
+    "@kong-ui-public/forms": "^2.1.28",
+    "@kong-ui-public/i18n": "^2.1.0",
+    "@kong-ui-public/misc-widgets": "^2.0.13",
     "@kong/icons": "^1.8.8",
-    "@kong/kongponents": "^9.0.0-alpha.74",
+    "@kong/kongponents": "^9.0.0-alpha.91",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.6.0",
     "marked": "^5.1.0",

src/pages/consumers/Detail.vue

@@ -9,7 +9,7 @@
   <KTabs
     :model-value="initialHash"
     :tabs="tabs"
-    @changed="onTabChange"
+    @change="onTabChange"
   >
     <template #configuration>
       <ConsumerConfigCard

src/pages/key-sets/Detail.vue

@@ -9,7 +9,7 @@
   <KTabs
     :model-value="initialHash"
     :tabs="tabs"
-    @changed="onTabChange"
+    @change="onTabChange"
   >
     <template #configuration>
       <KeySetConfigCard

src/pages/routes/Detail.vue

@@ -10,7 +10,7 @@
   <KTabs
     :model-value="initialHash"
     :tabs="tabs"
-    @changed="onTabChange"
+    @change="onTabChange"
   >
     <template #configuration>
       <RouteConfigCard

src/pages/services/Detail.vue

@@ -9,7 +9,7 @@
   <KTabs
     :model-value="initialHash"
     :tabs="tabs"
-    @changed="onTabChange"
+    @change="onTabChange"
   >
     <template #configuration>
       <GatewayServiceConfigCard

src/pages/upstreams/Detail.vue

@@ -9,7 +9,7 @@
   <KTabs
     :model-value="initialHash"
     :tabs="tabs"
-    @changed="onTabChange"
+    @change="onTabChange"
   >
     <template #configuration>
       <UpstreamsConfigCard

tests/playwright/commands/selectOption.ts

@@ -2,8 +2,8 @@ import type { Locator } from '@playwright/test'
 
 export const selectOption = async (locator: Locator, option: string) => {
   const selectRoot = locator.locator('.k-select').or(locator)
-  const selectTrigger = selectRoot.locator('.k-input-wrapper.k-select-input')
+  const selectTrigger = selectRoot.locator('.k-input-wrapper.select-input')
 
   await selectTrigger.click()
-  await selectRoot.locator(`.k-select-item[data-testid="k-select-item-${option}"]`).click()
+  await selectRoot.locator(`.select-item[data-testid="select-item-${option}"]`).click()
 }

tests/playwright/commands/selectService.ts

@@ -6,5 +6,5 @@ export const selectService = async (page: Page, serviceId: string) => {
 
   await expect(locator.locator('[data-testid="route-form-service-id"]')).toBeVisible()
   await locator.locator('[data-testid="route-form-service-id"]').click()
-  await locator.locator(`[data-testid="k-select-item-${serviceId}"]`).click()
+  await locator.locator(`[data-testid="select-item-${serviceId}"]`).click()
 }

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

@@ -103,8 +103,8 @@ test.describe('consumer plugins', () => {
     await page.click('#consumer-id')
     await page.fill('#consumer-id', mockConsumerName)
     await page.waitForTimeout(300)
-    await expect(page.locator('.k-select-item')).toContainText(mockConsumerName)
-    await page.click('.k-select-item')
+    await expect(page.locator('.select-item')).toContainText(mockConsumerName)
+    await page.click('.select-item')
     await withNavigation(page, () => page.click(consumerListPage.$.submitButton))
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Consumer')
   })

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

@@ -160,8 +160,8 @@ test.describe('keys', () => {
 
     await selectInput.fill('')
     await selectInput.type('test')
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).toBeVisible()
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).toContainText(mockKeySetName)
+    await expect(selectRoot.locator('.k-popover.select-popover')).toBeVisible()
+    await expect(selectRoot.locator('.k-popover.select-popover')).toContainText(mockKeySetName)
   })
 
   test('keyset in form should be able to auto complete by inputting partial id', async ({ page }) => {
@@ -172,8 +172,8 @@ test.describe('keys', () => {
 
     await selectInput.fill('')
     await selectInput.type(testKeySet?.id ?? 'NULL_JUST_PLACEHOLDER')
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).toBeVisible()
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).toContainText(mockKeySetName)
+    await expect(selectRoot.locator('.k-popover.select-popover')).toBeVisible()
+    await expect(selectRoot.locator('.k-popover.select-popover')).toContainText(mockKeySetName)
   })
 
   test('keyset in form should not able to auto complete by inputting random characters', async ({ page }) => {
@@ -184,8 +184,8 @@ test.describe('keys', () => {
 
     await selectInput.fill('')
     await selectInput.type('foooooobarrrrrr')
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).toBeVisible()
-    await expect(selectRoot.locator('.k-popover.k-select-popover')).not.toContainText(mockKeySetName)
+    await expect(selectRoot.locator('.k-popover.select-popover')).toBeVisible()
+    await expect(selectRoot.locator('.k-popover.select-popover')).not.toContainText(mockKeySetName)
   })
 
   test('edit should be cancelable', async ({ page }) => {

tests/playwright/specs/misc/01-EntityListPagination.spec.ts

@@ -35,7 +35,7 @@ test.describe('entity list pagination', () => {
   test('should persist page size', async ({ page }) => {
     const pageSizeSelect = page.locator('[data-testid="page-size-dropdown"]')
 
-    await pageSizeSelect.locator('[data-testid="k-select-input"] > button').click()
+    await pageSizeSelect.locator('[data-testid="dropdown-trigger"] > button').click()
     await pageSizeSelect.locator('button[value="100"]').click()
 
     expect(await pageSizeSelect.innerText(), 'should have page size of 100').toContain('100 items per page')

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

@@ -262,7 +262,7 @@ test.describe('plugins', () => {
     await page.locator('.autosuggest #consumer-id').click()
     await page.locator('.autosuggest #consumer-id').fill('')
     await page.locator('.autosuggest #consumer-id').type('another')
-    await page.locator(`[data-testid="k-select-item-${res2?.data.id}"]`).click()
+    await page.locator(`[data-testid="select-item-${res2?.data.id}"]`).click()
 
     await withNavigation(page, async () =>
       await fillEntityForm({
@@ -301,10 +301,10 @@ test.describe('plugins', () => {
       async () => await page.getByTestId('basic-auth-card').click()
     )
 
-    await page.click('.plugin-protocols-select .k-multiselect-trigger')
-    await page.click('.k-multiselect-item[data-testid="k-multiselect-item-grpcs"]')
-    await page.click('.k-multiselect-item[data-testid="k-multiselect-item-https"]')
-    await page.click('.plugin-protocols-select .k-multiselect-trigger')
+    await page.click('.plugin-protocols-select .multiselect-trigger')
+    await page.click('.multiselect-item[data-testid="multiselect-item-grpcs"]')
+    await page.click('.multiselect-item[data-testid="multiselect-item-https"]')
+    await page.click('.plugin-protocols-select .multiselect-trigger')
 
     await withNavigation(
       page,
@@ -461,7 +461,7 @@ test.describe('plugins', () => {
     await page.click('#service-id')
     await page.fill('#service-id', 'test_service')
     await page.waitForTimeout(300)
-    selectItem = page.locator('[data-testid="k-select-selected-item"]').nth(0).locator('.k-select-item')
+    selectItem = page.locator('[data-testid="select-wrapper"]').nth(0).locator('.select-item')
     await expect(selectItem).toContainText(`${service?.data.name}`)
     await expect(selectItem).toContainText(`${service?.data.id}`)
     await selectItem.click()
@@ -470,7 +470,7 @@ test.describe('plugins', () => {
     await page.click('#route-id')
     await page.fill('#route-id', 'test_route')
     await page.waitForTimeout(300)
-    selectItem = page.locator('[data-testid="k-select-selected-item"]').nth(1).locator('.k-select-item')
+    selectItem = page.locator('[data-testid="select-wrapper"]').nth(1).locator('.select-item')
     await expect(selectItem).toContainText(`${route?.data.name}`)
     await expect(selectItem).toContainText(`${route?.data.id}`)
     await selectItem.click()
@@ -479,7 +479,7 @@ test.describe('plugins', () => {
     await page.click('#consumer-id')
     await page.fill('#consumer-id', 'test_consumer')
     await page.waitForTimeout(300)
-    selectItem = page.locator('[data-testid="k-select-selected-item"]').nth(2).locator('.k-select-item')
+    selectItem = page.locator('[data-testid="select-wrapper"]').nth(2).locator('.select-item')
     await expect(selectItem).toContainText(`${consumer?.data.username}`)
     await expect(selectItem).toContainText(`${consumer?.data.id}`)
     await selectItem.click()
@@ -535,8 +535,8 @@ test.describe('plugins', () => {
     await page.click('#service-id')
     await page.fill('#service-id', 'test_service')
     await page.waitForTimeout(300)
-    await expect(page.locator('.k-select-item')).toContainText('test_service')
-    await page.click('.k-select-item')
+    await expect(page.locator('.select-item')).toContainText('test_service')
+    await page.click('.select-item')
     await expect(page.locator('#service-id')).toHaveValue(`test_service - ${service?.id}`)
 
     // switch back to global
@@ -579,16 +579,16 @@ test.describe('plugins', () => {
     await page.click('#service-id')
     await page.fill('#service-id', 'test_service')
     await page.waitForTimeout(300)
-    await expect(page.locator('.k-select-item')).toContainText('test_service')
-    await page.click('.k-select-item')
+    await expect(page.locator('.select-item')).toContainText('test_service')
+    await page.click('.select-item')
     await withNavigation(page, async () => await fillEntityForm({
       page,
       withAction: 'submit',
     }))
 
     // delete service id and submit
     await clickEntityListAction(page, 'edit')
-    await page.locator('[data-testid="k-select-selected-item"]').nth(0).locator('.kong-icon-clear').click()
+    await page.locator('[data-testid="select-wrapper"]').nth(0).locator('.close-icon').click()
     await withNavigation(page, async () => await fillEntityForm({
       page,
       withAction: 'submit',

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

@@ -40,10 +40,10 @@ const selectProtocols = async (page: Page, protocol: string) => {
   const locator = page.locator('.k-select').filter({ hasText: 'Protocols' })
 
   await expect(locator.locator('[data-testid="route-form-protocols"]')).toBeVisible()
-  await locator.locator('.k-input-wrapper.k-select-input').click()
+  await locator.locator('.k-input-wrapper.select-input').click()
 
-  await expect(locator.locator('.k-popover-content .k-select-list')).toBeVisible()
-  await locator.locator(`[data-testid="k-select-item-${protocol}"]`).click()
+  await expect(locator.locator('.k-popover-content .select-items-container')).toBeVisible()
+  await locator.locator(`[data-testid="select-item-${protocol}"]`).click()
 }
 
 test.describe('routes', () => {
@@ -598,7 +598,7 @@ test.describe('routes', () => {
     await withNavigation(page, async () => await clickEntityListAction(page, 'edit'))
 
     await expect(page.locator('[data-testid="route-form-service-id"]')).toBeVisible()
-    await page.locator('.kong-icon.kong-icon-clear').click()
+    await page.locator('.kui-icon.close-icon').click()
 
     await withNavigation(page, () =>
       fillEntityForm({

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

@@ -140,8 +140,8 @@ test.describe('routes plugins', () => {
     await page.click('#route-id')
     await page.fill('#route-id', mockRouteName)
     await page.waitForTimeout(300)
-    await expect(page.locator('.k-select-item')).toContainText(mockRouteName)
-    await page.click('.k-select-item')
+    await expect(page.locator('.select-item')).toContainText(mockRouteName)
+    await page.click('.select-item')
     await withNavigation(page, () => page.click(routeListPage.$.submitButton))
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Route')
   })

tests/playwright/specs/services/01-Service.spec.ts

@@ -242,7 +242,7 @@ test.describe('services', () => {
 
       await page.getByTestId('gateway-service-protocol-radio').click()
       await page.getByTestId('gateway-service-protocol-select').click({ force: true })
-      await page.locator(`.k-select-item[data-testid="k-select-item-${protocol}"]`).click()
+      await page.locator(`.select-item[data-testid="select-item-${protocol}"]`).click()
       if (['grpc', 'grpcs', 'tcp', 'tls'].includes(protocol)) {
         await expect(page.getByTestId('gateway-service-path-input')).not.toBeVisible()
       }

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

@@ -132,8 +132,8 @@ test.describe('service plugins', () => {
     await page.click('#service-id')
     await page.fill('#service-id', 'test_service')
     await page.waitForTimeout(300)
-    await expect(page.locator('.k-select-item')).toContainText('test_service')
-    await page.click('.k-select-item')
+    await expect(page.locator('.select-item')).toContainText('test_service')
+    await page.click('.select-item')
     await withNavigation(page, () => page.click(serviceListPage.$.submitButton))
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Service')
   })

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

@@ -55,7 +55,7 @@ test.describe('snis', () => {
     await expect(page.locator('[data-testid="sni-form-certificate-id"]')).toBeVisible()
     await (await page.waitForSelector('[data-testid="sni-form-certificate-id"]')).click()
     await page.locator('[data-testid="sni-form-certificate-id"]').fill(certificate.id)
-    await (await page.waitForSelector(`[data-testid="k-select-item-${certificate.id}"]`)).click()
+    await (await page.waitForSelector(`[data-testid="select-item-${certificate.id}"]`)).click()
 
     await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
   })
@@ -69,7 +69,7 @@ test.describe('snis', () => {
     await expect(page.locator('[data-testid="sni-form-certificate-id"]')).toBeVisible()
     await (await page.waitForSelector('[data-testid="sni-form-certificate-id"]')).click()
     await page.locator('[data-testid="sni-form-certificate-id"]').fill(certificate.id)
-    await (await page.waitForSelector(`[data-testid="k-select-item-${certificate.id}"]`)).click()
+    await (await page.waitForSelector(`[data-testid="select-item-${certificate.id}"]`)).click()
     await fillEntityForm({
       page,
       formData: {

tests/playwright/specs/upstreams/01-Upstreams.spec.ts

@@ -89,7 +89,7 @@ test.describe('upstreams', () => {
     await selectOption(page.locator('.k-select.name-select'), service_host1.id)
     // hash-fallback is disabled when hash-on is none
     await selectOption(page.locator('.k-select.hash-on-select'), 'none')
-    await expect(page.locator('.k-select.hash-fallback-select [data-testid="k-select-input"]')).toHaveClass(/disabled/)
+    await expect(page.locator('.k-select.hash-fallback-select [data-testid="select-input"]')).toBeDisabled()
     await fillEntityForm({
       page,
       formData: {},
@@ -455,7 +455,7 @@ test.describe('upstreams', () => {
         await expect(page.getByTestId(`upstreams-form-hash-on-cookie`)).toBeVisible()
         await page.getByTestId(`upstreams-form-hash-on-cookie`).fill('cookie')
 
-        await expect(page.locator('.k-select.hash-fallback-select [data-testid="k-select-input"]')).toHaveClass(/disabled/)
+        await expect(page.locator('.k-select.hash-fallback-select [data-testid="select-input"]')).toBeDisabled()
       },
       {},
       async () => {
@@ -560,10 +560,14 @@ test.describe('upstreams', () => {
   const select_statuses = async (page, selector, statuses) => {
     const locator = page.locator(selector)
 
+    // open dropdown
+    await locator.locator('.multiselect-trigger').click({ position: { x: 1, y: 1 } })
     for (let index = 0, len = statuses.length; index < len; index++) {
-      await locator.locator('.k-input-wrapper.k-multiselect-input').click()
-      await locator.locator(`.k-multiselect-item[data-testid="k-multiselect-item-${statuses[index]}"]`).click()
+      await locator.locator(`.multiselect-item[data-testid="multiselect-item-${statuses[index]}"]`).click()
     }
+
+    // close dropdown
+    await locator.locator('.multiselect-trigger .selection-badges-container').click({ position: { x: 1, y: 1 } })
   }
 
   test(`upstream update - successful updates 'health check'`, async ({ page, upstreamListPage }) => {
@@ -706,9 +710,9 @@ test.describe('upstreams', () => {
     await create_upstream(
       page, upstreamListPage,
       async () => {
-        await page.click('.k-select.name-select .k-input-wrapper.k-select-input')
+        await page.click('.k-select.name-select .k-input-wrapper.select-input')
         await page.locator('.k-select.name-select input').type(newName)
-        await page.getByTestId('k-select-add-item').click()
+        await page.getByTestId('select-add-item').click()
       },
       {},
       async () => {