Added 'Access Denied' screen for unauthorized MCP users #376
Conversation
lucasgoral
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR adds an authorization layer to the Managed Control Plane (MCP) page to display an "Access Denied" screen when users lack permission to view MCP resources. The implementation checks user authorization by attempting to access CRD resources and handles 401/403 errors appropriately.
Key Changes
- Added
ManagedControlPlaneAuthorizationwrapper component that checks user permissions via CRD access - Created reusable
Centercomponent for centering content vertically and horizontally - Enhanced
Infoboxcomponent with size-specific icon styling andnoMarginprop
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/spaces/mcp/authorization/ManagedControlPlaneAuthorization.tsx |
New authorization wrapper component that checks CRD access and shows access denied screen for unauthorized users |
src/spaces/mcp/pages/McpPage.tsx |
Wraps MCP page content with authorization check and updates loading indicator to use Center component |
src/lib/api/types/crossplane/CRDList.ts |
Adds CRDRequestAuthCheck resource with jq filter for lightweight authorization checks |
src/components/Ui/Center/Center.tsx |
New utility component for centering content with flexbox |
src/components/Ui/Center/Center.module.css |
Styles for the Center component |
src/components/Ui/Infobox/Infobox.tsx |
Adds noMargin prop and size-specific icon styling |
src/components/Ui/Infobox/Infobox.module.css |
Adds icon-sm, no-margin styles, and updates size-sm styling |
src/components/Ui/NotFoundBanner/NotFoundBanner.tsx |
Wraps content with Center component for consistent positioning |
src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx |
Fixes logic to show either warning or connect button (not both) |
src/lib/shared/McpContext.tsx |
Removes trailing whitespace |
public/locales/en.json |
Adds translation keys for access denied messages |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { useApiResource } from '../../../lib/api/useApiResource.ts'; | ||
|
|
||
| export interface ManagedControlPlaneAuthorizationProps { | ||
| mcp: ControlPlaneType; |
There was a problem hiding this comment.
The mcp prop is defined in the interface but never used in the component. If it's not needed for the current implementation, it should be removed from the interface. If it will be needed in the future, consider adding a comment explaining its intended use.
| mcp: ControlPlaneType; |
| const onBack = () => { | ||
| if (workspaceName) { | ||
| navigate( | ||
| generatePath(Routes.Project, { | ||
| projectName: projectName ?? '', | ||
| }), | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
The onBack function only navigates when workspaceName is truthy, but the button is always rendered. This means the button will do nothing when workspaceName is falsy. Consider either:
- Hiding the button when navigation is not possible
- Always navigating (remove the conditional), or
- Providing a fallback navigation target
| <MCPHealthPopoverButton | ||
| mcpStatus={mcp?.status} | ||
| projectName={projectName} | ||
| workspaceName={workspaceName ?? ''} |
There was a problem hiding this comment.
This use of variable 'workspaceName' always evaluates to true.
| workspaceName={workspaceName ?? ''} | |
| workspaceName={workspaceName} |
What this PR does / why we need it:
Added logic to show error page with info when user is not authorized to access MCP