feat: add Bento style to MCP page #288
Conversation
Lasserich
commented
Sep 16, 2025
Lasserich
commented
There was a problem hiding this comment.
Pull Request Overview
This PR adds a Bento-style grid layout to the MCP page, replacing the previous hints cards row and component sections with an interactive dashboard design. The changes implement a flexible grid system that allows for component expansion and provides better visual organization of control plane information.
- Introduces BentoGrid layout with responsive card system supporting different sizes (small, medium, large, extra-large)
- Replaces HintsCardsRow component with new ComponentCard-based BentoGrid design
- Adds member management functionality with new members component card
Reviewed Changes
Copilot reviewed 33 out of 39 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/spaces/mcp/pages/McpPage.tsx | Completely refactors the page to use BentoGrid layout with expandable ComponentCards |
| src/components/BentoGrid/ | New component system with grid layout, cards, and multi-percentage bars |
| src/utils/componentCardCalculations.ts | Updates calculation functions to work with new card system and adds members calculation |
| src/components/HintsCardsRow/ | Removes old hints cards row components |
| src/types/types.ts | Makes types generic to support different data types beyond ManagedResourceItem |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| calculateCrossplaneHoverData, | ||
| HINT_COLORS, | ||
| } from './hintsCardsRowCalculations'; | ||
| } from './componentCardCalculations'; |
There was a problem hiding this comment.
File import path has a typo. Should be './componentCardCalculations' (missing 's' in 'Cards').
| } from './componentCardCalculations'; | |
| } from './componentCardsCalculations'; |
| AnimationConfig, | ||
| LabelPosition, | ||
| LabelDisplayMode, | ||
| }; |
There was a problem hiding this comment.
[nitpick] Consider exporting these interfaces from a separate types file to improve maintainability and reduce the size of this component file.
public/locales/en.json
Outdated
| "GitOpsHint": { | ||
| "title": "Flux", | ||
| "subtitle": "GitOps Progress", | ||
| "subtitle": "Persist desired state in code repsitories", |
There was a problem hiding this comment.
There's a typo in 'repsitories'. Should be 'repositories'.
| "subtitle": "Persist desired state in code repsitories", | |
| "subtitle": "Persist desired state in code repositories", |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
This is rough, co-pilot only having 3 comments on 6k lines of code? 😭 😂 |
2 participants
