chore(*): upgrade to Kongponents alpha

Kong · Nov 27, 2023 · 4636025 · 4636025
1 parent b2a5055
commit 4636025
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 212 deletions.
diff --git a/.github/dependabot.yml b/.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"
diff --git a/package.json b/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",

diff --git a/src/components/EntityForm/ConfirmModalDialog.vue b/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: {

diff --git a/src/components/EntityForm/EntityForm.vue b/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],
 

diff --git a/src/components/EntityForm/NativeEntityForm.vue b/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],
 

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

diff --git a/src/components/KonnectCTA.vue b/src/components/KonnectCTA.vue
@@ -36,7 +36,6 @@
             <KButton
               appearance="primary"
               :to="link"
-              size="small"
               rel="noopener"
               target="_blank"
             >

diff --git a/src/pages/overview/Overview.vue b/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'),
   },

diff --git a/src/registerGlobalComponents.ts b/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)

diff --git a/tests/playwright/commands/clickEntityListAction.ts b/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()
 }
diff --git a/tests/playwright/package.json b/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"
   }
-}
+}
diff --git a/tests/playwright/yarn.lock b/tests/playwright/yarn.lock
@@ -2,20 +2,12 @@
 # yarn lockfile v1
 
 
-"@playwright/test@^1.35.1":
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.36.2.tgz#9edd68a02b0929c5d78d9479a654ceb981dfb592"
-  integrity sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==
+"@playwright/test@1.39.0":
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.39.0.tgz#d10ba8e38e44104499e25001945f07faa9fa91cd"
+  integrity sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==
   dependencies:
-    "@types/node" "*"
-    playwright-core "1.36.2"
-  optionalDependencies:
-    fsevents "2.3.2"
-
-"@types/node@*":
-  version "20.4.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.6.tgz#b66b66c9bb5d49b199f03399e341c9d6036e9e88"
-  integrity sha512-q0RkvNgMweWWIvSMDiXhflGUKMdIxBo2M2tYM/0kEGDueQByFzK4KZAgu5YHGFNxziTlppNpTIBcqHQAxlfHdA==
+    playwright "1.39.0"
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -89,10 +81,19 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
-playwright-core@1.36.2:
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
-  integrity sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==
+playwright-core@1.39.0:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.39.0.tgz#efeaea754af4fb170d11845b8da30b2323287c63"
+  integrity sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==
+
+playwright@1.39.0:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.39.0.tgz#184c81cd6478f8da28bcd9e60e94fcebf566e077"
+  integrity sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==
+  dependencies:
+    playwright-core "1.39.0"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 proxy-from-env@^1.1.0:
   version "1.1.0"