From 2d640c8e5ad27e18c24e9b85650a9ecfd3fc0f7a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 12 Jun 2023 21:17:44 -0300 Subject: [PATCH] Back button added, chevron with dropdown added to flow name --- langflow.db | Bin 28672 -> 28672 bytes .../components/menuBar/index.tsx | 227 +++++++++--------- .../src/components/headerComponent/index.tsx | 191 +++++++-------- .../components/PageComponent/index.tsx | 2 +- src/frontend/src/pages/MainPage/index.tsx | 3 + 5 files changed, 209 insertions(+), 214 deletions(-) diff --git a/langflow.db b/langflow.db index 01cb4020956d67250e6823e2d241538eb876b3a5..471bac60b7183498086c45a40db6f18ca81c0678 100644 GIT binary patch delta 643 zcmaiyKWG#|7{zaLS_n7uwm1vXgAKV_c6MiXcABIRgCM7EO7~`GlE|qbNXm<4KrnwQ zy_6E{WLeR|CQX_^ObQVaLI|WtnlvGhA|be|2nVMGJ{~-H@B8?{H@i<}_sRTiQeU`p zkJPg#AJBAaTNP~JJtiSQ*mu@rQ!HddbdxUAX&TXLZ7X~IvDW3z^_vaadj6`@d1PkX z@y?5xL-r)_pcnO0EJj5t?vEl|qt=b@ezrg7?=r^q2 K(A+%kxxWCcPP20W delta 183 zcmV;o07(CU-~oW(0gxL35Rn{10T8iZqz@bn4V(ZE%@3LnXAd+F0S?X%n+|9WH4Xv| z&kdZjF(7;mvz#4h0vrquMF0-|58Mvf4{Z;U4r&i054R6U4v!8+4z#l|FeMHIBm+$W zldl~hvuQ4y0UQhu#Q+cd5BCr95A6@=591Hs57`gY56=(E55=<)P^Ax(#XmnB3=d@h l5A+Y`584mS55Nzz52g>94~!3g4{{G>voSD553^-Yn;^uWI&lC1 diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index b23a59614..1c7e73a94 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx @@ -1,18 +1,26 @@ import React, { useContext } from "react"; import { TabsContext } from "../../../../contexts/tabsContext"; import { PopUpContext } from "../../../../contexts/popUpContext"; -import { Save, Edit, Upload, Download, Code, Plus } from "lucide-react"; import { - Menubar, - MenubarContent, - MenubarItem, - MenubarMenu, - MenubarTrigger, - MenubarRadioGroup, - MenubarRadioItem, - MenubarLabel, - MenubarSeparator, -} from "../../../ui/menubar"; + Save, + Edit, + Upload, + Download, + Code, + Plus, + ChevronDown, + ChevronLeft, +} from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, +} from "../../../ui/dropdown-menu"; import RenameLabel from "../../../ui/rename-label"; import _ from "lodash"; @@ -23,7 +31,7 @@ import { alertContext } from "../../../../contexts/alertContext"; import { updateFlowInDatabase } from "../../../../controllers/API"; import { Link } from "react-router-dom"; -export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => { +export const MenuBar = ({ setRename, rename, flows, tabId }) => { const { updateFlow, setTabId, addFlow } = useContext(TabsContext); const { setErrorData } = useContext(alertContext); const { openPopUp } = useContext(PopUpContext); @@ -47,109 +55,102 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => { } let current_flow = flows.find((flow) => flow.id === tabId); - // robot emoji - let emoji = current_flow.style?.emoji || "🤖"; - let color = current_flow.style?.color || "bg-blue-200"; - return ( - - - - { - if (value !== "") { - let newFlow = _.cloneDeep(current_flow); - newFlow.name = value; - updateFlow(newFlow); - } +
+ + + +
+ { + if (value !== "") { + let newFlow = _.cloneDeep(current_flow); + newFlow.name = value; + updateFlow(newFlow); + } + }} + rename={rename} + setRename={setRename} + /> + + + + + + File + { + openPopUp(); }} - rename={rename} - setRename={setRename} - /> - - - - - File - - { - openPopUp(); - }} - > - - Import - - { - openPopUp(); - }} - > - - Export - - { - openPopUp(); - }} - > - - Code - - - - Edit - - { - handleSaveFlow(current_flow); - }} - > - - Save - - { - setRename(true); - }} - > - - Rename - - - - Flows - - { - setTabId(value); - }} - > - {flows.map((flow, idx) => { - return ( - - - {emoji} {flow.name} - - - - ); - })} - - { - handleAddFlow(); - }} - > - - Add Flow - - - - - + > + + Import + + { + openPopUp(); + }} + > + + Export + + { + openPopUp(); + }} + > + + Code + + + Edit + { + handleSaveFlow(current_flow); + }} + > + + Save + + { + setRename(true); + }} + > + + Rename + + + Flows + { + setTabId(value); + }} + > + {flows.map((flow, idx) => { + return ( + + + {flow.name} + + + ); + })} + + { + handleAddFlow(); + }} + > + + Add Flow + + + +
+
); }; diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index ac8d85cf3..23a9034cb 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -1,4 +1,4 @@ -import { SunIcon, MoonIcon, BellIcon} from "lucide-react"; +import { SunIcon, MoonIcon, BellIcon } from "lucide-react"; import { useContext, useState, useEffect } from "react"; import { FaGithub } from "react-icons/fa"; import { Button } from "../ui/button"; @@ -9,110 +9,101 @@ import { darkContext } from "../../contexts/darkContext"; import { PopUpContext } from "../../contexts/popUpContext"; import { typesContext } from "../../contexts/typesContext"; import MenuBar from "./components/menuBar"; -import { Link } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; -export default function Header(){ - const { - flows, - addFlow, - removeFlow, - tabId, - setTabId, - uploadFlow, - downloadFlow, - } = useContext(TabsContext); - const { openPopUp } = useContext(PopUpContext); - const { templates } = useContext(typesContext); - const AlertWidth = 384; - const { dark, setDark } = useContext(darkContext); - const [activeTab, setActiveTab] = useState("myflow"); - const [rename, setRename] = useState(false); - const { notificationCenter, setNotificationCenter, setErrorData } = - useContext(alertContext); - useEffect(() => { - //create the first flow - if (flows.length === 0 && Object.keys(templates).length > 0) { - addFlow(); - } - }, [addFlow, flows.length, templates]); - return ( -
- -
- ⛓️ - {flows.findIndex((f) => tabId === f.id) !== -1 && +export default function Header() { + const { flows, addFlow, tabId } = useContext(TabsContext); + const { openPopUp } = useContext(PopUpContext); + const { templates } = useContext(typesContext); + const { id } = useParams(); + const AlertWidth = 384; + const { dark, setDark } = useContext(darkContext); + const [rename, setRename] = useState(false); + const { notificationCenter, setNotificationCenter, setErrorData } = + useContext(alertContext); + useEffect(() => { + //create the first flow + if (flows.length === 0 && Object.keys(templates).length > 0) { + addFlow(); + } + }, [addFlow, flows.length, templates]); + return ( +
+
+ + ⛓️ + + {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( - } - -
-
-
- - - - -
-
+ )} +
+
+
+ + + +
- ) -} \ No newline at end of file +
+
+ ); +} diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index e4a167b34..600a54f12 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -311,7 +311,7 @@ export default function Page({ flow }: { flow: FlowType }) {
{/* Main area */} -
+
{/* Primary column */}
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index a1d8ca8b1..94b43e5a0 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -29,6 +29,9 @@ export default function HomePage() { removeFlow, setTabId, } = useContext(TabsContext); + useEffect(() => { + setTabId(""); + }, []) return (