frontend: SelectionBreadcrumbs: Add Storybook stories#6469
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: vividwhisp The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
There was a problem hiding this comment.
Pull request overview
Adds Storybook coverage for SelectionBreadcrumbs in the Resource Map area of the frontend, improving visual documentation and ensuring the Storybook snapshot suite covers key breadcrumb states.
Changes:
- Added
SelectionBreadcrumbsStorybook stories covering root, shallow, deep, and kubeObject/icon variants. - Added new storyshot snapshot baselines for each story variant.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/resourceMap/SelectionBreadcrumbs.stories.tsx | Adds Storybook stories + test decorator context for SelectionBreadcrumbs. |
| frontend/src/components/resourceMap/snapshots/SelectionBreadcrumbs.RootSelected.stories.storyshot | New snapshot baseline for the root-only breadcrumb state. |
| frontend/src/components/resourceMap/snapshots/SelectionBreadcrumbs.DirectChild.stories.storyshot | New snapshot baseline for a 1-level breadcrumb state. |
| frontend/src/components/resourceMap/snapshots/SelectionBreadcrumbs.DeepNested.stories.storyshot | New snapshot baseline for a deep breadcrumb path with subtitles. |
| frontend/src/components/resourceMap/snapshots/SelectionBreadcrumbs.WithKubeObject.stories.storyshot | New snapshot baseline for kubeObject rendering (icon + kind subtitle + name). |
|
i resolved the comments |
Summary
This PR adds Storybook stories for the SelectionBreadcrumbs component to improve visual documentation and snapshot test coverage.
Related Issue
Fixes #6467
Changes
frontend/src/components/resourceMap/SelectionBreadcrumbs.stories.tsxwith 4 stories:RootSelected— breadcrumbs showing just "Home"DirectChild— breadcrumbs showing "Home > Workloads"DeepNested— breadcrumbs showing "Home > default > nginx-pod" with subtitlesWithKubeObject— breadcrumbs rendering a KubeIcon (Pod) + subtitle + labelSteps to Test
npm run frontend:testto verify snapshot tests passnpm run frontend:storybookand navigate toResourceMap/SelectionBreadcrumbsNotes for the Reviewer