frontend: add non-clickable section headers to the sidebar

[Soli0222]

Summary

This PR adds support for non-clickable sidebar section headers that plugins can register through registerSidebarEntry.

Sidebar entries with entryType: 'subheader' are rendered as section headers. Existing sidebar entries continue to render as clickable links by default, so existing registerSidebarEntry usage remains compatible.

Related Issue

Fixes #6107

Changes

• Added an optional entryType field to sidebar entries.
• Added support for entryType: 'subheader' in SidebarItem.
• Render subheader entries as MUI ListSubheader when the sidebar is expanded.
• Render subheader entries as a Divider when the sidebar is collapsed.
• Added optional sx style overrides for subheader entries.
• Updated registerSidebarEntry so plugins can pass entryType and sx.
• Added tests for subheader rendering, collapsed sidebar behavior, hidden entries, and style overrides.
• Added Storybook examples for default, collapsed, and styled section headers.
• Updated the sidebar example plugin to show a section header followed by flat link entries at the same level.

Steps to Test

1. Register a regular sidebar entry without entryType and confirm it still renders as a clickable link.

   registerSidebarEntry({
     parent: null,
     name: 'traces',
     label: 'Traces',
     url: '/traces',
     icon: 'mdi:chart-timeline-variant',
   });

2. Register a sidebar entry with entryType: 'subheader' and confirm it renders as a non-clickable section header.

   registerSidebarEntry({
     parent: null,
     name: 'observability-section',
     label: 'Observability',
     entryType: 'subheader',
   });

3. Collapse the sidebar and confirm the section header is rendered as a divider instead of text.

4. Run the focused frontend checks.

   npm run frontend:lint
   npm run frontend:tsc
   cd frontend
   npm test -- --run src/components/Sidebar/SidebarItem.test.tsx src/components/Sidebar/useSidebarItems.test.tsx
   npm test -- --run src/storybook.test.tsx -t "Sidebar/SidebarItem"

Screenshots (if applicable)

Notes for the Reviewer

• This change is opt-in. Existing sidebar entries are treated as entryType: 'link' by default.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Soli0222
Once this PR has been reviewed and has the lgtm label, please assign sniok 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:

• OWNERS

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

[illume]

Thanks for these changes.

Can you please have a look at the git commits to see if they meet the contribution guidelines? We use a Linux kernel style of git commits. See the contributing guide for general context, and please see previous git commits with git log for examples.

Commits that need attention

• frontend: add non-clickable section headers to the sidebar — Description must start with a capital letter — e.g. frontend: HomeButton: Fix the button not frontend: HomeButton: fix the button.
• frontend: fix sidebar section header contrast — Description must start with a capital letter — e.g. frontend: HomeButton: Fix the button not frontend: HomeButton: fix the button.

Commit guidelines

• Use atomic commits focused on a single change.
• Use the title format <area>: <Description of changes> — description must start with a capital letter.
• Keep the title under 72 characters (soft requirement).
• Explain the intention and why the change is needed.
• Make commit titles meaningful and describe what changed.
• Do not add code that a later commit rewrites; squash or reorder commits instead.
• Do not include Fixes #NN in commit messages.

Good examples:

• frontend: HomeButton: Fix so it navigates to home
• backend: config: Add enable-dynamic-clusters flag

[Copilot]

Pull request overview

Adds a new entryType: 'subheader' option for plugin-registered sidebar entries so plugins can insert non-clickable section headers (rendered as ListSubheader when expanded and as a Divider when collapsed), while keeping existing sidebar entries working as normal link items.

Changes:

• Extends sidebar entry data passed through registerSidebarEntry to include entryType and optional sx overrides.
• Updates SidebarItem rendering logic to support non-clickable subheader entries and a collapsed-state divider.
• Adds unit tests and Storybook stories/snapshots covering subheader rendering, collapsed behavior, hidden entries, and style overrides.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
plugins/examples/sidebar/src/index.tsx	Updates the sidebar example plugin to register a section header via entryType: 'subheader' and custom sx.
frontend/src/plugin/registry.tsx	Passes entryType and sx through registerSidebarEntry into the sidebar slice.
frontend/src/components/Sidebar/useSidebarItems.test.tsx	Adds coverage to ensure custom sidebar entries include entryType/sx fields.
frontend/src/components/Sidebar/sidebarSlice.ts	Extends SidebarEntry with entryType/sx and updates reducer typing for stored entries.
frontend/src/components/Sidebar/SidebarItem.tsx	Implements rendering for entryType: 'subheader' (expanded subheader vs collapsed divider).
frontend/src/components/Sidebar/SidebarItem.test.tsx	Adds unit tests for subheader rendering, collapsed behavior, hidden entries, and sx overrides.
frontend/src/components/Sidebar/Sidebaritem.stories.tsx	Adds Storybook stories for default/collapsed/styled section headers.
frontend/src/components/Sidebar/snapshots/Sidebaritem.SectionHeader.stories.storyshot	New storyshot snapshot for SectionHeader.
frontend/src/components/Sidebar/snapshots/Sidebaritem.CollapsedSectionHeader.stories.storyshot	New storyshot snapshot for CollapsedSectionHeader.
frontend/src/components/Sidebar/snapshots/Sidebaritem.StyledSectionHeader.stories.storyshot	New storyshot snapshot for StyledSectionHeader.

[Soli0222]

Thanks for the reviews.

I updated the commit subjects to match the contribution guidelines, rebased the branch onto the latest upstream/main, and addressed both Copilot comments.

Changes since the previous push:

• Wrapped subheader child lists in a ListItem so the sidebar list markup remains valid HTML.
• Imported Draft from immer instead of @reduxjs/toolkit.

Validation:

• npm run frontend:tsc
• cd frontend && npm test -- --run src/components/Sidebar/SidebarItem.test.tsx src/components/Sidebar/sidebarSlice.test.ts
• npm run frontend:lint

[Copilot]

Pull request overview

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

[Soli0222]

@illume I addressed the latest Copilot follow-up about the subheader child link styling.

Validation:

• npm run frontend:tsc
• cd frontend && npm test -- --run src/components/Sidebar/SidebarItem.test.tsx
• npm run frontend:lint

Since this PR does not currently show a pending review request for you, mentioning you here. Could you take another look when you have a chance?

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[illume]

Thanks for this PR.

The open review comments from Copilot still need attention — can you have a look? Once addressed, please mark them as resolved.

[Soli0222]

@illume Thanks for the reminder.

The Copilot comments had already been addressed in the latest code, but I had missed marking the review threads as resolved. I have now marked those threads as resolved.

Validation from the latest update:

• npm run frontend:tsc
• cd frontend && npm test -- --run src/components/Sidebar/SidebarItem.test.tsx
• npm run frontend:lint

[Copilot]

Pull request overview

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

[illume]

Thanks for the contribution.

There are some open Copilot review comments — could you take a look at them? Please mark each one as resolved once you've addressed it.

[Soli0222]

@illume Thanks for the reminder.

The Copilot comments had already been addressed in the latest code, but I had missed marking the review threads as resolved. I have now marked those threads as resolved.

[illume]

Thanks for these changes.

Can you please have a look at the git commits to see if they meet the contribution guidelines? We use a Linux kernel style of git commits. See the contributing guide for general context, and please see previous git commits with git log for examples.

Commits that need attention

• docs: Add sidebar section header plugin docs — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.

Commit guidelines

• Use atomic commits focused on a single change.
• Use the title format <area>: <Description of changes> — description must start with a capital letter.
• Keep the title under 72 characters (soft requirement).
• Explain the intention and why the change is needed.
• Make commit titles meaningful and describe what changed.
• Do not add code that a later commit rewrites; squash or reorder commits instead.
• Do not include Fixes #NN in commit messages.

Good examples:

• frontend: HomeButton: Fix so it navigates to home
• backend: config: Add enable-dynamic-clusters flag

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

[illume]

Thanks for the contribution.

This PR has git conflicts — could you resolve them?

How to resolve conflicts

Rebase or merge the latest main into your branch, resolve the conflicts, and push the updated branch.

[Soli0222]

@illume CI is green now.

I rebased this branch onto the latest upstream/main, resolved the conflict in docs/development/plugins/functionality/index.md, and kept both the registerHomeSidebarEntryFilter documentation and the new sidebar section header documentation.

I also updated the docs commit title to match the scoped style used by commits such as frontend: plugins: docs: e2e-tests: a11y: Fix terminals for themes.

Could you please take another look?

For future reference, could you clarify what exactly was wrong with the previous commit title docs: Add sidebar section header plugin docs? I don't think docs: conflicts with the Linux kernel style commit guidance, and there are existing commits in this repository that start with docs:. Is the expectation that plugin documentation changes should use a more specific scope such as frontend: plugins: docs: ..., or was there another rule I missed?

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

[illume]

@Soli0222 I think something like this would be good:

docs/plugins/functionality: Add sidebar section header docs

It makes it clear to the reader of the subject, which area was changed.

Note: we also don't use signed-off-by in this repo, but use a CLA bot instead. So these could be left out in future.

[illume]

Thanks! 🎉

[kubernetes-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, Soli0222

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [illume]

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