wip

packages/entities/entities-redis-configurations/package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@kong/design-tokens": "1.17.2",
     "@kong/kongponents": "9.14.8",
+    "@types/uuid": "^10.0.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
@@ -65,5 +66,8 @@
     "@kong/kongponents": "9.14.8",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
+  },
+  "dependencies": {
+    "uuid": "^10.0.0"
   }
 }

packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue

@@ -8,14 +8,13 @@
     </KLabel>
     <div>
       <FieldArrayCardContainer
-        v-for="(item, index) of items"
+        v-for="(node, index) of nodes"
         :key="`${index}`"
-        @remove-item="items.splice(index, 1)"
+        @remove-item="removeItem(index)"
       >
-        <div
-          class="cluster-node-items"
-        >
+        <div class="cluster-node-items">
           <KInput
+            v-model.trim="node.ip"
             :label="t('form.fields.cluster_node_ip.label')"
             :label-attributes="{
               info: t('form.fields.cluster_node_ip.tooltip'),
@@ -24,6 +23,7 @@
             required
           />
           <KInput
+            v-model="node.port"
             :label="t('form.fields.cluster_node_port.label')"
             :label-attributes="{
               info: t('form.fields.cluster_node_port.tooltip'),
@@ -45,20 +45,23 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { AddCircleIcon } from '@kong/icons'
 
 import FieldArrayCardContainer from './FieldArrayCardContainer.vue'
 import composables from '../composables'
+import type { ClusterNode, Identifiable } from '../types'
+import { genDefaultClusterNode } from '../helpers'
+
+const nodes = defineModel<Identifiable<ClusterNode>[]>({ required: true })
 
 const { i18n: { t } } = composables.useI18n()
-type Item = {
-  ip: string
-  port: number
-}
-const items = ref<Item[]>([{ ip: '', port: 0 }])
+
 const addItem = () => {
-  items.value.push({ ip: '', port: 0 })
+  nodes.value.push(genDefaultClusterNode())
+}
+
+const removeItem = (index: number) => {
+  nodes.value.splice(index, 1)
 }
 </script>
 

packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="kong-ui-entities-redis-configurations-form">
     <EntityBaseForm
-      :can-submit="false"
+      :can-submit="canSubmit"
       :config="config"
       :edit-id="partialId"
       :entity-type="SupportedEntityType.RedisConfiguration"
       :error-message="undefined"
       :fetch-url="undefined"
-      :form-fields="{}"
-      :is-readonly="false"
+      :form-fields="payload"
+      :is-readonly="form.readonly"
       @cancel="noop"
       @fetch:error="noop"
       @fetch:success="noop"
@@ -65,7 +65,7 @@
             tooltipAttributes: { maxWidth: '400' },
           }"
         />
-        <SentinelNodes />
+        <SentinelNodes v-model="form.fields.sentinel_nodes" />
         <KInput
           v-model.trim="form.fields.sentinel_username"
           :label="t('form.fields.sentinel_username.label')"
@@ -102,7 +102,7 @@
         :description="t('form.sections.cluster.description')"
         :title="t('form.sections.cluster.title')"
       >
-        <ClusterNodes />
+        <ClusterNodes v-model="form.fields.cluster_nodes" />
         <KInput
           v-model="form.fields.cluster_max_redirections"
           :label="t('form.fields.cluster_max_redirections.label')"
@@ -353,7 +353,11 @@ const getSelectedText = (item: any) => {
   return `${item.label}${suffix}`
 }
 
-const { form } = useRedisConfigurationForm()
+const {
+  form,
+  canSubmit,
+  payload,
+} = useRedisConfigurationForm()
 </script>
 
 <style lang="scss" scoped>

packages/entities/entities-redis-configurations/src/components/SentinelNodes.vue

@@ -8,14 +8,13 @@
     </KLabel>
     <div>
       <FieldArrayCardContainer
-        v-for="(item, index) of items"
-        :key="`${index}`"
-        @remove-item="items.splice(index, 1)"
+        v-for="(node, index) of nodes"
+        :key="node.id"
+        @remove-item="removeItem(index)"
       >
-        <div
-          class="cluster-node-items"
-        >
+        <div class="sentinel-node-items">
           <KInput
+            v-model.trim="node.host"
             :label="t('form.fields.sentinel_node_host.label')"
             :label-attributes="{
               info: t('form.fields.sentinel_node_host.tooltip'),
@@ -24,6 +23,7 @@
             required
           />
           <KInput
+            v-model="node.port"
             :label="t('form.fields.sentinel_node_port.label')"
             :label-attributes="{
               info: t('form.fields.sentinel_node_port.tooltip'),
@@ -45,25 +45,28 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { AddCircleIcon } from '@kong/icons'
 
 import FieldArrayCardContainer from './FieldArrayCardContainer.vue'
 import composables from '../composables'
+import type { Identifiable, SentinelNode } from '../types'
+import { genDefaultSentinelNode } from '../helpers'
+
+const nodes = defineModel<Identifiable<SentinelNode>[]>({ required: true })
 
 const { i18n: { t } } = composables.useI18n()
-type Item = {
-  ip: string
-  port: number
-}
-const items = ref<Item[]>([{ ip: '', port: 0 }])
+
 const addItem = () => {
-  items.value.push({ ip: '', port: 0 })
+  nodes.value.push(genDefaultSentinelNode())
+}
+
+const removeItem = (index: number) => {
+  nodes.value.splice(index, 1)
 }
 </script>
 
 <style lang="scss" scoped>
-.cluster-node-items {
+.sentinel-node-items {
   display: flex;
   flex-direction: column;
   gap: $kui-space-80;

packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts

@@ -1,6 +1,7 @@
 import { computed, reactive } from 'vue'
 
 import { Mode } from '../types'
+import { shallowCopyWithoutId } from '../helpers'
 
 import type { RedisConfigurationFormState } from '../types'
 
@@ -36,11 +37,107 @@ export const useRedisConfigurationForm = () => {
   })
 
   const canSubmit = computed(() => {
-    return !!form.fields.name.length && !!form.fields.host
+    if (!form.fields.name.length) {
+      return false
+    }
+
+    switch (form.fields.mode) {
+      case Mode.HOST_PORT_OPEN_SOURCE:
+        return !!form.fields.name.length
+      case Mode.HOST_PORT_ENTERPRISE:
+        return !!form.fields.name.length
+      case Mode.CLUSTER:
+        return !!form.fields.name.length
+      case Mode.SENTINEL:
+        return !!form.fields.name.length
+      default:
+        throw new Error('Invalid mode')
+    }
+  })
+
+  const payload = computed(() => {
+    // todo: remove non-required and non-default values
+    switch (form.fields.mode) {
+      case Mode.HOST_PORT_OPEN_SOURCE:
+        return {
+          name: form.fields.name,
+          mode: form.fields.mode,
+          host: form.fields.host,
+          port: form.fields.port,
+          timeout: form.fields.timeout,
+          username: form.fields.username,
+          database: form.fields.database,
+          password: form.fields.password,
+          ssl: form.fields.ssl,
+          ssl_verify: form.fields.ssl_verify,
+          server_name: form.fields.server_name,
+        }
+      case Mode.HOST_PORT_ENTERPRISE:
+        return {
+          name: form.fields.name,
+          mode: form.fields.mode,
+          host: form.fields.host,
+          port: form.fields.port,
+          timeout: form.fields.timeout,
+          username: form.fields.username,
+          database: form.fields.database,
+          password: form.fields.password,
+          ssl: form.fields.ssl,
+          ssl_verify: form.fields.ssl_verify,
+          server_name: form.fields.server_name,
+          connect_timeout: form.fields.connect_timeout,
+          send_timeout: form.fields.send_timeout,
+          read_timeout: form.fields.read_timeout,
+          keepalive_pool_size: form.fields.keepalive_pool_size,
+          keepalive_backlog: form.fields.keepalive_backlog,
+          connection_is_proxied: form.fields.connection_is_proxied,
+        }
+      case Mode.CLUSTER:
+        return {
+          name: form.fields.name,
+          mode: form.fields.mode,
+          cluster_nodes: form.fields.cluster_nodes.map(shallowCopyWithoutId),
+          cluster_max_redirections: form.fields.cluster_max_redirections,
+          timeout: form.fields.timeout,
+          username: form.fields.username,
+          password: form.fields.password,
+          ssl: form.fields.ssl,
+          ssl_verify: form.fields.ssl_verify,
+          server_name: form.fields.server_name,
+          connect_timeout: form.fields.connect_timeout,
+          send_timeout: form.fields.send_timeout,
+          read_timeout: form.fields.read_timeout,
+          keepalive_pool_size: form.fields.keepalive_pool_size,
+          keepalive_backlog: form.fields.keepalive_backlog,
+          connection_is_proxied: form.fields.connection_is_proxied,
+        }
+      case Mode.SENTINEL:
+        return {
+          name: form.fields.name,
+          mode: form.fields.mode,
+          sentinel_master: form.fields.sentinel_master,
+          sentinel_nodes: form.fields.sentinel_nodes.map(shallowCopyWithoutId),
+          timeout: form.fields.timeout,
+          username: form.fields.username,
+          password: form.fields.password,
+          ssl: form.fields.ssl,
+          ssl_verify: form.fields.ssl_verify,
+          server_name: form.fields.server_name,
+          connect_timeout: form.fields.connect_timeout,
+          send_timeout: form.fields.send_timeout,
+          read_timeout: form.fields.read_timeout,
+          keepalive_pool_size: form.fields.keepalive_pool_size,
+          keepalive_backlog: form.fields.keepalive_backlog,
+          connection_is_proxied: form.fields.connection_is_proxied,
+        }
+      default:
+        throw new Error('Invalid mode')
+    }
   })
 
   return {
     form,
     canSubmit,
+    payload,
   }
 }

packages/entities/entities-redis-configurations/src/constants.ts

@@ -0,0 +1,11 @@
+import type { ClusterNode, SentinelNode } from './types'
+
+export const DEFAULT_CLUSTER_NODE: ClusterNode = {
+  ip: '127.0.0.1',
+  port: 6379,
+}
+
+export const DEFAULT_SENTINEL_NODE: SentinelNode = {
+  host: '127.0.0.1',
+  port: 6379,
+}

packages/entities/entities-redis-configurations/src/helpers.ts

@@ -0,0 +1,17 @@
+import { v4 as uuidv4 } from 'uuid'
+
+import { DEFAULT_CLUSTER_NODE, DEFAULT_SENTINEL_NODE } from './constants'
+import type { Identifiable } from './types'
+
+export const shallowCopyWithId = <T extends Record<any, any>>(node: T): Identifiable<T> => {
+  return { ...node, id: uuidv4() }
+}
+
+export const shallowCopyWithoutId = <T extends { id: string }>(node: T): Omit<T, 'id'> => {
+  const { id, ...rest } = node
+  return rest
+}
+
+export const genDefaultSentinelNode = () => shallowCopyWithId(DEFAULT_SENTINEL_NODE)
+
+export const genDefaultClusterNode = () => shallowCopyWithId(DEFAULT_CLUSTER_NODE)

packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts

@@ -14,6 +14,8 @@ export interface SentinelNode {
   port: number
 }
 
+export type Identifiable<T> = T & { id: string }
+
 export interface ClusterNode {
   ip: string
   port: number
@@ -41,8 +43,8 @@ export interface RedisConfigurationFields {
   keepalive_backlog: number
   sentinel_master: string
   sentinel_role?: 'master' | 'slave' | 'any'
-  sentinel_nodes: SentinelNode[]
-  cluster_nodes: ClusterNode[]
+  sentinel_nodes: Identifiable<SentinelNode>[]
+  cluster_nodes: Identifiable<ClusterNode>[]
   cluster_max_redirections: number
   connection_is_proxied: boolean
 }