kyverno: add CRDGuard Storybook stories

[Suhani95]

Summary

Adds Storybook coverage for the Kyverno CRDGuard component.

This PR introduces stories covering the different CRD availability states handled by CRDGuard, including successful rendering, loading, missing CRDs, and custom message overrides. A small PureCRDGuard wrapper is used within the story file to make the component states deterministic without requiring a live cluster or hook mocking.

Related Issue

Fixes #834

Changes

• Added src/components/CRDGuard.stories.tsx
• Added Storybook coverage for CRD availability states
• Added coverage for loading and successful rendering states
• Added coverage for custom message rendering
• Added coverage for all supported Kyverno CRD groups

Steps to Test

1. Run npm run lint
2. Run npm run storybook-build
3. Open the CRDGuard stories in Storybook
4. Verify the loading, available, missing CRD, and custom message states render correctly

Notes for the Reviewer

• Adds Storybook coverage for CRDGuard.
• Refactors CRDGuard slightly by extracting PureCRDGuard, so stories can reuse the same rendering logic while passing deterministic CRD status.
• No behavior change to CRDGuard; it still reads CRD status through useKyvernoCRDs().

[Suhani95]

@illume @sniok could you please take a look when you have a chance? Thanks!

[illume]

Thanks!

Looks good. I see there's formatting issue in CI though. (Also check tsc, lint and tests still pass)

[Copilot]

Pull request overview

Adds a new Storybook story file intended to cover the Kyverno CRDGuard CRD-availability states (available, loading, missing per CRD group, and custom message).

Changes:

• Added CRDGuard.stories.tsx with stories for loading, available, missing-CRD states, and custom message override.
• Included coverage for each supported Kyverno CRD group by parameterizing requires.

---

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

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

[Suhani95]

@illume PTAL

[illume]

Thanks for the contribution.

Could you take a look at the commit messages in this PR? We follow a Linux kernel style for git commits — see the contributing guide and git log for examples.

Commits that need attention

• kyverno: add CRDGuard Storybook stories — 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