feat: bottom-left navigation bar for Workflow History V2

[adhityamamallan]

Summary

• Implement navigation bar (WorkflowHistoryNavigationBar), which controls scrolling to the top and the bottom, and toggling expansion of all table items.
• Add navigation bar to WorkflowHistoryV2

Test plan

• Added unit tests for WorkflowHistoryNavigationBar
• Updated mocks in unit tests for WorkflowHistoryV2
• Ran locally.

Screen.Recording.2025-12-22.at.14.51.55.mov

On narrow screens

[Copilot]

Pull request overview

This PR adds a floating navigation bar to the workflow history v2 view, providing quick access to scroll controls and expand/collapse functionality for workflow events.

Key changes:

• Introduces a new WorkflowHistoryNavigationBar component with scroll and expand/collapse controls
• Adds handleScrollUp and handleScrollDown callbacks to the main workflow history component
• Exposes areAllItemsExpanded and toggleAreAllItemsExpanded from the existing useExpansionToggle hook

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/views/workflow-history-v2/workflow-history-v2.tsx	Integrates navigation bar component and adds scroll handlers using Virtuoso refs
src/views/workflow-history-v2/workflow-history-navigation-bar/workflow-history-navigation-bar.tsx	New component with buttons for scrolling and expanding/collapsing events
src/views/workflow-history-v2/workflow-history-navigation-bar/workflow-history-navigation-bar.types.ts	Type definitions for navigation bar props
src/views/workflow-history-v2/workflow-history-navigation-bar/workflow-history-navigation-bar.styles.ts	Styling for fixed-position navigation bar with theme-based values
src/views/workflow-history-v2/workflow-history-navigation-bar/__tests__/workflow-history-navigation-bar.test.tsx	Comprehensive unit tests for all navigation bar interactions
src/views/workflow-history-v2/__tests__/workflow-history-v2.test.tsx	Added mock and test for navigation bar rendering

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The button order places "Scroll down" before "Scroll up", which is unconventional. Most UIs place upward navigation before downward navigation (matching the vertical direction they represent). Consider reordering these buttons to have "Scroll up" before "Scroll down" for better user experience and consistency with common UI patterns.

Suggested change

	onClick={onScrollDown}
	aria-label="Scroll down"
	>
	<MdArrowDownward size={16} />
	</Button>
	<Button
	size="mini"
	kind="tertiary"
	shape="pill"
	overrides={overrides.navActionButton}
	onClick={onScrollUp}
	aria-label="Scroll up"
	>
	<MdArrowUpward size={16} />
	onClick={onScrollUp}
	aria-label="Scroll up"
	>
	<MdArrowUpward size={16} />
	</Button>
	<Button
	size="mini"
	kind="tertiary"
	shape="pill"
	overrides={overrides.navActionButton}
	onClick={onScrollDown}
	aria-label="Scroll down"
	>
	<MdArrowDownward size={16} />

[adhityamamallan]

This is what our designs include, so I'm going with them for now. We can potentially change it later