diff --git a/packages/app/e2e/browser/plugin-sidebar-items.spec.ts b/packages/app/e2e/browser/plugin-sidebar-items.spec.ts index 900fb42db9..ee2057dddc 100644 --- a/packages/app/e2e/browser/plugin-sidebar-items.spec.ts +++ b/packages/app/e2e/browser/plugin-sidebar-items.spec.ts @@ -241,6 +241,32 @@ test.describe("Plugin sidebar items", () => { }); }); + test("a plugin screen toggles the sidebar on a wide layout", async ({ page }) => { + await page.setViewportSize(WIDE); + await gotoWorkspace(page, workspaceId); + const row = headerRow(page, SHOWCASE_PLUGIN_ID, "deploys"); + await expect(row).toBeVisible({ timeout: 30_000 }); + + await row.click(); + await expect(page.getByText("Deploys screen body", { exact: true })).toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).not.toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).toBeVisible(); + await closeScreen(page); + + // With the sidebar closed elsewhere, the screen's own toggle is the way back to it. + await visibleTestId(page, "menu-button").click(); + await expect(row).not.toBeVisible(); + await page.keyboard.press("Control+k"); + const panel = page.getByTestId("command-center-panel"); + await panel.getByTestId("command-center-input").fill("Open deploys"); + await panel.getByRole("button", { name: "Open deploys", exact: true }).click(); + await expect(page.getByText("Deploys screen body", { exact: true })).toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).toBeVisible(); + }); + test("a header row's shortcut hint presses the row", async ({ page }) => { await page.setViewportSize(WIDE); await gotoWorkspace(page, workspaceId); diff --git a/packages/app/src/plugins/surface-screen.tsx b/packages/app/src/plugins/surface-screen.tsx index 378965cd8f..8c6e42ca59 100644 --- a/packages/app/src/plugins/surface-screen.tsx +++ b/packages/app/src/plugins/surface-screen.tsx @@ -8,6 +8,7 @@ import { StyleSheet, withUnistyles } from "react-native-unistyles"; import { HeaderIconBadge } from "@/components/headers/header-icon-badge"; import { HeaderToggleButton } from "@/components/headers/header-toggle-button"; import { CompactHeader } from "@/components/headers/compact-header"; +import { SidebarMenuToggle } from "@/components/headers/sidebar-menu-toggle"; import { ScreenHeader } from "@/components/headers/screen-header"; import { ScreenTitle } from "@/components/headers/screen-title"; import { HostFilter } from "@/components/hosts/host-filter"; @@ -172,6 +173,7 @@ export function PluginSurfaceScreen() { const headerLeft = useMemo( () => ( <> + {Icon ? (