From 732844d8c47f355f5e807a6fd08f5ad558a690cf Mon Sep 17 00:00:00 2001 From: EiffelFly <57251712+EiffelFly@users.noreply.github.com> Date: Fri, 29 Jul 2022 13:40:33 +0800 Subject: [PATCH] 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 | 2 +- .../CreateDestinationForm.tsx | 5 ++++- .../ConfigureModelInstanceForm.tsx | 1 + .../model/CreateModelForm/CreateModelForm.tsx | 1 - .../CreateNewModelInstanceFlow.tsx | 1 - .../UseExistingModeInstancelFlow.tsx | 2 -- src/lib/airbytes/airbyteSchemaToYup.ts | 3 --- .../airbytes/hooks/useBuildAirbyteFields.tsx | 19 ++++++++++++------- src/lib/dot/index.test.ts | 6 ++++++ src/services/transformation.ts | 3 --- yarn.lock | 8 ++++---- 11 files changed, 28 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index a8057acc4..2208adbf1 100644 --- a/package.json +++ b/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", diff --git a/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx b/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx index fd98a11bf..5117c6b6c 100644 --- a/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx +++ b/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx @@ -217,7 +217,10 @@ const CreateDestinationForm: FC = ({ } try { - formYup.validateSync(fieldValues, { abortEarly: false }); + formYup.validateSync(fieldValues, { + abortEarly: false, + strict: true, + }); } catch (error) { if (error instanceof ValidationError) { const errors = {} as AirbyteFieldErrors; diff --git a/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx b/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx index eb82b4545..ea724d1c6 100644 --- a/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx +++ b/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx @@ -44,6 +44,7 @@ const ConfigureModelInstanceForm: FC = ({ } }; + // TODO: remove this placeholder const handler = useCallback(() => { console.log("hi"); }, []); diff --git a/src/components/forms/model/CreateModelForm/CreateModelForm.tsx b/src/components/forms/model/CreateModelForm/CreateModelForm.tsx index 29153eba4..8e4d6d99a 100644 --- a/src/components/forms/model/CreateModelForm/CreateModelForm.tsx +++ b/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", diff --git a/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx b/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx index baa12df9c..0c421b833 100644 --- a/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx +++ b/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx @@ -80,7 +80,6 @@ const CreateNewModelInstanceFlow: FC = ({ setModelDefinitionOptions( modelDefinitions.data.map((e) => { - console.log(e.id); return { label: e.title, value: e.id, diff --git a/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/UseExistingModeInstancelFlow.tsx b/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/UseExistingModeInstancelFlow.tsx index ac22c99ed..081bc3c16 100644 --- a/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/UseExistingModeInstancelFlow.tsx +++ b/src/components/forms/pipeline/CreatePipelineForm/SetupModelStep/UseExistingModeInstancelFlow.tsx @@ -70,8 +70,6 @@ const UseExistingModeInstancelFlow: FC = ({ if (!values.model.existing.modelInstanceName || !modelInstanceOptions) return null; - console.log(values.model.existing.modelInstanceName); - return ( modelInstanceOptions.find( (e) => e.value === values.model.existing.modelInstanceName diff --git a/src/lib/airbytes/airbyteSchemaToYup.ts b/src/lib/airbytes/airbyteSchemaToYup.ts index 8e0a6b9cc..d37244c43 100644 --- a/src/lib/airbytes/airbyteSchemaToYup.ts +++ b/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": { diff --git a/src/lib/airbytes/hooks/useBuildAirbyteFields.tsx b/src/lib/airbytes/hooks/useBuildAirbyteFields.tsx index 7a9f3fe01..8e8a85588 100644 --- a/src/lib/airbytes/hooks/useBuildAirbyteFields.tsx +++ b/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} diff --git a/src/lib/dot/index.test.ts b/src/lib/dot/index.test.ts index b75d1327c..0b5a75d38 100644 --- a/src/lib/dot/index.test.ts +++ b/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"); diff --git a/src/services/transformation.ts b/src/services/transformation.ts index cf16a3dbc..4a4e7f6be 100644 --- a/src/services/transformation.ts +++ b/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); } diff --git a/yarn.lock b/yarn.lock index 1e5abecad..cb2a23e69 100644 --- a/yarn.lock +++ b/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"