feat: navigation via tabs #297
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR implements tab-based navigation for the MCP (Managed Control Plane) page, transforming the previous single-page layout into a tabbed interface. The changes reorganize content into logical sections (Overview, Crossplane, Flux, Landscapers) and enhance navigation between components through interactive hint cards.
- Restructures the McpPage to use ObjectPage with IconTabBar mode for tab navigation
- Refactors Flux components by splitting FluxList into separate GitRepositories and Kustomizations components
- Adds click handlers to hint cards for navigation between sections
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/types.ts | Adds optional onClick handler to GenericHintProps |
| src/spaces/mcp/pages/McpPage.tsx | Major restructuring to implement tab navigation with ObjectPageSubSections |
| src/spaces/mcp/pages/McpPage.module.css | Updates styling for new section layout |
| src/index.css | Removes obsolete crossplane-table-element CSS class |
| src/components/HintsCardsRow/HintsCardsRow.tsx | Adds navigation callback prop and click handlers |
| src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx | Implements onClick functionality for navigation |
| src/components/ControlPlane/ProvidersConfig.tsx | Wraps content in Panel with consistent toolbar styling |
| src/components/ControlPlane/Providers.tsx | Wraps content in Panel with consistent toolbar styling |
| src/components/ControlPlane/ManagedResources.tsx | Wraps content in Panel with consistent toolbar styling |
| src/components/ControlPlane/Kustomizations.tsx | New component extracted from FluxList for Kustomizations table |
| src/components/ControlPlane/GitRepositories.tsx | New component extracted from FluxList for Git repositories table |
| src/components/ControlPlane/FluxList.tsx | Removed - functionality split into separate components |
| src/components/ControlPlane/ComponentList.tsx | Wraps content in Panel with consistent toolbar styling |
| public/locales/en.json | Updates translation keys for new section structure |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t); | ||
|
|
||
| // Handle click navigation if scroll target is provided | ||
| /* |
There was a problem hiding this comment.
can we delete this commented section?
Hubert-Szczepanski-SAP
previously approved these changes
Oct 2, 2025
Hubert-Szczepanski-SAP
approved these changes
Oct 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds proper tab navigation, implemeting openmcp-project/backlog#281.
As discussed, I had to remove
max-lengthbecause the subsection headers will always appear on the left. Let's see how this works out for us. Could still limit the width and align everything to the left if we want.The diff looks big, but the real changes are pretty straightforward:
<ObjectPageSubSections>.2025-09-26_11-32-26.mp4