From 0d6144164af6f72ed29c0dfe8f51a415b1a8dba3 Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Thu, 25 Sep 2025 16:23:01 -0700
Subject: [PATCH] fix(dashboard): use Modal.useModal hook for embedded modal
 confirmation dialogs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces Modal.confirm() with Modal.useModal() hook to ensure proper theming support in confirmation dialogs. This fixes dark mode theming issues where confirmation modals were not inheriting the correct theme context.

Changes:
- Add Modal.useModal() hook to DashboardEmbedControls component
- Replace Modal.confirm() with modal.confirm() for disable confirmation
- Add contextHolder to component JSX for proper modal theming
- Update dependency array to include modal instance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/dashboard/components/EmbeddedModal/index.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/EmbeddedModal/index.tsx b/superset-frontend/src/dashboard/components/EmbeddedModal/index.tsx
index 1135076812a4..f77d5a9035f9 100644
--- a/superset-frontend/src/dashboard/components/EmbeddedModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/EmbeddedModal/index.tsx
@@ -64,6 +64,7 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
   const [loading, setLoading] = useState(false); // whether we are currently doing an async thing
   const [embedded, setEmbedded] = useState<EmbeddedDashboard | null>(null); // the embedded dashboard config
   const [allowedDomains, setAllowedDomains] = useState<string>('');
+  const [modal, contextHolder] = Modal.useModal();
 
   const endpoint = `/api/v1/dashboard/${dashboardId}/embedded`;
   // whether saveable changes have been made to the config
@@ -100,7 +101,7 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
   }, [endpoint, allowedDomains]);
 
   const disableEmbedded = useCallback(() => {
-    Modal.confirm({
+    modal.confirm({
       title: t('Disable embedding?'),
       content: t('This will remove your current embed configuration.'),
       okType: 'danger',
@@ -128,7 +129,7 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
           });
       },
     });
-  }, [endpoint]);
+  }, [endpoint, modal]);
 
   useEffect(() => {
     setReady(false);
@@ -167,6 +168,7 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
 
   return (
     <>
+      {contextHolder}
       {embedded ? (
         DocsConfigDetails ? (
           <DocsConfigDetails embeddedId={embedded.uuid} />