Refactor: make new flow create as "Untitled document" instead of random name (#1408)

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -7,20 +7,23 @@ import {
   DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
+import { Node } from "reactflow";
+import useFlowStore from "../../../../stores/flowStore";
 
-export const MenuBar = (): JSX.Element => {
+export const MenuBar = ({removeFunction}: {removeFunction: (nodes: Node[]) => void}): JSX.Element => {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const undo = useFlowsManagerStore((state) => state.undo);
   const redo = useFlowsManagerStore((state) => state.redo);
   const [openSettings, setOpenSettings] = useState(false);
+  const n = useFlowStore((state) => state.nodes);
 
   const navigate = useNavigate();
 
@@ -39,6 +42,7 @@ export const MenuBar = (): JSX.Element => {
     <div className="round-button-div">
       <button
         onClick={() => {
+          removeFunction(n)
           navigate(-1);
         }}
       >

src/frontend/src/components/headerComponent/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
@@ -21,14 +21,19 @@ import {
 } from "../ui/dropdown-menu";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import useFlowStore from "../../stores/flowStore";
+import { Node } from "reactflow";
 
 export default function Header(): JSX.Element {
   const notificationCenter = useAlertStore((state) => state.notificationCenter);
   const location = useLocation();
   const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
   const navigate = useNavigate();
-
+  const removeFlow = useFlowsManagerStore((store) => store.removeFlow);
   const hasStore = useStoreStore((state) => state.hasStore);
+  const {id} = useParams();
+  const n = useFlowStore((state) => state.nodes);
 
   const dark = useDarkStore((state) => state.dark);
   const setDark = useDarkStore((state) => state.setDark);
@@ -43,13 +48,19 @@ export default function Header(): JSX.Element {
     window.localStorage.setItem("isDark", dark.toString());
   }, [dark]);
 
+  async function checkForChanges(nodes: Node[]): Promise<void> {
+    if (nodes.length === 0) {
+      await removeFlow(id!)
+    }
+  }
+
   return (
     <div className="header-arrangement">
       <div className="header-start-display lg:w-[30%]">
-        <Link to="/">
+        <Link to="/" onClick={() => checkForChanges(n)}>
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
-        <MenuBar />
+        <MenuBar removeFunction={checkForChanges} />
       </div>
       <div className="round-button-div">
         <Link to="/">
@@ -62,6 +73,7 @@ export default function Header(): JSX.Element {
                 : "secondary"
             }
             size="sm"
+            onClick={() => {checkForChanges(n)}}
           >
             <IconComponent name="Home" className="h-4 w-4" />
             <div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
@@ -85,6 +97,7 @@ export default function Header(): JSX.Element {
               className="gap-2"
               variant={location.pathname === "/store" ? "primary" : "secondary"}
               size="sm"
+              onClick={() => {checkForChanges(n)}}
             >
               <IconComponent name="Store" className="h-4 w-4" />
               <div className="flex-1">Store</div>

src/frontend/src/utils/reactflowUtils.ts

@@ -1185,7 +1185,7 @@ export const createNewFlow = (
 ) => {
   return {
     description: flow?.description ?? getRandomDescription(),
-    name: flow?.name ?? getRandomName(),
+    name: flow?.name ? flow.name : "Untitled document",
     data: flowData,
     id: "",
     is_component: flow?.is_component ?? false,