Merge pull request #200 from Tauffer-Consulting/feature/frontend-mino…

…r-improvements feat: frontend inprovements
Tauffer-Consulting · Dec 6, 2023 · 42fa0cc · 42fa0cc
2 parents 1c54bdf + 187e7da
commit 42fa0cc
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 73 deletions.
diff --git a/frontend/src/components/WorkflowPanel/WorkflowPanel.tsx b/frontend/src/components/WorkflowPanel/WorkflowPanel.tsx
@@ -37,8 +37,8 @@ import { CustomConnectionLine } from "./ConnectionLine";
 import DefaultEdge from "./DefaultEdge";
 import { CustomNode } from "./DefaultNode";
 import RunNodeComponent from "./RunNode";
-
 import "reactflow/dist/style.css";
+import { type RunNode } from "./types";
 
 // Load CustomNode
 const DEFAULT_NODE_TYPES: NodeTypes = {
@@ -251,14 +251,24 @@ const WorkflowPanel = forwardRef<WorkflowPanelRef, Props>(
           ...node.data,
         },
       }));
-      const edges = [...rawEdges].map((edge: Edge) => ({
-        ...edge,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 20,
-          height: 20,
-        },
-      }));
+
+      const edges = [...rawEdges].map((edge: Edge) => {
+        const animated = nodes.some(
+          (n: RunNode) =>
+            (n.id === edge.source || n.id === edge.target) &&
+            n.data?.state === "running",
+        );
+
+        return {
+          ...edge,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 20,
+            height: 20,
+          },
+          animated,
+        };
+      });
 
       return {
         nodes,

diff --git a/frontend/src/context/workspaces/repositories.tsx b/frontend/src/context/workspaces/repositories.tsx
@@ -126,22 +126,15 @@ const PiecesProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const handleAddRepository = useCallback(
     async (payload: Omit<IPostWorkspaceRepositoryPayload, "workspace_id">) =>
-      await postRepository({ ...payload, workspace_id: workspace?.id ?? "" })
-        .then(async (data) => {
-          toast.success(`Repository added successfully!`);
-          handleRefreshWorkspaces();
-          await handleRefreshRepositories();
-          return data;
-        })
-        .catch((e) => {
-          if (e.response?.status === 403) {
-            toast.error(
-              `You don't have permission to add repositories to this workspace.`,
-            );
-            return;
-          }
-          toast.error(`Error adding repository, try again later.`);
-        }),
+      await postRepository({
+        ...payload,
+        workspace_id: workspace?.id ?? "",
+      }).then(async (data) => {
+        toast.success(`Repository added successfully!`);
+        handleRefreshWorkspaces();
+        await handleRefreshRepositories();
+        return data;
+      }),
     [postRepository, handleRefreshWorkspaces, workspace?.id],
   );
 

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx
@@ -1,5 +1,11 @@
-import { CircularProgress, Container, Typography } from "@mui/material";
-import { type CSSProperties } from "react";
+import {
+  Button,
+  CircularProgress,
+  Container,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { useCallback, type CSSProperties } from "react";
 import ReactMarkdown from "react-markdown";
 import Plot from "react-plotly.js";
 import remarkGfm from "remark-gfm";
@@ -116,6 +122,46 @@ export const TaskResult = (props: ITaskResultProps) => {
     }
   };
 
+  const downloadContent = useCallback(() => {
+    let href = "";
+    switch (file_type) {
+      case "txt":
+        href = `data:text/plain;base64,${base64_content}`;
+        break;
+      case "plotly_json":
+      case "json":
+        href = `data:application/json;base64,${base64_content}`;
+        break;
+      case "jpeg":
+      case "png":
+      case "bmp":
+      case "gif":
+      case "tiff":
+        href = `data:image/${file_type};base64,${base64_content}`;
+        break;
+      case "svg":
+        href = `data:image/svg+xml;base64,${base64_content}`;
+        break;
+      case "md":
+        href = `data:text/markdown;base64,${base64_content}`;
+        break;
+      case "pdf":
+        href = `data:application/pdf;base64,${base64_content}`;
+        break;
+      case "html":
+        href = `data:text/html;base64,${base64_content}`;
+        break;
+      default:
+        href = `data:text/plain;base64,${base64_content}`;
+        break;
+    }
+
+    const a = document.createElement("a"); // Create <a>
+    a.href = href; // Image Base64 Goes here
+    a.download = `download.${file_type}`; // File name Here
+    a.click(); // Downloaded file
+  }, [base64_content, file_type]);
+
   return (
     <Container
       sx={{
@@ -125,9 +171,18 @@ export const TaskResult = (props: ITaskResultProps) => {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        overflowY: "scroll",
+        overflowX: "hidden",
       }}
     >
       {renderContent()}
+      {!!base64_content && !!file_type && (
+        <Tooltip title="Will download the raw result content ">
+          <Button variant="contained" onClick={downloadContent}>
+            Download content
+          </Button>
+        </Tooltip>
+      )}
     </Container>
   );
 };
diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx
@@ -195,7 +195,7 @@ export const WorkflowDetail: React.FC = () => {
     }
   }, [selectedRun, refresh]);
 
-  useInterval(refresh, 1000, autoUpdate);
+  useInterval(refresh, 3000, autoUpdate);
 
   return (
     <Grid container spacing={3}>

diff --git a/frontend/src/features/workflowEditor/components/DifferencesModal/index.tsx b/frontend/src/features/workflowEditor/components/DifferencesModal/index.tsx
@@ -27,6 +27,7 @@ enum installStateEnum {
   notInstalled = 0,
   installing = 1,
   installed = 2,
+  error = 3,
 }
 
 export const DifferencesModal = forwardRef<ModalRef, Props>(
@@ -53,10 +54,11 @@ export const DifferencesModal = forwardRef<ModalRef, Props>(
           version: e.requiredVersion,
           url: `https://github.com/${e.source}`,
         };
-
-        return await handleAddRepository(addRepository).catch((e) => {
-          console.log(e);
-        });
+        try {
+          await handleAddRepository(addRepository);
+        } catch (e) {
+          throw new Error();
+        }
       },
       [handleAddRepository],
     );
@@ -68,7 +70,7 @@ export const DifferencesModal = forwardRef<ModalRef, Props>(
         setInstallState(2);
       } catch (e) {
         toast.error(e as string);
-        setInstallState(0);
+        setInstallState(3);
       }
     }, [installRepositories, uninstalledPieces]);
 
@@ -169,6 +171,11 @@ export const DifferencesModal = forwardRef<ModalRef, Props>(
                             borderColor: theme.palette.success.main,
                             color: theme.palette.success.main,
                           }
+                        : installState === 3
+                        ? {
+                            borderColor: theme.palette.error.main,
+                            color: theme.palette.error.main,
+                          }
                         : {}
                     }
                   >
@@ -185,6 +192,12 @@ export const DifferencesModal = forwardRef<ModalRef, Props>(
                         Success
                       </>
                     )}
+                    {installState === 3 && (
+                      <>
+                        <ErrorOutlineIcon sx={{ marginRight: 1 }} />
+                        Error
+                      </>
+                    )}
                   </Button>
                 </Grid>
               </Grid>

diff --git a/...src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/arrayInput.tsx b/...src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/arrayInput.tsx
@@ -125,7 +125,7 @@ const ArrayInput: React.FC<ArrayInputItemProps> = ({
       return "DatetimeInput";
     } else if (
       subItemSchema?.type === "string" &&
-      subItemSchema?.widget === "codeeditor"
+      subItemSchema?.widget.includes("codeeditor")
     ) {
       return "CodeEditorInput";
     } else if (subItemSchema?.type === "object") {
@@ -300,7 +300,14 @@ const ArrayInput: React.FC<ArrayInputItemProps> = ({
               )}
               {!fromUpstream && elementType === "CodeEditorInput" && (
                 <Grid item xs={9}>
-                  <CodeEditorInput name={`${name}.${index}.value`} />
+                  <CodeEditorInput
+                    language={
+                      subItemSchema?.widget === "codeeditor"
+                        ? "python"
+                        : subItemSchema.widget.replace("codeeditor-", "")
+                    }
+                    name={`${name}.${index}.value`}
+                  />
                 </Grid>
               )}
               {!fromUpstream && elementType === "Unknown" && (

diff --git a/...tend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx b/...tend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx
@@ -181,50 +181,21 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
     ("type" in schema &&
       "widget" in schema &&
       schema.type === "string" &&
-      (schema.widget === "codeeditor" ||
-        schema.widget === "codeeditor-python")) ||
+      schema.widget?.includes("codeeditor")) ??
     ("widget" in schema &&
-      (schema.widget === "codeeditor" ||
-        schema.widget === "codeeditor-python") &&
-      anyOfType === "string")
-  ) {
-    inputElement = (
-      <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") ||
-    ("widget" in schema &&
-      (schema.widget === "codeeditor" || schema.widget === "codeeditor-json") &&
-      anyOfType === "string")
-  ) {
-    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") ||
-    ("widget" in schema &&
-      (schema.widget === "codeeditor" || schema.widget === "codeeditor-sql") &&
+      schema.widget?.includes("codeeditor") &&
       anyOfType === "string")
   ) {
+    const language =
+      schema.widget === "codeeditor"
+        ? "python"
+        : schema.widget.replace("codeeditor-", "");
+
     inputElement = (
       <CodeEditorInput<IWorkflowPieceData>
         name={`inputs.${itemKey}.value`}
-        language="sql"
-        placeholder="Enter SQL code."
+        language={language}
+        placeholder={`Enter yor ${language} code here.`}
       />
     );
   } else if (