From 2b1fd67606f0408969f4be9056ebaa248909eb99 Mon Sep 17 00:00:00 2001 From: Nathan Vieira Marcelino Date: Thu, 4 Apr 2024 11:10:04 -0300 Subject: [PATCH] feat: add helper icon button on form fix: #263 --- .../Drawers/PieceFormDrawer/index.tsx | 252 ++++++++++-------- .../components/WorkflowEditor/index.tsx | 19 +- 2 files changed, 154 insertions(+), 117 deletions(-) diff --git a/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx b/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx index 448e7946..427b33c3 100644 --- a/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx +++ b/frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx @@ -1,4 +1,5 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import HelpIcon from "@mui/icons-material/Help"; import { Drawer, Grid, @@ -6,15 +7,19 @@ import { Accordion, AccordionSummary, AccordionDetails, + IconButton, } from "@mui/material"; import { useWorkflowsEditor } from "features/workflowEditor/context"; import { type WorkflowPieceData } from "features/workflowEditor/context/types"; import { createInputsSchemaValidation } from "features/workflowEditor/utils/validation"; +import theme from "providers/theme.config"; import React, { useCallback, useEffect, useMemo, useState } from "react"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { yupResolver } from "utils"; import * as yup from "yup"; +import PieceDocsPopover from "../PiecesDrawer/pieceDocsPopover"; + import ContainerResourceForm, { ContainerResourceFormSchema, } from "./ContainerResourceForm"; @@ -23,14 +28,14 @@ import StorageForm, { storageFormSchema } from "./StorageForm"; interface ISidebarPieceFormProps { formId: string; - schema: Schema; + piece: Piece; title: string; open: boolean; onClose: (event: any) => void; } export const PieceFormDrawer: React.FC = (props) => { - const { schema, formId, open, onClose, title } = props; + const { piece, formId, open, onClose, title } = props; const { setWorkflowPieceDataById, @@ -39,14 +44,27 @@ export const PieceFormDrawer: React.FC = (props) => { clearDownstreamDataById, } = useWorkflowsEditor(); + const [popoverOpen, setPopoverOpen] = useState(false); + + const handlePopoverClose = useCallback( + (_: React.MouseEvent, reason: any) => { + if (reason && reason === "backdropClick") return; + setPopoverOpen(false); + }, + [setPopoverOpen], + ); + const handlePopoverOpen = useCallback(() => { + setPopoverOpen(true); + }, [setPopoverOpen]); + const PieceFormSchema = useMemo(() => { - const inputsSchema = createInputsSchemaValidation(schema); + const inputsSchema = createInputsSchemaValidation(piece.input_schema); return yup.object().shape({ storage: storageFormSchema, containerResources: ContainerResourceFormSchema, inputs: inputsSchema, }); - }, [schema]); + }, [piece]); const resolver = yupResolver(PieceFormSchema); @@ -72,17 +90,17 @@ export const PieceFormDrawer: React.FC = (props) => { }, [formId, getWorkflowPieceDataById, reset, trigger]); const updateOutputSchema = useCallback(() => { - if (schema?.properties) { - const outputSchemaProperty = Object.keys(schema.properties).find( - (key) => { - const inputSchema = schema.properties[key]; - return ( - "items" in inputSchema && - "$ref" in inputSchema.items && - inputSchema.items.$ref === "#/$defs/OutputModifierModel" - ); - }, - ); + if (piece.input_schema?.properties) { + const outputSchemaProperty = Object.keys( + piece.input_schema.properties, + ).find((key) => { + const inputSchema = piece.input_schema.properties[key]; + return ( + "items" in inputSchema && + "$ref" in inputSchema.items && + inputSchema.items.$ref === "#/$defs/OutputModifierModel" + ); + }); if (outputSchemaProperty && data?.inputs?.[outputSchemaProperty]?.value) { const formsData = data.inputs[outputSchemaProperty].value; @@ -133,7 +151,7 @@ export const PieceFormDrawer: React.FC = (props) => { } } }, [ - schema, + piece, data.inputs, setWorkflowPieceOutputSchema, formId, @@ -167,106 +185,122 @@ export const PieceFormDrawer: React.FC = (props) => { } return ( - -
+ + - - {title} - - - -
- - - - Input Arguments - - - - - Upstream - + {title} + + + + + + + +
+ + + + Input Arguments + + + + + Upstream + + - - - {formLoaded && ( - - - - - + + {formLoaded && ( + + + + + -
+
- - }> - - Advanced Options - - - - -
- - - - - - )} - -
- -
-
- + + }> + + Advanced Options + + + + +
+ + + + + + )} + +
+ +
+
+ + ); }; diff --git a/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx b/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx index 8be16c7a..1ae5db6b 100644 --- a/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx +++ b/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx @@ -30,7 +30,8 @@ export const WorkflowsEditorComponent: React.FC = () => { const [sidebarPieceDrawer, setSidebarPieceDrawer] = useState(false); const [formId, setFormId] = useState(""); const [formTitle, setFormTitle] = useState(""); - const [formSchema, setFormSchema] = useState({}); + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + const [piece, setPiece] = useState({} as Piece); const [menuOpen, setMenuOpen] = useState(false); const [loading, setBackdropIsOpen] = useState(false); const [orientation, setOrientation] = useState<"horizontal" | "vertical">( @@ -187,12 +188,14 @@ export const WorkflowsEditorComponent: React.FC = () => { const onNodeDoubleClick = useCallback( (_e: any, node: Node) => { const pieceNode = getWorkflowPieceById(node.id); - setFormSchema(pieceNode?.input_schema); - setFormId(node.id); - setFormTitle(() => { - return pieceNode?.name ? pieceNode.name : ""; - }); - setSidebarPieceDrawer(true); + if (pieceNode) { + setPiece(pieceNode); + setFormId(node.id); + setFormTitle(() => { + return pieceNode?.name ? pieceNode.name : ""; + }); + setSidebarPieceDrawer(true); + } }, [getWorkflowPieceById], ); @@ -256,7 +259,7 @@ export const WorkflowsEditorComponent: React.FC = () => {