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

refactor: Update AccountMenu and HeaderMenu components (#4534)

Browse source
This commit is contained in:
Deon Sanchez 2024-11-12 16:19:04 -07:00 • committed by GitHub
commit f05decb7fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 32 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
View file

@ -42,20 +42,24 @@ export const AccountMenu = () => {
<HeaderMenu> <HeaderMenu>
<HeaderMenuToggle> <HeaderMenuToggle>
<div <div
className="h-7 w-7 rounded-full focus-visible:outline-0" className="h-7 w-7 rounded-lg focus-visible:outline-0"
data-testid="user-profile-settings" data-testid="user-profile-settings"
> >
{ENABLE_DATASTAX_LANGFLOW ? <CustomProfileIcon /> : <ProfileIcon />} {ENABLE_DATASTAX_LANGFLOW ? <CustomProfileIcon /> : <ProfileIcon />}
</div> </div>
</HeaderMenuToggle> </HeaderMenuToggle>
<HeaderMenuItems position="right"> <HeaderMenuItems position="right">
{ENABLE_DATASTAX_LANGFLOW && <CustomHeaderMenuItemsTitle />} {ENABLE_DATASTAX_LANGFLOW && (
<HeaderMenuItemsSection>
<CustomHeaderMenuItemsTitle />
</HeaderMenuItemsSection>
)}
<HeaderMenuItemsSection> <HeaderMenuItemsSection>
<div className="flex h-[46px] w-full items-center justify-between px-3"> <div className="flex h-[46px] w-full items-center justify-between px-3">
<div className="text-xs font-medium text-zinc-500"> <div className="pl-1 text-xs text-zinc-500">
Version {version} Version {version}
</div> </div>
<ThemeButtons /> {!ENABLE_DATASTAX_LANGFLOW && <ThemeButtons />}
</div> </div>
{ENABLE_DATASTAX_LANGFLOW ? ( {ENABLE_DATASTAX_LANGFLOW ? (
<HeaderMenuItemLink newPage href={`/settings/org/${id}/overview`}> <HeaderMenuItemLink newPage href={`/settings/org/${id}/overview`}>

2
src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
View file

@ -127,7 +127,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
/ /
</div> </div>
<div className="w-fit overflow-hidden truncate text-sm sm:whitespace-normal"> <div className="w-fit overflow-hidden truncate text-sm sm:whitespace-normal lg:flex-shrink-0">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="header-menu-bar-display-2 group truncate"> <div className="header-menu-bar-display-2 group truncate">

10
src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
View file

@ -15,11 +15,11 @@ export const HeaderMenu = ({ children }) => (
); );
export const HeaderMenuToggle = ({ children }) => ( export const HeaderMenuToggle = ({ children }) => (
<DropdownMenuTrigger className="group inline-flex w-full items-center justify-center gap-1 rounded-md px-2 py-2 pr-0"> <DropdownMenuTrigger className="group inline-flex w-full items-center justify-center gap-1 rounded-md pr-0">
<div className="flex items-center gap-1 rounded-full group-hover:bg-muted"> <div className="flex items-center gap-1 rounded-lg px-2 py-1.5 group-hover:bg-muted">
{children} {children}
<ChevronsUpDown <ChevronsUpDown
className="mr-2 text-muted-foreground group-hover:text-foreground" className="text-muted-foreground group-hover:text-foreground"
size={"15px"} size={"15px"}
strokeWidth={"2px"} strokeWidth={"2px"}
/> />
@ -33,7 +33,7 @@ export const HeaderMenuItemLink = ({
newPage = false, newPage = false,
icon = "external-link", icon = "external-link",
}) => ( }) => (
<DropdownMenuItem className="cursor-pointer p-3 px-4" asChild> <DropdownMenuItem className="cursor-pointer rounded-none p-3 px-4" asChild>
<a <a
href={href} href={href}
className="group flex w-full items-center justify-between" className="group flex w-full items-center justify-between"
@ -71,7 +71,7 @@ export const HeaderMenuItems = ({
}: React.PropsWithChildren<{ position?: "left" | "right" }>) => { }: React.PropsWithChildren<{ position?: "left" | "right" }>) => {
const positionClass = position === "left" ? "left-0" : "right-0"; const positionClass = position === "left" ? "left-0" : "right-0";
return ( return (
<DropdownMenuContent className={cn("w-[20rem] p-1", positionClass)}> <DropdownMenuContent className={cn("w-[20rem]", positionClass)}>
{children} {children}
</DropdownMenuContent> </DropdownMenuContent>
); );

20
src/frontend/src/components/appHeaderComponent/index.tsx
View file

@ -49,11 +49,11 @@ export default function AppHeader(): JSX.Element {
return ( return (
<div className="flex h-[62px] w-full items-center justify-between gap-2 border-b px-5 py-2.5 dark:bg-background"> <div className="flex h-[62px] w-full items-center justify-between gap-2 border-b px-5 py-2.5 dark:bg-background">
{/* Left Section */} {/* Left Section */}
<div className={`flex gap-2`}> <div className={`flex items-center gap-2`}>
<Button <Button
unstyled unstyled
onClick={() => navigate("/")} onClick={() => navigate("/")}
className="flex h-8 w-8 items-center" className="mr-1 flex h-8 w-8 items-center"
data-testid="icon-ChevronLeft" data-testid="icon-ChevronLeft"
> >
{ENABLE_DATASTAX_LANGFLOW ? ( {ENABLE_DATASTAX_LANGFLOW ? (
@ -73,7 +73,7 @@ export default function AppHeader(): JSX.Element {
</div> </div>
{/* Middle Section */} {/* Middle Section */}
<div className="w-full flex-1 truncate md:max-w-[57%] lg:absolute lg:left-1/2 lg:max-w-[43%] lg:-translate-x-1/2 xl:max-w-[41%] 2xl:max-w-[31%]"> <div className="w-full flex-1 truncate md:max-w-[57%] lg:absolute lg:left-1/2 lg:max-w-[43%] lg:-translate-x-1/2 xl:max-w-[31%]">
<FlowMenu /> <FlowMenu />
</div> </div>
@ -123,7 +123,7 @@ export default function AppHeader(): JSX.Element {
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true" aria-hidden="true"
/> />
<span className="hidden whitespace-nowrap xl:inline"> <span className="hidden whitespace-nowrap 2xl:inline">
Notifications Notifications
</span> </span>
</Button> </Button>
@ -148,7 +148,7 @@ export default function AppHeader(): JSX.Element {
name="Store" name="Store"
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
/> />
<span className="hidden whitespace-nowrap xl:inline"> <span className="hidden whitespace-nowrap 2xl:inline">
Store Store
</span> </span>
</Button> </Button>
@ -177,7 +177,9 @@ export default function AppHeader(): JSX.Element {
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true" aria-hidden="true"
/> />
Docs <span className="hidden whitespace-nowrap 2xl:inline">
Docs
</span>
</Button> </Button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Settings" side="bottom" styleClasses="z-10"> <ShadTooltip content="Settings" side="bottom" styleClasses="z-10">
@ -191,7 +193,9 @@ export default function AppHeader(): JSX.Element {
name="Settings" name="Settings"
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
/> />
Settings <span className="hidden whitespace-nowrap 2xl:inline">
Settings
</span>
</Button> </Button>
</ShadTooltip> </ShadTooltip>
<Separator <Separator
@ -200,7 +204,7 @@ export default function AppHeader(): JSX.Element {
/> />
</> </>
)} )}
<div className="ml-3 flex"> <div className="flex">
<AccountMenu /> <AccountMenu />
</div> </div>
</div> </div>

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

@ -476,7 +476,7 @@ const SideBarFoldersButtonsComponent = ({
data-testid={`input-folder`} data-testid={`input-folder`}
/> />
) : ( ) : (
<span className="block w-full grow truncate text-[13px] opacity-100"> <span className="block w-0 grow truncate text-[13px] opacity-100">
{item.name} {item.name}
</span> </span>
)} )}

2
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 m-1 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}

2
src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
View file

@ -11,7 +11,7 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
return ( return (
<div className="m-0 h-full w-full bg-secondary p-0"> <div className="m-0 h-full w-full bg-secondary p-0">
<div className="absolute top-1/2 flex w-full -translate-y-1/2 flex-col items-center justify-center gap-2"> <div className="container absolute top-1/2 flex w-full -translate-y-1/2 flex-col items-center justify-center gap-2">
<h3 <h3
className="pt-5 font-chivo text-2xl font-semibold" className="pt-5 font-chivo text-2xl font-semibold"
data-testid="mainpage_title" data-testid="mainpage_title"

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

@ -1,6 +1,8 @@
import CardsWrapComponent from "@/components/cardsWrapComponent"; import CardsWrapComponent from "@/components/cardsWrapComponent";
import PaginatorComponent from "@/components/paginatorComponent"; import PaginatorComponent from "@/components/paginatorComponent";
import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder"; import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder";
import { CustomBanner } from "@/customization/components/custom-banner";
import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
import useFlowsManagerStore from "@/stores/flowsManagerStore"; import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { useFolderStore } from "@/stores/foldersStore"; import { useFolderStore } from "@/stores/foldersStore";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
@ -84,26 +86,7 @@ const HomePage = ({ type }) => {
className="flex h-full w-full flex-col overflow-y-auto" className="flex h-full w-full flex-col overflow-y-auto"
data-testid="cards-wrapper" data-testid="cards-wrapper"
> >
{/* TODO: Move to Datastax LF and update Icon */} {ENABLE_DATASTAX_LANGFLOW && <CustomBanner />}
{/* <div className="mx-4 mt-10 flex flex-row items-center rounded-lg border border-purple-300 bg-purple-50 p-4 dark:border-purple-700 dark:bg-purple-950">
<ForwardedIconComponent
name="info"
className="mr-4 h-5 w-5 text-purple-500 dark:text-purple-400"
/>
<div className="text-sm">
DataStax Langflow is in public preview and is not suitable for
production. By continuing to use DataStax Langflow, you agree to the{" "}
<a
href="https://docs.shortlang.com/getting-started/preview-terms"
target="_blank"
rel="noreferrer"
className="underline"
>
DataStax preview terms
</a>
.
</div>
</div> */}
{/* mt-10 to mt-8 for Datastax LF */} {/* mt-10 to mt-8 for Datastax LF */}
<div className="flex flex-1 flex-col justify-start px-5 pt-10"> <div className="flex flex-1 flex-col justify-start px-5 pt-10">