fix(*): kongponents alpha phase 9 [KHCP-10951] (#1209)

* chore(deps): bump kongponents to preview [KHCP-10951] * fix(kalert): update component usage * fix(kemptystate): update component usage * test(*): update selectors * chore(deps): bump kongponents * fix(entitybasetable): update empty state props * test(*): fix component tests * chore(deps): bump kongponents * chore(deps): bump kongponents * fix(entitybasetable): empty state updates * fix(entitybasetable): fix selector * test(entitybasetable): fix component test * fix(entitybasetable): minor fix * fix(entitybasetable): minor fix * chore(deps): bump kongponents * fix(kemptystate): kong icon variant * fix: minor fix * fix: type errors * chore(deps): bump kongponents * fix(entitybasetable): update ktable usage * fix(entitybasetable): minor fix * chore(deps): bump kongponents * fix: resolve conflicts * chore(deps): bump kongponents * chore(analytics): add missing deps * chore(deps): bump kongponents
Kong · Mar 12, 2024 · 88a2f20 · 88a2f20
1 parent f789b42
commit 88a2f20
Show file tree

Hide file tree

Showing 65 changed files with 1,204 additions and 1,317 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.4",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "@rushstack/eslint-patch": "^1.7.2",
     "@types/flat": "^5.0.5",
     "@types/js-yaml": "^4.0.9",

diff --git a/packages/analytics/analytics-chart/package.json b/packages/analytics/analytics-chart/package.json
@@ -22,14 +22,14 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "@types/uuid": "^9.0.8",
     "file-saver": "^2.0.5",
     "lodash.mapkeys": "^4.6.0",

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
@@ -219,8 +219,8 @@ describe('<AnalyticsChart />', () => {
       },
     })
 
-    cy.get('[data-testid="no-data-in-report"] .k-empty-state-title-header').should('contain.text', i18n.t('noDataAvailableTitle'))
-    cy.get('[data-testid="no-data-in-report"] .k-empty-state-message').should('contain.text', i18n.t('noDataAvailableDescription'))
+    cy.get('[data-testid="no-data-in-report"] .empty-state-title').should('contain.text', i18n.t('noDataAvailableTitle'))
+    cy.get('[data-testid="no-data-in-report"] .empty-state-message').should('contain.text', i18n.t('noDataAvailableDescription'))
   })
 
   it('renders an empty state with default title and description text', () => {
@@ -238,8 +238,8 @@ describe('<AnalyticsChart />', () => {
       },
     })
 
-    cy.get('[data-testid="no-data-in-report"] .k-empty-state-title-header').should('contain.text', emptyStateTitle)
-    cy.get('[data-testid="no-data-in-report"] .k-empty-state-message').should('contain.text', emptyStateDescription)
+    cy.get('[data-testid="no-data-in-report"] .empty-state-title').should('contain.text', emptyStateTitle)
+    cy.get('[data-testid="no-data-in-report"] .empty-state-message').should('contain.text', emptyStateDescription)
   })
 
   it('doest not render an "Export button" if the dataset is empty', () => {

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -41,16 +41,14 @@
     </div>
     <KEmptyState
       v-if="!hasValidChartData"
+      :action-button-visible="false"
       class="chart-empty-state"
-      :cta-is-hidden="true"
       data-testid="no-data-in-report"
-      icon="stateNoData"
-      icon-size="170"
     >
       <template #title>
         {{ emptyStateTitle }}
       </template>
-      <template #message>
+      <template #default>
         {{ emptyStateDescription }}
       </template>
     </KEmptyState>

diff --git a/packages/analytics/analytics-chart/src/components/CsvExportModal.vue b/packages/analytics/analytics-chart/src/components/CsvExportModal.vue
@@ -33,14 +33,12 @@
           >
             <template #empty-state>
               <KEmptyState
-                cta-is-hidden
-                icon="stateNoData"
-                icon-size="96"
+                :action-button-visible="false"
               >
                 <template #title>
                   <h5>{{ i18n.t('csvExport.noDataRange') }}</h5>
                 </template>
-                <template #message>
+                <template #default>
                   <p>{{ i18n.t('csvExport.noDataRetry') }}</p>
                 </template>
               </KEmptyState>
@@ -225,10 +223,6 @@ watch(tableData, () => {
   .modal-container {
     min-width: 580px;
 
-    .k-empty-state-message {
-      max-width: 80%;
-    }
-
     .selected-range {
       font-size: $kui-font-size-30;
     }

diff --git a/packages/analytics/analytics-chart/src/components/SimpleChart.vue b/packages/analytics/analytics-chart/src/components/SimpleChart.vue
@@ -2,11 +2,9 @@
   <div class="simple-chart-shell">
     <KEmptyState
       v-if="!hasValidChartData"
+      :action-button-visible="true"
       class="chart-empty-state"
-      :cta-is-hidden="true"
       data-testid="no-data-in-report"
-      icon="stateNoData"
-      icon-size="80"
     >
       <template #title>
         {{ emptyStateTitle }}
@@ -126,7 +124,7 @@ const hasValidChartData = computed(() => {
     justify-content: center;
     width: 100px;
 
-    &:deep(.k-empty-state-title-header) {
+    &:deep(.empty-state-title) {
       font-size: $kui-font-size-20;
       line-height: $kui-line-height-20;
       margin: $kui-space-0;

diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -27,14 +27,14 @@
 
     <KEmptyState
       v-if="errorMessage"
-      cta-is-hidden
+      :action-button-visible="false"
       data-testid="top-n-error-state"
-      is-error
+      icon-variant="error"
     >
       <template #title>
         {{ i18n.t('topNTable.defaultErrorStateTitle') }}
       </template>
-      <template #message>
+      <template #default>
         {{ errorMessage }}
       </template>
     </KEmptyState>
@@ -47,10 +47,8 @@
 
     <KEmptyState
       v-else-if="!hasData"
-      cta-is-hidden
+      :action-button-visible="false"
       data-testid="top-n-empty-state"
-      icon="stateNoData"
-      icon-size="80"
     >
       <template #title>
         {{ emptyStateTitle || i18n.t('topNTable.defaultEmptyStateTitle') }}

diff --git a/packages/analytics/analytics-metric-provider/package.json b/packages/analytics/analytics-metric-provider/package.json
@@ -59,13 +59,13 @@
     "@kong-ui-public/analytics-config-store": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111"
+    "@kong/kongponents": "9.0.0-alpha.112"
   },
   "devDependencies": {
     "@kong-ui-public/analytics-config-store": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "pinia": ">= 2.1.7 < 3"
   }
 }
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
@@ -45,7 +45,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "json-schema-to-ts": "^3.0.0",
     "pinia": ">= 2.1.7 < 3",
     "swrv": "^1.0.4",
@@ -73,7 +73,7 @@
     "@kong-ui-public/analytics-metric-provider": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "swrv": "^1.0.4",
     "vue": ">= 3.3.13 < 4"
   },

diff --git a/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue b/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue
@@ -6,11 +6,11 @@
   />
   <KEmptyState
     v-else-if="hasError"
-    cta-is-hidden
+    :action-button-visible="false"
     data-testid="chart-empty-state"
-    is-error
+    icon-variant="error"
   >
-    <template #message>
+    <template #default>
       {{ errorMessage }}
     </template>
   </KEmptyState>

diff --git a/packages/analytics/metric-cards/package.json b/packages/analytics/metric-cards/package.json
@@ -39,12 +39,12 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21"
   },
   "dependencies": {

diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
@@ -39,7 +39,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4",
     "vue-router": "^4.3.0"
   },
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "@types/lodash.clonedeep": "^4.5.9",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

diff --git a/packages/core/app-layout/sandbox/pages/LayoutPage.vue b/packages/core/app-layout/sandbox/pages/LayoutPage.vue
@@ -7,11 +7,10 @@
   >
     <template #notification>
       <KAlert
-        alert-message="I'm an alert from the host app"
+        v-if="showAlert"
         appearance="warning"
-        dismiss-type="icon"
-        :is-showing="showAlert"
-        @closed="handleCloseAlert"
+        message="I'm an alert from the host app"
+        @dismiss="handleCloseAlert"
       />
     </template>
     <template #navbar-mobile-logo>

diff --git a/packages/core/app-layout/src/components/AppLayout.cy.ts b/packages/core/app-layout/src/components/AppLayout.cy.ts
@@ -81,7 +81,7 @@ describe('<AppLayout />', () => {
             cy.mount(AppLayout, {
               slots: {
                 notification: [
-                  '<KAlert data-testid="app-layout-notification-slot-content" appearance="danger" alert-message="Notification"></KAlert>',
+                  '<KAlert data-testid="app-layout-notification-slot-content" appearance="danger" message="Notification"></KAlert>',
                 ],
               },
             })

diff --git a/packages/core/copy-uuid/package.json b/packages/core/copy-uuid/package.json
@@ -38,13 +38,13 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21"
   },
   "repository": {

diff --git a/packages/core/documentation/package.json b/packages/core/documentation/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "axios": "^1.6.7",
     "vue": ">= 3.3.13 < 4"
   },
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21"
   },
   "dependencies": {

diff --git a/packages/core/documentation/src/components/DocumentationPageEmptyState.vue b/packages/core/documentation/src/components/DocumentationPageEmptyState.vue
@@ -2,29 +2,21 @@
   <KEmptyState
     class="documentation-page-empty-state"
     data-testid="documentation-page-empty-state"
-    icon="stateGruceo"
-    icon-size="96"
+    icon-variant="kong"
   >
     <template #title>
       {{ i18n.t('documentation.show.empty_state.title') }}
     </template>
-    <template #message>
+    <template #default>
       {{ i18n.t('documentation.show.empty_state.message') }}
     </template>
-    <template #cta>
-      <PermissionsWrapper
-        :auth-function="() => canEdit()"
-      >
+    <template #action>
+      <PermissionsWrapper :auth-function="() => canEdit()">
         <KButton
-          appearance="primary"
           data-testid="add-new-page-button"
           @click="emit('create-documentation')"
         >
-          <template #icon>
-            <AddIcon
-              size="22"
-            />
-          </template>
+          <AddIcon />
           {{ i18n.t('documentation.show.empty_state.ctaText') }}
         </KButton>
       </PermissionsWrapper>

diff --git a/packages/core/documentation/src/components/ProductDocumentModal.vue b/packages/core/documentation/src/components/ProductDocumentModal.vue
@@ -28,9 +28,9 @@
       <template #default>
         <KAlert
           v-if="errorMessage"
-          :alert-message="errorMessage"
           appearance="danger"
           class="bottom-spacing"
+          :message="errorMessage"
         />
 
         <KFileUpload

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -56,13 +56,13 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "@types/lodash": "^4.14.202",
     "pug": "^3.0.2"
   },

diff --git a/packages/core/misc-widgets/package.json b/packages/core/misc-widgets/package.json
@@ -40,12 +40,12 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21"
   },
   "repository": {

diff --git a/packages/core/sandbox-layout/package.json b/packages/core/sandbox-layout/package.json
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
@@ -62,7 +62,7 @@
     "errorLimit": "200KB"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "vue": ">= 3.3.13 < 4"
   },
   "dependencies": {

diff --git a/packages/entities/entities-certificates/package.json b/packages/entities/entities-certificates/package.json
@@ -22,15 +22,15 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "axios": "^1.6.7",
     "vue": ">= 3.3.13 < 4",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.111",
+    "@kong/kongponents": "9.0.0-alpha.112",
     "axios": "^1.6.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"