Merge dev

src/frontend/src/App.tsx

@@ -9,6 +9,7 @@ import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
+import LoadingComponent from "./components/loadingComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
@@ -47,10 +48,6 @@ export default function App() {
     }>
   >([]);
 
-  const isLoginPage = location.pathname.includes("login");
-  const isAdminPage = location.pathname.includes("admin");
-  const isSignUpPage = location.pathname.includes("signup");
-
   // Use effect hook to update alertsList when a new alert is added
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
@@ -138,8 +135,15 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        {!isLoginPage && !isSignUpPage && <Header />}
+        {loading ? (
+          <div className="loading-page-panel">
+            <LoadingComponent remSize={50} />
+          </div>
+        ) : (
+          <>
             <Router />
+          </>
+        )}
       </ErrorBoundary>
       <div></div>
       <div className="app-div" style={{ zIndex: 999 }}>

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -34,6 +34,13 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
+    if (invalidName !== undefined) {
+      if (!nameLists.current.includes(value)) {
+        setInvalidName(false);
+      } else {
+        setInvalidName(true);
+      }
+    }
     if (!nameLists.current.includes(value)) {
       setInvalidName!(false);
     } else {
@@ -43,13 +50,18 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     setCurrentName(value);
   };
 
-  const [desc, setDesc] = useState(
+  const [currentName, setCurrentName] = useState(name);
-    flows.find((flow) => flow.id === tabId)?.description
+
-  );
+  const [currentDescription, setCurrentDescription] = useState(description);
+
+  useEffect(() => {
+    setCurrentName(name);
+    setCurrentDescription(description);
+  }, [name, description]);
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    flows.find((flow) => flow.id === tabId)!.description = event.target.value;
+    flows.find((f) => f.id === tabId).description = event.target.value;
-    setDesc(flows.find((flow) => flow.id === tabId)?.description);
+    setCurrentDescription(flows.find((f) => f.id === tabId).description);
     setDescription(event.target.value);
   };
 

src/frontend/src/components/inputComponent/index.tsx

@@ -1,6 +1,7 @@
 import * as Form from "@radix-ui/react-form";
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import { Input } from "../ui/input";
 
@@ -45,6 +46,9 @@ export default function InputComponent({
             onChange={(e) => {
               onChange(e.target.value);
             }}
+            onKeyDown={(e) => {
+              handleKeyDown(e, value, "");
+            }}
           />
         </Form.Control>
       ) : (
@@ -65,6 +69,9 @@ export default function InputComponent({
           onChange={(e) => {
             onChange(e.target.value);
           }}
+          onKeyDown={(e) => {
+            handleKeyDown(e, value, "");
+          }}
         />
       )}
       {password && (

src/frontend/src/constants/constants.ts

@@ -509,6 +509,9 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
   "/api/v1/custom_component",
   "/api/v1/validate/prompt",
 ];
+
+export const skipNodeUpdate = ["CustomComponent"];
+
 export const CONTROL_INPUT_STATE = {
   password: "",
   cnfPassword: "",

src/frontend/src/contexts/typesContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, ReactNode, useEffect, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Node, ReactFlowInstance } from "reactflow";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";

src/frontend/src/modals/exportModal/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef, useContext, useState } from "react";
+import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -10,17 +10,17 @@ import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
-    const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
+    const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
-      useContext(TabsContext);
     const [checked, setChecked] = useState(false);
-    const [name, setName] = useState(
+    const flow = flows.find((f) => f.id === tabId);
-      flows.find((flow) => flow.id === tabId)?.name
+    useEffect(() => {
-    );
+      setName(flow.name);
-    const [invalidName, setInvalidName] = useState(false);
+      setDescription(flow.description);
-    const [description, setDescription] = useState(
+    }, [flow.name, flow.description]);
-      flows.find((flow) => flow.id === tabId)?.description
+    const [name, setName] = useState(flow.name);
-    );
+    const [description, setDescription] = useState(flow.description);
     const [open, setOpen] = useState(false);
+
     return (
       <BaseModal size="smaller" open={open} setOpen={setOpen}>
         <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
@@ -34,19 +34,18 @@ const ExportModal = forwardRef(
         </BaseModal.Header>
         <BaseModal.Content>
           <EditFlowSettings
-            invalidName={invalidName}
+            name={name}
-            setInvalidName={setInvalidName}
+            description={description}
-            name={name!}
-            description={description!}
             flows={flows}
             tabId={tabId}
             setName={setName}
             setDescription={setDescription}
+            updateFlow={updateFlow}
           />
           <div className="mt-3 flex items-center space-x-2">
             <Checkbox
               id="terms"
-              onCheckedChange={(event: boolean): void => {
+              onCheckedChange={(event: boolean) => {
                 setChecked(event);
               }}
             />

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -12,16 +12,15 @@ export default function FlowSettingsModal({
   open,
   setOpen,
 }: FlowSettingsPropsType): JSX.Element {
-  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const { setSuccessData } = useContext(alertContext);
-  const ref = useRef();
   const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
-  const maxLength = 50;
+  const flow = flows.find((f) => f.id === tabId);
-  const [name, setName] = useState(
+  useEffect(() => {
-    flows.find((flow) => flow.id === tabId)!.name
+    setName(flow.name);
-  );
+    setDescription(flow.description);
-  const [description, setDescription] = useState(
+  }, [flow.name, flow.description]);
-    flows.find((flow) => flow.id === tabId)!.description
+  const [name, setName] = useState(flow.name);
-  );
+  const [description, setDescription] = useState(flow.description);
   const [invalidName, setInvalidName] = useState(false);
 
   function handleClick(): void {

src/frontend/src/modals/genericModal/index.tsx

@@ -16,6 +16,7 @@ import { TypeModal } from "../../constants/enums";
 import { alertContext } from "../../contexts/alertContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { genericModalPropsType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import {
   classNames,
   getRandomKeyByssmm,

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -44,7 +44,13 @@ const nodeTypes = {
   genericNode: GenericNode,
 };
 
-export default function Page({ flow }: { flow: FlowType }): JSX.Element {
+export default function Page({
+  flow,
+  view,
+}: {
+  flow: FlowType;
+  view?: boolean;
+}): JSX.Element {
   let {
     updateFlow,
     uploadFlow,
@@ -424,7 +430,9 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
                     ></Controls>
                   )}
                 </ReactFlow>
+                {!view && (
                   <Chat flow={flow} reactFlowInstance={reactFlowInstance!} />
+                )}
               </div>
             ) : (
               <></>

src/frontend/src/pages/FlowPage/index.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import Header from "../../components/headerComponent";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getVersion } from "../../controllers/API";
 import Page from "./components/PageComponent";
@@ -22,6 +23,8 @@ export default function FlowPage(): JSX.Element {
   }, []);
 
   return (
+    <>
+      <Header />
       <div className="flow-page-positioning">
         {flows.length > 0 &&
           tabId !== "" &&
@@ -37,5 +40,6 @@ export default function FlowPage(): JSX.Element {
           <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
         </a>
       </div>
+    </>
   );
 }

src/frontend/src/pages/MainPage/index.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
 import { Button } from "../../components/ui/button";
@@ -47,7 +48,7 @@ export default function HomePage(): JSX.Element {
             <Button
               variant="primary"
               onClick={() => {
-                addFlow(null, true).then((id) => {
+                addFlow(null!, true).then((id) => {
                   navigate("/flow/" + id);
                 });
               }}
@@ -60,36 +61,32 @@ export default function HomePage(): JSX.Element {
         <span className="main-page-description-text">
           Manage your personal projects. Download or upload your collection.
         </span>
-        <div className="button-div-style">
+        <div className="main-page-flows-display">
+          {flows.map((flow, idx) => (
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Link to={"/flow/" + flow.id}>
                   <Button
-            variant="primary"
+                    variant="outline"
-            onClick={() => {
+                    size="sm"
-              downloadFlows();
+                    className="whitespace-nowrap "
-            }}
                   >
-            <IconComponent name="Download" className="main-page-nav-button" />
+                    <IconComponent
-            Download Collection
+                      name="ExternalLink"
+                      className="main-page-nav-button"
+                    />
+                    Edit Flow
                   </Button>
-          <Button
+                </Link>
-            variant="primary"
+              }
-            onClick={() => {
+              onDelete={() => {
-              uploadFlows();
+                removeFlow(flow.id);
               }}
-          >
+            />
-            <IconComponent name="Upload" className="main-page-nav-button" />
+          ))}
-            Upload Collection
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => {
-              addFlow(null!, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <IconComponent name="Plus" className="main-page-nav-button" />
-            New Project
-          </Button>
         </div>
       </div>
     </>

src/frontend/src/routes.tsx

@@ -4,6 +4,7 @@ import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import CommunityPage from "./pages/CommunityPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 

src/frontend/src/types/typesContext/index.ts

@@ -37,6 +37,8 @@ export type alertContextType = {
   pushNotificationList: (Object: AlertItemType) => void;
   clearNotificationList: () => void;
   removeFromNotificationList: (index: string) => void;
+  loading: boolean;
+  setLoading: (newState: boolean) => void;
 };
 
 export type darkContextType = {

src/frontend/src/utils/reactflowUtils.ts

@@ -5,6 +5,7 @@ import {
   ReactFlowInstance,
   ReactFlowJsonObject,
 } from "reactflow";
+import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { cleanEdgesType } from "../types/utils/reactflowUtils";