feat: visualize components as boxes

[andreaskienle]

Implements openmcp-project/backlog#309

This PR reworks the component boxes:

• We show a fixed set of component boxes (Crossplane, Flux, Landscaper, Kyverno, ESO)
  • If the component is installed:
    • we show the version number (except for Landscaper which doesn't have a version number)
    • if we have a tab (Crossplane, Flux, Landscaper), the card is interactive and we can use it to navigate to the tab
    • for Crossplane and Flux we show a KPI as a progress bar; for others the KPI is just a "Installed" indicator (for now)
  • If the component is not installed:
    • we show a button to install it (opening the Edit MCP dialog) (except for Landscaper which can’t be installed this way)

The PR also adds @testing-library/react, so I could test the hooks.

Installed

Not installed

[Copilot]

Pull Request Overview

Adds a new components dashboard to visualize MCP components as cards with KPIs, along with supporting hooks, tests, and i18n strings.

• Introduces ComponentsDashboard with ComponentCard and KPI widgets for Crossplane, Flux, and others.
• Adds hooks useKpiCrossplane and useKpiFlux with comprehensive unit and Cypress tests.
• Updates testing setup (Vitest jsdom), shared types, and minor import path adjustments.

Reviewed Changes

Copilot reviewed 23 out of 32 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
vite.config.js	Enables Vitest jsdom environment needed for React Testing Library.
src/spaces/mcp/pages/McpPage.tsx	Replaces HintsCardsRow with ComponentsDashboard and updates McpHeader import path.
src/spaces/mcp/components/McpHeader/McpHeader.tsx	Fixes relative import paths after folder structure changes.
src/spaces/mcp/components/McpHeader/McpHeader.cy.tsx	Aligns imports with file renaming/path changes.
src/spaces/mcp/components/Kpi/*	Adds KPI component, hooks (Crossplane/Flux), styles, and tests.
src/spaces/mcp/components/ComponentsDashboard/*	Adds dashboard and card layout, styles, and Cypress tests.
src/spaces/mcp/components/ComponentCard/*	Adds individual component card component, styles, and tests.
src/lib/shared/types.ts	Corrects labels type to a key-value record.
src/lib/api/useApiResource.ts	Narrows error type to APIError
src/lib/api/types/crate/controlPlanes.ts	Adds landscaper field to components type.
public/locales/en.json	Adds i18n strings for cards and KPI states.
package.json	Adds testing dependencies (@testing-library/react, jsdom).

Comments suppressed due to low confidence (1)

src/lib/api/types/crate/controlPlanes.ts:1

• The landscaper field type is 'unknown', which is inconsistent with the other component fields and makes usage unclear. Consider aligning it with the others (e.g., ControlPlaneComponentsSpecType | undefined) or model it explicitly as a boolean if only presence matters.

import { Resource } from '../resource';

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[lucasgoral]

LGTM :)