feat(*): reuse preprocessing form fields for config forms and save [khcp-10152]

packages/entities/entities-certificates/sandbox/pages/CACertificateFormPage.vue

@@ -41,6 +41,7 @@ const konnectConfig = ref<KonnectCertificateFormConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   cancelRoute: { name: 'ca-certificate-list' },
+  jsonYamlFormsEnabled: true,
 })
 
 const kongManagerConfig = ref<KongManagerCertificateFormConfig>({

packages/entities/entities-certificates/sandbox/pages/CertificateFormPage.vue

@@ -41,6 +41,7 @@ const konnectConfig = ref<KonnectCertificateFormConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   cancelRoute: { name: 'certificate-list' },
+  jsonYamlFormsEnabled: true,
 })
 
 const kongManagerConfig = ref<KongManagerCertificateFormConfig>({

packages/entities/entities-certificates/src/components/CACertificateForm.vue

@@ -6,7 +6,7 @@
       :edit-id="certificateId"
       :error-message="form.errorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="form.fields"
+      :form-fields="requestBody"
       :is-readonly="form.isReadonly"
       @cancel="handleClickCancel"
       @fetch:error="(err: any) => $emit('error', err)"
@@ -187,28 +187,30 @@ const submitUrl = computed<string>(() => {
   return url
 })
 
+const requestBody = computed((): Record<string, any> => {
+  return {
+    cert: form.fields.cert,
+    cert_digest: form.fields.certDigest || null,
+    tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
+  }
+})
+
 const saveFormData = async (): Promise<void> => {
   try {
     form.isReadonly = true
 
-    const requestBody: Record<string, any> = {
-      cert: form.fields.cert,
-      cert_digest: form.fields.certDigest || null,
-      tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
-    }
-
     let response: AxiosResponse | undefined
 
-    await axiosInstance.post(validateSubmitUrl.value, requestBody)
+    await axiosInstance.post(validateSubmitUrl.value, requestBody.value)
 
     if (formType.value === 'create') {
-      response = await axiosInstance.post(submitUrl.value, requestBody)
+      response = await axiosInstance.post(submitUrl.value, requestBody.value)
     } else if (formType.value === 'edit') {
       response = props.config?.app === 'konnect'
         // Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
         //       If this changes, the `edit` form methods should be re-evaluated/updated accordingly
-        ? await axiosInstance.put(submitUrl.value, requestBody)
-        : await axiosInstance.patch(submitUrl.value, requestBody)
+        ? await axiosInstance.put(submitUrl.value, requestBody.value)
+        : await axiosInstance.patch(submitUrl.value, requestBody.value)
     }
 
     form.fields.cert = response?.data?.cert || ''

packages/entities/entities-certificates/src/components/CertificateForm.vue

@@ -6,7 +6,7 @@
       :edit-id="certificateId"
       :error-message="form.errorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="form.fields"
+      :form-fields="requestBody"
       :is-readonly="form.isReadonly"
       @cancel="handleClickCancel"
       @fetch:error="(err: any) => $emit('error', err)"
@@ -255,30 +255,32 @@ const submitUrl = computed<string>(() => {
   return url
 })
 
+const requestBody = computed((): Record<string, any> => {
+  return {
+    cert: form.fields.cert,
+    key: form.fields.key,
+    cert_alt: form.fields.certAlt || null,
+    key_alt: form.fields.keyAlt || null,
+    tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
+  }
+})
+
 const saveFormData = async (): Promise<void> => {
   try {
     form.isReadonly = true
 
-    const requestBody: Record<string, any> = {
-      cert: form.fields.cert,
-      key: form.fields.key,
-      cert_alt: form.fields.certAlt || null,
-      key_alt: form.fields.keyAlt || null,
-      tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
-    }
-
     let response: AxiosResponse | undefined
 
-    await axiosInstance.post(validateSubmitUrl.value, requestBody)
+    await axiosInstance.post(validateSubmitUrl.value, requestBody.value)
 
     if (formType.value === 'create') {
-      response = await axiosInstance.post(submitUrl.value, requestBody)
+      response = await axiosInstance.post(submitUrl.value, requestBody.value)
     } else if (formType.value === 'edit') {
       response = props.config?.app === 'konnect'
         // Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
         //       If this changes, the `edit` form methods should be re-evaluated/updated accordingly
-        ? await axiosInstance.put(submitUrl.value, requestBody)
-        : await axiosInstance.patch(submitUrl.value, requestBody)
+        ? await axiosInstance.put(submitUrl.value, requestBody.value)
+        : await axiosInstance.patch(submitUrl.value, requestBody.value)
     }
 
     form.fields.cert = response?.data?.cert || ''

packages/entities/entities-consumer-groups/sandbox/pages/ConsumerGroupFormPage.vue

@@ -45,6 +45,7 @@ const konnectConfig = ref<KonnectConsumerGroupFormConfig>({
   apiBaseUrl: '/us/kong-api/konnect-api',
   controlPlaneId,
   cancelRoute: { name: 'consumer-group-list' },
+  jsonYamlFormsEnabled: true,
 })
 
 const KMConfig = ref<KongManagerConsumerGroupFormConfig>({

packages/entities/entities-consumer-groups/src/components/ConsumerGroupForm.vue

@@ -6,7 +6,7 @@
       :edit-id="consumerGroupId"
       :error-message="state.errorMessage || fetchError || preValidateErrorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="state.fields"
+      :form-fields="getPayload"
       :is-readonly="state.readonly"
       @cancel="cancelHandler"
       @fetch:error="fetchErrorHandler($event)"
@@ -241,10 +241,12 @@ const preValidateErrorMessage = computed(() => {
   return namePattern.test(state.fields.name) ? '' : t('consumer_groups.form.validation_errors.name')
 })
 
-const getPayload = (): ConsumerGroupPayload => ({
-  name: state.fields.name,
-  tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
-    .trim())?.filter((tag: string) => tag !== ''),
+const getPayload = computed((): ConsumerGroupPayload => {
+  return {
+    name: state.fields.name,
+    tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
+      .trim())?.filter((tag: string) => tag !== ''),
+  }
 })
 
 const addConsumer = async (consumerId: string, groupId = ''): Promise<void> => {
@@ -281,7 +283,7 @@ const handleConsumers = (results: any[] | undefined, message: string, groupId =
 const createGroup = async (): Promise<void> => {
   let newGroupId = ''
   try {
-    const { data } = await axiosInstance.post(getUrl('create'), getPayload())
+    const { data } = await axiosInstance.post(getUrl('create'), getPayload.value)
 
     newGroupId = ('item' in data) ? data.item.id : data.id
   } catch (e) {
@@ -306,9 +308,9 @@ const createGroup = async (): Promise<void> => {
 const updateGroup = async (): Promise<void> => {
   try {
     if (props.config?.app === 'konnect') {
-      await axiosInstance.put(getUrl('edit'), getPayload())
+      await axiosInstance.put(getUrl('edit'), getPayload.value)
     } else {
-      await axiosInstance.patch(getUrl('edit'), getPayload())
+      await axiosInstance.patch(getUrl('edit'), getPayload.value)
     }
   } catch (e) {
     emitError(e as AxiosError)

packages/entities/entities-consumers/sandbox/pages/ConsumerFormPage.vue

@@ -45,6 +45,7 @@ const konnectConfig = ref<KonnectConsumerFormConfig>({
   apiBaseUrl: '/us/kong-api/konnect-api',
   controlPlaneId,
   cancelRoute: { name: 'consumer-list' },
+  jsonYamlFormsEnabled: true,
 })
 
 const KMConfig = ref<KongManagerConsumerFormConfig>({

packages/entities/entities-consumers/src/components/ConsumerForm.vue

@@ -6,7 +6,7 @@
       :edit-id="consumerId"
       :error-message="state.errorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="state.fields"
+      :form-fields="payload"
       :is-readonly="state.readonly"
       @cancel="cancelHandler"
       @fetch:error="fetchErrorHandler($event)"
@@ -210,27 +210,29 @@ const getUrl = (action: 'validate' | 'create' | 'edit'): string => {
 const isFormValid = computed((): boolean => !!state.fields.username || !!state.fields.customId)
 const changesExist = computed((): boolean => JSON.stringify(state.fields) !== JSON.stringify(originalFields))
 
+const payload = computed((): ConsumerPayload => {
+  return {
+    username: state.fields.username || null,
+    custom_id: state.fields.customId || null,
+    tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
+      .trim())?.filter((tag: string) => tag !== ''),
+  }
+})
+
 const submitData = async (): Promise<void> => {
   try {
     state.readonly = true
 
-    const payload: ConsumerPayload = {
-      username: state.fields.username || null,
-      custom_id: state.fields.customId || null,
-      tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
-        .trim())?.filter((tag: string) => tag !== ''),
-    }
-
     let response: AxiosResponse | undefined
 
-    await axiosInstance.post(getUrl('validate'), payload)
+    await axiosInstance.post(getUrl('validate'), payload.value)
 
     if (formType.value === 'create') {
-      response = await axiosInstance.post(getUrl('create'), payload)
+      response = await axiosInstance.post(getUrl('create'), payload.value)
     } else if (formType.value === 'edit') {
       response = props.config?.app === 'konnect'
-        ? await axiosInstance.put(getUrl('edit'), payload)
-        : await axiosInstance.patch(getUrl('edit'), payload)
+        ? await axiosInstance.put(getUrl('edit'), payload.value)
+        : await axiosInstance.patch(getUrl('edit'), payload.value)
     }
 
     updateFormValues(response?.data)

packages/entities/entities-gateway-services/sandbox/pages/GatewayServiceFormPage.vue

@@ -39,7 +39,9 @@ const konnectConfig = ref<KonnectGatewayServiceFormConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   cancelRoute: { name: 'gateway-services-list' },
+  jsonYamlFormsEnabled: true,
 })
+
 const kongManagerConfig = ref<KongManagerGatewayServiceFormConfig>({
   app: 'kongManager',
   // Uncomment to test compatibility with different Gateway editions and versions

packages/entities/entities-gateway-services/src/components/GatewayServiceForm.vue

@@ -6,7 +6,7 @@
       :edit-id="gatewayServiceId"
       :error-message="form.errorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="form.fields"
+      :form-fields="getProcessedPayload()"
       :is-readonly="form.isReadonly"
       @cancel="handleClickCancel"
       @fetch:error="(err: any) => $emit('error', err)"
@@ -714,7 +714,7 @@ const saveTlsVerify = (gatewayService: Record<string, any>) => {
   delete gatewayService.tls_verify_value
 }
 
-const getPayload = (): Record<string, any> => {
+const getPayload = computed((): Record<string, any> => {
   const requestBody: Record<string, any> = {
     name: form.fields.name || null,
     tags: form.fields.tags ? form.fields.tags?.split(',').filter(tag => tag !== '') : null,
@@ -763,18 +763,22 @@ const getPayload = (): Record<string, any> => {
   }
 
   return requestBody
+})
+
+const getProcessedPayload = (): Record<string, any> => {
+  validateUrl()
+  return getPayload.value
 }
 
 const saveFormData = async (): Promise<AxiosResponse | undefined> => {
   try {
     form.isReadonly = true
 
-    validateUrl()
+    const payload = getProcessedPayload()
+    saveTlsVerify(payload)
 
-    const payload = getPayload()
     let response: AxiosResponse | undefined
 
-    saveTlsVerify(payload)
     await axiosInstance.post(validateSubmitUrl.value, payload)
 
     if (formType.value === 'create') {
@@ -829,11 +833,11 @@ watch(() => props.gatewayServiceId, () => {
 
 watch(form.fields, (newValue) => {
   form.fields.port = getPort.getPortFromProtocol(newValue.protocol, String(newValue.port))
-  emit('model-updated', getPayload())
+  emit('model-updated', getPayload.value)
 })
 
 onMounted(() => {
-  emit('model-updated', getPayload())
+  emit('model-updated', getPayload.value)
 })
 
 defineExpose({

packages/entities/entities-key-sets/sandbox/pages/KeySetFormPage.vue

@@ -38,6 +38,7 @@ const konnectConfig = ref<KonnectKeySetFormConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   cancelRoute: { name: 'key-set-list' },
+  jsonYamlFormsEnabled: true,
 })
 const kongManagerConfig = ref<KongManagerKeySetFormConfig>({
   app: 'kongManager',

packages/entities/entities-key-sets/src/components/KeySetForm.vue

@@ -6,7 +6,7 @@
       :edit-id="keySetId"
       :error-message="form.errorMessage"
       :fetch-url="fetchUrl"
-      :form-fields="form.fields"
+      :form-fields="requestBody"
       :is-readonly="form.isReadonly"
       @cancel="handleClickCancel"
       @fetch:error="(err: any) => $emit('error', err)"
@@ -159,25 +159,27 @@ const submitUrl = computed<string>(() => {
   return url
 })
 
+const requestBody = computed((): Record<string, any> => {
+  return {
+    name: form.fields.name,
+    tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || '',
+  }
+})
+
 const saveFormData = async (): Promise<void> => {
   try {
     form.isReadonly = true
 
-    const requestBody: Record<string, any> = {
-      name: form.fields.name,
-      tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || '',
-    }
-
     let response: AxiosResponse | undefined
 
     if (formType.value === 'create') {
-      response = await axiosInstance.post(submitUrl.value, requestBody)
+      response = await axiosInstance.post(submitUrl.value, requestBody.value)
     } else if (formType.value === 'edit') {
       response = props.config?.app === 'konnect'
         // Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
         //       If this changes, the `edit` form methods should be re-evaluated/updated accordingly
-        ? await axiosInstance.put(submitUrl.value, requestBody)
-        : await axiosInstance.patch(submitUrl.value, requestBody)
+        ? await axiosInstance.put(submitUrl.value, requestBody.value)
+        : await axiosInstance.patch(submitUrl.value, requestBody.value)
     }
 
     if (response) {

packages/entities/entities-keys/sandbox/pages/KeyFormPage.vue

@@ -51,6 +51,7 @@ const konnectConfig = ref<KonnectKeyFormConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   cancelRoute: { name: 'key-list' },
+  jsonYamlFormsEnabled: true,
 })
 
 const kongManagerConfig = ref<KongManagerKeyFormConfig>({