fix: fix can't correctly create Airbyte destination (#185)

Because

- The schema validation is not correct
- HTML input element value is not correct

This commit

- Fix above issue, now console can correctly create Airbyte destination

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^0.4.1",
-    "@instill-ai/design-system": "^0.0.91",
+    "@instill-ai/design-system": "^0.0.99",
     "@types/json-schema": "^7.0.11",
     "axios": "^0.27.2",
     "clsx": "^1.1.1",

src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx

@@ -217,7 +217,10 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
     }
 
     try {
-      formYup.validateSync(fieldValues, { abortEarly: false });
+      formYup.validateSync(fieldValues, {
+        abortEarly: false,
+        strict: true,
+      });
     } catch (error) {
       if (error instanceof ValidationError) {
         const errors = {} as AirbyteFieldErrors;

src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx

@@ -44,6 +44,7 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
     }
   };
 
+  // TODO: remove this placeholder
   const handler = useCallback(() => {
     console.log("hi");
   }, []);

src/components/forms/model/CreateModelForm/CreateModelForm.tsx

@@ -291,7 +291,6 @@ const CreateNewModelFlow: FC = () => {
           },
           onError: (error) => {
             if (error instanceof AxiosError) {
-              console.log(error);
               setCreateModelMessageBoxState(() => ({
                 activate: true,
                 status: "error",

src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx

@@ -80,7 +80,6 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
 
     setModelDefinitionOptions(
       modelDefinitions.data.map((e) => {
-        console.log(e.id);
         return {
           label: e.title,
           value: e.id,

src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/UseExistingModeInstancelFlow.tsx

@@ -70,8 +70,6 @@ const UseExistingModeInstancelFlow: FC<UseExistingModeInstancelFlowProps> = ({
     if (!values.model.existing.modelInstanceName || !modelInstanceOptions)
       return null;
 
-    console.log(values.model.existing.modelInstanceName);
-
     return (
       modelInstanceOptions.find(
         (e) => e.value === values.model.existing.modelInstanceName

src/lib/airbytes/airbyteSchemaToYup.ts

@@ -57,7 +57,6 @@ const airbyteSchemaToYup = (
             )
           );
       }
-      //console.log("array", schema);
       break;
     }
     case "object": {
@@ -84,7 +83,6 @@ const airbyteSchemaToYup = (
         objectSchema = objectSchema.default({});
       }
 
-      //console.log("object", objectSchema);
       schema = objectSchema;
       break;
     }
@@ -97,7 +95,6 @@ const airbyteSchemaToYup = (
           "form.pattern.error"
         );
       }
-      //console.log("string", schema);
       break;
     }
     case "boolean": {

src/lib/airbytes/hooks/useBuildAirbyteFields.tsx

@@ -30,7 +30,6 @@ const useBuildAirbyteFields = (
 ) => {
   const fields = useMemo(() => {
     if (!formTree) return <></>;
-    console.log("new fields");
     return pickComponent(
       formTree,
       disabledAll,
@@ -294,19 +293,25 @@ export const pickComponent = (
       placeholder={placeholder ?? ""}
       error={errors ? errors[formTree.path] ?? null : null}
       value={values ? (values[formTree.path] as string) ?? "" : ""}
-      onChangeInput={(_, value) =>
+      onChangeInput={(_, value) => {
+        // In HTML type=number input, the value is still string, we need to transfer it into number
+        // But in HTML number input, user can input e as exponential, parseInt will return NaN.
+        // In this case, we pass the value to the Yup, and let it guard for us.
+
         setValues((prev) => {
-          console.log(formTree);
           const configuration = prev?.configuration || {};
-          dot.setter(configuration, formTree.path, value);
-          console.log(configuration);
+          dot.setter(
+            configuration,
+            formTree.path,
+            inputType === "number" ? parseInt(value) : value
+          );
           return {
             ...prev,
             configuration: configuration,
             [formTree.path]: value,
           };
-        })
-      }
+        });
+      }}
       autoComplete="off"
       readOnly={false}
       type={inputType}

src/lib/dot/index.test.ts

@@ -25,6 +25,12 @@ describe("getter", () => {
 });
 
 describe("setter", () => {
+  it("sets empty object with number", () => {
+    const obj = {};
+    dot.setter(obj, "foo", 123);
+    expect(obj).toEqual({ foo: 123 });
+  });
+
   it("sets empty object", () => {
     const obj = {};
     dot.setter(obj, "foo", "bar");

src/services/transformation.ts

@@ -82,9 +82,6 @@ export const transformSchemaToFormFields = (
     formField.placeholder = fieldConfig.ui_placeholder ?? null;
     formField.disabled = fieldConfig.ui_disabled ?? false;
     formField.default = fieldConfig.default ?? null;
-
-    console.log(formField);
-
     formFields.push(formField);
   }
 

yarn.lock

@@ -1742,10 +1742,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@instill-ai/design-system@^0.0.91":
-  version "0.0.91"
-  resolved "https://registry.yarnpkg.com/@instill-ai/design-system/-/design-system-0.0.91.tgz#32e2e8f979ab1bb9d29596169912a20b2b90fb24"
-  integrity sha512-S5wkPM6/mq8LU8LTIBIafrEPGMahx0eGM8Ie95ok5Db28ng5beQsWaiv3LKmkfzSA/qsPmPE/8gUdClTYPkq/Q==
+"@instill-ai/design-system@^0.0.99":
+  version "0.0.99"
+  resolved "https://registry.yarnpkg.com/@instill-ai/design-system/-/design-system-0.0.99.tgz#a6953fb48f8d06b37f87c9dce7bdd14cc162dfe2"
+  integrity sha512-dfXXuawkoxzByYmiP1WihzC2h6ihToIvHiX04qM3qVt9DeakPEbY+vJtyJdeBDlQUNTkbV3s+iPnotkNPifkyQ==
   dependencies:
     sanitize-html "^2.7.0"