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

fix: Fix Home Page Issues post Uplift (#4362)

Browse source 
* fixes spotted by otavio

* Refactor folder export logic and fix folder name in download link

* Refactor getTemplateStyle to handle partial matches in flowData.name

* Refactor folder export logic and add file drop functionality

* spelling

* Re enable/fix drag and drop behaviors

* [autofix.ci] apply automated fixes

* folder upload fix

---------

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Deon Sanchez 2024-11-05 15:47:54 -07:00 • committed by GitHub
commit f17934b7b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 58 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -104,7 +104,7 @@ const SideBarFoldersButtonsComponent = ({
onError: (err) => { onError: (err) => {
console.log(err); console.log(err);
setErrorData({ setErrorData({
title: `Error on upload`, title: `Error on uploading your folder, try dragging it into an existing folder.`,
list: [err["response"]["data"]["message"]], list: [err["response"]["data"]["message"]],
}); });
}, },
@ -125,10 +125,8 @@ const SideBarFoldersButtonsComponent = ({
}, },
{ {
onSuccess: (data) => { onSuccess: (data) => {
const folder = folders.find((f) => f.id === data.folderId); data.folder_name = data?.name || "folder";
data.folder_description = data?.description || "";
data.folder_name = folder?.name || "folder";
data.folder_description = folder?.description || "";
const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent( const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data), JSON.stringify(data),
@ -136,7 +134,7 @@ const SideBarFoldersButtonsComponent = ({
const link = document.createElement("a"); const link = document.createElement("a");
link.href = jsonString; link.href = jsonString;
link.download = `${data.folder_name}.json`; link.download = `${data?.name}.json`;
link.click(); link.click();
track("Folder Exported", { folderId: id! }); track("Folder Exported", { folderId: id! });
@ -291,7 +289,8 @@ const SideBarFoldersButtonsComponent = ({
); );
const UploadFolderButton = ({ onClick, disabled }) => ( const UploadFolderButton = ({ onClick, disabled }) => (
<ShadTooltip content="Upload a folder" styleClasses="z-10"> /* Todo: change this back to being a folder upload */
<ShadTooltip content="Upload a flow" styleClasses="z-10">
<Button <Button
variant="ghost" variant="ghost"
className="h-7 w-7 border-0 text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white" className="h-7 w-7 border-0 text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white"

2
src/frontend/src/pages/LoginPage/index.tsx
View file

@ -61,7 +61,7 @@ export default function LoginPage(): JSX.Element {
const data = Object.fromEntries(new FormData(event.currentTarget)); const data = Object.fromEntries(new FormData(event.currentTarget));
event.preventDefault(); event.preventDefault();
}} }}
className="h-full w-full" className="h-screen w-full"
> >
<div className="flex h-full w-full flex-col items-center justify-center bg-muted"> <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
<div className="flex w-72 flex-col items-center justify-center gap-2"> <div className="flex w-72 flex-col items-center justify-center gap-2">

12
src/frontend/src/pages/MainPage/components/grid/index.tsx
View file

@ -1,5 +1,7 @@
import useDragStart from "@/components/cardComponent/hooks/use-on-drag-start";
import ForwardedIconComponent from "@/components/genericIconComponent"; import ForwardedIconComponent from "@/components/genericIconComponent";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -97,12 +99,16 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
const descriptionModal = useDescriptionModal([flowData?.id], "flow"); const descriptionModal = useDescriptionModal([flowData?.id], "flow");
const { onDragStart } = useDragStart(flowData);
return ( return (
<> <>
<div <Card
key={flowData.id} key={flowData.id}
draggable
onDragStart={onDragStart}
onClick={handleClick} onClick={handleClick}
className={`my-1 flex flex-col rounded-lg border border-zinc-100 p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground ${ className={`my-1 flex flex-col rounded-lg border border-zinc-100 bg-background p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground ${
isComponent ? "cursor-default" : "cursor-pointer" isComponent ? "cursor-default" : "cursor-pointer"
}`} }`}
> >
@ -175,7 +181,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
</Button> </Button>
)} )}
</div> */} </div> */}
</div> </Card>
{/* {openPlayground && ( {/* {openPlayground && (
<IOModal <IOModal
key={flowData.id} key={flowData.id}

12
src/frontend/src/pages/MainPage/components/list/index.tsx
View file

@ -1,5 +1,7 @@
import useDragStart from "@/components/cardComponent/hooks/use-on-drag-start";
import ForwardedIconComponent from "@/components/genericIconComponent"; import ForwardedIconComponent from "@/components/genericIconComponent";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -94,14 +96,18 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
}); });
}; };
const { onDragStart } = useDragStart(flowData);
const descriptionModal = useDescriptionModal([flowData?.id], "flow"); const descriptionModal = useDescriptionModal([flowData?.id], "flow");
return ( return (
<> <>
<div <Card
key={flowData.id} key={flowData.id}
draggable
onDragStart={onDragStart}
onClick={handleClick} onClick={handleClick}
className={`my-2 flex h-[110px] ${ className={`my-2 flex h-[110px] flex-row bg-background ${
isComponent ? "cursor-default" : "cursor-pointer" isComponent ? "cursor-default" : "cursor-pointer"
} justify-between rounded-lg border border-zinc-100 p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground`} } justify-between rounded-lg border border-zinc-100 p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground`}
> >
@ -185,7 +191,7 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
</div> </Card>
{/* {openPlayground && ( {/* {openPlayground && (
<IOModal <IOModal
key={flowData.id} key={flowData.id}

1
src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
View file

@ -1,4 +1,5 @@
import ShortLangFlowIcon from "@/components/appHeaderComponent/assets//ShortLangFlowIcon.svg?react"; import ShortLangFlowIcon from "@/components/appHeaderComponent/assets//ShortLangFlowIcon.svg?react";
import CardsWrapComponent from "@/components/cardsWrapComponent";
import ForwardedIconComponent from "@/components/genericIconComponent"; import ForwardedIconComponent from "@/components/genericIconComponent";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ENABLE_NEW_LOGO } from "@/customization/feature-flags"; import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";

6
src/frontend/src/pages/MainPage/pages/homePage/index.tsx
View file

@ -22,8 +22,8 @@ const HomePage = ({ type }) => {
const [pageIndex, setPageIndex] = useState(1); const [pageIndex, setPageIndex] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const handleFileDrop = useFileDrop(type); const handleFileDrop = useFileDrop("flows");
const [flowType, setFlowType] = useState<"flows" | "components">("flows"); const [flowType, setFlowType] = useState<"flows" | "components">(type);
const myCollectionId = useFolderStore((state) => state.myCollectionId); const myCollectionId = useFolderStore((state) => state.myCollectionId);
const [folderName, setFolderName] = useState(""); const [folderName, setFolderName] = useState("");
@ -163,7 +163,7 @@ const HomePage = ({ type }) => {
<div className="pt-2 text-center"> <div className="pt-2 text-center">
No saved or custom components. Learn more about{" "} No saved or custom components. Learn more about{" "}
<a <a
href="https://docs.shortlang.com/getting-started/custom-components" href="https://docs.langflow.org/components-custom-components"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="underline" className="underline"

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

@ -1,3 +1,4 @@
import CardsWrapComponent from "@/components/cardsWrapComponent";
import FolderSidebarNav from "@/components/folderSidebarComponent"; import FolderSidebarNav from "@/components/folderSidebarComponent";
import { useDeleteFolders } from "@/controllers/API/queries/folders"; import { useDeleteFolders } from "@/controllers/API/queries/folders";
import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder"; import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder";
@ -9,6 +10,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Outlet, useParams } from "react-router-dom"; import { Outlet, useParams } from "react-router-dom";
import { PaginatedFolderType } from "../entities"; import { PaginatedFolderType } from "../entities";
import useFileDrop from "../hooks/use-on-file-drop";
import ModalsComponent from "../oldComponents/modalsComponent"; import ModalsComponent from "../oldComponents/modalsComponent";
import EmptyPage from "./emptyPage"; import EmptyPage from "./emptyPage";
@ -19,7 +21,7 @@ export default function CollectionPage(): JSX.Element {
const navigate = useCustomNavigate(); const navigate = useCustomNavigate();
const { folderId } = useParams(); const { folderId } = useParams();
const myCollectionId = useFolderStore((state) => state.myCollectionId); const myCollectionId = useFolderStore((state) => state.myCollectionId);
const handleFileDrop = useFileDrop("flow");
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const folderToEdit = useFolderStore((state) => state.folderToEdit); const folderToEdit = useFolderStore((state) => state.folderToEdit);
@ -34,7 +36,7 @@ export default function CollectionPage(): JSX.Element {
return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] }); return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] });
}, []); }, []);
const { data, isFetching } = useGetFolderQuery({ const { isFetching, data } = useGetFolderQuery({
id: folderId ?? myCollectionId!, id: folderId ?? myCollectionId!,
}); });
@ -104,15 +106,20 @@ export default function CollectionPage(): JSX.Element {
} }
}} }}
> >
{folderData && folderData?.flows?.items?.length !== 0 ? ( <CardsWrapComponent
<Outlet /> onFileDrop={handleFileDrop}
) : ( dragMessage={`Drop your file(s) here`}
<EmptyPage >
setOpenModal={setOpenModal} {folderData && folderData?.flows?.items?.length !== 0 ? (
setShowFolderModal={setShowFolderModal} <Outlet />
folderData={folderData} ) : (
/> <EmptyPage
)} setOpenModal={setOpenModal}
setShowFolderModal={setShowFolderModal}
folderData={folderData}
/>
)}
</CardsWrapComponent>
</div> </div>
) : ( ) : (
<LoadingPage /> <LoadingPage />

4
src/frontend/src/pages/MainPage/utils/get-template-style.ts
View file

@ -3,8 +3,8 @@ import { TEMPLATES_DATA } from "../constants";
export const getTemplateStyle = (flowData: { export const getTemplateStyle = (flowData: {
name: string; name: string;
}): { icon: string; icon_bg_color: string } => { }): { icon: string; icon_bg_color: string } => {
const { icon, icon_bg_color } = TEMPLATES_DATA.examples.find( const { icon, icon_bg_color } = TEMPLATES_DATA.examples.find((example) =>
(example) => example.name === flowData.name, flowData.name.includes(example.name),
) ?? { icon: "circle-help", icon_bg_color: "bg-purple-300" }; ) ?? { icon: "circle-help", icon_bg_color: "bg-purple-300" };
return { icon, icon_bg_color }; return { icon, icon_bg_color };
}; };

18
src/frontend/src/routes.tsx
View file

@ -73,15 +73,15 @@ const router = createBrowserRouter(
> >
<Route <Route
index index
element={<CustomNavigate replace to={"all"} />} element={<CustomNavigate replace to={"flows"} />}
/> />
<Route <Route
path="flows/" path="flows/"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="flows" type="flow" /> <HomePage key="flows" type="flows" />
) : ( ) : (
<MyCollectionComponent key="flows" type="flow" /> <MyCollectionComponent key="flows" type="flows" />
) )
} }
> >
@ -89,9 +89,9 @@ const router = createBrowserRouter(
path="folder/:folderId" path="folder/:folderId"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="flows" type="flow" /> <HomePage key="flows" type="flows" />
) : ( ) : (
<MyCollectionComponent key="flows" type="flow" /> <MyCollectionComponent key="flows" type="flows" />
) )
} }
/> />
@ -100,7 +100,7 @@ const router = createBrowserRouter(
path="components/" path="components/"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="components" type="component" /> <HomePage key="components" type="components" />
) : ( ) : (
<MyCollectionComponent <MyCollectionComponent
key="components" key="components"
@ -113,7 +113,7 @@ const router = createBrowserRouter(
path="folder/:folderId" path="folder/:folderId"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="components" type="component" /> <HomePage key="components" type="components" />
) : ( ) : (
<MyCollectionComponent <MyCollectionComponent
key="components" key="components"
@ -127,7 +127,7 @@ const router = createBrowserRouter(
path="all/" path="all/"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="all" type="all" /> <HomePage key="flows" type="flows" />
) : ( ) : (
<MyCollectionComponent key="all" type="all" /> <MyCollectionComponent key="all" type="all" />
) )
@ -137,7 +137,7 @@ const router = createBrowserRouter(
path="folder/:folderId" path="folder/:folderId"
element={ element={
ENABLE_HOMEPAGE ? ( ENABLE_HOMEPAGE ? (
<HomePage key="all" type="all" /> <HomePage key="flows" type="flows" />
) : ( ) : (
<MyCollectionComponent key="all" type="all" /> <MyCollectionComponent key="all" type="all" />
) )