WIP

frontend/src/features/myWorkflows/api/workflow/getWorkflowId.ts

@@ -5,11 +5,11 @@ import { dominoApiClient } from "services/clients/domino.client";
 import useSWR from "swr";
 
 interface IGetWorkflowIdParams {
-  id: string;
+  id?: string;
 }
 
-const getWorkflowUrl = (workspaceId: string, id: string) =>
-  `/workspaces/${workspaceId}/workflows/${id}`;
+const getWorkflowUrl = (workspaceId: string, id?: string) =>
+  id ? `/workspaces/${workspaceId}/workflows/${id}` : null;
 
 /**
  * Get workflow by id using GET /workflow
@@ -18,19 +18,21 @@ const getWorkflowUrl = (workspaceId: string, id: string) =>
 const getWorkflowId: (
   workspaceId: string,
   params: IGetWorkflowIdParams,
-) => Promise<AxiosResponse<IGetWorkflowIdResponseInterface>> = async (
-  workspaceId,
-  params,
-) => {
-  return await dominoApiClient.get(getWorkflowUrl(workspaceId, params.id));
+) => Promise<
+  AxiosResponse<IGetWorkflowIdResponseInterface> | undefined
+> = async (workspaceId, params) => {
+  const url = getWorkflowUrl(workspaceId, params.id);
+  if (url) {
+    return await dominoApiClient.get(url);
+  }
 };
 
 /**
  * Get workflow by id
  * @param params `{ workspaceId: number, id: string }`
  * @returns workflow fetcher fn
  */
-export const useAuthenticatedGetWorkflowId = ({ id }: { id: string }) => {
+export const useAuthenticatedGetWorkflowId = ({ id }: IGetWorkflowIdParams) => {
   const { workspace } = useWorkspaces();
 
   if (!workspace)
@@ -40,15 +42,13 @@ export const useAuthenticatedGetWorkflowId = ({ id }: { id: string }) => {
 
   // todo add swr ?
   const fetcher = async (params: IGetWorkflowIdParams) => {
-    return await getWorkflowId(workspace.id, params).then((data) => data.data);
+    return await getWorkflowId(workspace.id, params).then((data) => data?.data);
   };
 
-  return useSWR(
-    getWorkflowUrl(workspace.id, id),
-    async () => await fetcher({ id }),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    },
-  );
+  const key = getWorkflowUrl(workspace.id, id);
+
+  return useSWR(key, async () => await fetcher({ id }), {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
 };

frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx

@@ -81,6 +81,7 @@ export const WorkflowDetail: React.FC = () => {
           const responses = await Promise.all(promises);
           allTasks.push(...responses);
         }
+        console.log("allTasks", allTasks);
 
         const nodes: RunNode[] = [];
         const tasks: IWorkflowRunTaskExtended[] = [];

frontend/src/features/myWorkflows/components/WorkflowsList/index.tsx

@@ -159,7 +159,7 @@ export const WorkflowList: React.FC = () => {
         event.target.classList.contains(".action-button");
       if (!isActionButtonClick) {
         if (params.row.status !== "failed" && params.row.status !== "creating")
-          navigate(`/workflows/${params.id}`);
+          navigate(`/my-workflows/${params.id}`);
       }
     },
     [navigate],

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

@@ -0,0 +1,124 @@
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Container,
+  Divider,
+  Grid,
+  Typography,
+} from "@mui/material";
+import Pagination from "@mui/material/Pagination";
+import Stack from "@mui/material/Stack";
+import { Modal, type ModalRef } from "components/Modal";
+import {
+  useAuthenticatedGetWorkflowId,
+  useAuthenticatedGetWorkflows,
+} from "features/myWorkflows";
+import { type IWorkflow } from "features/myWorkflows/types";
+import theme from "providers/theme.config";
+import { forwardRef, type ForwardedRef, useState, useMemo } from "react";
+
+interface MyWorkflowGalleryModalRef extends ModalRef {}
+
+interface MyWorkflowGalleryModalProps {
+  confirmFn: (json: any) => void;
+}
+
+const MyWorkflowExamplesGalleryModal = forwardRef(
+  (
+    props: MyWorkflowGalleryModalProps,
+    ref: ForwardedRef<MyWorkflowGalleryModalRef>,
+  ) => {
+    const [page, setPage] = useState(0);
+    const [selected, setSelected] = useState<number | null>(null);
+
+    const { data: workflows } = useAuthenticatedGetWorkflows(page, 9);
+
+    const { data: workflow } = useAuthenticatedGetWorkflowId({
+      id: selected !== null ? String(selected) : undefined,
+    });
+
+    const cardsContents = useMemo<IWorkflow[]>(
+      () => workflows?.data ?? [],
+      [workflows],
+    );
+
+    return (
+      <Modal
+        title="Example Workflows Gallery"
+        maxWidth={"md"}
+        fullWidth={true}
+        content={
+          <Container>
+            <Grid container justifyContent="center">
+              {cardsContents.map((card, index) => (
+                <Grid item key={index} xs={12} sm={4} md={4}>
+                  <Card
+                    elevation={4}
+                    sx={{
+                      height: "200px",
+                      backgroundColor: theme.palette.grey[100],
+                    }}
+                  >
+                    <CardActionArea
+                      sx={{ height: "100%" }}
+                      onClick={() => {
+                        setSelected((s) => (s === card.id ? null : card.id));
+                      }}
+                    >
+                      <CardContent
+                        sx={{
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          height: "100%",
+                        }}
+                      >
+                        {selected === card.id && (
+                          <CheckCircleIcon
+                            sx={{
+                              position: "absolute",
+                              top: 10,
+                              right: 10,
+                              color: theme.palette.success.light,
+                              borderRadius: "50%",
+                            }}
+                          />
+                        )}
+                        <Typography variant="h3">{card.name}</Typography>
+                      </CardContent>
+                    </CardActionArea>
+                  </Card>
+                </Grid>
+              ))}
+              <Grid item xs={12}>
+                <Divider sx={{ height: 20 }} />
+              </Grid>
+              <Grid xs={12} item>
+                <Stack spacing={2} alignItems="center">
+                  <Pagination
+                    count={workflows?.metadata?.last_page}
+                    onChange={(_, p) => {
+                      setPage(p - 1);
+                    }}
+                  />
+                </Stack>
+              </Grid>
+            </Grid>
+          </Container>
+        }
+        cancelFn={() => {
+          setSelected(null);
+        }}
+        confirmFn={() => {
+          props.confirmFn(workflow?.schema ?? {});
+        }}
+        ref={ref}
+      />
+    );
+  },
+);
+MyWorkflowExamplesGalleryModal.displayName = "MyWorkflowExamplesGalleryModal";
+export { MyWorkflowExamplesGalleryModal };

frontend/src/features/workflowEditor/components/WorkflowEditor.tsx

@@ -33,6 +33,7 @@ import {
 } from "../utils/importWorkflow";
 
 import { PermanentDrawerRightWorkflows } from "./DrawerMenu";
+import { MyWorkflowExamplesGalleryModal } from "./MyWorkflowsGalleryModal";
 import SidebarPieceForm from "./SidebarForm";
 import { ContainerResourceFormSchema } from "./SidebarForm/ContainerResourceForm";
 import { createInputsSchemaValidation } from "./SidebarForm/PieceForm/validation";
@@ -85,6 +86,7 @@ export const WorkflowsEditorComponent: React.FC = () => {
 
   const incompatiblePiecesModalRef = useRef<ModalRef>(null);
   const workflowsGalleryModalRef = useRef<ModalRef>(null);
+  const myWorkflowsGalleryModalRef = useRef<ModalRef>(null);
   const [incompatiblesPieces, setIncompatiblesPieces] = useState<string[]>([]);
 
   const { workspace } = useWorkspaces();
@@ -521,9 +523,8 @@ export const WorkflowsEditorComponent: React.FC = () => {
                 </MenuItem>
                 <MenuItem
                   onClick={() => {
-                    setAnchorEl(null);
+                    myWorkflowsGalleryModalRef.current?.open();
                   }}
-                  disabled
                 >
                   from my workflows
                 </MenuItem>
@@ -534,6 +535,12 @@ export const WorkflowsEditorComponent: React.FC = () => {
                   void handleImportedJson(json);
                 }}
               />
+              <MyWorkflowExamplesGalleryModal
+                ref={myWorkflowsGalleryModalRef}
+                confirmFn={(json) => {
+                  void handleImportedJson(json);
+                }}
+              />
             </Grid>
             <Grid item>
               <Button

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

@@ -1,4 +1,4 @@
-import CheckCircleIcon from "@mui/icons-material/CheckCircle"; // You can replace this with your own selected icon
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import {
   Grid,
   Typography,

frontend/src/features/workflowEditor/context/workflowsEditor.tsx

@@ -272,6 +272,13 @@ const WorkflowsEditorProvider: FC<{ children?: React.ReactNode }> = ({
       }
 
       return {
+        forageSchema: {
+          workflowPieces,
+          workflowPiecesData,
+          workflowSettingsData,
+          workflowNodes,
+          workflowEdges,
+        },
         workflow,
         tasks,
         ui_schema,

rest/schemas/requests/workflow.py

@@ -142,6 +142,7 @@ class CreateWorkflowRequest(BaseModel):
         TasksDataModel
     ]
     ui_schema: UiSchema
+    forageSchema: dict
 
     @field_validator('tasks')
     def tasks_validator(cls, v):

rest/schemas/responses/workflow.py

@@ -114,7 +114,7 @@ class GetWorkflowResponse(BaseModel):
     id: int
     name: str
     created_at: datetime
-    schema_: Optional[BaseWorkflowModel] = Field(alias="schema", default=None)
+    schema_: dict = Field(alias="schema", default=None) # TODO add data model
     ui_schema: Optional[BaseUiSchema] = None
     last_changed_at: datetime
     last_changed_by: int
@@ -205,7 +205,7 @@ class CreateWorkflowResponse(BaseModel):
     id: int
     name: str
     created_at: datetime
-    schema_: WorkflowSchemaBaseModel = Field(..., alias='schema')
+    schema_: dict = Field(..., alias='schema') # TODO add data modal
     created_by: int
     last_changed_at: datetime
     last_changed_by: int

rest/services/workflow_service.py

@@ -78,7 +78,7 @@ def create_workflow(
             name=body.workflow.name,
             uuid_name=workflow_id,
             created_at=datetime.utcnow(),
-            schema={},
+            schema=body.forageSchema,
             ui_schema=body.ui_schema.model_dump(),
             created_by=auth_context.user_id,
             last_changed_at=datetime.utcnow(),
@@ -123,7 +123,6 @@ def create_workflow(
                     file_path=workflow_path_git,
                     content=workflow_code
                 )
-            workflow.schema = workflow_schema
 
             workflow = self.workflow_repository.update(workflow)
             response = CreateWorkflowResponse(