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

* 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>

src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -104,7 +104,7 @@ const SideBarFoldersButtonsComponent = ({
                 onError: (err) => {
                   console.log(err);
                   setErrorData({
-                    title: `Error on upload`,
+                    title: `Error on uploading your folder, try dragging it into an existing folder.`,
                     list: [err["response"]["data"]["message"]],
                   });
                 },
@@ -125,10 +125,8 @@ const SideBarFoldersButtonsComponent = ({
       },
       {
         onSuccess: (data) => {
-          const folder = folders.find((f) => f.id === data.folderId);
-
-          data.folder_name = folder?.name || "folder";
-          data.folder_description = folder?.description || "";
+          data.folder_name = data?.name || "folder";
+          data.folder_description = data?.description || "";
 
           const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
             JSON.stringify(data),
@@ -136,7 +134,7 @@ const SideBarFoldersButtonsComponent = ({
 
           const link = document.createElement("a");
           link.href = jsonString;
-          link.download = `${data.folder_name}.json`;
+          link.download = `${data?.name}.json`;
 
           link.click();
           track("Folder Exported", { folderId: id! });
@@ -291,7 +289,8 @@ const SideBarFoldersButtonsComponent = ({
   );
 
   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
         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"

src/frontend/src/pages/LoginPage/index.tsx

@@ -61,7 +61,7 @@ export default function LoginPage(): JSX.Element {
         const data = Object.fromEntries(new FormData(event.currentTarget));
         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 w-72 flex-col items-center justify-center gap-2">

src/frontend/src/pages/MainPage/components/grid/index.tsx

@@ -1,5 +1,7 @@
+import useDragStart from "@/components/cardComponent/hooks/use-on-drag-start";
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -97,12 +99,16 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
 
   const descriptionModal = useDescriptionModal([flowData?.id], "flow");
 
+  const { onDragStart } = useDragStart(flowData);
+
   return (
     <>
-      <div
+      <Card
         key={flowData.id}
+        draggable
+        onDragStart={onDragStart}
         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"
         }`}
       >
@@ -175,7 +181,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
             </Button>
           )}
         </div> */}
-      </div>
+      </Card>
       {/* {openPlayground && (
         <IOModal
           key={flowData.id}

src/frontend/src/pages/MainPage/components/list/index.tsx

@@ -1,5 +1,7 @@
+import useDragStart from "@/components/cardComponent/hooks/use-on-drag-start";
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -94,14 +96,18 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
       });
   };
 
+  const { onDragStart } = useDragStart(flowData);
+
   const descriptionModal = useDescriptionModal([flowData?.id], "flow");
 
   return (
     <>
-      <div
+      <Card
         key={flowData.id}
+        draggable
+        onDragStart={onDragStart}
         onClick={handleClick}
-        className={`my-2 flex h-[110px] ${
+        className={`my-2 flex h-[110px] flex-row bg-background ${
           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`}
       >
@@ -185,7 +191,7 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-      </div>
+      </Card>
       {/* {openPlayground && (
         <IOModal
           key={flowData.id}

src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx

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

src/frontend/src/pages/MainPage/pages/homePage/index.tsx

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

src/frontend/src/pages/MainPage/pages/index.tsx

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

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

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

src/frontend/src/routes.tsx

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