fix

Author: lucasgoral

public/locales/en.json

@@ -515,7 +515,11 @@
         "details": "You must be a member to access this Managed Control Plane. Please contact {{createdBy}} to request access.",
         "administrator": "an administrator"
       },
-      "backToWorkspaces": "Back to workspaces"
+      "customIdp": {
+        "title": "Access Denied",
+        "details": "non-default Identity Providers are not supported yet"
+      },
+      "backToWorkspaces": "Back to Workspaces"
     }
   }
 }

src/components/Ui/Center/Center.module.css

@@ -0,0 +1,12 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.textAlignCenter {
+  text-align: center;
+}

src/components/Ui/Center/Center.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren, ReactNode, CSSProperties } from 'react';
+import cx from 'clsx';
+import styles from './Center.module.css';
+
+export type CenterProps = PropsWithChildren<{
+  className?: string;
+  style?: CSSProperties;
+  textAlignCenter?: boolean;
+}>;
+
+export const Center = ({ children, className, style, textAlignCenter = true }: CenterProps): ReactNode => {
+  const classes = cx(styles.root, { [styles.textAlignCenter]: textAlignCenter }, className);
+
+  return (
+    <div className={classes} style={style}>
+      {children}
+    </div>
+  );
+};

src/components/Ui/NotFoundBanner/NotFoundBanner.module.css

@@ -6,4 +6,4 @@
 .button {
   margin-inline: auto;
   margin-block: 2rem;
-}
+}

src/components/Ui/NotFoundBanner/NotFoundBanner.tsx

@@ -3,8 +3,9 @@ import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/Illustr
 import { Trans, useTranslation } from 'react-i18next';
 
 import styles from './NotFoundBanner.module.css';
-import { Button } from '@ui5/webcomponents-react';
+import { Button, FlexBox } from '@ui5/webcomponents-react';
 import { useNavigate } from 'react-router-dom';
+import { Center } from '../Center/Center.tsx';
 
 export interface NotFoundBannerProps {
   entityType: string;
@@ -14,19 +15,21 @@ export function NotFoundBanner({ entityType }: NotFoundBannerProps) {
   const navigate = useNavigate();
 
   return (
-    <IllustratedBanner
-      illustrationName={IllustrationMessageType.PageNotFound}
-      title={t('NotFoundBanner.titleMessage', { entityType })}
-      subtitle={
-        <div className={styles.subtitleContainer}>
-          <span>
-            <Trans i18nKey="NotFoundBanner.subtitleMessage" values={{ entityType }} />
-          </span>
-          <Button className={styles.button} onClick={() => navigate('/')}>
-            {t('NotFoundBanner.navigateHome')}
-          </Button>
-        </div>
-      }
-    />
+    <Center>
+      <IllustratedBanner
+        illustrationName={IllustrationMessageType.PageNotFound}
+        title={t('NotFoundBanner.titleMessage', { entityType })}
+        subtitle={
+          <div className={styles.subtitleContainer}>
+            <span>
+              <Trans i18nKey="NotFoundBanner.subtitleMessage" values={{ entityType }} />
+            </span>
+            <Button className={styles.button} onClick={() => navigate('/')}>
+              {t('NotFoundBanner.navigateHome')}
+            </Button>
+          </div>
+        }
+      />
+    </Center>
   );
 }

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

@@ -100,6 +100,6 @@ export const ControlPlane = (
 ): Resource<ControlPlaneType> => {
   return {
     path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}--ws-${workspaceName}/managedcontrolplanes/${controlPlaneName}`,
-    jq: '{ spec: .spec | {components, authorization}, metadata: .metadata | {name, namespace, creationTimestamp, annotations}, status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}],  access: .status.components.authentication.access, status: .status.status }}',
+    jq: '{ spec: .spec | {components, authorization, authentication}, metadata: .metadata | {name, namespace, creationTimestamp, annotations}, status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}],  access: .status.components.authentication.access, status: .status.status }}',
   };
 };

src/lib/shared/McpContext.tsx

@@ -72,9 +72,7 @@ function RequireDownstreamLogin(props: { children?: ReactNode }) {
 
 export function WithinManagedControlPlane({ children }: { children?: ReactNode }) {
   const auth = useAuthMcp();
-  const { isMcpAdmin } = useGetMcpUserRights();
-  console.log('isMcpAdmin');
-  console.log(isMcpAdmin);
+
   if (auth.isLoading) {
     return <BusyIndicator active />;
   }

src/spaces/mcp/authorization/ManagedControlPlaneAuthorization.module.css

@@ -3,11 +3,12 @@ import { useGetMcpUserRights } from './useGetMcpUserRights.ts';
 import { useTranslation } from 'react-i18next';
 
 import IllustratedError from '../../../components/Shared/IllustratedError.tsx';
-import { Button, FlexBox } from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react';
 import { ControlPlaneType } from '../../../lib/api/types/crate/controlPlanes.ts';
 import { generatePath, useNavigate, useParams } from 'react-router-dom';
 import { Routes } from '../../../Routes.ts';
-import styles from './ManagedControlPlaneAuthorization.module.css';
+
+import { Center } from '../../../components/Ui/Center/Center.tsx';
 
 export interface ManagedControlPlaneAuthorizationProps {
   mcp: ControlPlaneType;
@@ -29,18 +30,32 @@ export const ManagedControlPlaneAuthorization = ({ children, mcp }: ManagedContr
   const createdBy =
     mcp?.metadata?.annotations?.['openmcp.cloud/created-by']?.split(':')[1] ||
     t('mcp.authorization.accessDenied.administrator');
+  const isSystemIdentityProviderEnabled = Boolean(mcp.spec?.authentication?.enableSystemIdentityProvider);
   const { isMcpMember } = useGetMcpUserRights();
+  if (!isSystemIdentityProviderEnabled)
+    return (
+      <Center>
+        <IllustratedError
+          title={t('mcp.authorization.customIdp.title')}
+          details={t('mcp.authorization.customIdp.details')}
+        />
+        <Button design={'Default'} icon={'navigation-left-arrow'} onClick={onBack}>
+          {t('mcp.authorization.backToWorkspaces')}
+        </Button>
+      </Center>
+    );
+
   if (!isMcpMember)
     return (
-      <FlexBox justifyContent={'Center'} alignItems={'Center'} direction={'Column'} className={styles.container}>
+      <Center>
         <IllustratedError
           title={t('mcp.authorization.accessDenied.title')}
           details={t('mcp.authorization.accessDenied.details', { createdBy })}
         />
-        <Button design={'Emphasized'} icon={'navigation-left-arrow'} onClick={onBack}>
+        <Button design={'Default'} icon={'navigation-left-arrow'} onClick={onBack}>
           {t('mcp.authorization.backToWorkspaces')}
         </Button>
-      </FlexBox>
+      </Center>
     );
 
   return <>{children}</>;