frontend: PortForward: Add stories for various connection states

[aravind4799]

Summary

This PR adds Storybook stories for the PortForward component to visualize and test its various states, including the form, loading state, successful connection, and error handling.

Related Issue

Fixes #4689

Changes

• Created frontend/src/components/common/Resource/PortForward.stories.tsx
• Added stories for:
  • Initial form state
  • Connection pending (loading spinner)
  • Connection established (running state)
  • Connection failed (error message)
  • Port already in use (error message)
• Used msw for mocking API responses and play functions for simulating user interactions.

Steps to Test

1. Run npm run frontend:storybook
2. Navigate to Resource/PortForward in the Storybook sidebar.
3. Click through the following stories to verify behavior:
   • PortForwardForm: Checks the initial rendering.
   • ConnectionPendingLoading: Verifies the loading spinner appears after clicking "Start".
   • ConnectionEstablishedSuccess: Verifies the "Running" state and "Stop" button.
   • ConnectionFailedError: Verifies the error alert for connection refusal.
   • PortAlreadyInUseError: Verifies the error alert for port conflicts.

Notes for the Reviewer

• The stories use a minimal valid KubePod mock object to satisfy TypeScript requirements.
• msw handlers are used to force specific API responses (success, hang, error) for each story.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: aravind4799 / name: Aravind K (2936548)

[k8s-ci-robot]

Welcome @aravind4799!

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. 😃

[Copilot]

Pull request overview

Adds a new Storybook story file for the PortForward resource action so developers can visually verify and regression-test key UI states (initial form, loading, running, and error conditions) in isolation.

Changes:

• Added PortForward.stories.tsx under components/common/Resource with 5 stories covering common connection states.
• Introduced MSW handlers per story to mock port-forward list/start responses.
• Added play functions to drive the UI into loading/error states via user interaction.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[skoeva]

this could use a rebase against main

[aravind4799]

Fixed : added storyshots: { disable: true } for stories with play functions, updated userEvent to v14 .setup() pattern, and added beforeEach cleanup for window.process.

[aravind4799]

Hi @illume , I've addressed the review comments and the CI workflow is awaiting approval

[illume]

Thanks.

Can you please squash the commits?

For the git commit message body, please get rid of Signed-off-by and add something like the Changes part of the PR description, with any information about Why you did what you did in the change?

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[aravind4799]

Hi @illume,
Squashed Commits & Resolved Copilot Suggestions: addressed the two remaining unresolved comments from Copilot.

[illume]

🎉 thanks!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

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

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

[Copilot]

Pull request overview

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

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.