fix(entities-*): persist fetcher cache key within session (#1820)

* fix(entities-shared): provide default row-key * fix(entities-*): do not fallback to table pref key if cache id is not available
Kong · Dec 4, 2024 · d2dff5c · d2dff5c
1 parent 91d527e
commit d2dff5c
Show file tree

Hide file tree

Showing 19 changed files with 122 additions and 51 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -225,7 +225,6 @@ const { i18n: { t, formatUnixTimeStamp }, i18nT } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -273,7 +272,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -255,7 +255,6 @@ const { i18n: { t, formatUnixTimeStamp }, i18nT } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -305,7 +304,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -259,7 +259,6 @@ const props = defineProps({
 const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -328,7 +327,11 @@ const fetcherBaseUrl = computed((): string => {
   return url
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const resetPagination = (): void => {
   // Increment the cache key on sort

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -262,11 +262,6 @@ const { i18nT, i18n: { t } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
-const isConsumerPage = computed<boolean>(() => !!props.config.consumerId)
-const preferencesStorageKey = computed<string>(
-  () => isConsumerPage.value ? 'kong-ui-entities-consumer-groups-list-in-consumer-page' : 'kong-ui-entities-consumer-groups-list',
-)
 
 /**
  * Table Headers
@@ -331,14 +326,22 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
+const isConsumerPage = computed<boolean>(() => !!props.config.consumerId)
+const preferencesStorageKey = computed<string>(
+  () => isConsumerPage.value ? 'kong-ui-entities-consumer-groups-list-in-consumer-page' : 'kong-ui-entities-consumer-groups-list',
+)
 const dataKeyName = computed((): string | undefined => {
   if (props.config.app === 'konnect' && filterQuery.value) {
     return 'consumer_group'
   }
   return isConsumerPage.value && !props.config.paginatedEndpoint ? 'consumer_groups' : undefined
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value, dataKeyName)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value, dataKeyName)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -262,11 +262,6 @@ const { i18nT, i18n: { t } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
-const isConsumerGroupPage = computed<boolean>(() => !!props.config.consumerGroupId)
-const preferencesStorageKey = computed<string>(
-  () => isConsumerGroupPage.value ? 'kong-ui-entities-consumers-list-in-group-page' : 'kong-ui-entities-consumers-list',
-)
 
 /**
  * Table Headers
@@ -323,8 +318,17 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
     schema: props.config.filterSchema,
   } as FuzzyMatchFilterConfig
 })
+
+const isConsumerGroupPage = computed<boolean>(() => !!props.config.consumerGroupId)
+const preferencesStorageKey = computed<string>(
+  () => isConsumerGroupPage.value ? 'kong-ui-entities-consumers-list-in-group-page' : 'kong-ui-entities-consumers-list',
+)
 const dataKeyName = computed((): string | undefined => isConsumerGroupPage.value && !props.config.paginatedEndpoint ? 'consumers' : undefined)
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value, dataKeyName.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value, dataKeyName.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -8,7 +8,7 @@
       enable-entity-actions
       :error-message="errorMessage"
       :fetcher="fetcher"
-      :fetcher-cache-key="fetchCacheKey"
+      :fetcher-cache-key="fetcherCacheKey"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-gateway-services-list"
       :query="filterQuery"
@@ -259,7 +259,6 @@ const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetchCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -329,15 +328,19 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''
 }
 
 const resetPagination = (): void => {
   // Increment the cache key on sort
-  fetchCacheKey.value++
+  fetcherCacheKey.value++
 }
 
 /**
@@ -536,7 +539,7 @@ const deleteRow = async (): Promise<void> => {
     emit('delete:success', gatewayServiceToBeDeleted.value)
 
     hideDeleteModal()
-    fetchCacheKey.value++
+    fetcherCacheKey.value++
   } catch (error: any) {
     deleteModalError.value = error.response?.data?.message ||
       error.message ||

diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -212,7 +212,6 @@ const { i18n: { t } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -263,7 +262,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -216,7 +216,6 @@ const { i18n: { t } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -270,7 +269,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -425,9 +425,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const fetcherCacheKey = ref<number>(1)
-
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''

diff --git a/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
@@ -151,8 +151,8 @@ watch([routeListHideTraditionalColumns, routeListHasExpressionColumn], () => {
   :deep(.k-collapse) {
     &.is-collapsed {
       .k-collapse-heading {
-        margin-bottom: $kui-space-0 !important;
         align-items: center;
+        margin-bottom: $kui-space-0 !important;
       }
 
       .k-collapse-title {

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -296,7 +296,6 @@ const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetcherCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -368,7 +367,11 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const getCellAttrs = (params: Record<string, any>): Record<string, any> => {
   if (params.headerKey === 'expression') {

diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
@@ -28,6 +28,7 @@
       :pagination-attributes="{ disablePageJump: disablePaginationPageJump, offset: paginationType === 'offset' }"
       resize-columns
       :row-attrs="rowAttrs"
+      :row-key="rowKey"
       :search-input="query"
       :sort-handler-function="enableClientSort ? sortHandlerFunction : undefined"
       :sortable="!disableSorting"
@@ -95,7 +96,7 @@ import type { PropType } from 'vue'
 import { computed, ref } from 'vue'
 import composables from '../../composables'
 import { useTablePreferences } from '@kong-ui-public/core'
-import type { HeaderTag, TablePreferences, SortHandlerFunctionParam, TableDataFetcherParams } from '@kong/kongponents'
+import type { HeaderTag, TablePreferences, SortHandlerFunctionParam, TableDataFetcherParams, TableDataProps } from '@kong/kongponents'
 import EntityBaseTableCell from './EntityBaseTableCell.vue'
 
 import type {
@@ -129,6 +130,10 @@ const props = defineProps({
     type: Object as PropType<Partial<Omit<TableDataFetcherParams, 'query'>>>,
     default: null,
   },
+  rowKey: {
+    type: [String, Function] as PropType<TableDataProps['rowKey']>,
+    default: 'id',
+  },
   // used to identify the cache entry
   cacheIdentifier: {
     type: String,

diff --git a/packages/entities/entities-shared/src/composables/useFetcher.ts b/packages/entities/entities-shared/src/composables/useFetcher.ts
@@ -1,4 +1,4 @@
-import { ref, toValue, unref } from 'vue'
+import { ref, toValue, unref, watch } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import type {
   FetcherResponse,
@@ -12,6 +12,9 @@ import useAxios from './useAxios'
 import useFetchUrlBuilder from './useFetchUrlBuilder'
 import type { TableDataFetcherParams } from '@kong/kongponents'
 
+// Store cacheIdentifier => fetcherCacheKey globally so that the cache is persisted during the session
+const cacheKeys = new Map<string, number>()
+
 export default function useFetcher(
   config: KonnectBaseTableConfig | KongManagerBaseTableConfig,
   baseUrl: MaybeRef<string>,
@@ -121,5 +124,21 @@ export default function useFetcher(
     }
   }
 
-  return { fetcher, fetcherState: state }
+  const cacheId = config.cacheIdentifier
+  const fetcherCacheKey = ref<number>(1)
+  if (cacheId) {
+    if (cacheKeys.has(cacheId)) {
+      fetcherCacheKey.value = cacheKeys.get(cacheId)!
+    } else {
+      cacheKeys.set(cacheId, fetcherCacheKey.value)
+    }
+  }
+
+  watch(fetcherCacheKey, (key) => {
+    if (cacheId) {
+      cacheKeys.set(cacheId, key)
+    }
+  })
+
+  return { fetcher, fetcherState: state, fetcherCacheKey }
 }
diff --git a/packages/entities/entities-shared/src/types/entity-base-table.ts b/packages/entities/entities-shared/src/types/entity-base-table.ts
@@ -5,11 +5,15 @@ import type { TableState } from '@kong/kongponents/dist/types'
 export interface KonnectBaseTableConfig extends KonnectConfig {
   /** Additional message to show when there are no records */
   additionMessageForEmptyState?: string
+  /** The cache identifier of current table */
+  cacheIdentifier?: string
 }
 
 export interface KongManagerBaseTableConfig extends KongManagerConfig {
   /** Additional message to show when there are no records */
   additionMessageForEmptyState?: string
+  /** The cache identifier of current table */
+  cacheIdentifier?: string
   /** Whether to use exact match or not */
   isExactMatch?: boolean
   /** Whether to disable table sorting */

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -9,7 +9,7 @@
       enable-entity-actions
       :error-message="errorMessage"
       :fetcher="fetcher"
-      :fetcher-cache-key="fetchCacheKey"
+      :fetcher-cache-key="fetcherCacheKey"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-snis-list"
       :query="filterQuery"
@@ -209,7 +209,6 @@ const props = defineProps({
 const { i18n: { t } } = composables.useI18n()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-const fetchCacheKey = ref<number>(1)
 
 /**
  * Table Headers
@@ -274,15 +273,19 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   } as FuzzyMatchFilterConfig
 })
 
-const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+const {
+  fetcher,
+  fetcherState,
+  fetcherCacheKey,
+} = useFetcher({ ...props.config, cacheIdentifier: props.cacheIdentifier }, fetcherBaseUrl.value)
 
 const clearFilter = (): void => {
   filterQuery.value = ''
 }
 
 const resetPagination = (): void => {
   // Increment the cache key on sort
-  fetchCacheKey.value++
+  fetcherCacheKey.value++
 }
 
 /**
@@ -394,7 +397,7 @@ const confirmDelete = async (): Promise<void> => {
 
     isDeletePending.value = false
     hideDeleteModal()
-    fetchCacheKey.value++
+    fetcherCacheKey.value++
   } catch (error: any) {
     deleteModalError.value = error.response?.data?.message ||
       error.message ||