From 9ba0976ff2b23379bb9f1c802201e405b4f41a78 Mon Sep 17 00:00:00 2001
From: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com>
Date: Fri, 8 May 2026 08:52:42 -0400
Subject: [PATCH] fix: remove stepper modal close button (#12986)

fix(deploy): remove stepper modal close button
---
 .../components/ui/__tests__/dialog.test.tsx   | 17 +++++++++-
 src/frontend/src/components/ui/dialog.tsx     | 34 +++++++++++--------
 .../components/deployment-stepper-modal.tsx   |  2 +-
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/ui/__tests__/dialog.test.tsx b/src/frontend/src/components/ui/__tests__/dialog.test.tsx
index 387a7b07c9..a9979c11f8 100644
--- a/src/frontend/src/components/ui/__tests__/dialog.test.tsx
+++ b/src/frontend/src/components/ui/__tests__/dialog.test.tsx
@@ -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();
+  });
 });
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 6ac7f4b66e..1be93bcf9b 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -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>
     );
diff --git a/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal.tsx b/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal.tsx
index 7bfabc79a3..5e2b36c2de 100644
--- a/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal.tsx
+++ b/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal.tsx
@@ -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 ? (