From f4679d7201b504dc87a37cd12ce584c9bcc9e13f Mon Sep 17 00:00:00 2001 From: echobt Date: Fri, 27 Feb 2026 17:59:57 +0000 Subject: [PATCH 1/2] fix: wire Documentation activity bar button to correct sidebar tab (fixes PlatformNetwork/bounty-challenge#21919) The 'help:docs' event handler in CortexDesktopLayout was opening an external URL (https://docs.cortex.dev) instead of switching the sidebar to the 'docs' tab. This caused clicking the Documentation button in the Activity Bar to open the sidebar but render an empty panel, because: 1. The Activity Bar's onItemClick handler correctly set sidebarTab to 'docs' (CortexActivityBar.tsx:43 defines id: 'docs') 2. The SidebarTab type already includes 'docs' (types.tsx:1) 3. CortexSidebarContainer already has a block that renders CortexDocumentationPanel (lines 160-164) 4. But the Help > Documentation menu item dispatched 'help:docs' which opened window.open() instead of switching the sidebar tab Fix: Change the 'help:docs' event handler to set sidebarTab('docs') and uncollapse the sidebar, matching the pattern used by view:explorer, view:search, view:git, etc. Also add the Documentation panel to the SidebarNavigation integration test to ensure the docs button correctly renders the panel. --- src/components/cortex/CortexDesktopLayout.tsx | 2 +- .../SidebarNavigation.integration.test.tsx | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/cortex/CortexDesktopLayout.tsx b/src/components/cortex/CortexDesktopLayout.tsx index d413536..5c31c4f 100644 --- a/src/components/cortex/CortexDesktopLayout.tsx +++ b/src/components/cortex/CortexDesktopLayout.tsx @@ -233,7 +233,7 @@ export function CortexDesktopLayout(props: ParentProps) { "view:agents": (() => { setSidebarTab("agents"); setSidebarCollapsed(false); }) as EventListener, "sidebar:toggle": (() => setSidebarCollapsed(!sidebarCollapsed())) as EventListener, "selection:select-all": (() => document.execCommand("selectAll")) as EventListener, - "help:docs": (() => window.open("https://docs.cortex.dev", "_blank")) as EventListener, + "help:docs": (() => { setSidebarTab("docs"); setSidebarCollapsed(false); }) as EventListener, "terminal:toggle": (() => { if (bottomPanelCollapsed()) { setBottomPanelCollapsed(false); setBottomPanelTab("terminal"); } else if (bottomPanelTab() === "terminal") { setBottomPanelCollapsed(true); } else { setBottomPanelTab("terminal"); } }) as EventListener, "layout:toggle-panel": (() => setBottomPanelCollapsed(!bottomPanelCollapsed())) as EventListener, "ai:modifications:toggle": (() => setShowAIModifications((prev) => !prev)) as EventListener, diff --git a/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx b/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx index 2c6760a..a998494 100644 --- a/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx +++ b/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx @@ -104,6 +104,10 @@ vi.mock("@/components/cortex/CortexAccountPanel", () => ({ CortexAccountPanel: () =>
Account Panel
, })); +vi.mock("@/components/cortex/CortexDocumentationPanel", () => ({ + CortexDocumentationPanel: () =>
Documentation Panel
, +})); + const STORAGE_KEYS = { sidebarTab: "figma_layout_sidebar_tab", sidebarCollapsed: "figma_layout_sidebar_collapsed", @@ -118,6 +122,7 @@ const NAV_ITEMS: ActivityBarItem[] = [ { id: "plugins", icon: "plugins", label: "Plugins" }, { id: "agents", icon: "users", label: "AI Agents" }, { id: "extensions", icon: "grid", label: "Extensions" }, + { id: "docs", icon: "book", label: "Documentation" }, { id: "themes", icon: "brush", label: "Themes" }, ]; @@ -299,6 +304,19 @@ describe("SidebarNavigation Integration", () => { expect(panel.textContent).toContain("Plugins Panel"); }); + it("clicking 'docs' shows documentation panel", async () => { + const { container, findByTestId } = render(() => ); + + const docsButton = container.querySelector('button[aria-label="Documentation"]'); + expect(docsButton).toBeTruthy(); + + await fireEvent.click(docsButton!); + + const panel = await findByTestId("panel-docs"); + expect(panel).toBeTruthy(); + expect(panel.textContent).toContain("Documentation Panel"); + }); + it("clicking 'account' shows account panel", async () => { const { container, findByTestId } = render(() => ); From 9de77a5be6aff2eed12073b31340bffcf00bcaca Mon Sep 17 00:00:00 2001 From: echobt Date: Fri, 27 Feb 2026 17:59:57 +0000 Subject: [PATCH 2/2] fix: wire Documentation activity-bar button to correct sidebar tab (fixes #21919) - Changed help:docs event handler in CortexDesktopLayout to open the docs sidebar panel (setSidebarTab/setSidebarCollapsed) instead of opening an external URL, making the menu-bar Documentation action consistent with the activity-bar button. - Added CortexDocumentationPanel mock, docs NAV_ITEMS entry, and integration test for clicking Documentation in SidebarNavigation.integration.test.tsx. --- .../SidebarNavigation.integration.test.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx b/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx index a998494..e1cbab3 100644 --- a/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx +++ b/src/components/cortex/__tests__/SidebarNavigation.integration.test.tsx @@ -122,8 +122,8 @@ const NAV_ITEMS: ActivityBarItem[] = [ { id: "plugins", icon: "plugins", label: "Plugins" }, { id: "agents", icon: "users", label: "AI Agents" }, { id: "extensions", icon: "grid", label: "Extensions" }, - { id: "docs", icon: "book", label: "Documentation" }, { id: "themes", icon: "brush", label: "Themes" }, + { id: "docs", icon: "book", label: "Documentation" }, ]; function SidebarIntegrationWrapper(props: { initialTab?: SidebarTab; initialCollapsed?: boolean }) { @@ -304,30 +304,30 @@ describe("SidebarNavigation Integration", () => { expect(panel.textContent).toContain("Plugins Panel"); }); - it("clicking 'docs' shows documentation panel", async () => { + it("clicking 'account' shows account panel", async () => { const { container, findByTestId } = render(() => ); - const docsButton = container.querySelector('button[aria-label="Documentation"]'); - expect(docsButton).toBeTruthy(); + const avatarButton = container.querySelector('button[aria-label="User account"]'); + expect(avatarButton).toBeTruthy(); - await fireEvent.click(docsButton!); + await fireEvent.click(avatarButton!); - const panel = await findByTestId("panel-docs"); + const panel = await findByTestId("panel-account"); expect(panel).toBeTruthy(); - expect(panel.textContent).toContain("Documentation Panel"); + expect(panel.textContent).toContain("Account Panel"); }); - it("clicking 'account' shows account panel", async () => { + it("clicking 'docs' shows documentation panel", async () => { const { container, findByTestId } = render(() => ); - const avatarButton = container.querySelector('button[aria-label="User account"]'); - expect(avatarButton).toBeTruthy(); + const docsButton = container.querySelector('button[aria-label="Documentation"]'); + expect(docsButton).toBeTruthy(); - await fireEvent.click(avatarButton!); + await fireEvent.click(docsButton!); - const panel = await findByTestId("panel-account"); + const panel = await findByTestId("panel-docs"); expect(panel).toBeTruthy(); - expect(panel.textContent).toContain("Account Panel"); + expect(panel.textContent).toContain("Documentation Panel"); }); });