diff --git a/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue b/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue
new file mode 100644
index 0000000000..36f59c1cd9
--- /dev/null
+++ b/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue
@@ -0,0 +1,71 @@
+
+
+
+ {{ t('form.cluster_nodes.title') }}
+
+
+
+
+
+
+
+
+
+
+ {{ t('form.cluster_nodes.add_button') }}
+
+
+
+
+
+
+
+
diff --git a/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue b/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue
new file mode 100644
index 0000000000..4f1f1d1607
--- /dev/null
+++ b/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
index bd7195c984..e750c76715 100644
--- a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
+++ b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
@@ -20,10 +20,15 @@
:title="t('form.sections.type.title')"
>
+ >
+
+ {{ getSelectedText(item) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -46,11 +240,17 @@ import {
EntityFormSection,
SupportedEntityType,
} from '@kong-ui-public/entities-shared'
-import type { KonnectRedisConfigurationFormConfig } from 'src/types'
-import type { PropType } from 'vue'
import '@kong-ui-public/entities-shared/dist/style.css'
import composables from '../composables'
+import ClusterNodes from '../components/ClusterNodes.vue'
+import { useRedisConfigurationForm } from '../composables/useRedisConfigurationForm'
+
+import type { PropType } from 'vue'
+import {
+ RedisType,
+ type KonnectRedisConfigurationFormConfig,
+} from '../types'
const props = defineProps({
config: {
@@ -67,9 +267,25 @@ const props = defineProps({
},
})
-const { i18nT, i18n: { t } } = composables.useI18n()
+const { i18n: { t } } = composables.useI18n()
+
+const typeOptions = [
+ { label: t('form.options.type.host_port'), group: ` ${t('form.options.type.open_source')}`, value: RedisType.HOST_PORT_OPEN_SOURCE }, // the space before the group name is intentional, it makes the group to be the first one
+ { label: t('form.options.type.host_port'), group: t('form.options.type.enterprise'), value: RedisType.HOST_PORT_ENTERPRISE },
+ { label: t('form.options.type.cluster'), group: t('form.options.type.enterprise'), value: RedisType.CLUSTER },
+ { label: t('form.options.type.sentinel'), group: t('form.options.type.enterprise'), value: RedisType.SENTINEL },
+]
const noop = () => {}
+
+const getSelectedText = (item: any) => {
+ const suffix = item.value === RedisType.HOST_PORT_OPEN_SOURCE
+ ? t('form.options.type.suffix_open_source')
+ : t('form.options.type.suffix_enterprise')
+ return `${item.label}${suffix}`
+}
+
+const { form } = useRedisConfigurationForm()