Expand Overview stories with empty, loading, and error states

[1012Charan]

Adds 3 Storybook stories for the Overview component:

• EmptyState (shows the UI when there's no data available)
• LoadingState (shows a spinner while data is being fetched)
• ErrorState (simulates when data fails to load)

[linux-foundation-easycla[bot]]

The committers listed above are authorized under a signed CLA.

• :white_check_mark: login: 1012Charan / name: Charan Vengala (bd534b2ddfcde1fd70941a6ef5326333f757f259)

[k8s-ci-robot]

Welcome @1012Charan!

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. :smiley:

[1012Charan]

Thanks for the suggestion @skoeva! I've updated this branch added the screenshots, but I noticed that all three states — Empty, Loading, and Error — look almost the same in Storybook. I’m not sure if that’s okay or if I might have missed something, so please let me know if any changes are needed!

[1012Charan]

@skoeva I've rebased the branch, squashed the commits, and updated the snapshots as requested.

Since this was my first time working with things like squash and rebase, it was an exciting learning experience — so if I missed anything or made mistakes, please feel free to point them out.

Also, while running the tests, I noticed a failure in the LoadingState due to it simulating an endless request. If you'd like, I can update it to use a timeout-based delay instead.

[skoeva]

sure, no need to mock an endless request. the frontend test still seems to be failing, are you seeing something different locally?

[1012Charan]

@skoeva You're right — I rechecked and the LoadingState test is still failing on my side too.

I think it's because the mocked API requests never resolve (to simulate loading), so the test waits indefinitely and throws a waiting error. Would it be okay to skip this story in the tests using:

LoadingState.parameters = { ...LoadingState.parameters, chromatic: { disableSnapshot: true }, };

Also, another issue was simple-eval causing the frontend tests to fail is now fixed — I had missed installing it initially, but after adding it, the other tests are passing fine.

Let me know if this approach for the loading story makes sense or if you'd prefer a different fix!

[joaquimrocha]

@skoeva Can you check this one?

[skoeva]

@1012Charan Fixed the CI failures and removed the unnecessary changes, feel free to test locally and lmk if you notice anything

[1012Charan]

Hi @skoeva , I pulled the latest changes and ran the frontend tests locally, and I'm happy to say they're all passing now! So, it looks like those CI issues you mentioned are all cleared up from my end. I also took a look at the new Overview stories in Storybook (EmptyState, LoadingState, and ErrorState). As we talked about, they present a pretty similar visual output, but I totally get that's the intended behavior for these states. Everything seems to be in order on my side. Just let me know if there's anything else you'd like me to verify or if you need any more help with this PR. Thanks!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: 1012Charan, illume

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

The pull request process is described here

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