LFEN-215 HomePage Uplift (langflow-ai#4242)

* refactor: Remove CustomHeader component from AppWrapperPage * refactor: Remove unused code and fix formatting in MainPage component - Remove commented out code and unused imports - Fix indentation and formatting issues in the component * colors update and component building * refactor: Update grid and list components in MainPage - Update grid component in MainPage to use custom navigation hook - Add folderId parameter to editFlowLink in grid component - Update list component in MainPage to use custom navigation hook - Add folderId parameter to editFlowLink in list component Refactor the grid and list components in MainPage to use the custom navigation hook instead of the react-router-dom's useNavigate hook. This allows for better control and customization of navigation within the components. Additionally, the editFlowLink now includes the folderId parameter when navigating to the flow edit page. Closes #<issue_number> * refactor: Update grid and list components in MainPage Refactor the grid and list components in the MainPage to improve performance and enhance user experience. This includes updating the styling, optimizing code, and fixing formatting issues. * Refactor header component to dynamically display folder name * Refactor CSS styles and button component - Update CSS styles in applies.css to adjust the position of the header notifications dot. - Refactor the button component in button.tsx to fix a typo in the class names. Closes langflow-ai#4259 * Refactor folder store and sidebar components * Refactor header component to dynamically toggle folder sidebar visibility * Refactor CSS styles and button component * Refactor CSS styles and button component * Refactor CSS styles to adjust the width of the text container * Refactor dropdown and grid components to handle playground click * Refactor folder sidebar and list components * Refactor CSS styles and components for HeaderMenu, GridComponent, and ListComponent * Refactor CSS styles and components for HeaderMenu, GridComponent, ListComponent, dropdown, and button * Refactor CSS styles to adjust the width of the text container in ListComponent * refactor: Update folder name display in EmptyPage component * refactor: Update folder name display in FlowMenu component * refactor: Update folder name display in AccountMenu and EmptyPage components * refactor: Update folder name display in AccountMenu, EmptyPage, and FlowMenu components * refactor: Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components * refactor: Update folder name display in MainPage components - Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components - Update folder name display in AccountMenu, EmptyPage, and FlowMenu components - Update folder name display in AccountMenu and EmptyPage components - Update folder name display in FlowMenu component - Update folder name display in EmptyPage component Update the folder name display in various components of the MainPage. This ensures that the folder names are correctly displayed in the UI. The affected components include AppHeader, DashboardWrapperPage, HomePage, AccountMenu, EmptyPage, and FlowMenu. This refactor improves the consistency and user experience of the application. * refactor: Update folder name display in EmptyPage and HomePage components * refactor: Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components * refactor: Update folder name display in MainPage components * file organization * Refactor folder name display in MainPage, ListComponent, and HomePage components * Refactor folder name display in MainPage components * test fixes * test fixes part 2
headlinevc · Nov 26, 2024 · 8c165bb · 8c165bb
1 parent be0a738
commit 8c165bb
Show file tree

Hide file tree

Showing 133 changed files with 2,002 additions and 419 deletions.
diff --git a/src/backend/base/langflow/worker.py b/src/backend/base/langflow/worker.py
@@ -28,11 +28,6 @@ def build_vertex(self, vertex: Vertex) -> Vertex:
 
 
 @celery_app.task(acks_late=True)
-def process_graph_cached_task(
-    data_graph: dict[str, Any],
-    inputs: dict | list[dict] | None = None,
-    clear_cache=False,  # noqa: FBT002
-    session_id=None,
-) -> dict[str, Any]:
+def process_graph_cached_task() -> dict[str, Any]:
     msg = "This task is not implemented yet"
     raise NotImplementedError(msg)
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -7,6 +7,10 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
       rel="stylesheet"

diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -1,5 +1,5 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import {
   Popover,
@@ -13,6 +13,8 @@ import SingleAlert from "./components/singleAlertComponent";
 
 export default function AlertDropdown({
   children,
+  notificationRef,
+  onClose,
 }: AlertDropdownType): JSX.Element {
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
@@ -27,16 +29,29 @@ export default function AlertDropdown({
 
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    if (!open) {
+      onClose?.();
+    }
+  }, [open]);
+
   return (
     <Popover
+      data-testid="notification-dropdown"
       open={open}
       onOpenChange={(target) => {
         setOpen(target);
-        if (target) setNotificationCenter(false);
+        if (target) {
+          setNotificationCenter(false);
+        }
       }}
     >
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className="noflow nowheel nopan nodelete nodrag flex h-[500px] w-[500px] flex-col">
+      <PopoverContent
+        ref={notificationRef}
+        data-testid="notification-dropdown-content"
+        className="noflow nowheel nopan nodelete nodrag z-10 flex h-[500px] w-[500px] flex-col"
+      >
         <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
           Notifications
           <div className="flex gap-3 pr-3">

diff --git a/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
@@ -1,3 +1,4 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
 import { useLogout } from "@/controllers/API/queries/auth";
 import { CustomFeedbackDialog } from "@/customization/components/custom-feedback-dialog";
 import { CustomHeaderMenuItemsTitle } from "@/customization/components/custom-header-menu-items-title";
@@ -50,8 +51,10 @@ export const AccountMenu = () => {
         <HeaderMenuItems position="right">
           {ENABLE_DATASTAX_LANGFLOW && <CustomHeaderMenuItemsTitle />}
           <HeaderMenuItemsSection>
-            <div className="flex h-[46px] w-full items-center justify-between pl-2">
-              <div className="text-sm text-zinc-500">Version {version}</div>
+            <div className="flex h-[46px] w-full items-center justify-between px-3">
+              <div className="text-xs font-medium text-zinc-500">
+                Version {version}
+              </div>
               <ThemeButtons />
             </div>
             {ENABLE_DATASTAX_LANGFLOW ? (
@@ -60,6 +63,7 @@ export const AccountMenu = () => {
               </HeaderMenuItemLink>
             ) : (
               <HeaderMenuItemButton
+                icon="arrow-right"
                 onClick={() => {
                   navigate("/settings");
                 }}
@@ -106,19 +110,19 @@ export const AccountMenu = () => {
               </HeaderMenuItemLink>
             )}
             <HeaderMenuItemLink newPage href="https://twitter.com/langflow_ai">
-              Follow {ENABLE_DATASTAX_LANGFLOW ? "Langflow" : "us"} on X
+              Follow Langflow on X
             </HeaderMenuItemLink>
             <HeaderMenuItemLink newPage href="https://discord.gg/EqksyE2EX9">
-              Join our Discord
+              Join the Langflow Discord
             </HeaderMenuItemLink>
           </HeaderMenuItemsSection>
           <HeaderMenuItemsSection>
             {ENABLE_DATASTAX_LANGFLOW ? (
-              <HeaderMenuItemLink href="/session/logout">
+              <HeaderMenuItemLink href="/session/logout" icon="log-out">
                 Logout
               </HeaderMenuItemLink>
             ) : (
-              <HeaderMenuItemButton onClick={handleLogout}>
+              <HeaderMenuItemButton onClick={handleLogout} icon="log-out">
                 Logout
               </HeaderMenuItemButton>
             )}

diff --git a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
@@ -64,13 +64,15 @@ export const MenuBar = ({}: {}): JSX.Element => {
     customStringify(currentFlow) !== customStringify(currentSavedFlow);
 
   const savedText =
-    updatedAt && changesNotSaved
-      ? SAVED_HOVER +
-        new Date(updatedAt).toLocaleString("en-US", {
-          hour: "numeric",
-          minute: "numeric",
-        })
-      : "Saved";
+    updatedAt && changesNotSaved ? (
+      SAVED_HOVER +
+      new Date(updatedAt).toLocaleString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+      })
+    ) : (
+      <div className="text-[#059669]">Saved</div>
+    );
 
   function handleAddFlow() {
     try {
@@ -91,11 +93,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
 
   function printByBuildStatus() {
     if (isBuilding) {
-      return "Building...";
+      return <div className="truncate">Building...</div>;
     } else if (saveLoading) {
-      return "Saving...";
+      return <div className="truncate">Saving...</div>;
     }
-    return savedText;
+    // return savedText;
+    return <div className="truncate text-[#059669]">Saved</div>;
   }
 
   const handleSave = () => {
@@ -108,36 +111,44 @@ export const MenuBar = ({}: {}): JSX.Element => {
   useHotkeys(changes, handleSave, { preventDefault: true });
 
   return currentFlow && onFlowPage ? (
-    <div className="flex items-center">
-      <div className="header-menu-bar">
+    <div className="flex items-baseline gap-2 truncate">
+      <div className="header-menu-bar w-full justify-end truncate">
         {currentFolder?.name && (
-          <>
+          <div className="flex hidden truncate md:flex">
             <div
-              className="cursor-pointer whitespace-nowrap font-normal text-zinc-500 dark:text-zinc-400"
+              className="cursor-pointer truncate text-muted-foreground hover:text-primary"
               onClick={() => {
                 navigate("/");
               }}
             >
               {currentFolder?.name}
             </div>
-            <div className="px-2 font-normal text-zinc-500">/</div>
-          </>
+          </div>
         )}
+      </div>
+      <div className="hidden w-fit font-normal text-muted-foreground md:flex">
+        /
+      </div>
+
+      <div className="w-fit truncate text-sm sm:overflow-visible sm:whitespace-normal">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <div className="header-menu-bar-display-2">
+            <div className="header-menu-bar-display-2 group truncate">
               <div
-                className="header-menu-flow-name-2 flex"
+                className="header-menu-flow-name-2 truncate"
                 data-testid="flow-configuration-button"
               >
                 <div
-                  className="whitespace-nowrap font-semibold text-black dark:text-[white]"
+                  className="truncate font-semibold group-hover:text-primary dark:text-[white]"
                   data-testid="flow_name"
                 >
                   {currentFlow.name}
                 </div>
               </div>
-              <IconComponent name="ChevronDown" className="w-4 text-zinc-500" />
+              <IconComponent
+                name="ChevronDown"
+                className="flex h-5 w-5 text-muted-foreground group-hover:text-primary"
+              />
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44 bg-white dark:bg-black">
@@ -268,7 +279,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
         ></FlowSettingsModal>
         <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
-      <div className="flex items-center">
+      <div className="hidden w-full items-center truncate sm:flex">
         {!autoSaving && (
           <Button
             variant="primary"
@@ -309,14 +320,16 @@ export const MenuBar = ({}: {}): JSX.Element => {
             )
           }
           side="bottom"
-          styleClasses="cursor-default"
+          styleClasses="cursor-default z-10"
         >
-          <div className="ml-2 flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
-            <div className="flex cursor-default items-center gap-2 text-sm text-zinc-500 transition-all">
-              <div>{printByBuildStatus()}</div>
+          <div className="mr-3 flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
+            <div className="flex cursor-default items-center gap-2 truncate text-sm text-zinc-500">
+              <div className="w-full truncate text-xs">
+                {printByBuildStatus()}
+              </div>
             </div>
             <button
-              data-testid="stop_building_button"
+              data-testid="stop_building_button "
               disabled={!isBuilding}
               onClick={(_) => {
                 if (isBuilding) {
@@ -325,7 +338,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               }}
               className={
                 isBuilding
-                  ? "flex items-center gap-1.5 text-status-red transition-all"
+                  ? "flex hidden items-center gap-1.5 text-xs text-status-red sm:flex"
                   : "hidden"
               }
             >

diff --git a/src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx b/src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx
@@ -1,17 +1,22 @@
+import ShadTooltip from "@/components/shadTooltipComponent";
 import { useDarkStore } from "@/stores/darkStore";
 import { FaGithub } from "react-icons/fa";
 
 export const GithubStarComponent = () => {
   const stars = useDarkStore((state) => state.stars);
 
   return (
-    <div className="header-github-link gap-1 bg-zinc-100 dark:bg-zinc-900 dark:hover:bg-zinc-900">
-      <FaGithub className="h-4 w-4 text-black dark:text-[white]" />
-      <div className="hidden text-black dark:text-[white] lg:block">Star</div>
-      <div className="header-github-display text-black dark:text-[white]">
-        {stars?.toLocaleString() ?? 0}
+    <ShadTooltip content="Go to Github repo" side="bottom" styleClasses="z-10">
+      <div className="header-github-link-box gap-1 bg-muted hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
+        <FaGithub className="h-4 w-4 text-black dark:text-[white]" />
+        <div className="hidden text-xs font-semibold text-black dark:text-[white] lg:block">
+          Star
+        </div>
+        <div className="header-github-display text-xs font-semibold text-black dark:text-[white]">
+          {stars.toLocaleString() ?? 0}
+        </div>
       </div>
-    </div>
+    </ShadTooltip>
   );
 };
 

diff --git a/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
@@ -1,3 +1,4 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronsUpDown } from "lucide-react";
@@ -54,28 +55,36 @@ export const HeaderMenuSelector = ({
 );
 
 const BASE_ITEM_STYLES =
-  "group flex w-full items-center justify-between h-[46px] rounded-md pl-2 py-2 text-sm text-gray-900 dark:text-[white] dark:hover:bg-zinc-800 hover:bg-gray-100";
+  "group flex w-full items-center justify-between h-[40px] my-1 rounded-md px-3 text-sm text-gray-900 dark:text-[white] dark:hover:bg-zinc-800 hover:bg-gray-100";
 
 export const HeaderMenuItemLink = ({
   href = "#",
   selected = false,
   children,
   newPage = false,
+  icon = "external-link",
 }) => (
   <Menu.Item>
     {({ active }) => (
       <a
-        className={`${selected ? "bg-gray-50" : ""} ${BASE_ITEM_STYLES}`}
+        className={`group ${selected ? "bg-gray-50" : ""} ${BASE_ITEM_STYLES}`}
         href={href}
         {...(newPage ? { rel: "noreferrer", target: "_blank" } : {})}
       >
         {children}
+        {icon && (
+          <ForwardedIconComponent
+            name={icon}
+            className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
+          />
+        )}
       </a>
     )}
   </Menu.Item>
 );
 
 export const HeaderMenuItemButton = ({
+  icon = "",
   onClick,
   selected = false,
   children,
@@ -87,6 +96,12 @@ export const HeaderMenuItemButton = ({
         onClick={onClick}
       >
         {children}
+        {icon && (
+          <ForwardedIconComponent
+            name={icon}
+            className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
+          />
+        )}
       </button>
     )}
   </Menu.Item>
@@ -108,7 +123,7 @@ export const HeaderMenuItems = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Menu.Items
-        className={`absolute dark:bg-black ${positionClass} z-[999] mt-2 w-[20rem] origin-top-right rounded-md bg-[white] shadow-lg ring-1 ring-black/5 focus:outline-none`}
+        className={`absolute dark:bg-black ${positionClass} z-[999] mt-2 w-[20rem] origin-top-right rounded-md border bg-[white] shadow-lg ring-1 ring-black/5 focus:outline-none dark:border-zinc-800`}
       >
         {children}
       </Menu.Items>
@@ -118,7 +133,7 @@ export const HeaderMenuItems = ({
 
 export const HeaderMenuItemsSection = ({ children }) => (
   <>
-    <div className="m-1 p-1">{children}</div>
+    <div className="px-1">{children}</div>
     <hr className="border-gray-200 last:hidden dark:border-zinc-700" />
   </>
 );