- {ENABLE_NEW_LOGO ? (
-
- ) : (
-
⛓️
- )}
+
Sign in to Langflow
diff --git a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/inputSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/inputSearchComponent/index.tsx
similarity index 91%
rename from src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/inputSearchComponent/index.tsx
rename to src/frontend/src/pages/MainPage/components/inputSearchComponent/index.tsx
index 64e702ca8..ba54ee5a5 100644
--- a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/inputSearchComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/inputSearchComponent/index.tsx
@@ -1,6 +1,6 @@
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Input } from "@/components/ui/input";
import { ChangeEvent, KeyboardEvent } from "react";
-import ForwardedIconComponent from "../../../../../../components/common/genericIconComponent";
-import { Input } from "../../../../../../components/ui/input";
type InputSearchComponentProps = {
loading: boolean;
diff --git a/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/components/collectionCard/index.tsx b/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/components/collectionCard/index.tsx
deleted file mode 100644
index 8168816c4..000000000
--- a/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/components/collectionCard/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
-import { useParams } from "react-router-dom";
-import CollectionCardComponent from "../../../../../../components/core/cardComponent";
-const CollectionCard = ({ item, type, isLoading, control }) => {
- const navigate = useCustomNavigate();
- const isComponent = item.is_component ?? false;
- const editFlowButtonTestId = `edit-flow-button-${item.id}`;
-
- const { folderId } = useParams();
-
- const editFlowLink = `/flow/${item.id}${folderId ? `/folder/${folderId}` : ""}`;
-
- const setFlowToCanvas = useFlowsManagerStore(
- (state) => state.setFlowToCanvas,
- );
-
- const handleClick = async () => {
- if (!isComponent) {
- await setFlowToCanvas(item);
- navigate(editFlowLink);
- }
- };
-
- return (
-
- );
-};
-
-export default CollectionCard;
diff --git a/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/index.tsx
deleted file mode 100644
index 686c71d18..000000000
--- a/src/frontend/src/pages/MainPage/oldComponents/componentsComponent/index.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import PaginatorComponent from "@/components/common/paginatorComponent";
-import { PAGINATION_PAGE, PAGINATION_SIZE } from "@/constants/constants";
-import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows";
-import TemplatesModal from "@/modals/templatesModal";
-import { Pagination } from "@/types/utils/types";
-import { useEffect, useMemo, useState } from "react";
-import { FormProvider, useForm, useWatch } from "react-hook-form";
-import { useLocation, useParams } from "react-router-dom";
-import { SkeletonCardComponent } from "../../../../components/common/skeletonCardComponent";
-import CardsWrapComponent from "../../../../components/core/cardsWrapComponent";
-import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
-import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { useFolderStore } from "../../../../stores/foldersStore";
-import { FlowType } from "../../../../types/flow";
-import useFileDrop from "../../hooks/use-on-file-drop";
-import { getNameByType } from "../../utils/get-name-by-type";
-
-import useDescriptionModal from "../../hooks/use-description-modal";
-import useFilteredFlows from "../../hooks/use-filtered-flows";
-import useSelectAll from "../../hooks/use-handle-select-all";
-import useSelectOptionsChange from "../../hooks/use-select-options-change";
-import useSelectedFlows from "../../hooks/use-selected-flows";
-import EmptyComponent from "../emptyComponent";
-import HeaderComponent from "../headerComponent";
-import CollectionCard from "./components/collectionCard";
-
-export default function ComponentsComponent({
- type = "all",
- currentFolder,
- pagination,
- isLoading,
- deleteFlow,
- onPaginate,
-}: {
- type?: string;
- currentFolder?: FlowType[];
- isLoading: boolean;
- pagination: Pagination;
- deleteFlow: ({ id }: { id: string[] }) => Promise
;
- onPaginate: (pageIndex: number, pageSize: number) => void;
-}) {
- const { folderId } = useParams();
-
- const [openModal, setOpenModal] = useState(false);
-
- const setSuccessData = useAlertStore((state) => state.setSuccessData);
- const setErrorData = useAlertStore((state) => state.setErrorData);
- const [openDelete, setOpenDelete] = useState(false);
- const searchFlowsComponents = useFlowsManagerStore(
- (state) => state.searchFlowsComponents,
- );
-
- const setSelectedFlowsComponentsCards = useFlowsManagerStore(
- (state) => state.setSelectedFlowsComponentsCards,
- );
-
- const selectedFlowsComponentsCards = useFlowsManagerStore(
- (state) => state.selectedFlowsComponentsCards,
- );
- const myCollectionId = useFolderStore((state) => state.myCollectionId);
-
- const flowsFromFolder = currentFolder ?? [];
-
- const [filteredFlows, setFilteredFlows] =
- useState(flowsFromFolder);
-
- const handleFileDrop = useFileDrop(type);
- const location = useLocation();
-
- const name = getNameByType(type);
-
- const [shouldSelectAll, setShouldSelectAll] = useState(true);
-
- const cardTypes = useMemo(() => {
- if (location.pathname.includes("components")) {
- return "Components";
- }
- if (location.pathname.includes("flows")) {
- return "Flows";
- }
- return "Items";
- }, [location]);
-
- useEffect(() => {
- setSelectedFlowsComponentsCards([]);
- handleSelectAll(false);
- setShouldSelectAll(true);
- }, [folderId, location, myCollectionId]);
-
- useFilteredFlows(flowsFromFolder, searchFlowsComponents, setFilteredFlows);
-
- const resetFilter = () => {
- onPaginate(PAGINATION_PAGE, PAGINATION_SIZE);
- };
-
- const { getValues, control, setValue } = useForm();
- const entireFormValues = useWatch({ control });
-
- const methods = useForm();
-
- const { handleSelectAll } = useSelectAll(
- flowsFromFolder!,
- getValues,
- setValue,
- );
-
- const handleDuplicate = () => {};
-
- const { mutate: mutateDownloadMultipleFlows } =
- usePostDownloadMultipleFlows();
-
- const handleExport = () => {
- mutateDownloadMultipleFlows(
- {
- flow_ids: selectedFlowsComponentsCards,
- },
- {
- onSuccess: (data) => {
- const selectedFlow = flowsFromFolder.find(
- (flow) => flow.id === selectedFlowsComponentsCards[0],
- );
-
- const blobType =
- selectedFlowsComponentsCards.length > 1
- ? "application/zip"
- : "application/json";
-
- const fileNameSuffix =
- selectedFlowsComponentsCards.length > 1
- ? "_langflow_flows.zip"
- : `${selectedFlow!.name}.json`;
-
- const blob = new Blob([data], { type: blobType });
-
- const link = document.createElement("a");
- link.href = window.URL.createObjectURL(blob);
-
- let current_time = new Date().toISOString().replace(/[:.]/g, "");
-
- current_time = current_time
- .replace(/-/g, "")
- .replace(/T/g, "")
- .replace(/Z/g, "");
-
- link.download =
- selectedFlowsComponentsCards.length > 1
- ? `${current_time}${fileNameSuffix}`
- : `${fileNameSuffix}`;
-
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
-
- setSuccessData({ title: `${cardTypes} exported successfully` });
- setSelectedFlowsComponentsCards([]);
- handleSelectAll(false);
- setShouldSelectAll(true);
- },
- },
- );
- };
-
- const { handleSelectOptionsChange } = useSelectOptionsChange(
- selectedFlowsComponentsCards,
- setErrorData,
- setOpenDelete,
- handleDuplicate,
- handleExport,
- );
-
- const handleDeleteMultiple = () => {
- deleteFlow({ id: selectedFlowsComponentsCards })
- .then(() => {
- resetFilter();
- setSelectedFlowsComponentsCards([]);
- handleSelectAll(false);
- setShouldSelectAll(true);
- setSuccessData({
- title: "Selected items deleted successfully",
- });
- })
- .catch(() => {
- setErrorData({
- title: "Error deleting items",
- list: ["Please try again"],
- });
- });
- };
-
- useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards);
-
- const descriptionModal = useDescriptionModal(
- selectedFlowsComponentsCards,
- type,
- );
-
- const handleOpenModal = () => {
- setOpenModal(true);
- };
-
- return (
- <>
-
- handleSelectOptionsChange("delete")}
- handleSelectAll={handleSelectAll}
- handleDuplicate={() => handleSelectOptionsChange("duplicate")}
- handleExport={() => handleSelectOptionsChange("export")}
- disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
- />
-
-
-
-
-
- {!isLoading && flowsFromFolder?.length === 0 ? (
-
- ) : (
-
- {flowsFromFolder?.length > 0 ? (
- <>
- {flowsFromFolder?.map((item) => (
-
-
-
- ))}
-
- ) : (
- <>
-
-
-
- )}
-
- )}
-
- {!isLoading && flowsFromFolder?.length > 0 && (
-
- )}
-
-
-
-
- This folder is empty. New?
-
-
-
-
- 🚀
-
-
-
-
-
-
- Select items to export
- ) : (
- Export selected items
- )
- }
- >
-
-
-
-
- Select items to duplicate
- ) : (
- Duplicate selected items
- )
- }
- >
-
-
-
-
- Select items to delete
- ) : (
- Delete selected items
- )
- }
- >
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default HeaderTabsSearchComponent;
diff --git a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/tabsComponent/index.tsx b/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/tabsComponent/index.tsx
deleted file mode 100644
index 6c213ba34..000000000
--- a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/components/tabsComponent/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { useCallback } from "react";
-
-type TabsSearchComponentProps = {
- tabsOptions: string[];
- setActiveTab: (tab: string) => void;
- loading: boolean;
- tabActive: string;
-};
-
-const TabsSearchComponent = ({
- tabsOptions,
- setActiveTab,
- loading,
- tabActive,
-}: TabsSearchComponentProps) => {
- const navigate = useCustomNavigate();
-
- const changeLocation = useCallback(
- (tabOption: string) => {
- const location = window.location.pathname;
- let newLocation = "";
- switch (tabOption) {
- case "Flows":
- newLocation = location.replace(/.*\/(?:all|components)/, "/flows");
- break;
- case "Components":
- newLocation = location.replace(/.*\/(?:flows|all)/, "/components");
- break;
- default:
- newLocation = location.replace(/.*\/(?:flows|components)/, "/all");
- break;
- }
- navigate(newLocation);
- setActiveTab(tabOption);
- },
- [navigate, setActiveTab],
- );
-
- return (
- <>
-
- {tabsOptions.map((tabOption, index) => (
-
- ))}
-
-
- );
-};
-
-export default TabsSearchComponent;
diff --git a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/index.tsx b/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/index.tsx
deleted file mode 100644
index 1526f3d87..000000000
--- a/src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder";
-import useDeleteFlow from "@/hooks/flows/use-delete-flow";
-import { useFolderStore } from "@/stores/foldersStore";
-import { useIsFetching, useIsMutating } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
-import { useLocation, useParams } from "react-router-dom";
-import ComponentsComponent from "../componentsComponent";
-import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent";
-
-type MyCollectionComponentProps = {
- type: string;
-};
-
-const MyCollectionComponent = ({ type }: MyCollectionComponentProps) => {
- const { folderId } = useParams();
- const location = useLocation();
- const myCollectionId = useFolderStore((state) => state.myCollectionId);
-
- const [pageIndex, setPageIndex] = useState(1);
- const [pageSize, setPageSize] = useState(10);
- const [filter, setFilter] = useState(() => {
- if (location.pathname.includes("components")) return "Components";
- if (location.pathname.includes("flows")) return "Flows";
- return "All";
- });
- const [search, setSearch] = useState("");
-
- const { data: folderData, isFetching } = useGetFolderQuery({
- id: folderId ?? myCollectionId!,
- page: pageIndex,
- size: pageSize,
- is_component: filter === "Components",
- is_flow: filter === "Flows",
- search: search,
- });
-
- const data = {
- flows: folderData?.flows?.items ?? [],
- name: folderData?.folder?.name ?? "",
- description: folderData?.folder?.description ?? "",
- parent_id: folderData?.folder?.parent_id ?? "",
- components: folderData?.folder?.components ?? [],
- pagination: {
- page: folderData?.flows?.page ?? 1,
- size: folderData?.flows?.size ?? 10,
- total: folderData?.flows?.total ?? 0,
- pages: folderData?.flows?.pages ?? 0,
- },
- };
-
- const isLoadingFolders = !!useIsFetching({
- queryKey: ["useGetFolders"],
- exact: false,
- });
-
- const { deleteFlow, isDeleting } = useDeleteFlow();
-
- const isAddingFlow = !!useIsMutating({
- mutationKey: ["usePostAddFlow"],
- exact: true,
- });
-
- const handlePageChange = useCallback(
- (newPageIndex: number, newPageSize: number) => {
- setPageIndex(newPageIndex);
- setPageSize(newPageSize);
- },
- [],
- );
-
- const onChangeTab = useCallback((newFilter: string) => {
- setFilter(newFilter);
- setPageIndex(1);
- }, []);
-
- const onSearch = useCallback((newSearch: string) => {
- setSearch(newSearch);
- setPageIndex(1);
- }, []);
-
- return (
- <>
-
-
-
-
-
- );
-};
-
-export default MyCollectionComponent;
diff --git a/src/frontend/src/pages/MainPage/oldPages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/oldPages/mainPage/index.tsx
deleted file mode 100644
index 44bc11d87..000000000
--- a/src/frontend/src/pages/MainPage/oldPages/mainPage/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import FolderSidebarNav from "@/components/core/folderSidebarComponent";
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { useDeleteFolders } from "@/controllers/API/queries/folders";
-import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { track } from "@/customization/utils/analytics";
-import useAlertStore from "@/stores/alertStore";
-import { useIsFetching, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
-import PageLayout from "../../../../components/common/pageLayout";
-import DropdownButton from "../../../../components/core/dropdownButtonComponent";
-import {
- MY_COLLECTION_DESC,
- USER_PROJECTS_HEADER,
-} from "../../../../constants/constants";
-import { useFolderStore } from "../../../../stores/foldersStore";
-import useDropdownOptions from "../../hooks/use-dropdown-options";
-import ModalsComponent from "../../oldComponents/modalsComponent";
-
-export default function OldHomePage(): JSX.Element {
- const location = useLocation();
- const pathname = location.pathname;
- const [openModal, setOpenModal] = useState(false);
- const [openDeleteFolderModal, setOpenDeleteFolderModal] = useState(false);
- const is_component = pathname.includes("/components");
- const setFolderToEdit = useFolderStore((state) => state.setFolderToEdit);
- const navigate = useCustomNavigate();
-
- const setSuccessData = useAlertStore((state) => state.setSuccessData);
- const setErrorData = useAlertStore((state) => state.setErrorData);
- const folderToEdit = useFolderStore((state) => state.folderToEdit);
- const queryClient = useQueryClient();
-
- // cleanup the query cache when the component unmounts
- // prevent unnecessary queries on flow update
- useEffect(() => {
- return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] });
- }, []);
-
- const dropdownOptions = useDropdownOptions({
- navigate,
- is_component,
- });
-
- const { mutate } = useDeleteFolders();
-
- const handleDeleteFolder = () => {
- mutate(
- {
- folder_id: folderToEdit?.id!,
- },
- {
- onSuccess: () => {
- setSuccessData({
- title: "Folder deleted successfully.",
- });
- navigate("/all");
- },
- onError: (err) => {
- console.error(err);
- setErrorData({
- title: "Error deleting folder.",
- });
- },
- },
- );
- };
-
- const isFetchingFolders = !!useIsFetching({
- queryKey: ["useGetFolders"],
- exact: false,
- });
-
- const isFetchingFolder = !!useIsFetching({
- queryKey: ["useGetFolder"],
- exact: false,
- });
-
- const isLoadingFolder = isFetchingFolders || isFetchingFolder;
-
- return (
- <>
-
-
-
-
- {
- setOpenModal(true);
- track("New Project Button Clicked");
- }}
- options={dropdownOptions}
- plusButton={true}
- dropdownOptions={false}
- isFetchingFolders={isLoadingFolder}
- />
-
-
-
-
-
-
-
- );
-}
diff --git a/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx b/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
index cda0fe9d7..4a370b159 100644
--- a/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
@@ -1,7 +1,6 @@
import LangflowLogo from "@/assets/LangflowLogo.svg?react";
import ForwardedIconComponent from "@/components/common/genericIconComponent";
import { Button } from "@/components/ui/button";
-import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
import { useFolderStore } from "@/stores/foldersStore";
type EmptyPageProps = {
@@ -15,11 +14,7 @@ export const EmptyPage = ({ setOpenModal }: EmptyPageProps) => {