Added project settings modal

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

@@ -12,6 +12,8 @@ import {
   ChevronLeft,
   Undo,
   Redo,
+  Settings,
+  Settings2,
 } from "lucide-react";
 import {
   DropdownMenu,
@@ -33,8 +35,9 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
 import { Link } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
+import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 
-export const MenuBar = ({ setRename, rename, flows, tabId }) => {
+export const MenuBar = ({flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
   const { setErrorData } = useContext(alertContext);
   const { openPopUp } = useContext(PopUpContext);
@@ -65,7 +68,8 @@ export const MenuBar = ({ setRename, rename, flows, tabId }) => {
         <ChevronLeft className="w-5" />
       </Link>
       <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 bg-background gap-0.5">
-        <RenameLabel
+        
+        {/* <RenameLabel
           value={current_flow.name}
           setValue={(value) => {
             if (value !== "") {
@@ -76,20 +80,21 @@ export const MenuBar = ({ setRename, rename, flows, tabId }) => {
           }}
           rename={rename}
           setRename={setRename}
-        />
+        /> */}
         <DropdownMenu>
-          <DropdownMenuTrigger className="px-1">
+          <DropdownMenuTrigger className="px-1 gap-2 flex items-center">
+            {current_flow.name}
             <ChevronDown className="w-4 h-4" />
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
             <DropdownMenuLabel>Edit</DropdownMenuLabel>
             <DropdownMenuItem
               onClick={() => {
-                setRename(true);
+                openPopUp(<FlowSettingsModal />)
               }}
             >
-              <Edit className="w-4 h-4 mr-2" />
-              Rename
+              <Settings2 className="w-4 h-4 mr-2" />
+              Settings
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={() => {

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

@@ -18,7 +18,6 @@ export default function Header() {
   const { id } = useParams();
   const AlertWidth = 384;
   const { dark, setDark } = useContext(darkContext);
-  const [rename, setRename] = useState(false);
   const { notificationCenter, setNotificationCenter, setErrorData } =
     useContext(alertContext);
   const location = useLocation();
@@ -30,8 +29,6 @@ export default function Header() {
         </Link>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar
-            setRename={setRename}
-            rename={rename}
             flows={flows}
             tabId={tabId}
           />
@@ -39,16 +36,26 @@ export default function Header() {
       </div>
       <div className="flex gap-2 items-center">
         <Link to="/">
-        <Button variant={location.pathname === "/" ? "primary" : "secondary"} size="sm">
-          <Home className="w-4 mr-2" />
-          My Projects
-        </Button>
+          <Button
+            className="gap-2"
+            variant={location.pathname === "/" ? "primary" : "secondary"}
+            size="sm"
+          >
+            <Home className="w-4 h-4" />
+            <div className="flex-1">My Projects</div>
+          </Button>
         </Link>
         <Link to="/community">
-        <Button variant={location.pathname === "/community" ? "primary" : "secondary"} size="sm">
-          <Users2 className="w-4 mr-2" />
-          Community Examples
-        </Button>
+          <Button
+            className="gap-2"
+            variant={
+              location.pathname === "/community" ? "primary" : "secondary"
+            }
+            size="sm"
+          >
+            <Users2 className="w-4 h-4" />
+            <div className="flex-1">Community Examples</div>
+          </Button>
         </Link>
       </div>
       <div className="flex justify-end px-2 w-96">

src/frontend/src/constants.tsx

@@ -6,6 +6,12 @@
  */
 export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
 
+/**
+ * The base text for subtitle of Flow Settings (Menubar)
+ * @constant
+ */
+export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
+
 /**
  * The base text for subtitle of Code Dialog (Toolbar)
  * @constant

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

@@ -0,0 +1,109 @@
+import {
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  DocumentDuplicateIcon,
+  ComputerDesktopIcon,
+} from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { Label } from "@radix-ui/react-label";
+import { Checkbox } from "../../components/ui/checkbox";
+import { Textarea } from "../../components/ui/textarea";
+import { Input } from "../../components/ui/input";
+import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
+
+export default function FlowSettingsModal() {
+  const [open, setOpen] = useState(true);
+  const { closePopUp } = useContext(PopUpContext);
+  const {setErrorData} = useContext(alertContext);
+  const ref = useRef();
+  const { flows, tabId, updateFlow,} = useContext(TabsContext);
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
+  const [description, setDescription] = useState(flows.find((f) => f.id === tabId).description);
+  return (
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger asChild></DialogTrigger>
+      <DialogContent className="lg:max-w-[600px] h-[390px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">Settings</span>
+            <ArrowDownTrayIcon
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
+            />
+          </DialogTitle>
+          <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
+        </DialogHeader>
+
+        <Label>
+          <span className="font-medium">Name</span>
+
+          <Input
+            className="mt-2"
+            onChange={(event) => {
+              setName(event.target.value);
+            }}
+            type="text"
+            name="name"
+            value={name ?? null}
+            placeholder="File name"
+            id="name"
+          />
+        </Label>
+        <Label>
+          <span className="font-medium">Description (optional)</span>
+          <Textarea
+            name="description"
+            id="description"
+            onChange={(event) => {
+              setDescription(event.target.value)
+            }}
+            value={description ?? null}
+            placeholder="Flow description"
+            className="max-h-[100px] mt-2"
+            rows={3}
+          />
+        </Label>
+
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              if(name !== ""){
+                let newFlow = flows.find((f) => f.id === tabId);
+                newFlow.name = name;
+                newFlow.description = description;
+                updateFlow(newFlow);
+                closePopUp();
+              } else {
+                setErrorData({title: "Error Saving Settings", list: ["The name must not be empty."]})
+              }
+            }}
+            type="submit"
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}