From 90d855111a3abf5919e5232ed726b970248efe15 Mon Sep 17 00:00:00 2001
From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:24:24 +0000
Subject: [PATCH] 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 d867e2d750d3f8267881019eb458d61a6e4bb5ab)
Co-authored-by: GerardasB <10091419+GerardasB@users.noreply.github.com>
---
apps/test-app/src/frontend/AppInitializer.tsx | 6 +++-
.../issue-1178_2025-01-17-08-06.json | 10 ++++++
e2e-tests/tests/popout-widget.test.ts | 20 +++++++++++
.../InternalChildWindowManager.tsx | 34 ++++++++++++-------
4 files changed, 56 insertions(+), 14 deletions(-)
create mode 100644 common/changes/@itwin/appui-react/issue-1178_2025-01-17-08-06.json
diff --git a/apps/test-app/src/frontend/AppInitializer.tsx b/apps/test-app/src/frontend/AppInitializer.tsx
index 17adf268b14..77b00616c86 100644
--- 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
new file mode 100644
index 00000000000..8d14ed7ed5c
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/e2e-tests/tests/popout-widget.test.ts b/e2e-tests/tests/popout-widget.test.ts
index 446627b3e09..17d703c00f5 100644
--- 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
index f933cda3d2c..eecb61d7143 100644
--- 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 = `
-
-
-
-
-
-
-
-
-
-`;
+ `;
+ 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);