Fix popout widget issue when useDefaultPopoutUrl is not used (#1179) (

#1181) * Add IMJS_USE_DEFAULT_POPOUT_URL * Replace deprecated document.write * rush change * useDefaultPopoutUrl url param. * Add tests (cherry picked from commit d867e2d) Co-authored-by: GerardasB <[email protected]>
iTwin · Jan 17, 2025 · 90d8551 · 90d8551
1 parent afd381c
commit 90d8551
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 14 deletions.
diff --git a/apps/test-app/src/frontend/AppInitializer.tsx b/apps/test-app/src/frontend/AppInitializer.tsx
@@ -150,7 +150,11 @@ function createInitializer() {
         toolbarOpacity: 0.5,
       })
     );
-    UiFramework.useDefaultPopoutUrl = true;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const useDefaultPopoutUrl =
+      urlParams.get("useDefaultPopoutUrl") === "0" ? false : true;
+    UiFramework.useDefaultPopoutUrl = useDefaultPopoutUrl;
     await UiFramework.initializeStateFromUserSettingsProviders();
 
     UiFramework.keyboardShortcuts.loadShortcuts(createKeyboardShortcuts());

diff --git a/common/changes/@itwin/appui-react/issue-1178_2025-01-17-08-06.json b/common/changes/@itwin/appui-react/issue-1178_2025-01-17-08-06.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix popout widget issue when `useDefaultPopoutUrl` is not enabled.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
diff --git a/e2e-tests/tests/popout-widget.test.ts b/e2e-tests/tests/popout-widget.test.ts
@@ -6,6 +6,7 @@ import { test, expect } from "@playwright/test";
 import {
   WidgetState,
   expectSavedFrontstageState,
+  expectTabInPanelSection,
   floatingWidgetLocator,
   openFrontstage,
   panelSectionLocator,
@@ -264,3 +265,22 @@ test("useWidget hook", async ({ page }) => {
   );
   await expect(widgetText).toBeVisible();
 });
+
+for (const useDefaultPopoutUrl of [1, 0]) {
+  test(`should return popout widget to main window (useDefaultPopoutUrl=${useDefaultPopoutUrl})`, async ({
+    page,
+  }) => {
+    await page.goto(
+      `./blank?frontstageId=test-popout&useDefaultPopoutUrl=${useDefaultPopoutUrl}`
+    );
+
+    const tab = tabLocator(page, "Widget 1");
+    const widget = widgetLocator({ tab });
+
+    const popoutPage = await popoutWidget(widget);
+    await expect(popoutPage.getByText("Widget 1 content")).toBeVisible();
+
+    await popoutPage.close();
+    await expectTabInPanelSection(tab, "left", 0);
+  });
+}
diff --git a/ui/appui-react/src/appui-react/childwindow/InternalChildWindowManager.tsx b/ui/appui-react/src/appui-react/childwindow/InternalChildWindowManager.tsx
@@ -18,11 +18,15 @@ import type {
 import { usePopoutsStore } from "../preview/reparent-popout-widgets/usePopoutsStore.js";
 import type { TabState } from "../layout/state/TabState.js";
 
-const childHtml = `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <style>
+function addChildHTML(window: Window) {
+  const doc = window.document;
+
+  const meta = doc.createElement("meta");
+  meta.setAttribute("charset", "utf-8");
+  doc.head.appendChild(meta);
+
+  const style = doc.createElement("style");
+  style.textContent = `
     html,
     body {
       height: 100%;
@@ -33,13 +37,17 @@ const childHtml = `<!DOCTYPE html>
     #root {
       height: 100%;
     }
-  </style>
-</head>
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-</html>`;
+  `;
+  doc.head.appendChild(style);
+
+  const noScript = doc.createElement("noscript");
+  noScript.textContent = "You need to enable JavaScript to run this app.";
+  doc.body.appendChild(noScript);
+
+  const root = doc.createElement("div");
+  root.id = "root";
+  doc.body.appendChild(root);
+}
 
 /** @internal */
 export interface InternalOpenChildWindowInfo extends OpenChildWindowInfo {
@@ -239,7 +247,7 @@ export class InternalChildWindowManager implements FrameworkChildWindows {
       );
     };
     if (url.length === 0) {
-      childWindow.document.write(childHtml);
+      addChildHTML(childWindow);
       onDOMContentLoaded();
     } else {
       childWindow.addEventListener("DOMContentLoaded", onDOMContentLoaded);