fix(*): ktabledata adoption [KHCP-13280] (#1660)

* chore(deps): bump @kong/kongponents * fix(entities): misc ktabledata fixes [KHCP-13280] * chore(deps): bump @kong/kongponents * chore(deps): bump @kong/kongponents * test(entities): fix component tests [KHCP-13280] * test(entities): fix component tests [KHCP-13280] * chore(deps): bump @kong/kongponents * chore(deps): bump @kong/kongponents * fix(usefetcher): add initial load and no records states [KHCP-13280] * fix(entities): hide toolbar in table states [KHCP-13280] * fix(*): misc fixes [KHCP-13280] * test(analytics): fix component tests [KHCP-13280] * docs(entity-base-table): add new props [KHCP-13280] * fix(entities): action col width * fix(analytics): minor fix [KHCP-13280] * fix(entities): only hide table toolbar in no records state [KHCP-13280] * fix(entities): delete selected field when submitting * fix: minor fix * chore(deps): bump @kong/kongponents * fix: minor fix * fix: minor fix * chore(deps): bump @kong/kongponents --------- Co-authored-by: Leopoldthecoder <[email protected]>
Kong · Oct 16, 2024 · 31ca10e · 31ca10e
1 parent 68d1e45
commit 31ca10e
Show file tree

Hide file tree

Showing 71 changed files with 437 additions and 356 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@evilmartians/lefthook": "^1.7.18",
     "@kong/design-tokens": "1.17.2",
     "@kong/eslint-config-kong-ui": "^1.1.1",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@stylistic/stylelint-plugin": "^3.0.1",
     "@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
@@ -29,7 +29,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@types/uuid": "^10.0.0",
     "file-saver": "^2.0.5",
     "lodash.mapkeys": "^4.6.0",

diff --git a/packages/analytics/analytics-chart/src/components/CsvExportModal.cy.ts b/packages/analytics/analytics-chart/src/components/CsvExportModal.cy.ts
@@ -38,15 +38,15 @@ describe('<CsvExportModal />', () => {
     cy.getTestId('csv-download-button').should('not.be.disabled')
 
     // Timestamp should be naive localtime
-    cy.getTestId('csv-export-modal').find('.k-table .table tbody td').eq(0).invoke('text').should('match', /\d{4}-\d\d-\d\d \d\d:\d\d:\d\d/)
+    cy.getTestId('csv-export-modal').find('.k-table-data .table tbody td').eq(0).invoke('text').should('match', /\d{4}-\d\d-\d\d \d\d:\d\d:\d\d/)
 
     // Table should contain the max number of rows allowed + 1 Header row
     const numTableRows = MAX_ROWS + 1
 
-    cy.getTestId('csv-export-modal').find('.k-table .table tr').should('have.length', numTableRows)
+    cy.getTestId('csv-export-modal').find('.k-table-data .table tr').should('have.length', numTableRows)
 
     // Column headers should be as expected.
-    cy.getTestId('csv-export-modal').find('.k-table .table thead th').should(th => {
+    cy.getTestId('csv-export-modal').find('.k-table-data .table thead th').should(th => {
       const elements = Array.from(th, e => e.innerText)
 
       expect(JSON.stringify(elements)).to.equal('["Timestamp","UTC Offset","Status Code","Request Count"]')

diff --git a/packages/analytics/analytics-chart/src/components/CsvExportModal.vue b/packages/analytics/analytics-chart/src/components/CsvExportModal.vue
@@ -22,12 +22,12 @@
               {{ i18n.t('csvExport.exportTimeRange') }}: {{ selectedRange }}
             </p>
           </div>
-          <KTable
+          <KTableData
             class="vitals-table"
-            disable-pagination
             :fetcher="fetcher"
             :fetcher-cache-key="String(fetcherCacheKey)"
             :headers="tableData?.headers || []"
+            hide-pagination
             :row-hover="false"
             :sortable="false"
           >
@@ -43,7 +43,7 @@
                 </template>
               </KEmptyState>
             </template>
-          </KTable>
+          </KTableData>
           <div
             v-if="!isLoading && hasData"
             class="text-muted"

diff --git a/packages/analytics/analytics-geo-map/package.json b/packages/analytics/analytics-geo-map/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@types/geojson": "^7946.0.14",
     "maplibre-gl": "^4.7.1",
     "vue": "^3.4.38"

diff --git a/packages/analytics/analytics-metric-provider/README.md b/packages/analytics/analytics-metric-provider/README.md
@@ -2,18 +2,16 @@
 
 Query data for metric cards and render default "golden signal" metrics cards using a minimum of boilerplate.
 
-- [@kong-ui-public/analytics-metric-provider](#kong-ui-publicanalytics-metric-provider)
-  - [Requirements](#requirements)
-  - [Usage](#usage)
-    - [Global](#global)
-    - [Single entity](#single-entity)
-    - [Many entities](#many-entities)
-    - [Use in tables](#use-in-tables)
-    - [CSS Variables](#css-variables)
-  - [Props](#props)
-  - [Exports](#exports)
-    - [Types](#types)
-    - [Enums](#enums)
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Global](#global)
+  - [Single entity](#single-entity)
+  - [Many entities](#many-entities)
+  - [Use in tables](#use-in-tables)
+- [Props](#props)
+- [Exports](#exports)
+  - [Types](#types)
+  - [Enums](#enums)
 
 ## Requirements
 
@@ -89,7 +87,7 @@ The provider and consumer support use in contexts where metric cards are not app
 
 ```vue
 <MetricsProvider :dimension="EXPLORE_V2_DIMENSIONS.ROUTE">
-  <KTable>
+  <KTableData>
     <template #requests="{ row }">
       <MetricsConsumer
         v-slot="{ cardValues }"

diff --git a/packages/analytics/analytics-metric-provider/package.json b/packages/analytics/analytics-metric-provider/package.json
@@ -67,7 +67,7 @@
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "pinia": ">= 2.1.7 < 3"
   }
 }
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
@@ -46,7 +46,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "json-schema-to-ts": "^3.1.1",
     "pinia": ">= 2.1.7 < 3",
     "swrv": "^1.0.4",

diff --git a/packages/analytics/metric-cards/package.json b/packages/analytics/metric-cards/package.json
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "vue": "^3.4.38"
   },
   "dependencies": {

diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@types/lodash.clonedeep": "^4.5.9",
     "vue": "^3.4.38",
     "vue-router": "^4.4.5"

diff --git a/packages/core/core/src/constants.ts b/packages/core/core/src/constants.ts
@@ -7,6 +7,5 @@ export const DEFAULT_USER_TABLE_PREFERENCES: TablePreferences = {
   pageSize: 30,
   sortColumnKey: undefined,
   sortColumnOrder: undefined,
-  columnWidths: {},
   columnVisibility: {},
 }
diff --git a/packages/core/core/src/useTablePreferences/README.md b/packages/core/core/src/useTablePreferences/README.md
@@ -30,9 +30,9 @@ yarn add @kong-ui-public/core
 
 ```html
 <template>
-  <!-- Only showing a partial KTable implementation -->
+  <!-- Only showing a partial KTableData implementation -->
   <!-- https://kongponents.konghq.com/components/table.html -->
-  <KTable
+  <KTableData
     :data-testid="tableKey"
     :fetcher="fetcher"
     :initial-fetcher-params="userTablePreferences"

diff --git a/packages/core/documentation/package.json b/packages/core/documentation/package.json
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "axios": "^1.7.7",
     "vue": "^3.4.38"
   },

diff --git a/packages/core/expressions/package.json b/packages/core/expressions/package.json
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@kong/atc-router": "1.6.0-rc.1",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@types/uuid": "^10.0.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-top-level-await": "^1.4.4",

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -62,7 +62,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "@types/lodash-es": "^4.17.12",
     "pug": "^3.0.3"
   },

diff --git a/packages/core/misc-widgets/package.json b/packages/core/misc-widgets/package.json
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "vue": "^3.4.38"
   },
   "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.17.2",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "vue": "^3.4.38",
     "vue-router": "^4.4.5"
   },

diff --git a/packages/entities/entities-certificates/package.json b/packages/entities/entities-certificates/package.json
@@ -34,7 +34,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
     "@kong/icons": "^1.18.1",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "axios": "^1.7.7",
     "vue": "^3.4.38",
     "vue-router": "^4.4.5"

diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.cy.ts b/packages/entities/entities-certificates/src/components/CACertificateList.cy.ts
@@ -80,7 +80,7 @@ describe('<CACertificateList />', () => {
         },
       })
 
-      cy.getTestId('overflow-actions-button').eq(0).click()
+      cy.getTestId('row-actions-dropdown-trigger').eq(0).click()
       cy.getTestId('action-entity-copy-id').should('be.visible')
     })
 

diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -2,7 +2,6 @@
   <div class="kong-ui-entities-ca-certificates-list">
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
-      disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
       enable-entity-actions

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.cy.ts b/packages/entities/entities-certificates/src/components/CertificateList.cy.ts
@@ -81,7 +81,7 @@ describe('<CertificateList />', () => {
         },
       })
 
-      cy.getTestId('overflow-actions-button').eq(0).click()
+      cy.getTestId('row-actions-dropdown-trigger').eq(0).click()
       cy.getTestId('action-entity-copy-id').should('be.visible')
     })
 
@@ -281,7 +281,7 @@ describe('<CertificateList />', () => {
       cy.wait('@getCertificate')
       cy.get('.kong-ui-entities-certificates-list').should('be.visible')
       cy.get('.table-empty-state').should('be.visible')
-      cy.get('[data-testid="new-certificate"]').should('not.exist')
+      cy.getTestId('empty-state-action').should('not.exist')
     })
 
     it('should handle error state', () => {
@@ -588,7 +588,7 @@ describe('<CertificateList />', () => {
       cy.wait('@getCertificate')
       cy.get('.kong-ui-entities-certificates-list').should('be.visible')
       cy.get('.table-empty-state').should('be.visible')
-      cy.get('[data-testid="new-certificate"]').should('not.exist')
+      cy.getTestId('empty-state-action').should('not.exist')
     })
 
     it('should handle error state', () => {

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -2,13 +2,13 @@
   <div class="kong-ui-entities-certificates-list">
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
-      disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
       enable-entity-actions
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
+      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-certificates-list"
       :query="filterQuery"
@@ -330,6 +330,8 @@ const resetPagination = (): void => {
  * loading, Error, Empty state
  */
 const errorMessage = ref<TableErrorMessage>(null)
+// hide table toolbar in initial loading state or when no records are found
+const hideTableToolbar = ref<boolean>(false)
 
 /**
  * Copy ID action
@@ -486,6 +488,12 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
+  if (state.status === FetcherStatus.NoRecords) {
+    hideTableToolbar.value = true
+  } else {
+    hideTableToolbar.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('certificates.errors.general'),

diff --git a/packages/entities/entities-consumer-credentials/package.json b/packages/entities/entities-consumer-credentials/package.json
@@ -34,7 +34,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
     "@kong/icons": "^1.18.1",
-    "@kong/kongponents": "9.11.2",
+    "@kong/kongponents": "9.12.0",
     "axios": "^1.7.7",
     "vue": "^3.4.38",
     "vue-router": "^4.4.5"
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,7 @@ describe('<CACertificateList />', () => { @@
             },
           })
-          cy.getTestId('overflow-actions-button').eq(0).click()
+          cy.getTestId('row-actions-dropdown-trigger').eq(0).click()
           cy.getTestId('action-entity-copy-id').should('be.visible')
         })
@@ Expand Down @@