From 1a92ceca7ee3396159bae0d51e865f822aa32b14 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 13 Jun 2023 19:09:24 -0300 Subject: [PATCH] Added community page, fixed styling of buttons, added promise at AddFlow --- .../components/menuBar/index.tsx | 34 ----- .../src/components/headerComponent/index.tsx | 19 ++- src/frontend/src/components/ui/button.tsx | 2 + src/frontend/src/components/ui/card.tsx | 4 +- src/frontend/src/contexts/tabsContext.tsx | 32 ++-- .../components/cardComponent/index.tsx | 81 ++++++++++ .../src/pages/CommunityPage/index.tsx | 92 ++++++++++++ .../extraSidebarComponent/index.tsx | 4 +- .../components/cardComponent/index.tsx | 142 +++++++----------- src/frontend/src/pages/MainPage/index.tsx | 20 +-- src/frontend/src/routes.tsx | 2 + src/frontend/src/types/tabs/index.ts | 2 +- src/frontend/src/utils.ts | 17 +++ 13 files changed, 301 insertions(+), 150 deletions(-) create mode 100644 src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx create mode 100644 src/frontend/src/pages/CommunityPage/index.tsx diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index 0dcd3d569..735d9176b 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx @@ -82,41 +82,7 @@ export const MenuBar = ({ setRename, rename, flows, tabId }) => { - File - { - openPopUp(); - }} - > - - Import - - { - openPopUp(); - }} - > - - Export - - { - openPopUp(); - }} - > - - Code - - Edit - { - handleSaveFlow(current_flow); - }} - > - - Save - { setRename(true); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 071841313..2caef7b0a 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, Home, Users2 } from "lucide-react"; import { useContext, useState, useEffect } from "react"; import { FaGithub } from "react-icons/fa"; import { Button } from "../ui/button"; @@ -9,7 +9,7 @@ import { darkContext } from "../../contexts/darkContext"; import { PopUpContext } from "../../contexts/popUpContext"; import { typesContext } from "../../contexts/typesContext"; import MenuBar from "./components/menuBar"; -import { Link, useParams } from "react-router-dom"; +import { Link, useLocation, useParams } from "react-router-dom"; export default function Header() { const { flows, addFlow, tabId } = useContext(TabsContext); @@ -21,6 +21,7 @@ export default function Header() { const [rename, setRename] = useState(false); const { notificationCenter, setNotificationCenter, setErrorData } = useContext(alertContext); + const location = useLocation(); return (
@@ -36,6 +37,20 @@ export default function Header() { /> )}
+
+ + + + + + +
+
+ + + ); +}; diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx new file mode 100644 index 000000000..cf188cef1 --- /dev/null +++ b/src/frontend/src/pages/CommunityPage/index.tsx @@ -0,0 +1,92 @@ +import { + Tabs, + TabsList, + TabsTrigger, + TabsContent, +} from "../../components/ui/tabs"; +import ExtraSidebar from "../../components/ExtraSidebarComponent"; +import { ReactFlowProvider } from "reactflow"; +import FlowPage from "../FlowPage"; +import { useContext, useEffect, useState } from "react"; +import { + SunIcon, + MoonIcon, + BellIcon, + GithubIcon, + Download, + Upload, + Plus, + Home, + Users2, +} from "lucide-react"; +import { TabsContext } from "../../contexts/tabsContext"; +import AlertDropdown from "../../alerts/alertDropDown"; +import { alertContext } from "../../contexts/alertContext"; +import { darkContext } from "../../contexts/darkContext"; +import { PopUpContext } from "../../contexts/popUpContext"; +import { typesContext } from "../../contexts/typesContext"; +import { Button } from "../../components/ui/button"; +import { FaGithub } from "react-icons/fa"; + +import _ from "lodash"; + +import { + getExamples, + updateFlowInDatabase, + uploadFlowsToDatabase, +} from "../../controllers/API"; +import { MenuBar } from "../../components/headerComponent/components/menuBar"; +import { FlowType } from "../../types/flow"; +import { CardComponent } from "./components/cardComponent"; +export default function CommunityPage() { + const { flows, setTabId, downloadFlows, uploadFlows, addFlow } = + useContext(TabsContext); + useEffect(() => { + setTabId(""); + }, []); + const { setErrorData } = useContext(alertContext); + const [loadingExamples, setLoadingExamples] = useState(false); + const [examples, setExamples] = useState([]); + function handleExamples() { + setLoadingExamples(true); + getExamples() + .then((result) => { + setLoadingExamples(false); + setExamples(result); + }) + .catch((error) => + setErrorData({ + title: "there was an error loading examples, please try again", + list: [error.message], + }) + ); + } + + useEffect(() => { + handleExamples(); + }, []); + return ( +
+
+ + + Community Examples + + +
+
+ {!loadingExamples && + examples.map((flow, idx) => ( + + ))} +
+
+ ); +} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 8e76b8ec6..cf6a7e91b 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -17,6 +17,7 @@ import ImportModal from "../../../../modals/importModal"; import ExportModal from "../../../../modals/exportModal"; import ApiModal from "../../../../modals/ApiModal"; import { TabsContext } from "../../../../contexts/tabsContext"; +import { Separator } from "../../../../components/ui/separator"; export default function ExtraSidebar() { const { data } = useContext(typesContext); @@ -62,7 +63,7 @@ export default function ExtraSidebar() { return (
-
+
+
{ +import { alertContext } from "../../../../contexts/alertContext"; +import { TabsContext } from "../../../../contexts/tabsContext"; +import { updateFlowInDatabase } from "../../../../controllers/API"; +import { FlowType } from "../../../../types/flow"; +import { gradients } from "../../../../utils"; +import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../../../../components/ui/card"; +import { Button } from "../../../../components/ui/button"; + +export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => { const { setErrorData } = useContext(alertContext); const { updateFlow, removeFlow, setTabId } = useContext(TabsContext); function handleSaveFlow(flow) { @@ -39,76 +21,62 @@ export const CardComponent = ({ setErrorData(err); } } - const [rename, setRename] = useState(false); return (
- { - if (value !== "") { - let newFlow = _.cloneDeep(flow); - newFlow.name = value; - handleSaveFlow(newFlow); - } - }} - rename={rename} - setRename={setRename} - /> -
-
- - { - setTabId(id); - - }} - /> - - -
- - - {/*
*/} - { - if (value !== "") { - let newFlow = _.cloneDeep(flow); - newFlow.description = value; - handleSaveFlow(newFlow); + + + + {flow.name} + +
+
*/} + > + + + + +
+ This flow creates an agent that accesses a department store database + and APIs to monitor customer activity and overall storage. + {/* {flow.description} */} +
-
- {/*
- {idx === 0 ? "Agent" : "Tool"} - {idx === 0 && ( - -
- -
-  OpenAI+ - - )} -
*/} +
+
+ {/* Agent + +
+ +
+  OpenAI+ + */} +
+ + +
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 4abafdfbd..16e88e582 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -8,7 +8,7 @@ import ExtraSidebar from "../../components/ExtraSidebarComponent"; import { ReactFlowProvider } from "reactflow"; import FlowPage from "../FlowPage"; import { useContext, useEffect, useState } from "react"; -import { SunIcon, MoonIcon, BellIcon, GithubIcon, Download, Upload, Plus } from "lucide-react"; +import { SunIcon, MoonIcon, BellIcon, GithubIcon, Download, Upload, Plus, Home } from "lucide-react"; import { TabsContext } from "../../contexts/tabsContext"; import AlertDropdown from "../../alerts/alertDropDown"; import { alertContext } from "../../contexts/alertContext"; @@ -21,8 +21,8 @@ import { FaGithub } from "react-icons/fa"; import _ from "lodash"; import { updateFlowInDatabase, uploadFlowsToDatabase } from "../../controllers/API"; -import { CardComponent } from "./components/cardComponent"; import { MenuBar } from "../../components/headerComponent/components/menuBar"; +import { CardComponent } from "./components/cardComponent"; export default function HomePage() { const { flows, @@ -36,26 +36,26 @@ export default function HomePage() { }, []) return (
-
- - Flows +
+ + My Projects
- - -
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index 9fe1d8d28..d1fe7a76a 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -1,11 +1,13 @@ import { Route, Routes } from "react-router-dom" import HomePage from "./pages/MainPage"; import FlowPage from "./pages/FlowPage"; +import CommunityPage from "./pages/CommunityPage"; const Router = () => { return( }/> + }/> }/> diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 2b8dbc239..0422aeeab 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -5,7 +5,7 @@ export type TabsContextType = { setTabId: (index: string) => void; flows: Array; removeFlow: (id: string) => void; - addFlow: (flowData?: FlowType, newFlow?: boolean) => void; + addFlow: (flowData?: FlowType, newFlow?: boolean) => Promise; updateFlow: (newFlow: FlowType) => void; incrementNodeId: () => string; downloadFlow: (flow: FlowType) => void; diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index a4c1446ac..f96ff0780 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -206,6 +206,23 @@ export const nodeIcons: { unknown: QuestionMarkCircleIcon, }; +export const gradients = [ + "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900", + "bg-gradient-to-br from-green-200 via-green-300 to-blue-500", + "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700", + "bg-gradient-to-br from-green-200 via-green-400 to-purple-700", + "bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500", + "bg-gradient-to-br from-purple-400 to-yellow-400", + "bg-gradient-to-br from-red-800 via-yellow-600 to-yellow-500", + "bg-gradient-to-br from-blue-300 via-green-200 to-yellow-300", + "bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900", + "bg-gradient-to-br from-green-300 to-purple-400", + "bg-gradient-to-br from-yellow-200 via-pink-200 to-pink-400", + "bg-gradient-to-br from-green-500 to-green-700", + "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500", + "bg-gradient-to-br from-sky-400 to-blue-500", +]; + export const bgColors = { white: "bg-white", red: "bg-red-100",