chore: add redis link in plugin config card

Kong · Jan 17, 2025 · 808e026 · 808e026
1 parent cff7361
commit 808e026
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 19 deletions.
diff --git a/packages/core/forms/src/components/FormRedis.vue b/packages/core/forms/src/components/FormRedis.vue
@@ -34,12 +34,24 @@
       <KSelect
         v-model="selectedRedisConfigItem"
         data-testid="redis-config-select"
+        enable-filtering
         :items="availableRedisConfigs"
         :loading="loadingRedisConfigs"
         :placeholder="t('redis.shared_configuration.selector.placeholder')"
         @change="redisConfigSelected"
         @query-change="debouncedRedisConfigsQuery"
       >
+        <template #item-template="{ item }">
+          <div class="plugin-form-redis-configuration-dropdown-item">
+            <span class="select-item-name">{{ item.name }}</span>
+            <KBadge
+              appearance="info"
+              class="select-item-label"
+            >
+              {{ item.type }}
+            </KBadge>
+          </div>
+        </template>
         <template #empty>
           <div class="empty-redis-config">
             {{ t('redis.shared_configuration.empty_state') }}
@@ -162,6 +174,11 @@ const props = defineProps({
       return []
     },
   },
+  redisPath: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
 })
 
 const emits = defineEmits<{
@@ -194,8 +211,8 @@ const redisConfigSelected = async (item: SelectItem | null) => {
   // selector cleared
   if (!item) return
 
-  emits('modelUpdated', [{ id: item.value }], 'partials')
-  partialsSaved.value = [{ id: item.value }]
+  emits('modelUpdated', [{ id: item.value, path: props.redisPath }], 'partials')
+  partialsSaved.value = [{ id: item.value, path: props.redisPath }]
   //
   try {
     const configRes = await axiosInstance.get(`/partials/${item.value}`)
@@ -283,6 +300,16 @@ onBeforeMount(async () => {
   :deep(.form-group:last-child) {
     margin-bottom: 0;
   }
+  .plugin-form-redis-configuration-dropdown-item {
+    display: flex;
+    padding: $kui-space-50 $kui-space-60;
+    align-items: center;
+    gap: $kui-space-60;
+    .select-item-name {
+      line-height: $kui-line-height-40;
+      color: $kui-color-text-neutral;
+    }
+  }
 }
 
 .redis-config-title {

diff --git a/.../entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue b/.../entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue
@@ -292,13 +292,43 @@ const DEFAULT_BASIC_FIELDS_CONFIGURATION: DefaultCommonFieldsConfigurationSchema
     order: -1, // the last property displayed
     section: ConfigurationSchemaSection.Basic,
   },
+  partials: {
+    type: ConfigurationSchemaType.LinkInternal,
+    label: t('baseConfigCard.commonFields.partial_label'),
+    order: -1, // the last property displayed
+    section: ConfigurationSchemaSection.Basic,
+  },
 }
 
 const isLoading = ref(false)
 const fetchDetailsError = ref(false)
 const fetchErrorMessage = ref('')
 const record = ref<Record<string, any>>({})
 
+const parseConfigSchema = (sKey: (string | number)[]) => {
+  const key = sKey[0] as string
+  let recordEntry
+  const configEntry = props.configSchema?.[key] || {}
+  const defaultConfigSchema = DEFAULT_BASIC_FIELDS_CONFIGURATION[key as keyof DefaultCommonFieldsConfigurationSchema]
+
+  if (key === 'partials') {
+    const partial = record.value?.[key]?.[0]
+    recordEntry = partial?.id + '/' + partial?.name
+  } else {
+    recordEntry = record.value?.[key]
+  }
+
+  return {
+    key,
+    value: recordEntry,
+    hidden: configEntry.hidden || false,
+    type: configEntry.type ?? (defaultConfigSchema?.type || ConfigurationSchemaType.Text),
+    label: configEntry.label ?? (defaultConfigSchema?.label || convertKeyToTitle(key)),
+    tooltip: configEntry.tooltip ?? (defaultConfigSchema?.tooltip || undefined),
+    section: configEntry.section ?? (defaultConfigSchema?.section || ConfigurationSchemaSection.Advanced),
+  } as RecordItem
+}
+
 // Handle sorting by 'order' prop
 const orderedRecordArray = computed((): RecordItem[] => {
   if (!record.value) {
@@ -335,22 +365,7 @@ const orderedRecordArray = computed((): RecordItem[] => {
     return (a[1] as number) - (b[1] as number)
   })
 
-  return sortableKeys.map((sKey: (string | number)[]) => {
-    const key = sKey[0] as string
-    const recordEntry = record.value?.[key]
-    const configEntry = props.configSchema?.[key] || {}
-    const defaultConfigSchema = DEFAULT_BASIC_FIELDS_CONFIGURATION[key as keyof DefaultCommonFieldsConfigurationSchema]
-
-    return {
-      key,
-      value: recordEntry,
-      hidden: configEntry.hidden || false,
-      type: configEntry.type ?? (defaultConfigSchema?.type || ConfigurationSchemaType.Text),
-      label: configEntry.label ?? (defaultConfigSchema?.label || convertKeyToTitle(key)),
-      tooltip: configEntry.tooltip ?? (defaultConfigSchema?.tooltip || undefined),
-      section: configEntry.section ?? (defaultConfigSchema?.section || ConfigurationSchemaSection.Advanced),
-    } as RecordItem
-  }).filter(item => !item.hidden && item.key !== props.pluginConfigKey) // strip hidden & plugin config fields
+  return sortableKeys.map((sKey: (string | number)[]) => parseConfigSchema(sKey)).filter(item => !item.hidden && item.key !== props.pluginConfigKey) // strip hidden & plugin config fields
 })
 
 // Handle sorting by 'order' prop

diff --git a/packages/entities/entities-shared/src/locales/en.json b/packages/entities/entities-shared/src/locales/en.json
@@ -53,7 +53,8 @@
       "updated_at_label": "Last Updated",
       "created_at_label": "Created",
       "tags_label": "Tags",
-      "link": "Link"
+      "link": "Link",
+      "partial_label": "Redis Configuration"
     },
     "statusBadge": {
       "enabledLabel": "Enabled",

diff --git a/packages/entities/entities-shared/src/types/entity-base-config-card.ts b/packages/entities/entities-shared/src/types/entity-base-config-card.ts
@@ -100,6 +100,7 @@ export interface DefaultCommonFieldsConfigurationSchema {
   updated_at: ConfigurationSchemaItem
   created_at: ConfigurationSchemaItem
   tags: ConfigurationSchemaItem
+  partials: ConfigurationSchemaItem
 }
 
 export interface ComponentAttrsData {