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 @@ + + + + + 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')" > + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -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()