From 5dd3f3a784147373034a36c85e25cec7f14e2372 Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Wed, 15 Jan 2025 18:08:10 +0800
Subject: [PATCH] wip

---
 .../pages/RedisConfigurationFormPage.vue      |  23 ++-
 .../src/components/RedisConfigurationForm.vue |  42 ++++--
 .../composables/useRedisConfigurationForm.ts  | 132 ++++++++++++------
 .../src/helpers.ts                            |  36 ++++-
 .../src/partials-endpoints.ts                 |  24 ++++
 .../src/types/redis-configuration-form.ts     |  14 +-
 6 files changed, 204 insertions(+), 67 deletions(-)
 create mode 100644 packages/entities/entities-redis-configurations/src/partials-endpoints.ts

diff --git a/packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue b/packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue
index 9749823828..ac8c4abfb9 100644
--- a/packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue
+++ b/packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue
@@ -1,13 +1,23 @@
 <template>
-  <h2>Konnect API</h2>
+  <template v-if="false">
+    <h2>Konnect API</h2>
+    <RedisConfigurationForm
+      :config="konnectConfig"
+    />
+  </template>
+
+  <h2>Kong Manager API</h2>
   <RedisConfigurationForm
-    :config="konnectConfig"
+    :config="kongManagerConfig"
   />
 </template>
 
 <script setup lang="ts">
 import { RedisConfigurationForm } from '../../src'
-import type { KonnectRedisConfigurationFormConfig } from '../../src'
+import type {
+  KonnectRedisConfigurationFormConfig,
+  KongManagerRedisConfigurationFormConfig,
+} from '../../src'
 
 const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
 
@@ -16,4 +26,11 @@ const konnectConfig: KonnectRedisConfigurationFormConfig = {
   apiBaseUrl: '/us/kong-api',
   controlPlaneId,
 }
+
+const kongManagerConfig: KongManagerRedisConfigurationFormConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  cancelRoute: { name: 'home' },
+}
 </script>
diff --git a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
index e904c7494b..0e27ce6c9b 100644
--- a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
+++ b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="kong-ui-entities-redis-configurations-form">
+  <div>
     <EntityBaseForm
       :can-submit="canSubmit"
       :config="config"
       :edit-id="partialId"
       :entity-type="SupportedEntityType.RedisConfiguration"
-      :error-message="undefined"
-      :fetch-url="undefined"
+      :error-message="form.errorMessage"
+      :fetch-url="fetchUrl"
       :form-fields="payload"
       :is-readonly="form.readonly"
       @cancel="noop"
       @fetch:error="noop"
-      @fetch:success="noop"
+      @fetch:success="updateFormValues"
       @loading="noop"
-      @submit="noop"
+      @submit="submit"
     >
       <EntityFormSection
         :description="t('form.sections.type.description')"
@@ -59,6 +59,7 @@
             tooltipAttributes: { maxWidth: '400' },
           }"
           :readonly="form.readonly"
+          required
         />
         <KSelect
           v-model="form.fields.config.sentinel_role"
@@ -69,6 +70,7 @@
             tooltipAttributes: { maxWidth: '400' },
           }"
           :readonly="form.readonly"
+          required
         />
         <SentinelNodes
           v-model="form.fields.config.sentinel_nodes"
@@ -325,19 +327,28 @@ import { useRedisConfigurationForm } from '../composables/useRedisConfigurationF
 import ClusterNodes from './ClusterNodes.vue'
 import composables from '../composables'
 import SentinelNodes from './SentinelNodes.vue'
+import endpoints from '../partials-endpoints'
 
 import type { PropType } from 'vue'
-import type { KonnectRedisConfigurationFormConfig } from '../types'
+import type {
+  KongManagerRedisConfigurationFormConfig,
+  KonnectRedisConfigurationFormConfig,
+} from '../types'
 import type { SelectItem } from '@kong/kongponents/dist/types'
 
 const props = defineProps({
   config: {
-    type: Object as PropType<KonnectRedisConfigurationFormConfig>,
+    type: Object as PropType<KonnectRedisConfigurationFormConfig | KongManagerRedisConfigurationFormConfig>,
     required: true,
-    validator: (config: unknown) => {
+    validator: (config: KonnectRedisConfigurationFormConfig | KongManagerRedisConfigurationFormConfig) => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (config?.app === 'konnect' && !config?.controlPlaneId) return false
+      if (config?.app === 'kongManager' && typeof config?.workspace !== 'string') return false
+      if (!config?.cancelRoute) return false
       return true
     },
   },
+  /** If a valid partialId is provided, it will put the form in Edit mode instead of Create */
   partialId: {
     type: String,
     required: false,
@@ -413,16 +424,23 @@ const {
   isEdit,
   userSelectedRedisType,
   redisType,
+  fetchUrl,
+  submit,
 } = useRedisConfigurationForm({
   partialId: props.partialId,
+  config: props.config,
 })
-</script>
 
-<style lang="scss" scoped>
-.kong-ui-entities-redis-configurations-form {
-  // Add component styles as needed
+const updateFormValues = (data: Record<string, any>) => {
+  form.fields.config = Object.assign({}, form.fields.config, data.config)
+  form.fields.config.sentinel_nodes = data.config.sentinel_nodes ?? []
+  form.fields.config.cluster_nodes = data.config.cluster_nodes ?? []
+  form.fields.name = data.name
+  form.fields.type = data.type
 }
+</script>
 
+<style lang="scss" scoped>
 .secret-picker-provider {
   margin-top: $kui-space-40 !important;
 }
diff --git a/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts b/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
index 95a5b9a010..034dff598f 100644
--- a/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
+++ b/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
@@ -1,18 +1,28 @@
 import { computed, reactive, ref, watch } from 'vue'
+import { EntityBaseFormType, useAxios, useErrors } from '@kong-ui-public/entities-shared'
 
-import { getRedisType, mapRedisTypeToPartialType, shallowCopyWithoutId } from '../helpers'
+import { getRedisType, mapRedisTypeToPartialType, shallowCopyWithoutId, standardize as s } from '../helpers'
 import { RedisType } from '../types'
 import { DEFAULT_REDIS_TYPE } from '../constants'
+import endpoints from '../partials-endpoints'
 
-import type { RedisConfigurationFormState } from '../types'
+import type { KongManagerRedisConfigurationFormConfig, KonnectRedisConfigurationFormConfig, RedisConfigurationFormState } from '../types'
 
 export type Options = {
   partialId?: string
+  config: KonnectRedisConfigurationFormConfig | KongManagerRedisConfigurationFormConfig
 }
 
 export const useRedisConfigurationForm = (options: Options) => {
-  const { partialId } = options
+  const { partialId, config } = options
   const isEdit = !!partialId
+  const { axiosInstance } = useAxios(config.axiosRequestConfig)
+  const { getMessageFromError } = useErrors()
+  const formType = computed((): EntityBaseFormType => partialId
+    ? EntityBaseFormType.Edit
+    : EntityBaseFormType.Create)
+
+
   const form = reactive<RedisConfigurationFormState>({
     fields: {
       name: '',
@@ -74,7 +84,7 @@ export const useRedisConfigurationForm = (options: Options) => {
       case RedisType.CLUSTER:
         return !!config.cluster_nodes.length && config.cluster_nodes.every((node) => node.ip.length > 0 && node.port > 0)
       case RedisType.SENTINEL:
-        return !!config.sentinel_nodes.length && config.sentinel_nodes.every((node) => node.host.length > 0 && node.port > 0)
+        return !!config.sentinel_nodes.length && config.sentinel_nodes.every((node) => node.host.length > 0 && node.port > 0) && config.sentinel_master.length > 0 && config.sentinel_role && config.sentinel_role.length > 0
       default:
         throw new Error('Invalid redis type')
     }
@@ -89,13 +99,13 @@ export const useRedisConfigurationForm = (options: Options) => {
           config: {
             host: form.fields.config.host,
             port: form.fields.config.port,
-            timeout: form.fields.config.timeout,
-            username: form.fields.config.username,
-            database: form.fields.config.database,
-            password: form.fields.config.password,
+            timeout: s.integer(form.fields.config.timeout),
+            username: s.string(form.fields.config.username, null),
+            database: s.integer(form.fields.config.database),
+            password: s.string(form.fields.config.password, null),
             ssl: form.fields.config.ssl,
             ssl_verify: form.fields.config.ssl_verify,
-            server_name: form.fields.config.server_name,
+            server_name: s.string(form.fields.config.server_name, null),
           },
         }
       case RedisType.HOST_PORT_EE:
@@ -103,21 +113,20 @@ export const useRedisConfigurationForm = (options: Options) => {
           name: form.fields.name,
           type: form.fields.type,
           config: {
+            connect_timeout: s.integer(form.fields.config.connect_timeout),
+            connection_is_proxied: form.fields.config.connection_is_proxied,
+            database: s.integer(form.fields.config.database),
             host: form.fields.config.host,
-            port: form.fields.config.port,
-            timeout: form.fields.config.timeout,
-            username: form.fields.config.username,
-            database: form.fields.config.database,
-            password: form.fields.config.password,
-            ssl: form.fields.config.ssl,
+            keepalive_backlog: s.integer(form.fields.config.keepalive_backlog),
+            keepalive_pool_size: s.integer(form.fields.config.keepalive_pool_size),
+            password: s.string(form.fields.config.password, null),
+            port: s.integer(form.fields.config.port),
+            read_timeout: s.integer(form.fields.config.read_timeout),
+            send_timeout: s.integer(form.fields.config.send_timeout),
+            server_name: s.string(form.fields.config.server_name, null),
             ssl_verify: form.fields.config.ssl_verify,
-            server_name: form.fields.config.server_name,
-            connect_timeout: form.fields.config.connect_timeout,
-            send_timeout: form.fields.config.send_timeout,
-            read_timeout: form.fields.config.read_timeout,
-            keepalive_pool_size: form.fields.config.keepalive_pool_size,
-            keepalive_backlog: form.fields.config.keepalive_backlog,
-            connection_is_proxied: form.fields.config.connection_is_proxied,
+            ssl: form.fields.config.ssl,
+            username: s.string(form.fields.config.username, null),
           },
         }
       case RedisType.CLUSTER:
@@ -125,19 +134,18 @@ export const useRedisConfigurationForm = (options: Options) => {
           name: form.fields.name,
           type: form.fields.type,
           config: {
-            cluster_nodes: form.fields.config.cluster_nodes.map(shallowCopyWithoutId),
-            cluster_max_redirections: form.fields.config.cluster_max_redirections,
-            timeout: form.fields.config.timeout,
-            username: form.fields.config.username,
-            password: form.fields.config.password,
+            cluster_nodes: s.clusterNodes(form.fields.config.cluster_nodes),
+            cluster_max_redirections: s.integer(form.fields.config.cluster_max_redirections),
+            username: s.string(form.fields.config.username, null),
+            password: s.string(form.fields.config.password, null),
             ssl: form.fields.config.ssl,
             ssl_verify: form.fields.config.ssl_verify,
-            server_name: form.fields.config.server_name,
-            connect_timeout: form.fields.config.connect_timeout,
-            send_timeout: form.fields.config.send_timeout,
-            read_timeout: form.fields.config.read_timeout,
-            keepalive_pool_size: form.fields.config.keepalive_pool_size,
-            keepalive_backlog: form.fields.config.keepalive_backlog,
+            server_name: s.string(form.fields.config.server_name, null),
+            connect_timeout: s.integer(form.fields.config.connect_timeout),
+            send_timeout: s.integer(form.fields.config.send_timeout),
+            read_timeout: s.integer(form.fields.config.read_timeout),
+            keepalive_pool_size: s.integer(form.fields.config.keepalive_pool_size),
+            keepalive_backlog: s.integer(form.fields.config.keepalive_backlog),
             connection_is_proxied: form.fields.config.connection_is_proxied,
           },
         }
@@ -146,19 +154,19 @@ export const useRedisConfigurationForm = (options: Options) => {
           name: form.fields.name,
           type: form.fields.type,
           config: {
-            sentinel_master: form.fields.config.sentinel_master,
-            sentinel_nodes: form.fields.config.sentinel_nodes.map(shallowCopyWithoutId),
-            timeout: form.fields.config.timeout,
-            username: form.fields.config.username,
-            password: form.fields.config.password,
+            sentinel_master: s.string(form.fields.config.sentinel_master, null),
+            sentinel_nodes: s.sentinelNodes(form.fields.config.sentinel_nodes),
+            sentinel_role: s.string(form.fields.config.sentinel_role, null),
+            username: s.string(form.fields.config.username, null),
+            password: s.string(form.fields.config.password, null),
             ssl: form.fields.config.ssl,
             ssl_verify: form.fields.config.ssl_verify,
-            server_name: form.fields.config.server_name,
-            connect_timeout: form.fields.config.connect_timeout,
-            send_timeout: form.fields.config.send_timeout,
-            read_timeout: form.fields.config.read_timeout,
-            keepalive_pool_size: form.fields.config.keepalive_pool_size,
-            keepalive_backlog: form.fields.config.keepalive_backlog,
+            server_name: s.string(form.fields.config.server_name, null),
+            connect_timeout: s.integer(form.fields.config.connect_timeout),
+            send_timeout: s.integer(form.fields.config.send_timeout),
+            read_timeout: s.integer(form.fields.config.read_timeout),
+            keepalive_pool_size: s.integer(form.fields.config.keepalive_pool_size),
+            keepalive_backlog: s.integer(form.fields.config.keepalive_backlog),
             connection_is_proxied: form.fields.config.connection_is_proxied,
           },
         }
@@ -167,6 +175,39 @@ export const useRedisConfigurationForm = (options: Options) => {
     }
   })
 
+  const submitUrl = computed<string>(() => {
+    let url = `${config.apiBaseUrl}${endpoints.form[config.app][formType.value]}`
+
+    if (config.app === 'konnect') {
+      url = url.replace(/{controlPlaneId}/gi, config?.controlPlaneId || '')
+    } else if (config.app === 'kongManager') {
+      url = url.replace(/\/{workspace}/gi, config?.workspace ? `/${config.workspace}` : '')
+    }
+
+    // Always replace the id when editing
+    url = url.replace(/{id}/gi, partialId || '')
+
+    return url
+  })
+
+  const fetchUrl = computed<string>(() => endpoints.form[config?.app]?.edit)
+
+  const submit = async () => {
+    try {
+      form.readonly = true
+      form.errorMessage = ''
+
+      if (formType.value === EntityBaseFormType.Create) {
+        await axiosInstance.post(submitUrl.value, payload.value)
+      } else {
+        await axiosInstance.patch(submitUrl.value, payload.value)
+      }
+    } catch (e: unknown) {
+      form.errorMessage = getMessageFromError(e)
+      form.readonly = false
+    }
+  }
+
   return {
     form,
     canSubmit,
@@ -174,5 +215,8 @@ export const useRedisConfigurationForm = (options: Options) => {
     isEdit,
     redisType,
     userSelectedRedisType,
+    formType,
+    fetchUrl,
+    submit,
   }
 }
diff --git a/packages/entities/entities-redis-configurations/src/helpers.ts b/packages/entities/entities-redis-configurations/src/helpers.ts
index 7ec0973e6b..145f2730f3 100644
--- a/packages/entities/entities-redis-configurations/src/helpers.ts
+++ b/packages/entities/entities-redis-configurations/src/helpers.ts
@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid'
 
 import { DEFAULT_CLUSTER_NODE, DEFAULT_SENTINEL_NODE } from './constants'
-import type { Identifiable, PartialType, RedisConfigurationFields } from './types'
+import { PartialType, type ClusterNode, type Identifiable, type RedisConfigurationFields, type SentinelNode } from './types'
 import { RedisType } from './types'
 
 export const shallowCopyWithId = <T extends Record<any, any>>(node: T): Identifiable<T> => {
@@ -18,7 +18,7 @@ export const genDefaultSentinelNode = () => shallowCopyWithId(DEFAULT_SENTINEL_N
 export const genDefaultClusterNode = () => shallowCopyWithId(DEFAULT_CLUSTER_NODE)
 
 export const getRedisType = (fields: RedisConfigurationFields): RedisType => {
-  if (fields.type === 'redis-ce') {
+  if (fields.type === PartialType.REDIS_CE) {
     return RedisType.HOST_PORT_CE
   }
 
@@ -34,5 +34,35 @@ export const getRedisType = (fields: RedisConfigurationFields): RedisType => {
 }
 
 export const mapRedisTypeToPartialType = (type: RedisType): PartialType => {
-  return type === RedisType.HOST_PORT_CE ? 'redis-ce' : 'redis-ee'
+  return type === RedisType.HOST_PORT_CE ? PartialType.REDIS_CE : PartialType.REDIS_EE
+}
+
+export const standardize = {
+  integer<T>(value: string | number | undefined | null, defaultValue?: T): number | T {
+    if (value === undefined || value === null) {
+      return defaultValue as T
+    }
+    return parseInt(value.toString(), 10)
+  },
+
+  string<T>(value: string | number | undefined | null, defaultValue?: T): string | T {
+    if (value === undefined || value === null || value === '') {
+      return defaultValue as T
+    }
+    return value.toString()
+  },
+
+  clusterNodes(nodes: Identifiable<ClusterNode>[]): ClusterNode[] {
+    return nodes.map(node => ({
+      ...shallowCopyWithoutId(node),
+      port: standardize.integer(node.port)!,
+    }))
+  },
+
+  sentinelNodes(nodes: Identifiable<SentinelNode>[]): SentinelNode[] {
+    return nodes.map(node => ({
+      ...shallowCopyWithoutId(node),
+      port: standardize.integer(node.port)!,
+    }))
+  },
 }
diff --git a/packages/entities/entities-redis-configurations/src/partials-endpoints.ts b/packages/entities/entities-redis-configurations/src/partials-endpoints.ts
new file mode 100644
index 0000000000..05753e9eba
--- /dev/null
+++ b/packages/entities/entities-redis-configurations/src/partials-endpoints.ts
@@ -0,0 +1,24 @@
+const konnectBaseApiUrl = '/v2/control-planes/{controlPlaneId}/core-entities'
+const KMBaseApiUrl = '/{workspace}'
+
+export default {
+  // list: {
+  //   konnect: {
+  //     getAll: `${konnectBaseApiUrl}/vaults`,
+  //     deleteConfigStore: `${konnectConfigStoreApiUrl}/{id}?force=true`,
+  //   },
+  //   kongManager: {
+  //     getAll: `${KMBaseApiUrl}/vaults`,
+  //   },
+  // },
+  form: {
+    konnect: {
+      create: `${konnectBaseApiUrl}/partials`,
+      edit: `${konnectBaseApiUrl}/partials/{id}`,
+    },
+    kongManager: {
+      create: `${KMBaseApiUrl}/partials`,
+      edit: `${KMBaseApiUrl}/partials/{id}`,
+    },
+  },
+}
diff --git a/packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts b/packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts
index 6adc83df54..78e11489a3 100644
--- a/packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts
+++ b/packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts
@@ -1,6 +1,7 @@
-import type { KonnectBaseFormConfig } from '@kong-ui-public/entities-shared'
+import type { KonnectBaseFormConfig, KongManagerBaseFormConfig } from '@kong-ui-public/entities-shared'
 
 export interface KonnectRedisConfigurationFormConfig extends KonnectBaseFormConfig { }
+export interface KongManagerRedisConfigurationFormConfig extends KongManagerBaseFormConfig { }
 
 export enum RedisType {
   HOST_PORT_CE,
@@ -9,6 +10,11 @@ export enum RedisType {
   CLUSTER,
 }
 
+export enum PartialType {
+  REDIS_CE = 'redis-ce',
+  REDIS_EE = 'redis-ee',
+}
+
 export interface SentinelNode {
   host: string
   port: number
@@ -21,8 +27,6 @@ export interface ClusterNode {
   port: number
 }
 
-export type PartialType = 'redis-ce' | 'redis-ee'
-
 export interface RedisConfigurationFields {
   name: string
   type: PartialType
@@ -34,8 +38,8 @@ export interface RedisConfigurationFields {
     password: string
     ssl: boolean
     ssl_verify: boolean
-    server_name: string
-    timeout: number
+    server_name?: string
+    timeout: number // todo
 
     connect_timeout: number
     send_timeout: number