pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-26 05:21:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove stepper modal close button (#12986)

Browse Source 
fix(deploy): remove stepper modal close button
This commit is contained in:
Viktor Avelino
2026-05-08 08:52:42 -04:00
committed by GitHub
parent 07c3e67a71
commit 9ba0976ff2
3 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/frontend/src/components/ui/__tests__/dialog.test.tsx
View File

@ -1,5 +1,4 @@
import { render, screen } from "@testing-library/react";
import type { ReactElement } from "react";
import { TooltipProvider } from "@/components/ui/tooltip";
import {
Dialog,
@ -60,4 +59,20 @@ describe("DialogContent", () => {
// Assert — custom handler was called
expect(customHandler).toHaveBeenCalledTimes(1);
});
it("should_hide_close_button_when_requested", () => {
renderWithProviders(
<Dialog open>
<DialogContent hideCloseButton>
<DialogTitle>Test Dialog</DialogTitle>
<DialogDescription>Test description</DialogDescription>
<p>Content</p>
</DialogContent>
</Dialog>,
);
expect(
screen.queryByRole("button", { name: /close/i }),
).not.toBeInTheDocument();
});
});

34
src/frontend/src/components/ui/dialog.tsx
View File

@ -54,6 +54,7 @@ const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
hideTitle?: boolean;
hideCloseButton?: boolean;
closeButtonClassName?: string;
overlayClassName?: string;
}
@ -63,6 +64,7 @@ const DialogContent = React.forwardRef<
className,
children,
hideTitle = false,
hideCloseButton = false,
closeButtonClassName,
overlayClassName,
onOpenAutoFocus,
@ -108,22 +110,24 @@ const DialogContent = React.forwardRef<
</VisuallyHidden>
)}
{children}
<ShadTooltip
styleClasses="z-50"
content="Close"
side="bottom"
avoidCollisions
>
<DialogPrimitive.Close
className={cn(
"absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-sm ring-offset-background transition-opacity hover:bg-secondary-hover hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
closeButtonClassName,
)}
{!hideCloseButton && (
<ShadTooltip
styleClasses="z-50"
content="Close"
side="bottom"
avoidCollisions
>
<Cross2Icon className="h-[18px] w-[18px]" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</ShadTooltip>
<DialogPrimitive.Close
className={cn(
"absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-sm ring-offset-background transition-opacity hover:bg-secondary-hover hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
closeButtonClassName,
)}
>
<Cross2Icon className="h-[18px] w-[18px]" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</ShadTooltip>
)}
</DialogPrimitive.Content>
</DialogPortal>
);

2
src/frontend/src/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal.tsx
View File

@ -135,7 +135,7 @@ export default function DeploymentStepperModal({
>
<DialogContent
className="flex h-[85vh] w-[900px] !max-w-none flex-col gap-0 overflow-hidden border-none bg-transparent p-0 shadow-none"
closeButtonClassName="top-5 right-4"
hideCloseButton
overlayClassName="bg-black/30 dark:bg-black/50 backdrop-blur"
>
{isLoadingEditData ? (