fix: UI loading duplicate panels in embed iframe (#1043)

Fixes #1039 and adds some e2e tests

plugins/ui/src/js/src/widget/DocumentUtils.tsx

@@ -48,7 +48,7 @@ export function getRootChildren(
   if (nonLayoutCount === childrenArray.length) {
     // Just wrap it in a panel
     return (
-      <ReactPanel key="root" title={widget.name ?? widget.id ?? widget.type}>
+      <ReactPanel title={widget.name ?? widget.id ?? widget.type}>
         {children}
       </ReactPanel>
     );

tests/app.d/ui.py

@@ -17,6 +17,14 @@ def ui_basic_component():
     )
 
 
+@ui.component
+def ui_multi_panel_component():
+    return [
+        ui.panel(ui.button("Hello"), title="foo"),
+        ui.panel(ui.text("World"), title="bar"),
+    ]
+
+
 @ui.component
 def ui_boom_component():
     raise Exception("BOOM!")
@@ -40,7 +48,7 @@ def ui_cell(label: str = "Cell"):
 
 
 @ui.component
-def ui_cells():
+def ui_cells_component():
     id_iter, _ = ui.use_state(lambda: count())
     cells, set_cells = ui.use_state(lambda: [next(id_iter)])
 
@@ -55,21 +63,37 @@ def delete_cell(delete_id: int):
             lambda i: ui.flex(
                 ui_cell(label=f"Cell {i}"),
                 ui.action_button(
-                    ui.icon("vsTrash"),
+                    ui.icon("trash"),
                     aria_label="Delete cell",
-                    on_press=lambda: delete_cell(i),
+                    on_press=lambda _: delete_cell(i),
                 ),
                 align_items="end",
                 key=str(i),
             ),
             cells,
         ),
-        ui.action_button(ui.icon("vsAdd"), "Add cell", on_press=add_cell),
+        ui.action_button(ui.icon("add"), "Add cell", on_press=add_cell),
         overflow="auto",
     )
 
 
 ui_component = ui_basic_component()
+ui_multi_panel = ui_multi_panel_component()
 ui_boom = ui_boom_component()
 ui_boom_counter = ui_boom_counter_component()
-ui_cells = ui_cells()
+ui_cells = ui_cells_component()
+
+ui_dashboard = ui.dashboard(
+    ui.column(
+        ui.stack(
+            ui.panel(ui_basic_component(), title="Component"),
+            ui.panel(ui_boom_counter_component(), title="Boom Counter"),
+            active_item_index=0,
+            height=75,
+        ),
+        ui.row(
+            ui_multi_panel_component(),
+            height=25,
+        ),
+    )
+)

tests/ui_embed_widget.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+import { gotoPage, SELECTORS, waitForLoad } from './utils';
+
+test('UI single panel loads in embed widget', async ({ page }) => {
+  await gotoPage(page, '/iframe/widget/?name=ui_component');
+  await expect(page.locator(SELECTORS.REACT_PANEL_VISIBLE)).toBeVisible();
+  await waitForLoad(page);
+  await expect(page).toHaveScreenshot();
+});
+
+test('UI multi panel loads in embed widget', async ({ page }) => {
+  await gotoPage(page, '/iframe/widget/?name=ui_multi_panel');
+  await expect(page.locator(SELECTORS.REACT_PANEL)).toHaveCount(2);
+  // Wait for the titles because embed-widget has a slight delay in showing the headers
+  await expect(page.getByText('foo')).toBeVisible();
+  await expect(page.getByText('bar')).toBeVisible();
+  await waitForLoad(page);
+  await expect(page).toHaveScreenshot();
+});
+
+test('UI dashboard loads in embed widget', async ({ page }) => {
+  await gotoPage(page, '/iframe/widget/?name=ui_dashboard');
+  await expect(page.locator(SELECTORS.REACT_PANEL)).toHaveCount(4);
+  await waitForLoad(page);
+  await expect(page).toHaveScreenshot();
+});

tests/utils.ts

@@ -25,10 +25,18 @@ export async function gotoPage(
     await page.goto(url, options);
     await expect(
       page.getByRole('progressbar', { name: 'Loading...', exact: true })
-    ).not.toBeVisible();
+    ).toHaveCount(0);
   });
 }
 
+/**
+ * Waits for all loading spinners to disappear
+ * @param page The page
+ */
+export async function waitForLoad(page: Page): Promise<void> {
+  await expect(page.locator('.loading-spinner')).toHaveCount(0);
+}
+
 /**
  * Opens a panel by clicking on the Panels button and then the panel button
  * @param page The page
@@ -71,7 +79,7 @@ export async function openPanel(
     // check for panel to be loaded
     await expect(page.locator(panelLocator)).toHaveCount(panelCount + 1);
     if (awaitLoad) {
-      await expect(page.locator('.loading-spinner')).toHaveCount(0);
+      await waitForLoad(page);
     }
   });
 }