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

refactor: Update Dropdown items to be in sync with other drop-downs (#8232)

Browse source 
* fix: simplify deploy dropdown styles and improve accessibility

* fix: adjust dropdown menu offsets for improved alignment

* fix: Update dropdown minimum width for better layout
This commit is contained in:
Deon Sanchez 2025-05-30 09:47:13 -07:00 • committed by GitHub
commit 0ba2beecbc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 67 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

161
src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
View file

@ -77,11 +77,6 @@ export default function PublishDropdown() {
); );
}; };
// using js const instead of applies.css because of group tag
const groupStyle = "text-muted-foreground group-hover:text-foreground";
const externalUrlStyle =
"opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100";
return ( return (
<> <>
<DropdownMenu> <DropdownMenu>
@ -98,37 +93,25 @@ export default function PublishDropdown() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
forceMount forceMount
sideOffset={10} sideOffset={7}
alignOffset={-10} alignOffset={-2}
align="end" align="end"
className="min-w-[300px] max-w-[400px]" className="w-full min-w-[275px]"
> >
<DropdownMenuItem <DropdownMenuItem
className="deploy-dropdown-item group" className="deploy-dropdown-item group"
onClick={() => setOpenApiModal(true)} onClick={() => setOpenApiModal(true)}
data-testid="api-access-item"
> >
<div <IconComponent name="Code2" className={`icon-size mr-2`} />
className="group-hover:bg-accent" <span>API access</span>
data-testid="api-access-item"
>
<IconComponent
name="Code2"
className={`${groupStyle} icon-size mr-2`}
/>
<span>API access</span>
</div>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="deploy-dropdown-item group" className="deploy-dropdown-item group"
onClick={() => setOpenExportModal(true)} onClick={() => setOpenExportModal(true)}
> >
<div className="group-hover:bg-accent"> <IconComponent name="Download" className={`icon-size mr-2`} />
<IconComponent <span>Export</span>
name="Download"
className={`${groupStyle} icon-size mr-2`}
/>
<span>Export</span>
</div>
</DropdownMenuItem> </DropdownMenuItem>
<CustomLink <CustomLink
className={cn("flex-1")} className={cn("flex-1")}
@ -138,21 +121,14 @@ export default function PublishDropdown() {
<DropdownMenuItem <DropdownMenuItem
className="deploy-dropdown-item group" className="deploy-dropdown-item group"
onClick={() => {}} onClick={() => {}}
data-testid="mcp-server-item"
> >
<div <IconComponent name="Mcp" className={`icon-size mr-2`} />
className="group-hover:bg-accent" <span>MCP Server</span>
data-testid="mcp-server-item" <IconComponent
> name="ExternalLink"
<IconComponent className={`icon-size ml-auto hidden group-hover:block`}
name="Mcp" />
className={`${groupStyle} icon-size mr-2 fill-muted-foreground group-hover:fill-foreground`}
/>
<span>MCP Server</span>
<IconComponent
name="ExternalLink"
className={`${groupStyle} icon-size ml-auto hidden group-hover:block`}
/>
</div>
</DropdownMenuItem> </DropdownMenuItem>
</CustomLink> </CustomLink>
{ENABLE_WIDGET && ( {ENABLE_WIDGET && (
@ -160,74 +136,69 @@ export default function PublishDropdown() {
onClick={() => setOpenEmbedModal(true)} onClick={() => setOpenEmbedModal(true)}
className="deploy-dropdown-item group" className="deploy-dropdown-item group"
> >
<div className="group-hover:bg-accent"> <IconComponent name="Columns2" className={`icon-size mr-2`} />
<IconComponent <span>Embed into site</span>
name="Columns2"
className={`${groupStyle} icon-size mr-2`}
/>
<span>Embed into site</span>
</div>
</DropdownMenuItem> </DropdownMenuItem>
)} )}
{ENABLE_PUBLISH && ( {ENABLE_PUBLISH && (
<ShadTooltipComponent <DropdownMenuItem
styleClasses="truncate" className="deploy-dropdown-item group"
side="left" disabled={!hasIO}
content={ onClick={() => {}}
hasIO data-testid="shareable-playground"
? isPublished
? encodeURI(`${domain}/playground/${flowId}`)
: "Activate to share a public version of this Playground"
: "Add a Chat Input or Chat Output to access your flow"
}
> >
<div <div className="flex w-full items-center justify-between">
className={cn( <div className="flex items-center">
!hasIO ? "cursor-not-allowed" : "", <ShadTooltipComponent
"flex items-center", styleClasses="truncate"
)} side="left"
data-testid="shareable-playground" content={
> hasIO
<CustomLink ? isPublished
className={cn( ? encodeURI(`${domain}/playground/${flowId}`)
"flex-1", : "Activate to share a public version of this Playground"
!hasIO || !isPublished : "Add a Chat Input or Chat Output to access your flow"
? "pointer-events-none cursor-default" }
: "",
)}
to={`/playground/${flowId}`}
target="_blank"
>
<DropdownMenuItem
disabled={!hasIO || !isPublished}
className="deploy-dropdown-item group flex-1"
onClick={() => {}}
> >
<div className="group-hover:bg-accent"> <div className="flex items-center">
<IconComponent <IconComponent
name="Globe" name="Globe"
className={`${groupStyle} icon-size mr-2`} className={cn(
`icon-size mr-2`,
!isPublished && "opacity-50",
)}
/> />
<span>Shareable Playground</span>
{isPublished ? (
<CustomLink
className="flex-1"
to={`/playground/${flowId}`}
target="_blank"
>
<span>Shareable Playground</span>
</CustomLink>
) : (
<span className={cn(!isPublished && "opacity-50")}>
Shareable Playground
</span>
)}
</div> </div>
</DropdownMenuItem> </ShadTooltipComponent>
</CustomLink>
<div className={`z-50 mr-2 text-foreground`}>
<Switch
data-testid="publish-switch"
className="scale-[85%]"
checked={isPublished}
disabled={!hasIO}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handlePublishedSwitch(isPublished);
}}
/>
</div> </div>
<Switch
data-testid="publish-switch"
className="scale-[85%]"
checked={isPublished}
disabled={!hasIO}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handlePublishedSwitch(isPublished);
}}
/>
</div> </div>
</ShadTooltipComponent> </DropdownMenuItem>
)} )}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

6
src/frontend/src/style/applies.css
View file

@ -1277,11 +1277,7 @@
} }
.deploy-dropdown-item { .deploy-dropdown-item {
@apply h-11 cursor-pointer px-2.5 py-1 text-sm font-normal hover:bg-background !important; @apply cursor-pointer rounded-none px-3 py-2 text-[13px] font-normal;
}
.deploy-dropdown-item > :first-child {
@apply flex h-8 w-full items-center rounded-md px-2 py-1 !important;
} }
:root { :root {