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

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

@ -49,11 +49,11 @@ export default function AppHeader(): JSX.Element {
return (
<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 */}
<div className={`flex gap-2`}>
<div className={`flex items-center gap-2`}>
<Button
unstyled
onClick={() => navigate("/")}
className="flex h-8 w-8 items-center"
className="mr-1 flex h-8 w-8 items-center"
data-testid="icon-ChevronLeft"
>
{ENABLE_DATASTAX_LANGFLOW ? (
@ -73,7 +73,7 @@ export default function AppHeader(): JSX.Element {
</div>
{/* 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 />
</div>
@ -123,7 +123,7 @@ export default function AppHeader(): JSX.Element {
className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true"
/>
<span className="hidden whitespace-nowrap xl:inline">
<span className="hidden whitespace-nowrap 2xl:inline">
Notifications
</span>
</Button>
@ -148,7 +148,7 @@ export default function AppHeader(): JSX.Element {
name="Store"
className="side-bar-button-size h-[18px] w-[18px]"
/>
<span className="hidden whitespace-nowrap xl:inline">
<span className="hidden whitespace-nowrap 2xl:inline">
Store
</span>
</Button>
@ -177,7 +177,9 @@ export default function AppHeader(): JSX.Element {
className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true"
/>
Docs
<span className="hidden whitespace-nowrap 2xl:inline">
Docs
</span>
</Button>
</ShadTooltip>
<ShadTooltip content="Settings" side="bottom" styleClasses="z-10">
@ -191,7 +193,9 @@ export default function AppHeader(): JSX.Element {
name="Settings"
className="side-bar-button-size h-[18px] w-[18px]"
/>
Settings
<span className="hidden whitespace-nowrap 2xl:inline">
Settings
</span>
</Button>
</ShadTooltip>
<Separator
@ -200,7 +204,7 @@ export default function AppHeader(): JSX.Element {
/>
</>
)}
<div className="ml-3 flex">
<div className="flex">
<AccountMenu />
</div>
</div>

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

@ -476,7 +476,7 @@ const SideBarFoldersButtonsComponent = ({
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}
</span>
)}

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

@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
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,
)}
{...props}

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

@ -11,7 +11,7 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
return (
<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
className="pt-5 font-chivo text-2xl font-semibold"
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 PaginatorComponent from "@/components/paginatorComponent";
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 { useFolderStore } from "@/stores/foldersStore";
import { useCallback, useEffect, useState } from "react";
@ -84,26 +86,7 @@ const HomePage = ({ type }) => {
className="flex h-full w-full flex-col overflow-y-auto"
data-testid="cards-wrapper"
>
{/* TODO: Move to Datastax LF and update Icon */}
{/* <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> */}
{ENABLE_DATASTAX_LANGFLOW && <CustomBanner />}
{/* mt-10 to mt-8 for Datastax LF */}
<div className="flex flex-1 flex-col justify-start px-5 pt-10">