Skip to content

Commit

Permalink
Merge pull request #268 from Tauffer-Consulting/feat/helper-button-on…
Browse files Browse the repository at this point in the history 
…-form

feat: add helper icon button on form
  • Loading branch information
@vinicvaz
vinicvaz authored Apr 4, 2024
2 parents afecf1c + 2b1fd67 commit baa70ed
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 117 deletions.
252 changes: 143 additions & 109 deletions frontend/src/features/workflowEditor/components/Drawers/PieceFormDrawer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import HelpIcon from "@mui/icons-material/Help";
import {
Drawer,
Grid,
Typography,
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";
Expand All @@ -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<ISidebarPieceFormProps> = (props) => {
const { schema, formId, open, onClose, title } = props;
const { piece, formId, open, onClose, title } = props;

const {
setWorkflowPieceDataById,
Expand All @@ -39,14 +44,27 @@ export const PieceFormDrawer: React.FC<ISidebarPieceFormProps> = (props) => {
clearDownstreamDataById,
} = useWorkflowsEditor();

const [popoverOpen, setPopoverOpen] = useState(false);

const handlePopoverClose = useCallback(
(_: React.MouseEvent<HTMLButtonElement>, 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);

Expand All @@ -72,17 +90,17 @@ export const PieceFormDrawer: React.FC<ISidebarPieceFormProps> = (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;
Expand Down Expand Up @@ -133,7 +151,7 @@ export const PieceFormDrawer: React.FC<ISidebarPieceFormProps> = (props) => {
}
}
}, [
schema,
piece,
data.inputs,
setWorkflowPieceOutputSchema,
formId,
Expand Down Expand Up @@ -167,106 +185,122 @@ export const PieceFormDrawer: React.FC<ISidebarPieceFormProps> = (props) => {
}

return (
<Drawer
anchor="left"
open={open}
onClose={onClose}
sx={{
"& .MuiDrawer-paper": {
marginTop: "4rem",
width: "33%",
maxWidth: "500px",
minWidth: "300px",
},
}}
slotProps={{ backdrop: { style: { backgroundColor: "transparent" } } }}
>
<div
style={{
width: "100%",
maxWidth: "500px",
minWidth: "300px",
paddingLeft: "20px",
paddingRight: "20px",
<>
<PieceDocsPopover
piece={piece}
popoverOpen={popoverOpen}
handlePopoverClose={handlePopoverClose}
/>
<Drawer
anchor="left"
open={open}
onClose={onClose}
sx={{
"& .MuiDrawer-paper": {
marginTop: "4rem",
width: "33%",
maxWidth: "500px",
minWidth: "300px",
},
}}
slotProps={{ backdrop: { style: { backgroundColor: "transparent" } } }}
>
<Typography
variant="h5"
component="h5"
sx={{ marginTop: "20px", marginBottom: "20px" }}
<div
style={{
width: "100%",
maxWidth: "500px",
minWidth: "300px",
paddingLeft: "20px",
paddingRight: "20px",
}}
>
{title}
</Typography>

<Grid container>
<div
style={{
display: "flex",
flexDirection: "column",
maxWidth: "100%",
}}
<Typography
variant="h5"
component="h5"
sx={{ marginTop: "20px", marginBottom: "20px" }}
>
<Grid container spacing={2} sx={{ marginBottom: "20px" }}>
<Grid item xs={10}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Input Arguments
</Typography>
</Grid>
<Grid item xs={12 - 10}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Upstream
</Typography>
{title}

<IconButton sx={{ padding: 0 }} onClick={handlePopoverOpen}>
<HelpIcon
sx={{ height: "20px", color: theme.palette.primary.main }}
/>
</IconButton>
</Typography>

<Grid container>
<div
style={{
display: "flex",
flexDirection: "column",
maxWidth: "100%",
}}
>
<Grid container spacing={2} sx={{ marginBottom: "20px" }}>
<Grid item xs={10}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Input Arguments
</Typography>
</Grid>
<Grid item xs={12 - 10}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Upstream
</Typography>
</Grid>
</Grid>
</Grid>

<Grid container sx={{ paddingBottom: "25px" }}>
{formLoaded && (
<FormProvider {...methods}>
<Grid item xs={12} className="sidebar-jsonforms-grid">
<Grid item xs={12}>
<PieceForm formId={formId} schema={schema} />
</Grid>
<Grid container sx={{ paddingBottom: "25px" }}>
{formLoaded && (
<FormProvider {...methods}>
<Grid item xs={12} className="sidebar-jsonforms-grid">
<Grid item xs={12}>
<PieceForm
formId={formId}
schema={piece.input_schema}
/>
</Grid>

<div style={{ marginBottom: "50px" }} />
<div style={{ marginBottom: "50px" }} />

<Accordion
sx={{
"&.MuiAccordion-root:before": {
display: "none",
},
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Advanced Options
</Typography>
</AccordionSummary>
<AccordionDetails>
<StorageForm />
<div style={{ marginBottom: "50px" }} />
<ContainerResourceForm />
</AccordionDetails>
</Accordion>
</Grid>
</FormProvider>
)}
</Grid>
</div>
</Grid>
<div style={{ marginBottom: "70px" }} />
</div>
</Drawer>
<Accordion
sx={{
"&.MuiAccordion-root:before": {
display: "none",
},
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography
variant="subtitle2"
component="div"
sx={{ flexGrow: 1, borderBottom: "1px solid;" }}
>
Advanced Options
</Typography>
</AccordionSummary>
<AccordionDetails>
<StorageForm />
<div style={{ marginBottom: "50px" }} />
<ContainerResourceForm />
</AccordionDetails>
</Accordion>
</Grid>
</FormProvider>
)}
</Grid>
</div>
</Grid>
<div style={{ marginBottom: "70px" }} />
</div>
</Drawer>
</>
);
};
19 changes: 11 additions & 8 deletions frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export const WorkflowsEditorComponent: React.FC = () => {
const [sidebarPieceDrawer, setSidebarPieceDrawer] = useState(false);
const [formId, setFormId] = useState<string>("");
const [formTitle, setFormTitle] = useState<string>("");
const [formSchema, setFormSchema] = useState<any>({});
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const [piece, setPiece] = useState<Piece>({} as Piece);
const [menuOpen, setMenuOpen] = useState(false);
const [loading, setBackdropIsOpen] = useState(false);
const [orientation, setOrientation] = useState<"horizontal" | "vertical">(
Expand Down Expand Up @@ -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],
);
Expand Down Expand Up @@ -256,7 +259,7 @@ export const WorkflowsEditorComponent: React.FC = () => {
<PieceFormDrawer
title={formTitle}
formId={formId}
schema={formSchema}
piece={piece}
open={sidebarPieceDrawer}
onClose={toggleSidebarPieceDrawer(false)}
/>
Expand Down

0 comments on commit baa70ed

Please sign in to comment.