feat(entities-shared): add a prop to persist format preference (#2131)

Author: sumimakito

packages/entities/entities-shared/docs/config-card-display.md

@@ -38,6 +38,14 @@ The base property configuration when format is structured.
 
 Format to be displayed in the Config Card. Can be `structured`, `json`, or `yaml`.
 
+#### `formatPreferenceKey`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+The localStorage key to use while persisting the format preference. If omitted, the format will not be persisted.
+
 #### `propListTypes`
 
 - type: `Array as PropType<String[]>`

packages/entities/entities-shared/sandbox/pages/EntityBaseConfigCardPage.vue

@@ -82,12 +82,14 @@ const konnectConfig = ref<KonnectBaseEntityConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   entityId,
+  formatPreferenceKey: 'konnect-entities-base-config-card-format-sandbox',
 })
 const kongManagerConfig = ref<KongManagerBaseEntityConfig>({
   app: 'kongManager',
   workspace: 'default',
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   entityId,
+  formatPreferenceKey: 'kong-manager-entities-base-config-card-format-sandbox',
 })
 
 const configSchema = ref<ConfigurationSchema>({

packages/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue

@@ -27,6 +27,7 @@
           {{ label }}
         </KLabel>
         <KSelect
+          v-model="configFormat"
           data-testid="select-config-format"
           :items="configFormatItems"
           @change="handleChange"
@@ -103,7 +104,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, ref, onBeforeMount, watch } from 'vue'
+import { computed, ref, onBeforeMount, watch, onMounted } from 'vue'
 import type { AxiosError } from 'axios'
 import type {
   KonnectBaseEntityConfig,
@@ -267,12 +268,36 @@ if (props.config.app === 'konnect') {
   })
 }
 
-const configFormat = ref<Format>('structured')
+const DEFAULT_FORMAT = configFormatItems[0].value as Format
+
+const configFormat = ref<Format>(DEFAULT_FORMAT)
 
 const handleChange = (payload: any): void => {
   configFormat.value = payload?.value
 }
 
+const persistFormat = (localStorageKey: string, format: Format): void => {
+  localStorage.setItem(localStorageKey, format)
+}
+
+watch(configFormat, (format: Format) => {
+  if (props.config.formatPreferenceKey) {
+    persistFormat(props.config.formatPreferenceKey, format)
+  }
+})
+
+onMounted(() => {
+  if (props.config.formatPreferenceKey) {
+    const storedFormat = localStorage.getItem(props.config.formatPreferenceKey)
+    if (storedFormat && configFormatItems.some(item => item.value === storedFormat)) {
+      configFormat.value = storedFormat as Format
+    } else {
+      configFormat.value = DEFAULT_FORMAT
+    }
+    persistFormat(props.config.formatPreferenceKey, configFormat.value)
+  }
+})
+
 /**
  * default ordering for these common fields:
  *   - name, id, enabled (if exists), updated_at, created_at, tags

packages/entities/entities-shared/src/types/entity-base-config-card.ts

@@ -31,6 +31,13 @@ export const SupportedEntityTypesArray = Object.values(SupportedEntityType)
 export interface BaseEntityConfig {
   /** the ID of the entity */
   entityId: string
+
+  /**
+   * The localStorage key to use while persisting the config format preference.
+   *
+   * If omitted, the preference will not be persisted.
+   */
+  formatPreferenceKey?: string
 }
 
 /** Konnect base form config */