Merge pull request #266 from Tauffer-Consulting/fix/upstream-option-f…

…or-anyof-array fix(frontend): upstream option for anyof array
Tauffer-Consulting · Apr 3, 2024 · 0a99aac · 0a99aac
2 parents 95f91f6 + 7d81bf3
commit 0a99aac
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 91 deletions.
diff --git a/...or/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/ArrayInput.tsx b/...or/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/ArrayInput.tsx
@@ -10,7 +10,11 @@ import { useWatch, useFieldArray, useFormContext } from "react-hook-form";
 import { disableCheckboxOptions } from "../../../../../../utils/disableCheckboxOptions";
 
 import SelectUpstreamInput from "./SelectUpstreamInput";
-import { extractArrayDefaultValue, isObjectType } from "./utils";
+import {
+  extractArrayDefaultValue,
+  extractArrayItemSchema,
+  isObjectType,
+} from "./utils";
 
 import { InputElement } from ".";
 
@@ -33,16 +37,9 @@ const ArrayInput: React.FC<ArrayInputItemProps> = React.memo(
     const formsData = useWatch({ name });
 
     const subItemSchema = useMemo(() => {
-      let subItemSchema =
-        "items" in schema
-          ? schema.items
-          : (schema.anyOf.find((s) => s.type === "array") as any)?.items;
-      if (subItemSchema && "$ref" in subItemSchema && subItemSchema?.$ref) {
-        const subItemSchemaName = subItemSchema.$ref.split("/").pop() as string;
-        subItemSchema = definitions?.[subItemSchemaName];
-      }
+      const subItemSchema = extractArrayItemSchema(schema, definitions);
 
-      return subItemSchema;
+      return subItemSchema as any;
     }, [definitions, schema]);
 
     const handleAddInput = useCallback(() => {

diff --git a/.../components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/InputElement.tsx b/.../components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/InputElement.tsx
@@ -18,6 +18,7 @@ import {
   isCodeEditorType,
   isDateOrTimeType,
   isEnumType,
+  isIntegerType,
   isNumberType,
   isObjectType,
   isStringType,
@@ -49,8 +50,6 @@ const InputElement: React.FC<Props> = React.memo(
     isItemArray,
     isItemObject = false,
   }) => {
-    const optionalType = getOptionalType(schema);
-
     const upstreamKey = useMemo(() => {
       if (!!isItemArray || !!isItemObject) {
         return itemKey
@@ -83,10 +82,8 @@ const InputElement: React.FC<Props> = React.memo(
           definitions={definitions as Definitions}
         />
       );
-    } else if (isNumberType(schema, optionalType)) {
-      const isInteger =
-        ("type" in schema && schema.type === "integer") ||
-        optionalType === "integer";
+    } else if (isNumberType(schema) || isIntegerType(schema)) {
+      const isInteger = isIntegerType(schema);
 
       return (
         <NumberInput<WorkflowPieceData>
@@ -109,7 +106,8 @@ const InputElement: React.FC<Props> = React.memo(
           label={schema.title}
         />
       );
-    } else if (isDateOrTimeType(schema, optionalType)) {
+    } else if (isDateOrTimeType(schema)) {
+      const optionalType = getOptionalType(schema);
       return (
         <DatetimeInput<WorkflowPieceData>
           name={isItemArray ? `${itemKey}.value` : itemKey}
@@ -120,7 +118,7 @@ const InputElement: React.FC<Props> = React.memo(
           }
         />
       );
-    } else if (isCodeEditorType(schema, optionalType)) {
+    } else if (isCodeEditorType(schema)) {
       const language = extractCodeEditorLanguage(schema as StringProperty);
       return (
         <CodeEditorInput<WorkflowPieceData>
@@ -129,15 +127,15 @@ const InputElement: React.FC<Props> = React.memo(
           placeholder={`Enter your ${language} code here.`}
         />
       );
-    } else if (isTextAreaType(schema, optionalType)) {
+    } else if (isTextAreaType(schema)) {
       return (
         <TextAreaInput<WorkflowPieceData>
           variant="outlined"
           name={isItemArray ? `${itemKey}.value` : itemKey}
           label={schema.title}
         />
       );
-    } else if (isStringType(schema, optionalType)) {
+    } else if (isStringType(schema)) {
       return (
         <TextInput<WorkflowPieceData>
           variant="outlined"

diff --git a/...owEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/index.ts b/...owEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/index.ts
@@ -1,3 +1,3 @@
 export { ArrayInput } from "./ArrayInput";
-export { isArrayInput } from "./utils";
+export { isArrayType } from "./utils";
 export { InputElement } from "./InputElement";
diff --git a/...owEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/utils.ts b/...owEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/utils.ts
@@ -1,7 +1,7 @@
 import { getDefinition, getFromUpstream } from "features/workflowEditor/utils";
 
 export const getOptionalType = (
-  property: Property | EnumDefinition | EnumDefinition,
+  property: Property | EnumDefinition,
 ): TypeName | FormatType | undefined => {
   if (property && "anyOf" in property && property.anyOf.length === 2) {
     const hasNullType = property.anyOf.some((item) => item.type === "null");
@@ -15,12 +15,12 @@ export const getOptionalType = (
   }
 };
 
-export const isStringType = (
-  property: Property | EnumDefinition,
-  anyOfType?: TypeName | WidgetType | FormatType,
-) => {
+export const isStringType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+
   return (
-    ("type" in property && property.type === "string") || anyOfType === "string"
+    ("type" in property && property.type === "string") ||
+    optionalType === "string"
   );
 };
 
@@ -31,83 +31,99 @@ export const isEnumType = (
   return "allOf" in property && property.allOf.length > 0 && definitions;
 };
 
-export const isNumberType = (
-  property: Property | EnumDefinition,
-  anyOfType?: TypeName | FormatType,
-) => {
+export const isNumberType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
   return (
-    ("type" in property && property.type === "number" && !anyOfType) ||
-    anyOfType === "number" ||
-    ("type" in property && property.type === "integer" && !anyOfType) ||
-    anyOfType === "integer"
+    ("type" in property && property.type === "number" && !optionalType) ||
+    optionalType === "number"
+  );
+};
+
+export const isIntegerType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+  return (
+    ("type" in property && property.type === "integer" && !optionalType) ||
+    optionalType === "integer"
   );
 };
 
 export const isBooleanType = (property: Property | EnumDefinition) => {
   return "type" in property && property.type === "boolean";
 };
 
-export const isDateOrTimeType = (
-  property: Property | EnumDefinition,
-  anyOfType?: TypeName | WidgetType | FormatType,
-) => {
+export const isDateOrTimeType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+
   return (
     ("type" in property &&
       "format" in property &&
       property.type === "string" &&
       property.format === "date" &&
-      !anyOfType) ||
-    anyOfType === "date" ||
+      !optionalType) ||
+    optionalType === "date" ||
     ("type" in property &&
       "format" in property &&
       property.type === "string" &&
       property.format === "time" &&
-      !anyOfType) ||
-    anyOfType === "time" ||
+      !optionalType) ||
+    optionalType === "time" ||
     ("type" in property &&
       "format" in property &&
       property.type === "string" &&
       property.format === "date-time" &&
-      !anyOfType) ||
-    anyOfType === "date-time"
+      !optionalType) ||
+    optionalType === "date-time"
   );
 };
 
-export const isCodeEditorType = (
-  property: Property | EnumDefinition,
-  anyOfType?: TypeName | FormatType,
-) => {
+export const isCodeEditorType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+
   return (
     ("type" in property &&
       "widget" in property &&
       property.type === "string" &&
       property.widget?.includes("codeeditor")) ??
-    (anyOfType === "string" &&
+    (optionalType === "string" &&
       (property as StringProperty).widget?.includes("codeeditor"))
   );
 };
 
-export const isTextAreaType = (
-  property: Property | EnumDefinition,
-  anyOfType?: TypeName | FormatType,
-) => {
+export const isTextAreaType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+
   return (
     "widget" in property &&
     property.widget === "textarea" &&
-    anyOfType === "string"
+    optionalType === "string"
   );
 };
 
-export const isArrayInput = (
-  property: Property | EnumDefinition,
-  optionalType?: TypeName | FormatType,
-) => {
+export const isArrayType = (property: Property | EnumDefinition) => {
+  const optionalType = getOptionalType(property);
+
   return (
     ("type" in property && property.type === "array") ||
     (optionalType && optionalType === "array")
   );
 };
 
+export const extractArrayItemSchema = (
+  property: ArrayProperty | AnyOfArray,
+  definitions: Definitions,
+) => {
+  let subItemSchema =
+    "items" in property
+      ? property.items
+      : (property.anyOf.find((s) => s.type === "array") as any)?.items;
+  if (subItemSchema && "$ref" in subItemSchema && subItemSchema?.$ref) {
+    const subItemSchemaName = subItemSchema.$ref.split("/").pop() as string;
+    subItemSchema = definitions?.[subItemSchemaName];
+  }
+
+  return subItemSchema as Omit<SimpleProperty, "default"> | ObjectDefinition;
+};
+
 export const isObjectType = (property: ObjectDefinition) => {
   return "type" in property && property.type === "object";
 };
@@ -158,8 +174,6 @@ export const extractArrayDefaultValue = (
       value: emptyObject(subProperty),
     };
 
-    console.log("ta caindo aqui", response);
-
     return response;
   } else if (
     "anyOf" in property &&

diff --git a/...tures/workflowEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/index.tsx b/...tures/workflowEditor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/index.tsx
@@ -7,8 +7,7 @@ import {
 import React, { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 
-import { InputElement, ArrayInput, isArrayInput } from "./InputElement";
-import { getOptionalType } from "./InputElement/utils";
+import { InputElement, ArrayInput, isArrayType } from "./InputElement";
 
 interface PieceFormItemProps {
   schema: Property;
@@ -31,8 +30,6 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
     name: `inputs.${itemKey}.fromUpstream`,
   });
 
-  const optionalType = getOptionalType(schema);
-
   return (
     <Box
       display="flex"
@@ -41,7 +38,7 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
       sx={{ paddingTop: "10px" }}
     >
       <Grid item xs={10}>
-        {isArrayInput(schema, optionalType) ? (
+        {isArrayType(schema) ? (
           <ArrayInput
             schema={schema as any}
             inputKey={`inputs.${itemKey}`}

diff --git a/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx b/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx
@@ -40,10 +40,11 @@ export const PieceFormDrawer: React.FC<ISidebarPieceFormProps> = (props) => {
   } = useWorkflowsEditor();
 
   const PieceFormSchema = useMemo(() => {
+    const inputsSchema = createInputsSchemaValidation(schema);
     return yup.object().shape({
       storage: storageFormSchema,
       containerResources: ContainerResourceFormSchema,
-      inputs: createInputsSchemaValidation(schema),
+      inputs: inputsSchema,
     });
   }, [schema]);