feat(apollo-react): add CanvasBottomPanel

[dbacomputer]

Overview

Adds a reusable, product-neutral CanvasBottomPanel to Apollo React for canvas experiences that need a collapsible tabbed panel.

What changed

• Added a controlled CanvasBottomPanel API with consumer-provided tabs and content.
• Added controlled active-tab and collapsed-state behavior.
• Added optional consumer-owned header actions.
• Preserved mounted tab content across tab switches and collapsed state so consumer state is retained.
• Implemented WAI-ARIA tab relationships, roving tab index, and Arrow Left/Right, Home, and End keyboard navigation.
• Added public exports from the Apollo React canvas component barrel.
• Added Storybook examples for collapsed, expanded, Debug/Evaluate switching, header actions, and composition with CanvasModeToolbar and CanvasZoomControls.
• Added focused component tests for rendering, controlled behavior, mounted-content preservation, actions, ARIA relationships, and keyboard navigation.

Why

Flow products currently need a reusable canvas-level bottom panel shell without coupling Apollo to product-specific debug sessions, evaluation stores, datasets, or execution history. This provides the shared presentation and accessibility layer while keeping product logic in consuming applications.

Validation

• CanvasBottomPanel.test.tsx: 10 tests passing
• Apollo React package build: passing
• Full Storybook production build: passing
• Biome lint/format checks: passing
• git diff --check: passing

[github-actions]

Apollo Coded App preview deployments are ready.

Project	Status	Preview	Updated (PT)
apollo-design	Ready	Preview · Logs	Jul 27, 2026, 07:29:22 AM
apollo-docs	Ready	Preview · Logs	Jul 27, 2026, 07:29:22 AM
apollo-landing	Ready	Preview · Logs	Jul 27, 2026, 07:29:22 AM
apollo-vertex	Ready	Preview · Logs	Jul 27, 2026, 07:29:22 AM

[github-actions]

Dependency License Review

• ✅ 1950 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.3.2	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Adds a new reusable, controlled CanvasBottomPanel component to apollo-react’s canvas component set, providing a product-neutral collapsible, tabbed bottom panel shell with accessible tab semantics, Storybook examples, and unit test coverage.

Changes:

• Introduces CanvasBottomPanel (controlled active tab + collapsed state) with WAI-ARIA tab roles and keyboard navigation.
• Adds Storybook stories demonstrating common canvas compositions and header actions.
• Adds focused unit tests and exports the component via the canvas components barrel.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/apollo-react/src/canvas/components/index.ts	Re-exports CanvasBottomPanel from the canvas components barrel.
packages/apollo-react/src/canvas/components/CanvasBottomPanel/index.ts	Adds the component and type exports for public consumption.
packages/apollo-react/src/canvas/components/CanvasBottomPanel/CanvasBottomPanel.types.ts	Defines the controlled API types for tabs, selection, collapse state, and optional header actions.
packages/apollo-react/src/canvas/components/CanvasBottomPanel/CanvasBottomPanel.tsx	Implements the panel UI, ARIA relationships, and keyboard navigation behavior.
packages/apollo-react/src/canvas/components/CanvasBottomPanel/CanvasBottomPanel.test.tsx	Adds unit tests for rendering, controlled behavior, mounting preservation, ARIA, and keyboard handling.
packages/apollo-react/src/canvas/components/CanvasBottomPanel/CanvasBottomPanel.stories.tsx	Adds Storybook examples for collapsed/expanded usage and canvas composition.

Comments suppressed due to low confidence (1)

packages/apollo-react/src/canvas/components/CanvasBottomPanel/CanvasBottomPanel.tsx:139

• This tabpanel sets both hidden and an inline display style. hidden already maps to display: none, so the inline style is redundant and can drift from the hidden state.

              hidden={!isActive}
              className="h-full w-full"
              style={{ display: isActive ? 'block' : 'none' }}
            >

[github-actions]

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
@uipath/apollo-core	9.0%	—	43.84 MB	57.45 MB	±0
@uipath/apollo-react	38.8%	60.7% (34/56)	7.46 MB	28.59 MB	+3.7 KB
@uipath/apollo-wind	41.5%	—	401.7 KB	2.60 MB	+6 B
@uipath/ap-chat	85.8%	—	43.44 MB	55.94 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}