Skip to content

frontend: SelectionBreadcrumbs: Add Storybook stories#6469

Open
vividwhisp wants to merge 2 commits into
kubernetes-sigs:mainfrom
vividwhisp:frontend/selectionbreadcrumbs-stories
Open

frontend: SelectionBreadcrumbs: Add Storybook stories#6469
vividwhisp wants to merge 2 commits into
kubernetes-sigs:mainfrom
vividwhisp:frontend/selectionbreadcrumbs-stories

Conversation

@vividwhisp

Copy link
Copy Markdown

Summary

This PR adds Storybook stories for the SelectionBreadcrumbs component to improve visual documentation and snapshot test coverage.

Related Issue

Fixes #6467

Changes

  • Added frontend/src/components/resourceMap/SelectionBreadcrumbs.stories.tsx with 4 stories:
    • RootSelected — breadcrumbs showing just "Home"
    • DirectChild — breadcrumbs showing "Home > Workloads"
    • DeepNested — breadcrumbs showing "Home > default > nginx-pod" with subtitles
    • WithKubeObject — breadcrumbs rendering a KubeIcon (Pod) + subtitle + label

Steps to Test

  1. Run npm run frontend:test to verify snapshot tests pass
  2. Run npm run frontend:storybook and navigate to ResourceMap/SelectionBreadcrumbs
  3. Verify all 4 stories render correctly

Notes for the Reviewer

  • The component is purely props-driven — no MSW handlers or store setup needed
  • All 4 stories have full storyshots enabled (no play functions)

@kubernetes-prow

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: vividwhisp
Once this PR has been reviewed and has the lgtm label, please assign joaquimrocha for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubernetes-prow kubernetes-prow Bot requested review from joaquimrocha and skoeva July 10, 2026 20:41
@kubernetes-prow kubernetes-prow Bot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Jul 10, 2026
@vividwhisp

Copy link
Copy Markdown
Author

@illume @sniok @skoeva review request

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 SelectionBreadcrumbs Storybook 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).

Comment thread frontend/src/components/resourceMap/SelectionBreadcrumbs.stories.tsx Outdated
@vividwhisp

Copy link
Copy Markdown
Author

i resolved the comments
@illume

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

frontend: SelectionBreadcrumbs: Add Storybook stories

2 participants