frontend: daemonset/List: add missing Storybook states

[sudhidutta7694]

Summary

Add four missing visual states to the DaemonSet list Storybook stories. The component previously only had a happy-path story (DaemonSets). This adds Loading, Empty, Error and LongName states as suggested by @illume on the #headlamp Slack channel.

Changes

• frontend/src/components/daemonset/List.stories.tsx — added four new exported stories
  • Loading: MSW handler returns a never-resolving promise so the spinner shows indefinitely. storyshots disabled to prevent test hangs.
  • Empty: API returns items: [], component shows "No data to be shown"
  • Error: API returns a network-level failure via HttpResponse.error(), component shows "Failed to load resources"
  • LongName: item with a very long name and namespace to verify truncation and overflow behaviour in the table
• frontend/src/components/daemonset/__snapshots__/ — storyshot snapshots added for Empty, Error and LongName

Steps to Test

1. cd frontend && npm install
2. npm run storybook -- --no-open
3. Open http://localhost:6006 and navigate to DaemonSet → List
4. Verify all five stories render correctly:
   • DaemonSets — table with one row (unchanged)
   • Loading — spinner shows indefinitely
   • Empty — "No data to be shown"
   • Error — "Failed to load resources"
   • Long Name — long name and namespace wrap correctly in the table cells

Notes for the Reviewer

• The Loading story uses () => new Promise(() => {}) — the same pattern as cluster/Overview.stories.tsx LoadingState.
• No issue filed as this directly implements the suggestion from @illume in #headlamp Slack: "there tends to be missing states. Like missing loading states, or error states... or maybe add a state with long input."

Screenshots

Loading

Empty

Error

Long Name

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: sudhidutta7694 / name: Sudhi Sundar Dutta (c0d5bd2)

[k8s-ci-robot]

Welcome @sudhidutta7694!

It looks like this is your first PR to kubernetes-sigs/headlamp 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes-sigs/headlamp has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: sudhidutta7694
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:

• 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 working on this.

The commit messages could use some tidying up to match our contribution guidelines. We use Linux kernel style — the contributing guide has the details, and git log shows good examples.

Commits that need attention

• frontend: daemonset/List: add missing Storybook states — 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 four new Storybook stories (Loading, Empty, Error, LongName) for the DaemonSet List component to cover previously missing visual states, plus the corresponding storyshot snapshots.

Changes:

• Add Loading story using a never-resolving MSW handler (with storyshots.disable: true).
• Add Empty and Error stories with corresponding MSW handlers and snapshots.
• Add LongName story to verify long name/namespace overflow handling, with snapshot.

Reviewed changes

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

File	Description
frontend/src/components/daemonset/List.stories.tsx	New Loading, Empty, Error, LongName story exports with MSW handlers
frontend/src/components/daemonset/snapshots/List.Empty.stories.storyshot	New snapshot for the Empty state
frontend/src/components/daemonset/snapshots/List.Error.stories.storyshot	New snapshot for the Error state
frontend/src/components/daemonset/snapshots/List.LongName.stories.storyshot	New snapshot for the LongName state

[illume]

Thanks for the contribution.

The GitHub CI test job has snapshot failures. Run cd frontend && npm run test -- -u to regenerate the snapshots.

How to update snapshots

Run cd frontend && npm run test -- -u to regenerate all snapshots. Review the diff to make sure the visual changes are intentional, then commit the updated snapshot files.

[sudhidutta7694]

Hi @illume, thanks for the feedback! Fixed the commit title capitalisation, rebased onto the latest main, and re-ran the storybook tests. Force-pushed the updated branch. Let me know if there's anything else!

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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