Refactor Marketplace page into typed controls and content components

[Copilot]

Adding or modifying a card/dashboard? Read the Card Development Guide first — it covers required patterns, common pitfalls, and the full file checklist.

New CNCF project card? New cards go in kubestellar/console-marketplace, not this repo. PRs adding new cards here will be redirected.

Use a coding agent. This repo is primarily developed with Claude Code (Opus 4.5/4.6). It knows all codebase patterns (isDemoData, useCardLoadingState, locale strings, DCO). Manual PRs that miss required patterns will be sent back.

📌 Fixes

---

📝 Summary of Changes

Marketplace UI structure was consolidated in Marketplace.tsx, mixing page state, filter chrome, and content presenters in one file. This change extracts controls and content rendering into focused typed components while keeping behavior and state flow unchanged.

• Controls extraction

  • Moved search, type/tag/category filters, sort controls, and view-mode toggles into MarketplaceControls.tsx
  • Introduced explicit prop contracts (ViewMode, SortField, SortOrder) instead of implicit page-state coupling

• Content presenter extraction

  • Moved loading/error/empty/grouped/list/grid rendering branches into MarketplaceContent.tsx
  • Kept grouped Help Wanted and list/grid behavior intact via parent-provided typed render callbacks

• Thin page container

  • Marketplace.tsx now focuses on orchestration: hook state, sort/group derivation, install/remove actions, and wiring props to extracted components

• Test touch-up

  • Extended Marketplace.test.tsx to assert export availability for the two new components

<MarketplaceControls
  searchQuery={searchQuery}
  onSearchQueryChange={setSearchQuery}
  sortField={sortField}
  sortOrder={sortOrder}
  onToggleSort={toggleSort}
  viewMode={viewMode}
  onViewModeChange={toggleViewMode}
/>

---

Changes Made

• Updated web/src/components/marketplace/Marketplace.tsx to delegate controls/content rendering
• Refactored filter/sort/view UI into web/src/components/marketplace/MarketplaceControls.tsx
• Refactored content-state and presenter branches into web/src/components/marketplace/MarketplaceContent.tsx
• Added tests for new component exports in web/src/components/marketplace/Marketplace.test.tsx

---

Checklist

Please ensure the following before submitting your PR:

• I used a coding agent (Claude Code, Copilot, Gemini, or Codex) to generate/review this code
• I have reviewed the project's contribution guidelines
• New cards target console-marketplace, not this repo
• isDemoData is wired correctly (cards show Demo badge when using demo data)
• I have written unit tests for the changes (if applicable)
• I have tested the changes locally and ensured they work as expected
• All commits are signed with DCO (git commit -s)

---

Screenshots or Logs (if applicable)

---

👀 Reviewer Notes

• This PR is intentionally structural: extraction + prop typing, no intended behavior change.
• Please focus review on prop boundaries and equivalence of rendered branches (especially Help Wanted grouped rendering).

[netlify]

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	090d135
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/6a345353d5e282000839bcda
😎 Deploy Preview	https://deploy-preview-19149.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

👋 Hey @Copilot — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

• Claude Code (Opus 4.5 / 4.6) — recommended
• GitHub Copilot
• Cursor
• Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

---

This is an automated message.

[kubestellar-prow]

Thanks for your pull request. Before we can look at it, you'll need to add a 'DCO signoff' to your commits.

📝 Please follow instructions in the contributing guide to update your commits with the DCO

Full details of the Developer Certificate of Origin can be found at developercertificate.org.

The list of commits missing DCO signoff:

• 53ad3f0 Initial plan

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from clubanderson. 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

[github-actions]

⚠️ Test Coverage Gaps

2 new file(s) have no matching test. This is informational — it will not block merge.

To add tests, see the test patterns in CLAUDE.md and existing examples
in web/src/hooks/__tests__/.

Components (2 untested)

New file	Suggested test location
web/src/components/marketplace/MarketplaceContent.tsx	web/src/components/marketplace/__tests__/MarketplaceContent.test.tsx
web/src/components/marketplace/MarketplaceControls.tsx	web/src/components/marketplace/__tests__/MarketplaceControls.test.tsx

---

Checked against origin/main. Remove the needs-tests label once tests are added.

[github-actions]

Auto Test Generator

The following new files have no corresponding test file:

• web/src/components/marketplace/MarketplaceContent.tsx
• web/src/components/marketplace/MarketplaceControls.tsx

Please add tests or apply the needs-tests label to track this PR.