From d4e5e25f1ea07587faef6db4a182aeef6656de02 Mon Sep 17 00:00:00 2001
From: EiffelFly <57251712+EiffelFly@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:47:31 +0800
Subject: [PATCH] fix: fix integration auto-gen-form issue

---
 .../components/regular/OneOfConditionField.tsx  | 17 ++++++++++++++++-
 .../pickRegularFieldsFromInstillFormTree.tsx    |  8 ++++++++
 .../src/lib/use-instill-form/useInstillForm.tsx |  5 ++++-
 .../settings/integrations/ConnectionForm.tsx    |  3 +++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
index 2c2351e8a9..8e9710baac 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
@@ -31,6 +31,7 @@ export const OneOfConditionField = ({
   size,
   isHidden,
   isRequired,
+  lowCodeComponentEraSchema,
 }: {
   tree: InstillFormConditionItem;
   selectedConditionMap: Nullable<SelectedConditionMap>;
@@ -52,6 +53,7 @@ export const OneOfConditionField = ({
 
   // In the above example, the formConditionLayerPath will be foo.bar.baz
   formConditionLayerPath: string;
+  lowCodeComponentEraSchema?: boolean;
 } & Omit<AutoFormFieldBaseProps, "path">) => {
   const conditionOptions = React.useMemo(() => {
     return Object.entries(conditionComponentsMap).map(([k, v]) => ({
@@ -116,6 +118,8 @@ export const OneOfConditionField = ({
   //   getValues,
   // ]);
 
+  console.log(tree);
+
   return (
     <div key={constFullPath} className="flex flex-col gap-y-5">
       {isHidden ? null : (
@@ -200,6 +204,17 @@ export const OneOfConditionField = ({
                   </Form.Control>
                   <Select.Content>
                     {conditionOptions.map((option) => {
+                      let title = option.title ?? option.key;
+                      const conditionItemSchema = tree.conditions[option.key];
+
+                      if (
+                        lowCodeComponentEraSchema &&
+                        conditionItemSchema &&
+                        conditionItemSchema.title
+                      ) {
+                        title = conditionItemSchema.title;
+                      }
+
                       return (
                         <Select.Item
                           key={option.key}
@@ -210,7 +225,7 @@ export const OneOfConditionField = ({
                               ? "!product-body-text-4-regular"
                               : "product-body-text-4-regular",
                           )}
-                          label={option.title ?? option.key}
+                          label={title}
                         />
                       );
                     })}
diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx
index 62b2d0cbde..f5ef169c48 100644
--- a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx
@@ -38,6 +38,12 @@ export type PickRegularFieldsFromInstillFormTreeOptions = {
   objectArrayIndex?: number;
   parentPath?: string;
   parentIsFormCondition?: boolean;
+
+  /** In the low code era, we no longer use the const's title to determine
+   * the conditional field select item's title. Now we are using the oneOf
+   * itme root level's title to determine the conditional field select item's title
+   * */
+  lowCodeComponentEraSchema?: boolean;
 };
 
 export function pickRegularFieldsFromInstillFormTree(
@@ -75,6 +81,7 @@ export function pickRegularFieldsFromInstillFormTree(
   const objectArrayIndex = options?.objectArrayIndex ?? undefined;
   const parentPath = options?.parentPath ?? undefined;
   const parentIsFormCondition = options?.parentIsFormCondition ?? false;
+  const lowCodeComponentEraSchema = options?.lowCodeComponentEraSchema ?? false;
 
   let title: Nullable<string> = null;
 
@@ -308,6 +315,7 @@ export function pickRegularFieldsFromInstillFormTree(
         }
         size={size}
         isHidden={tree.isHidden}
+        lowCodeComponentEraSchema={lowCodeComponentEraSchema}
       />
     );
   }
diff --git a/packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx b/packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx
index 374480ee13..ab1936c843 100644
--- a/packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx
@@ -37,6 +37,7 @@ export type UseInstillFormOptions = {
   | "supportInstillCredit"
   | "updateSupportInstillCredit"
   | "updateIsUsingInstillCredit"
+  | "lowCodeComponentEraSchema"
 >;
 
 export function useInstillForm(
@@ -66,7 +67,7 @@ export function useInstillForm(
   const updateForceOpenCollapsibleFormGroups =
     options?.updateForceOpenCollapsibleFormGroups;
   const updateIsUsingInstillCredit = options?.updateIsUsingInstillCredit;
-
+  const lowCodeComponentEraSchema = options?.lowCodeComponentEraSchema ?? false;
   const [formTree, setFormTree] = React.useState<InstillFormTree | null>(null);
   const [ValidatorSchema, setValidatorSchema] = React.useState<z.ZodTypeAny>(
     z.any(),
@@ -177,6 +178,7 @@ export function useInstillForm(
         forceOpenCollapsibleFormGroups,
         updateForceOpenCollapsibleFormGroups,
         updateIsUsingInstillCredit,
+        lowCodeComponentEraSchema,
       },
     );
 
@@ -201,6 +203,7 @@ export function useInstillForm(
     forceOpenCollapsibleFormGroups,
     updateForceOpenCollapsibleFormGroups,
     updateIsUsingInstillCredit,
+    lowCodeComponentEraSchema,
   ]);
 
   return {
diff --git a/packages/toolkit/src/view/settings/integrations/ConnectionForm.tsx b/packages/toolkit/src/view/settings/integrations/ConnectionForm.tsx
index 2b18a0f84b..c4809b94d5 100644
--- a/packages/toolkit/src/view/settings/integrations/ConnectionForm.tsx
+++ b/packages/toolkit/src/view/settings/integrations/ConnectionForm.tsx
@@ -47,6 +47,9 @@ export const ConnectionForm = ({
   const { fields, form, ValidatorSchema } = useInstillForm(
     schema || null,
     values || null,
+    {
+      lowCodeComponentEraSchema: true,
+    },
   );
 
   const [connectionId, setConnectionId] = React.useState("");