fix(show-confirm-dialog): eliminate react-dom/client build error on R…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openstack-uicore-foundation",
-  "version": "5.0.7",
+  "version": "5.0.8-beta.3",
   "description": "ui reactjs components for openstack marketing site",
   "main": "lib/openstack-uicore-foundation.js",
   "scripts": {

src/components/index.js

@@ -63,6 +63,7 @@ export {default as MuiChipList} from './mui/chip-list'
 export {default as MuiChipNotify} from './mui/chip-notify'
 export {default as MuiChipSelectInput} from './mui/chip-select-input'
 export {default as MuiConfirmDialog} from './mui/confirm-dialog'
+export {GlobalConfirmDialog} from './mui/showConfirmDialog'
 export {default as MuiCustomAlert} from './mui/custom-alert'
 export {default as MuiDropdownCheckbox} from './mui/dropdown-checkbox'
 export {default as MuiMenuButton} from './mui/menu-button'

src/components/mui/__tests__/global-confirm-dialog.test.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import showConfirmDialog, { GlobalConfirmDialog } from "../showConfirmDialog";
+
+describe("GlobalConfirmDialog", () => {
+  test("renders nothing when no dialog is active", () => {
+    const { container } = render(<GlobalConfirmDialog />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  test("shows dialog when showConfirmDialog is called", async () => {
+    render(<GlobalConfirmDialog />);
+
+    let promise;
+    await act(async () => {
+      promise = showConfirmDialog({
+        title: "Confirm Action",
+        text: "Are you sure?"
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm Action")).toBeInTheDocument();
+      expect(screen.getByText("Are you sure?")).toBeInTheDocument();
+    });
+
+    let resolved = false;
+    promise.then(() => { resolved = true; });
+    await new Promise((r) => setTimeout(r, 10));
+    expect(resolved).toBe(false);
+  });
+
+  test("resolves true when confirm button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<GlobalConfirmDialog />);
+
+    let promise;
+    await act(async () => {
+      promise = showConfirmDialog({
+        title: "Delete Item",
+        text: "This cannot be undone",
+        confirmButtonText: "Delete"
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Delete Item")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+
+    const result = await promise;
+    expect(result).toBe(true);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Delete Item")).not.toBeInTheDocument();
+    });
+  });
+
+  test("resolves false when cancel button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<GlobalConfirmDialog />);
+
+    let promise;
+    await act(async () => {
+      promise = showConfirmDialog({
+        title: "Cancel Operation",
+        text: "Do you want to cancel?",
+        cancelButtonText: "No"
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Cancel Operation")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "No" }));
+
+    const result = await promise;
+    expect(result).toBe(false);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Cancel Operation")).not.toBeInTheDocument();
+    });
+  });
+
+  test("handles multiple sequential dialogs", async () => {
+    const user = userEvent.setup();
+    render(<GlobalConfirmDialog />);
+
+    let promise1;
+    await act(async () => {
+      promise1 = showConfirmDialog({ title: "First Dialog", text: "First message" });
+    });
+
+    await waitFor(() => { expect(screen.getByText("First Dialog")).toBeInTheDocument(); });
+    await user.click(screen.getByRole("button", { name: "Confirm" }));
+    expect(await promise1).toBe(true);
+
+    let promise2;
+    await act(async () => {
+      promise2 = showConfirmDialog({ title: "Second Dialog", text: "Second message" });
+    });
+
+    await waitFor(() => { expect(screen.getByText("Second Dialog")).toBeInTheDocument(); });
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(await promise2).toBe(false);
+  });
+
+  test("passes custom button colors and text", async () => {
+    render(<GlobalConfirmDialog />);
+
+    await act(async () => {
+      showConfirmDialog({
+        title: "Custom Dialog",
+        text: "Custom buttons",
+        confirmButtonText: "Yes, Do It",
+        cancelButtonText: "No, Stop",
+        confirmButtonColor: "error",
+        cancelButtonColor: "secondary"
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Yes, Do It" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "No, Stop" })).toBeInTheDocument();
+    });
+  });
+});

src/components/mui/__tests__/show-confirm-dialog.test.js

@@ -11,53 +11,17 @@
  * limitations under the License.
  * */
 
-jest.mock("react-dom", () => ({
-  render: jest.fn(),
-  unmountComponentAtNode: jest.fn()
-}));
-
-
-jest.mock("../confirm-dialog", () => {
-  const React = require("react");
-  return { __esModule: true, default: () => <div /> };
-});
-
 import showConfirmDialog from "../showConfirmDialog";
-import ReactDOM from "react-dom";
 
 describe("showConfirmDialog", () => {
-  beforeEach(() => jest.clearAllMocks());
-
-  test("returns a Promise", () => {
-    const result = showConfirmDialog({ title: "Test", text: "Body" });
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  test("calls ReactDOM.render to mount the dialog", async () => {
-    showConfirmDialog({ title: "Test", text: "Body" });
-    await Promise.resolve();
-    expect(ReactDOM.render).toHaveBeenCalledTimes(1);
-  });
-
-  test("appends a container div to the document body", async () => {
-    const initialChildCount = document.body.children.length;
-    showConfirmDialog({ title: "Test", text: "Body" });
-    await Promise.resolve();
-    expect(document.body.children.length).toBeGreaterThan(initialChildCount);
+  test("regression: does not reference react-dom/client", () => {
+    const moduleCode = showConfirmDialog.toString();
+    expect(moduleCode).not.toContain("react-dom/client");
   });
 
-  test("passes title and text to ConfirmDialog", async () => {
-    showConfirmDialog({
-      title: "My Title",
-      text: "My Text",
-      confirmButtonText: "Yes",
-      cancelButtonText: "No"
-    });
-    await Promise.resolve();
-    const [element] = ReactDOM.render.mock.calls[0];
-    expect(element.props.title).toBe("My Title");
-    expect(element.props.text).toBe("My Text");
-    expect(element.props.confirmButtonText).toBe("Yes");
-    expect(element.props.cancelButtonText).toBe("No");
+  test("throws when GlobalConfirmDialog is not mounted", () => {
+    expect(() => {
+      showConfirmDialog({ title: "Test", text: "Body" });
+    }).toThrow("<GlobalConfirmDialog />");
   });
 });