chore(*): upgrade to Kongponents alpha

.github/dependabot.yml

@@ -30,13 +30,24 @@ updates:
       timezone: "Asia/Shanghai"
     target-branch: "main"
     allow:
-      - dependency-name: "@kong/design-tokens"
-      - dependency-name: "@kong/kongponents"
+      - dependency-name: "@kong/*"
       - dependency-name: "@kong-ui-public/*"
-      - dependency-name: "@playwright/test"
     groups:
       kong-packages:
         patterns:
-          - "@kong/design-tokens"
-          - "@kong/kongponents"
+          - "@kong/*"
           - "@kong-ui-public/*"
+
+  - package-ecosystem: "npm"
+    directory: "/tests/playwright"
+    registries:
+      - npm
+      - yarn
+    schedule:
+      interval: "weekly"
+      day: "friday"
+      time: "06:42"
+      timezone: "Asia/Shanghai"
+    target-branch: "main"
+    allow:
+      - dependency-name: "@playwright/test"

package.json

@@ -19,24 +19,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": "^0.24.10",
-    "@kong-ui-public/copy-uuid": "^1.3.12",
-    "@kong-ui-public/entities-certificates": "^1.3.26",
-    "@kong-ui-public/entities-consumer-credentials": "^1.1.62",
-    "@kong-ui-public/entities-consumers": "^1.2.26",
-    "@kong-ui-public/entities-gateway-services": "^1.3.27",
-    "@kong-ui-public/entities-key-sets": "^1.2.26",
-    "@kong-ui-public/entities-keys": "^1.3.5",
-    "@kong-ui-public/entities-plugins": "^1.5.10",
-    "@kong-ui-public/entities-routes": "^1.2.11",
-    "@kong-ui-public/entities-shared": "^1.2.4",
-    "@kong-ui-public/entities-snis": "^1.1.57",
-    "@kong-ui-public/entities-upstreams-targets": "^1.3.26",
-    "@kong-ui-public/entities-vaults": "^1.2.28",
-    "@kong-ui-public/forms": "^1.2.28",
-    "@kong-ui-public/i18n": "^0.8.6",
-    "@kong-ui-public/misc-widgets": "^0.5.48",
-    "@kong/kongponents": "^8.126.2",
+    "@kong-ui-public/app-layout": "^2.1.1",
+    "@kong-ui-public/copy-uuid": "^2.0.3",
+    "@kong-ui-public/entities-certificates": "^2.0.7",
+    "@kong-ui-public/entities-consumer-credentials": "^2.0.7",
+    "@kong-ui-public/entities-consumers": "^2.0.8",
+    "@kong-ui-public/entities-gateway-services": "^2.0.7",
+    "@kong-ui-public/entities-key-sets": "^2.0.7",
+    "@kong-ui-public/entities-keys": "^2.0.7",
+    "@kong-ui-public/entities-plugins": "^2.0.10",
+    "@kong-ui-public/entities-routes": "^2.0.7",
+    "@kong-ui-public/entities-shared": "^2.0.7",
+    "@kong-ui-public/entities-snis": "^2.0.7",
+    "@kong-ui-public/entities-upstreams-targets": "^2.0.7",
+    "@kong-ui-public/entities-vaults": "^2.0.7",
+    "@kong-ui-public/forms": "^2.0.3",
+    "@kong-ui-public/i18n": "^2.0.0",
+    "@kong-ui-public/misc-widgets": "^2.0.1",
+    "@kong/icons": "^1.8.0",
+    "@kong/kongponents": "^9.0.0-alpha.62",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.6.0",
     "marked": "^5.1.0",

src/components/EntityForm/ConfirmModalDialog.vue

@@ -27,7 +27,7 @@
       </template>
       <template #action-buttons>
         <KButton
-          appearance="outline"
+          appearance="secondary"
           @click="cancel"
         >
           {{ dismissText }}
@@ -39,13 +39,7 @@
           class="actionButton"
           @click="ok"
         >
-          <template #icon>
-            <KIcon
-              v-if="isLoading"
-              icon="spinner"
-              size="16"
-            />
-          </template>
+          <ProgressIcon v-if="isLoading" />
           {{ proceedText }}
         </KButton>
       </template>
@@ -54,10 +48,12 @@
 </template>
 
 <script>
+import { ProgressIcon } from '@kong/icons'
 import { capitalize } from './helpers'
 
 export default {
   name: 'ConfirmDialog',
+  components: { ProgressIcon },
   inheritAttrs: false,
   props: {
     action: {

src/components/EntityForm/EntityForm.vue

@@ -56,19 +56,15 @@
         data-testid="form-footer-action-submit"
         @click="confirm"
       >
-        <template #icon>
-          <KIcon
-            v-if="pending && !isModalOpen"
-            icon="spinner"
-            size="16"
-          />
-        </template>
+        <ProgressIcon
+          v-if="pending && !isModalOpen"
+        />
         {{ isModalOpen ? buttonText : confirmButtonText }}
       </KButton>
 
       <KButton
         data-testid="form-footer-action-cancel"
-        appearance="outline"
+        appearance="secondary"
         @click="cancel"
       >
         Cancel
@@ -93,6 +89,7 @@
 </template>
 
 <script>
+import { ProgressIcon } from '@kong/icons'
 import { customFields, getSharedFormName, sharedForms } from '@kong-ui-public/forms'
 import ConfirmModalDialog from './ConfirmModalDialog.vue'
 import EntityMixin from './mixins/EntityMixin'
@@ -105,7 +102,7 @@ const toaster = useToaster()
 export default {
   name: 'EntityForm',
 
-  components: { ConfirmModalDialog, ...sharedForms },
+  components: { ProgressIcon, ConfirmModalDialog, ...sharedForms },
 
   mixins: [EntityMixin, RedirectMixin],
 

src/components/EntityForm/NativeEntityForm.vue

@@ -42,18 +42,14 @@
         class="button-confirm"
         @click="confirm"
       >
-        <template #icon>
-          <KIcon
-            v-if="isModalOpen ? false : currentState === 'submitting'"
-            icon="spinner"
-            size="16"
-          />
-        </template>
+        <ProgressIcon
+          v-if="isModalOpen ? false : currentState === 'submitting'"
+        />
         {{ isModalOpen ? buttonText : confirmButtonText }}
       </KButton>
 
       <KButton
-        appearance="outline"
+        appearance="secondary"
         data-testid="form-footer-action-cancel"
         @click="cancel"
       >
@@ -79,6 +75,7 @@
 </template>
 
 <script>
+import { ProgressIcon } from '@kong/icons'
 import ConfirmModalDialog from './ConfirmModalDialog.vue'
 import EntityMixin from './mixins/EntityMixin'
 import RedirectMixin from './mixins/RedirectMixin'
@@ -96,7 +93,7 @@ import { customFields } from '@kong-ui-public/forms'
 export default {
   name: 'NativeEntityForm',
 
-  components: { ConfirmModalDialog },
+  components: { ProgressIcon, ConfirmModalDialog },
 
   mixins: [EntityMixin, RedirectMixin],
 

src/components/HeaderBackButton.vue

@@ -2,6 +2,7 @@
   <KButton
     data-testid="header-back-button"
     :to="backPath"
+    appearance="tertiary"
   >
     {{ t('global.buttons.back') }}
   </KButton>

src/components/KonnectCTA.vue

@@ -36,7 +36,6 @@
             <KButton
               appearance="primary"
               :to="link"
-              size="small"
               rel="noopener"
               target="_blank"
             >

src/pages/overview/Overview.vue

@@ -41,10 +41,9 @@
             rel="noopener"
             target="_blank"
           >
-            <KIcon
+            <component
+              :is="resource.icon"
               :color="KUI_COLOR_TEXT_PRIMARY_STRONG"
-              :icon="resource.icon"
-              size="24"
             />
             <div class="resource-info">
               <span class="resource-title">{{ resource.title }}</span>
@@ -60,6 +59,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import {
+  FlagIcon,
+  BrainIcon,
+  PlugIcon,
+  KongIcon,
+} from '@kong/icons'
 import { config as gatewayConfig } from 'config'
 import KonnectCTA from '@/components/KonnectCTA.vue'
 import { useI18n } from '@/composables/useI18n'
@@ -172,25 +177,25 @@ const info = computed(() => {
 const resources = computed(() => [
   {
     link: `https://docs.konghq.com/gateway/${version.value}`,
-    icon: 'flag',
+    icon: FlagIcon,
     title: t('overview.resource.intro.title'),
     description: t('overview.resource.intro.description'),
   },
   {
     link: `https://docs.konghq.com/gateway/${version.value}/get-started`,
-    icon: 'handClock',
+    icon: BrainIcon,
     title: t('overview.resource.start.title'),
     description: t('overview.resource.start.description'),
   },
   {
     link: 'https://docs.konghq.com/hub',
-    icon: 'plug',
+    icon: PlugIcon,
     title: t('overview.resource.plugin.title'),
     description: t('overview.resource.plugin.description'),
   },
   {
     link: 'https://discuss.konghq.com/',
-    icon: 'kong',
+    icon: KongIcon,
     title: t('overview.resource.discuss.title'),
     description: t('overview.resource.discuss.description'),
   },

src/registerGlobalComponents.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import Kongponents from '@kong/kongponents'
 import CopyUuid from '@kong-ui-public/copy-uuid'
-import { vfgPlugin } from '@kong-ui-public/forms'
+import { FORMS_API_KEY, VueFormGenerator } from '@kong-ui-public/forms'
 import PageHeader from '@/components/PageHeader.vue'
 import HeaderBackButton from '@/components/HeaderBackButton.vue'
 import HeaderEditButton from '@/components/HeaderEditButton.vue'
@@ -11,14 +11,13 @@ import { apiService } from './services/apiService'
 export const registerGlobalComponents = (app: App) => {
   app.use(Kongponents)
   app.use(CopyUuid)
-  app.use(vfgPlugin, {
-    apiService: {
-      getOne: (entity: string, id: string) => {
-        return apiService.findRecord(entity, id)
-      },
-      getAll: (entity: string, params: Record<string, string | number>) => {
-        return apiService.findAll(entity, { params })
-      },
+  app.component('VueFormGenerator', VueFormGenerator)
+  app.provide(FORMS_API_KEY, {
+    getOne: (entity: string, id: string) => {
+      return apiService.findRecord(entity, id)
+    },
+    getAll: (entity: string, params: Record<string, string | number>) => {
+      return apiService.findAll(entity, { params })
     },
   })
   app.component('PageHeader', PageHeader)

tests/playwright/commands/clickEntityListAction.ts

@@ -12,7 +12,7 @@ export const clickEntityListAction = async (
 
   await row.locator('[data-testid="overflow-actions-button"]').click()
   await row
-    .locator('[data-testid="k-dropdown-list"]')
-    .locator(`[data-testid="action-entity-${action}"] .k-dropdown-item-trigger`)
+    .locator('[data-testid="dropdown-list"]')
+    .locator(`[data-testid="action-entity-${action}"] .dropdown-item-trigger`)
     .click()
 }

tests/playwright/commands/fillEntityForm.ts

@@ -66,6 +66,6 @@ export const fillEntityForm = async (params: Params) => {
     .click()
 
   if (handleModal) {
-    await page.locator('.modal-dialog .k-button.primary').click()
+    await page.locator('.modal-dialog .k-modal-footer .k-button.primary').click()
   }
 }

tests/playwright/package.json

@@ -8,10 +8,10 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "1.39.0",
     "axios": "^1.6.0",
     "bmp-js": "^0.1.0",
     "dotenv": "^16.0.1",
     "lodash-es": "^4.17.21"
   }
-}
+}

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

@@ -48,7 +48,7 @@ test.describe('consumer plugins', () => {
     await expect(page.locator('.autosuggest #consumer-id')).toHaveValue(new RegExp(`${mockConsumerName}\\s*-\\s*${uuid}`))
     await withNavigation(
       page,
-      async () => await page.locator('.entity-form .primary').click()
+      async () => await page.locator('.entity-form [data-testid="form-footer-actions"] .primary').click()
     )
   })
 
@@ -60,7 +60,7 @@ test.describe('consumer plugins', () => {
     await withNavigation(
       page,
       async () => {
-        await page.locator('.entity-form .primary').click()
+        await page.locator('.entity-form [data-testid="form-footer-actions"] .primary').click()
         await expect(page.locator('.k-modal-dialog.modal-dialog')).toBeVisible()
         await page.locator('.k-prompt-action-buttons .primary').click()
       }
@@ -94,7 +94,7 @@ test.describe('consumer plugins', () => {
     await page.locator('#config-second').fill('30')
     await withNavigation(
       page,
-      async () => await page.locator('.entity-form .primary').click()
+      async () => await page.locator('.entity-form [data-testid="form-footer-actions"] .primary').click()
     )
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Global')
 
@@ -108,7 +108,7 @@ test.describe('consumer plugins', () => {
     await expect(page.locator('.k-select-item')).toContainText(mockConsumerName)
     await page.click('.k-select-item')
     await page.click(consumerListPage.$.submitButton)
-    await withNavigation(page, async () => await page.click('.k-modal .k-button.primary'))
+    await withNavigation(page, async () => await page.click('.k-modal .k-modal-footer .k-button.primary'))
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Consumer')
   })
 
@@ -123,7 +123,7 @@ test.describe('consumer plugins', () => {
     await page.waitForSelector('.entity-form')
     await page.click('.selection-group .Global-check')
     await page.click(consumerListPage.$.submitButton)
-    await withNavigation(page, async () => await page.click('.k-modal .k-button.primary'))
+    await withNavigation(page, async () => await page.click('.k-modal .k-modal-footer .k-button.primary'))
     await expect(page.locator('.kong-ui-entities-plugins-list [data-testid="appliedTo"] .k-badge')).toContainText('Global')
   })
 })