jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Back button added, chevron with dropdown added to flow name

Browse source
This commit is contained in:
Lucas Oliveira 2023-06-12 21:17:44 -03:00
commit 2d640c8e5a
5 changed files with 209 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
langflow.db
View file

Binary file not shown.

111
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -1,18 +1,26 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { PopUpContext } from "../../../../contexts/popUpContext"; import { PopUpContext } from "../../../../contexts/popUpContext";
import { Save, Edit, Upload, Download, Code, Plus } from "lucide-react";
import { import {
Menubar, Save,
MenubarContent, Edit,
MenubarItem, Upload,
MenubarMenu, Download,
MenubarTrigger, Code,
MenubarRadioGroup, Plus,
MenubarRadioItem, ChevronDown,
MenubarLabel, ChevronLeft,
MenubarSeparator, } from "lucide-react";
} from "../../../ui/menubar"; import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
} from "../../../ui/dropdown-menu";
import RenameLabel from "../../../ui/rename-label"; import RenameLabel from "../../../ui/rename-label";
import _ from "lodash"; import _ from "lodash";
@ -23,7 +31,7 @@ import { alertContext } from "../../../../contexts/alertContext";
import { updateFlowInDatabase } from "../../../../controllers/API"; import { updateFlowInDatabase } from "../../../../controllers/API";
import { Link } from "react-router-dom"; 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 { updateFlow, setTabId, addFlow } = useContext(TabsContext);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
@ -47,14 +55,12 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
} }
let current_flow = flows.find((flow) => flow.id === 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 ( return (
<Menubar> <div className="flex gap-2 items-center">
<MenubarMenu> <Link to="/">
<MenubarTrigger className="px-1"> <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} value={current_flow.name}
setValue={(value) => { setValue={(value) => {
@ -67,61 +73,57 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
rename={rename} rename={rename}
setRename={setRename} setRename={setRename}
/> />
<DropdownMenu>
</MenubarTrigger> <DropdownMenuTrigger className="px-1">
<MenubarContent> <ChevronDown className="w-4 h-4" />
<MenubarLabel> </DropdownMenuTrigger>
File <DropdownMenuContent className="w-44">
</MenubarLabel> <DropdownMenuLabel>File</DropdownMenuLabel>
<MenubarItem <DropdownMenuItem
onClick={() => { onClick={() => {
openPopUp(<ImportModal />); openPopUp(<ImportModal />);
}} }}
> >
<Upload className="w-4 h-4 mr-2" /> <Upload className="w-4 h-4 mr-2" />
Import Import
</MenubarItem> </DropdownMenuItem>
<MenubarItem <DropdownMenuItem
onClick={() => { onClick={() => {
openPopUp(<ExportModal />); openPopUp(<ExportModal />);
}} }}
> >
<Download className="w-4 h-4 mr-2" /> <Download className="w-4 h-4 mr-2" />
Export Export
</MenubarItem> </DropdownMenuItem>
<MenubarItem <DropdownMenuItem
onClick={() => { onClick={() => {
openPopUp(<ApiModal flow={current_flow} />); openPopUp(<ApiModal flow={current_flow} />);
}} }}
> >
<Code className="w-4 h-4 mr-2" /> <Code className="w-4 h-4 mr-2" />
Code Code
</MenubarItem> </DropdownMenuItem>
<MenubarSeparator /> <DropdownMenuSeparator />
<MenubarLabel> <DropdownMenuLabel>Edit</DropdownMenuLabel>
Edit <DropdownMenuItem
</MenubarLabel>
<MenubarItem
onClick={() => { onClick={() => {
handleSaveFlow(current_flow); handleSaveFlow(current_flow);
}} }}
> >
<Save className="w-4 h-4 mr-2" /> <Save className="w-4 h-4 mr-2" />
Save Save
</MenubarItem> </DropdownMenuItem>
<MenubarItem <DropdownMenuItem
onClick={() => { onClick={() => {
setRename(true); setRename(true);
}} }}
> >
<Edit className="w-4 h-4 mr-2" /> <Edit className="w-4 h-4 mr-2" />
Rename Rename
</MenubarItem> </DropdownMenuItem>
<MenubarSeparator /> <DropdownMenuSeparator />
<MenubarLabel> <DropdownMenuLabel>Flows</DropdownMenuLabel>
Flows <DropdownMenuRadioGroup
</MenubarLabel>
<MenubarRadioGroup
value={tabId} value={tabId}
onValueChange={(value) => { onValueChange={(value) => {
setTabId(value); setTabId(value);
@ -130,26 +132,25 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
{flows.map((flow, idx) => { {flows.map((flow, idx) => {
return ( return (
<Link to={"/flow/" + flow.id}> <Link to={"/flow/" + flow.id}>
<MenubarRadioItem value={flow.id}> <DropdownMenuRadioItem value={flow.id}>
{emoji} {flow.name} {flow.name}
</MenubarRadioItem> </DropdownMenuRadioItem>
</Link> </Link>
); );
})} })}
</MenubarRadioGroup> </DropdownMenuRadioGroup>
<MenubarItem <DropdownMenuItem
onClick={() => { onClick={() => {
handleAddFlow(); handleAddFlow();
}} }}
> >
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Flow Add Flow
</MenubarItem> </DropdownMenuItem>
</MenubarContent> </DropdownMenuContent>
</MenubarMenu> </DropdownMenu>
</div>
</Menubar> </div>
); );
}; };

33
src/frontend/src/components/headerComponent/index.tsx
View file

@ -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 { useContext, useState, useEffect } from "react";
import { FaGithub } from "react-icons/fa"; import { FaGithub } from "react-icons/fa";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
@ -9,23 +9,15 @@ import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import MenuBar from "./components/menuBar"; import MenuBar from "./components/menuBar";
import { Link } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
export default function Header(){ export default function Header() {
const { const { flows, addFlow, tabId } = useContext(TabsContext);
flows,
addFlow,
removeFlow,
tabId,
setTabId,
uploadFlow,
downloadFlow,
} = useContext(TabsContext);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
const { templates } = useContext(typesContext); const { templates } = useContext(typesContext);
const { id } = useParams();
const AlertWidth = 384; const AlertWidth = 384;
const { dark, setDark } = useContext(darkContext); const { dark, setDark } = useContext(darkContext);
const [activeTab, setActiveTab] = useState("myflow");
const [rename, setRename] = useState(false); const [rename, setRename] = useState(false);
const { notificationCenter, setNotificationCenter, setErrorData } = const { notificationCenter, setNotificationCenter, setErrorData } =
useContext(alertContext); useContext(alertContext);
@ -36,20 +28,19 @@ export default function Header(){
} }
}, [addFlow, flows.length, templates]); }, [addFlow, flows.length, templates]);
return ( return (
<div className="w-full h-14 flex justify-between items-center border-b bg-muted"> <div className="w-full h-12 flex justify-between items-center border-b bg-muted">
<div className="flex gap-2 justify-start items-center w-96"> <div className="flex gap-2 justify-start items-center w-96">
<Link to="/"><span className="text-2xl ml-4">⛓️</span></Link> <Link to="/">
{flows.findIndex((f) => tabId === f.id) !== -1 && <span className="text-2xl ml-4">⛓️</span>
</Link>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar <MenuBar
activeTab={activeTab}
setRename={setRename} setRename={setRename}
rename={rename} rename={rename}
flows={flows} flows={flows}
tabId={tabId} tabId={tabId}
/> />
} )}
</div> </div>
<div className="flex justify-end px-2 w-96"> <div className="flex justify-end px-2 w-96">
<div className="ml-auto mr-2 flex gap-5"> <div className="ml-auto mr-2 flex gap-5">
@ -114,5 +105,5 @@ export default function Header(){
</div> </div>
</div> </div>
</div> </div>
) );
} }

2
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -311,7 +311,7 @@ export default function Page({ flow }: { flow: FlowType }) {
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden"> <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
<ExtraSidebar /> <ExtraSidebar />
{/* Main area */} {/* Main area */}
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex"> <main className="flex-1 flex">
{/* Primary column */} {/* Primary column */}
<div className="w-full h-full"> <div className="w-full h-full">
<div className="w-full h-full" ref={reactFlowWrapper}> <div className="w-full h-full" ref={reactFlowWrapper}>

3
src/frontend/src/pages/MainPage/index.tsx
View file

@ -29,6 +29,9 @@ export default function HomePage() {
removeFlow, removeFlow,
setTabId, setTabId,
} = useContext(TabsContext); } = useContext(TabsContext);
useEffect(() => {
setTabId("");
}, [])
return ( return (
<div <div
className="w-full h-full flex flex-col bg-muted" className="w-full h-full flex flex-col bg-muted"