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 (
<>
<DropdownMenu>
@ -98,37 +93,25 @@ export default function PublishDropdown() {
</DropdownMenuTrigger>
<DropdownMenuContent
forceMount
sideOffset={10}
alignOffset={-10}
sideOffset={7}
alignOffset={-2}
align="end"
className="min-w-[300px] max-w-[400px]"
className="w-full min-w-[275px]"
>
<DropdownMenuItem
className="deploy-dropdown-item group"
onClick={() => setOpenApiModal(true)}
data-testid="api-access-item"
>
<div
className="group-hover:bg-accent"
data-testid="api-access-item"
>
<IconComponent
name="Code2"
className={`${groupStyle} icon-size mr-2`}
/>
<span>API access</span>
</div>
<IconComponent name="Code2" className={`icon-size mr-2`} />
<span>API access</span>
</DropdownMenuItem>
<DropdownMenuItem
className="deploy-dropdown-item group"
onClick={() => setOpenExportModal(true)}
>
<div className="group-hover:bg-accent">
<IconComponent
name="Download"
className={`${groupStyle} icon-size mr-2`}
/>
<span>Export</span>
</div>
<IconComponent name="Download" className={`icon-size mr-2`} />
<span>Export</span>
</DropdownMenuItem>
<CustomLink
className={cn("flex-1")}
@ -138,21 +121,14 @@ export default function PublishDropdown() {
<DropdownMenuItem
className="deploy-dropdown-item group"
onClick={() => {}}
data-testid="mcp-server-item"
>
<div
className="group-hover:bg-accent"
data-testid="mcp-server-item"
>
<IconComponent
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>
<IconComponent name="Mcp" className={`icon-size mr-2`} />
<span>MCP Server</span>
<IconComponent
name="ExternalLink"
className={`icon-size ml-auto hidden group-hover:block`}
/>
</DropdownMenuItem>
</CustomLink>
{ENABLE_WIDGET && (
@ -160,74 +136,69 @@ export default function PublishDropdown() {
onClick={() => setOpenEmbedModal(true)}
className="deploy-dropdown-item group"
>
<div className="group-hover:bg-accent">
<IconComponent
name="Columns2"
className={`${groupStyle} icon-size mr-2`}
/>
<span>Embed into site</span>
</div>
<IconComponent name="Columns2" className={`icon-size mr-2`} />
<span>Embed into site</span>
</DropdownMenuItem>
)}
{ENABLE_PUBLISH && (
<ShadTooltipComponent
styleClasses="truncate"
side="left"
content={
hasIO
? 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"
}
<DropdownMenuItem
className="deploy-dropdown-item group"
disabled={!hasIO}
onClick={() => {}}
data-testid="shareable-playground"
>
<div
className={cn(
!hasIO ? "cursor-not-allowed" : "",
"flex items-center",
)}
data-testid="shareable-playground"
>
<CustomLink
className={cn(
"flex-1",
!hasIO || !isPublished
? "pointer-events-none cursor-default"
: "",
)}
to={`/playground/${flowId}`}
target="_blank"
>
<DropdownMenuItem
disabled={!hasIO || !isPublished}
className="deploy-dropdown-item group flex-1"
onClick={() => {}}
<div className="flex w-full items-center justify-between">
<div className="flex items-center">
<ShadTooltipComponent
styleClasses="truncate"
side="left"
content={
hasIO
? 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 className="group-hover:bg-accent">
<div className="flex items-center">
<IconComponent
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>
</DropdownMenuItem>
</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);
}}
/>
</ShadTooltipComponent>
</div>
<Switch
data-testid="publish-switch"
className="scale-[85%]"
checked={isPublished}
disabled={!hasIO}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handlePublishedSwitch(isPublished);
}}
/>
</div>
</ShadTooltipComponent>
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>

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

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