feat: KM-235 redis form plugin adapation

packages/core/forms/package.json

@@ -55,11 +55,13 @@
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
+    "@kong-ui-public/entities-shared": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/kongponents": "^9.14.16",
     "vue": "^3.5.12"
   },
   "devDependencies": {
+    "@kong-ui-public/entities-shared": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.17.2",
     "@kong/kongponents": "9.14.16",

packages/core/forms/src/components/FormGenerator.vue

@@ -11,8 +11,21 @@
         v-for="field in fields"
         :key="field.model"
       >
+        <form-redis
+          v-if="field.model === 'redis_partial' && enableRedisPartial"
+          :errors="errors"
+          :field="field"
+          :model="model"
+          :options="options"
+          :tag="tag"
+          :vfg="vfg"
+          @model-updated="onModelUpdated"
+          @partial-toggled="onPartialToggled"
+          @show-new-partial-modal="$emit('showNewPartialModal')"
+          @validated="onFieldValidated"
+        />
         <form-group
-          v-if="fieldVisible(field)"
+          v-else-if="fieldVisible(field)"
           ref="children"
           :errors="errors"
           :field="field"
@@ -93,8 +106,21 @@
               v-for="field in group.collapsible.nestedCollapsible.fields"
               :key="field.model"
             >
+              <form-redis
+                v-if="field.model === 'redis_partial' && enableRedisPartial"
+                :errors="errors"
+                :field="field"
+                :model="model"
+                :options="options"
+                :tag="tag"
+                :vfg="vfg"
+                @model-updated="onModelUpdated"
+                @partial-toggled="onPartialToggled"
+                @show-new-partial-modal="$emit('showNewPartialModal')"
+                @validated="onFieldValidated"
+              />
               <form-group
-                v-if="fieldVisible(field)"
+                v-else-if="fieldVisible(field)"
                 ref="children"
                 :errors="errors"
                 :field="field"
@@ -159,11 +185,12 @@ import isNil from 'lodash-es/isNil'
 import { ref } from 'vue'
 import { AUTOFILL_SLOT, AUTOFILL_SLOT_NAME } from '../const'
 import formGroup from './FormGroup.vue'
+import formRedis from './FormRedis.vue'
 import formMixin from './FormMixin.vue'
 
 export default {
   name: 'FormGenerator',
-  components: { formGroup },
+  components: { formGroup, formRedis },
   mixins: [formMixin],
 
   inject: {
@@ -227,8 +254,13 @@ export default {
         return value.length > 0
       },
     },
+
+    enableRedisPartial: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['validated', 'modelUpdated', 'refreshModel'],
+  emits: ['validated', 'modelUpdated', 'refreshModel', 'partialToggled', 'showNewPartialModal'],
 
   data() {
     return {
@@ -339,6 +371,10 @@ export default {
       this.$emit('modelUpdated', newVal, schema)
     },
 
+    onPartialToggled(field, model) {
+      this.$emit('partialToggled', field, model)
+    },
+
     // Validating the model properties
     validate(isAsync = null) {
       if (isAsync === null) {

packages/core/forms/src/components/FormRedis.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div v-if="isCustomPlugin">
+      <KAlert :message="t('redis.custom_plugin.alert')" />
+      <RedisConfigSelect
+        :default-redis-config-item="selectedRedisConfigItem"
+        :plugin-redis-fields="field.fields"
+        :update-redis-model="updateRedisModel"
+      />
+    </div>
+    <KCard
+      v-else
+      class="redis-config-card"
+      :title="t('redis.title')"
+    >
+      <div class="redis-config-radio-group">
+        <KRadio
+          v-model="usePartial"
+          card
+          card-orientation="horizontal"
+          data-testid="shared-redis-config"
+          :description="t('redis.shared_configuration.description')"
+          :label="t('redis.shared_configuration.label')"
+          :selected-value="true"
+        >
+          <KBadge appearance="success">
+            {{ t('redis.shared_configuration.badge') }}
+          </KBadge>
+        </KRadio>
+        <KRadio
+          v-model="usePartial"
+          card
+          card-orientation="horizontal"
+          :description="t('redis.dedicated_configuration.description')"
+          :label="t('redis.dedicated_configuration.label')"
+          :selected-value="false"
+        />
+      </div>
+      <div
+        v-if="usePartial"
+        class="shared-redis-config"
+      >
+        <RedisConfigSelect
+          :default-redis-config-item="selectedRedisConfigItem"
+          :plugin-redis-fields="field.fields"
+          :update-redis-model="updateRedisModel"
+        />
+      </div>
+      <div
+        v-else
+        class="dedicated-redis-config"
+      >
+        <div class="dedicated-redis-config-title">
+          {{ t('redis.dedicated_configuration.title') }}
+        </div>
+        <component
+          :is="tag"
+        >
+          <template
+            v-for="field in field.fields"
+            :key="field.model"
+          >
+            <form-group
+              v-if="fieldVisible(field)"
+              ref="children"
+              :errors="errors"
+              :field="field"
+              :model="model"
+              :options="options"
+              :vfg="vfg"
+              @model-updated="onModelUpdated"
+              @refresh-model="onRefreshModel"
+              @validated="onFieldValidated"
+            />
+          </template>
+        </component>
+      </div>
+    </KCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import formGroup from './FormGroup.vue'
+import RedisConfigSelect from './RedisConfigSelect.vue'
+
+import isFunction from 'lodash-es/isFunction'
+import isNil from 'lodash-es/isNil'
+import { createI18n } from '@kong-ui-public/i18n'
+import english from '../locales/en.json'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'fieldset',
+    validator: function(value: string): boolean {
+      return value.length > 0
+    },
+  },
+  model: {
+    type: Object,
+    default: () => undefined,
+  },
+  options: {
+    type: Object,
+    required: true,
+  },
+  field: {
+    type: Object,
+    required: true,
+  },
+  vfg: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  redisPath: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+})
+
+const emits = defineEmits<{
+  (e: 'modelUpdated', payload: any, schema: any): void,
+  (e: 'partialToggled', field: string, model: any): void,
+  (e: 'showNewPartialModal'): void,
+  (e: 'refreshModel'): void,
+  (e: 'validated', res: boolean, errors: any[], field: any): void,
+}>()
+
+const { t } = createI18n<typeof english>('en-us', english)
+
+// if the plugin is custom, show redis configuration selector instead of the whole card
+const isCustomPlugin = computed(() => props.field.pluginType === 'custom')
+const usePartial = ref(false)
+const selectedRedisConfigItem = ref()
+
+const redisFieldsSaved = ref([] as { model: any; schema: any }[])
+const partialsSaved = ref()
+
+const fieldVisible = (field: any) => {
+  if (isFunction(field.visible)) return field.visible.call(this, props.model, field, this)
+
+  if (isNil(field.visible)) return true
+
+  return field.visible
+}
+
+const updateRedisModel = async (val: string | number | undefined) => {
+  emits('modelUpdated', [{ id: val, path: props.redisPath }], 'partials')
+  partialsSaved.value = [{ id: val, path: props.redisPath }]
+}
+
+const onModelUpdated = (model: any, schema: any) => {
+  redisFieldsSaved.value = { ...redisFieldsSaved.value, [schema]: model }
+  emits('modelUpdated', model, schema)
+}
+
+const onRefreshModel = () => {
+  // This is for updating a deeply nested array element
+  // See `modelUpdated` in `FieldArray.vue`
+  emits('refreshModel')
+}
+
+// Child field executed validation
+const onFieldValidated = (res: boolean, errors: any[], field: any) => {
+  emits('validated', res, errors, field)
+}
+
+watch(() => usePartial.value, (usePartial) => {
+  if (usePartial) {
+    emits('partialToggled', 'redis', { 'partials': partialsSaved.value })
+  } else {
+    emits('partialToggled', 'partials', redisFieldsSaved.value)
+  }
+})
+
+// fetch available redis configs under the control plane
+onBeforeMount(async () => {
+  redisFieldsSaved.value = props.field.fields.reduce((acc: Record<string,any>, field: { model: string }) => {
+    if (Object.keys(props.model!).includes(field.model)) {
+      acc[field.model] = props.model![field.model]
+    }
+    return acc
+  }, {})
+  if (props?.model?.partials?.[0]?.id) {
+    const selectedPartialId = props.model.partials[0].id
+    usePartial.value = true
+    selectedRedisConfigItem.value = selectedPartialId
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.redis-config-card {
+  margin-bottom: $kui-space-60;
+
+  :deep(.form-group:last-child) {
+    margin-bottom: 0;
+  }
+}
+
+.dedicated-redis-config {
+  margin-top: $kui-space-60;
+
+  .dedicated-redis-config-title {
+    font-size: $kui-font-size-40;
+    font-weight: $kui-font-weight-bold;
+    line-height: $kui-line-height-30;
+    margin-bottom: $kui-space-60;
+  }
+}
+
+.redis-config-radio-group {
+  display: flex;
+  gap: $kui-space-40;
+  margin-bottom: $kui-space-40;
+}
+</style>