Dev

docker-compose-dev.yaml

@@ -309,7 +309,7 @@ services:
       - DOMINO_DB_HOST=domino_postgres
       - DOMINO_DB_PORT=5432
       - DOMINO_DB_NAME=postgres
-      - DOMINO_DEFAULT_PIECES_REPOSITORY_VERSION=0.4.2
+      - DOMINO_DEFAULT_PIECES_REPOSITORY_VERSION=0.4.3
       - DOMINO_DEFAULT_PIECES_REPOSITORY_TOKEN=${DOMINO_DEFAULT_PIECES_REPOSITORY_TOKEN}
       - DOMINO_GITHUB_ACCESS_TOKEN_WORKFLOWS=${DOMINO_GITHUB_ACCESS_TOKEN_WORKFLOWS}
       - DOMINO_GITHUB_WORKFLOWS_REPOSITORY=${DOMINO_GITHUB_WORKFLOWS_REPOSITORY}

frontend/src/components/CodeEditorInput/index.tsx

@@ -7,11 +7,16 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-const CodeEditorItem = React.forwardRef<HTMLTextAreaElement>(
-  ({ ...register }, ref) => (
+interface Props {
+  language?: string;
+  placeholder?: string;
+}
+
+const CodeEditorItem = React.forwardRef<HTMLTextAreaElement, Props>(
+  ({ language = "python", placeholder, ...register }, ref) => (
     <CodeEditor
-      language="python"
-      placeholder="Enter Python code."
+      language={language}
+      placeholder={placeholder ?? ""}
       padding={15}
       style={{
         fontSize: 12,
@@ -33,18 +38,30 @@ const CodeEditorItem = React.forwardRef<HTMLTextAreaElement>(
 
 CodeEditorItem.displayName = "CodeEditorItem";
 
-interface Props<T> {
+interface CodeEditorInputProps<T> {
   name: Path<T>;
+  language?: string;
+  placeholder?: string;
 }
 
-function CodeEditorInput<T extends FieldValues>({ name }: Props<T>) {
+function CodeEditorInput<T extends FieldValues>({
+  name,
+  language,
+  placeholder,
+}: CodeEditorInputProps<T>) {
   const { control } = useFormContext();
 
   return (
     <Controller
       name={name}
       control={control}
-      render={({ field }) => <CodeEditorItem {...field} />}
+      render={({ field }) => (
+        <CodeEditorItem
+          language={language}
+          placeholder={placeholder}
+          {...field}
+        />
+      )}
     />
   );
 }

frontend/src/components/Modal/index.tsx

@@ -0,0 +1,81 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Grid,
+} from "@mui/material";
+import React, { useCallback, useImperativeHandle, useState } from "react";
+
+interface Props {
+  title: string;
+  content?: string | React.ReactNode;
+
+  confirmFn?: () => void;
+  cancelFn?: () => void;
+}
+
+export interface ModalRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const Modal = React.forwardRef<ModalRef, Props>(
+  ({ cancelFn, confirmFn, title, content }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const open = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = useCallback(() => {
+      if (cancelFn) {
+        cancelFn();
+      }
+
+      setIsOpen(false);
+    }, []);
+
+    const handleConfirm = useCallback(() => {
+      if (confirmFn) {
+        confirmFn();
+      }
+
+      setIsOpen(false);
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      open,
+      close: handleClose,
+    }));
+
+    return (
+      <Dialog open={isOpen} onClose={handleClose}>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{content}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Grid container justifyContent="center" spacing={4}>
+            {cancelFn && (
+              <Grid item>
+                <Button onClick={handleClose} variant="contained">
+                  Cancel
+                </Button>
+              </Grid>
+            )}
+            <Grid item>
+              <Button onClick={handleConfirm} variant="contained">
+                OK
+              </Button>
+            </Grid>
+          </Grid>
+        </DialogActions>
+      </Dialog>
+    );
+  },
+);
+
+Modal.displayName = "Modal";

frontend/src/components/WorkflowPanel/DefaultNode/index.tsx

@@ -71,7 +71,7 @@ export const CustomNode = memo<DefaultNodeProps>(({ id, data, selected }) => {
       ...data.style.nodeStyle,
       display: "flex",
       flexDirection: "row",
-      justifyContent: "center",
+      justifyContent: "space-evenly",
       alignItems: "center",
 
       position: "relative",
@@ -88,7 +88,7 @@ export const CustomNode = memo<DefaultNodeProps>(({ id, data, selected }) => {
         backgroundColor: theme.palette.error.light,
         color: theme.palette.error.contrastText,
       }),
-    };
+    } satisfies CSSProperties;
   }, [data, selected]);
 
   const { sourcePosition, targetPosition } = useMemo(

frontend/src/components/WorkflowPanel/RunNode/index.tsx

@@ -88,7 +88,7 @@ const RunNode = memo<RunNodeProps>(({ id, data, selected }) => {
       ...data.style.nodeStyle,
       display: "flex",
       flexDirection: "row",
-      justifyContent: "center",
+      justifyContent: "space-evenly",
       alignItems: "center",
       textAlign: "center",
       position: "relative",

frontend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx

@@ -155,10 +155,40 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
     "type" in schema &&
     "widget" in schema &&
     schema.type === "string" &&
-    schema.widget === "codeeditor"
+    (schema.widget === "codeeditor" || schema.widget === "codeeditor-python")
   ) {
     inputElement = (
-      <CodeEditorInput<IWorkflowPieceData> name={`inputs.${itemKey}.value`} />
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="python"
+        placeholder="Enter Python code."
+      />
+    );
+  } else if (
+    "type" in schema &&
+    "widget" in schema &&
+    schema.type === "string" &&
+    schema.widget === "codeeditor-json"
+  ) {
+    inputElement = (
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="json"
+        placeholder="Enter JSON code."
+      />
+    );
+  } else if (
+    "type" in schema &&
+    "widget" in schema &&
+    schema.type === "string" &&
+    schema.widget === "codeeditor-sql"
+  ) {
+    inputElement = (
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="sql"
+        placeholder="Enter SQL code."
+      />
     );
   } else if (
     "type" in schema &&

frontend/src/features/workflowEditor/components/SidebarForm/index.tsx

@@ -33,7 +33,7 @@ const SidebarPieceForm: React.FC<ISidebarPieceFormProps> = (props) => {
   const { schema, formId, open, onClose, title } = props;
 
   const {
-    setForageWorkflowPiecesData,
+    setForageWorkflowPiecesDataById,
     fetchForageWorkflowPiecesDataById,
     setForageWorkflowPiecesOutputSchema,
     clearDownstreamDataById,
@@ -141,10 +141,10 @@ const SidebarPieceForm: React.FC<ISidebarPieceFormProps> = (props) => {
 
   const saveData = useCallback(async () => {
     if (formId && open) {
-      await setForageWorkflowPiecesData(formId, data as IWorkflowPieceData);
+      await setForageWorkflowPiecesDataById(formId, data as IWorkflowPieceData);
       await updateOutputSchema();
     }
-  }, [formId, open, setForageWorkflowPiecesData, data, updateOutputSchema]);
+  }, [formId, open, setForageWorkflowPiecesDataById, data, updateOutputSchema]);
 
   // load forage
   useEffect(() => {