feat(entities): preserve one column in entity lists (#1475)

Kong · Jul 4, 2024 · 773d0ba · 773d0ba
1 parent b13130e
commit 773d0ba
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 17 deletions.
diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -284,7 +284,8 @@ const preferencesStorageKey = computed<string>(
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('consumer_groups.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('consumer_groups.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
 }
 // TODO: when koko supports `?count=true` this conditional can be removed
 if (props.config.app === 'kongManager') {

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -284,7 +284,8 @@ const preferencesStorageKey = computed<string>(
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  username: { label: t('consumers.list.table_headers.username'), searchable: true, sortable: true },
+  // the Username column is non-hidable
+  username: { label: t('consumers.list.table_headers.username'), searchable: true, sortable: true, hidable: false },
   custom_id: { label: t('consumers.list.table_headers.custom_id'), searchable: true, sortable: true },
   tags: { label: t('consumers.list.table_headers.tags'), sortable: false },
 }

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -270,7 +270,8 @@ const fetchCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('gateway_services.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('gateway_services.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   ...(props.config.showControlPlaneColumn ? { control_plane: { label: t('gateway_services.list.table_headers.control_plane') } } : {}),
   protocol: { label: t('gateway_services.list.table_headers.protocol'), searchable: true, sortable: true },
   host: { label: t('gateway_services.list.table_headers.host'), searchable: true, sortable: true },

diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -230,7 +230,8 @@ const fetcherCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('keySets.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('keySets.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   tags: { label: t('keySets.list.table_headers.tags') },
   id: { label: t('keySets.list.table_headers.id'), sortable: true },
 }

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -234,7 +234,8 @@ const fetcherCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('keys.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('keys.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   kid: { label: t('keys.list.table_headers.key_id'), sortable: true },
   tags: { label: t('keys.list.table_headers.tags') },
   id: { label: t('keys.list.table_headers.id'), sortable: true },

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -369,7 +369,8 @@ const isOrderingSupported = props.config.app === 'konnect' || useGatewayFeatureS
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('plugins.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('plugins.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
 }
 // conditional display of Applied To column - hide if on an entity's details page (ie. plugins card on route details view)
 if (!props.config?.entityId) {

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -307,7 +307,8 @@ const fetcherCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('routes.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('routes.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   protocols: { label: t('routes.list.table_headers.protocols'), searchable: true },
   ...!props.hideTraditionalColumns && {
     hosts: { label: t('routes.list.table_headers.hosts'), searchable: true },

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
@@ -287,7 +287,7 @@ const headers = computed<Array<InternalHeader>>(() => {
       label: field.label ?? key,
       key,
       sortable: field.sortable ?? false,
-      hidable: true,
+      hidable: field.hidable ?? true,
     })
   })
 
@@ -370,6 +370,16 @@ const combinedInitialFetcherParams = computed((): Partial<FetcherParams> => {
 
 const handleUpdateTablePreferences = (newTablePreferences: TablePreferences): void => {
   tablePreferences.value = newTablePreferences
+  // Iterate over each header and check if it's non-hidable
+  headers.value.forEach((header: InternalHeader) => {
+    if (!('hidable' in header) || !tablePreferences.value.columnVisibility) {
+      return
+    }
+    // If the header is non-hidable, always make it visible
+    if (header.hidable === false) {
+      tablePreferences.value.columnVisibility[header.key] = true
+    }
+  })
 
   if (cacheId.value) {
     setTablePreferences(cacheId.value, newTablePreferences)

diff --git a/packages/entities/entities-shared/src/types/base.ts b/packages/entities/entities-shared/src/types/base.ts
@@ -1,11 +1,8 @@
+import type { TableHeader } from '@kong/kongponents'
 /** List field configuration */
-export interface Field {
-  /** Field label */
-  label?: string
+export interface Field extends Omit<TableHeader, 'key' | 'tooltip'> {
   /** Determines if the field is searchable */
   searchable?: boolean
-  /** Determines if the field is sortable */
-  sortable?: boolean
   /**
    * Determines if cells of this field should be wrapped inside KTooltips.
    * Need to use with max-width with EntityBaseTable's cellAttributes prop.

diff --git a/packages/entities/entities-shared/src/types/entity-base-table.ts b/packages/entities/entities-shared/src/types/entity-base-table.ts
@@ -62,6 +62,7 @@ interface InternalHeaderForFields {
   key: string
   label: string
   sortable: boolean
+  hidable: boolean
 }
 
 interface InternalHeaderForActions {

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -227,7 +227,8 @@ const fetchCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('snis.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('snis.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   certificate: { label: t('snis.list.table_headers.certificate_id'), sortable: false },
   tags: { label: t('snis.list.table_headers.tags'), sortable: false },
 }

diff --git a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
@@ -236,7 +236,8 @@ const fetcherCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  target: { label: t('targets.list.table_headers.target_address'), sortable: true },
+  // the Target Address column is non-hidable
+  target: { label: t('targets.list.table_headers.target_address'), sortable: true, hidable: false },
   weight: { label: t('targets.list.table_headers.weight'), sortable: true },
   tags: { label: t('targets.list.table_headers.tags'), sortable: false },
 }

diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -224,7 +224,8 @@ const fetcherCacheKey = ref<number>(1)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  name: { label: t('upstreams.list.table_headers.name'), searchable: true, sortable: true },
+  // the Name column is non-hidable
+  name: { label: t('upstreams.list.table_headers.name'), searchable: true, sortable: true, hidable: false },
   slots: { label: t('upstreams.list.table_headers.slots'), searchable: true, sortable: true },
   tags: { label: t('upstreams.list.table_headers.tags'), sortable: false },
 }

diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -238,7 +238,8 @@ const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
  */
 const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
 const fields: BaseTableHeaders = {
-  prefix: { label: t('vaults.list.table_headers.prefix'), searchable: true, sortable: true },
+  // the Prefix column is non-hidable
+  prefix: { label: t('vaults.list.table_headers.prefix'), searchable: true, sortable: true, hidable: false },
   // it's "Vault Type" on display, but we still use "name" to fit API schema
   name: { label: t('vaults.list.table_headers.name'), searchable: true, sortable: true },
   description: { label: t('vaults.list.table_headers.description'), sortable: false },