PR changes

Hubert-Szczepanski-SAP · Hubert-Szczepanski-SAP · commit 765aa9e1724e · 2025-04-27T12:18:27.000+02:00
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -67,7 +67,7 @@
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
-  "NoManagedControlPlaneBanner": {
+  "IllustratedBanner": {
     "titleMessage": "No ManagedControlPlane",
     "subtitleMessage": "Create a ManagedControlPlane to get started",
     "helpButton": "Help"
diff --git a/src/components/ControlPlane/FluxList.tsx b/src/components/ControlPlane/FluxList.tsx
@@ -44,7 +44,7 @@ export default function FluxList() {
   if (repoErr || kustomizationErr) {
     return (
       <IllustratedError
-        error={repoErr.message || kustomizationErr.message}
+        details={repoErr.message || kustomizationErr.message}
         title={t('FluxList.noFluxError')}
       />
     );
diff --git a/src/components/ControlPlane/ManagedResources.tsx b/src/components/ControlPlane/ManagedResources.tsx
@@ -109,7 +109,7 @@ export function ManagedResources() {
     <>
       <Title level="H4">{t('ManagedResources.header')}</Title>
 
-      {error && <IllustratedError error={error.message} />}
+      {error && <IllustratedError details={error.message} />}
 
       {!error && (
         <AnalyticalTable
diff --git a/src/components/ControlPlane/Providers.tsx b/src/components/ControlPlane/Providers.tsx
@@ -105,7 +105,7 @@ export function Providers() {
     <>
       <Title level="H4">{t('Providers.headerProviders')}</Title>
 
-      {error && <IllustratedError error={error.message} />}
+      {error && <IllustratedError details={error.message} />}
 
       {!error && (
         <AnalyticalTable
diff --git a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx
@@ -27,7 +27,7 @@ export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {
     return <Loading />;
   }
   if (error) {
-    return <IllustratedError error={error.message} />;
+    return <IllustratedError details={error.message} />;
   }
 
   return (
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -35,7 +35,7 @@ import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
-import { IllustrationName } from '../../Shared/IllustratedName.ts';
+import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 interface Props {
   projectName: string;
@@ -75,7 +75,7 @@ export function ControlPlaneListWorkspaceGridTile({
             title={t(
               'ControlPlaneListWorkspaceGridTile.permissionErrorMessage',
             )}
-            subtitleText={t(
+            details={t(
               'ControlPlaneListWorkspaceGridTile.permissionErrorMessageSubtitle',
             )}
           />
@@ -140,26 +140,26 @@ export function ControlPlaneListWorkspaceGridTile({
         >
           {errorView ? (
             errorView
+          ) : controlplanes?.length === 0 ? (
+            <IllustratedBanner
+              title={t('IllustratedBanner.titleMessage')}
+              subtitle={t('IllustratedBanner.subtitleMessage')}
+              illustrationName={IllustrationMessageType.NoData}
+              help={{
+                link: links.COM_PAGE_GETTING_STARTED_MCP,
+                buttonText: t('IllustratedBanner.helpButton'),
+              }}
+            />
           ) : (
             <Grid defaultSpan="XL4 L4 M7 S12">
-              {controlplanes?.length === 0 ? (
-                <IllustratedBanner
-                  title={t('NoManagedControlPlaneBanner.titleMessage')}
-                  subtitle={t('NoManagedControlPlaneBanner.subtitleMessage')}
-                  helpButtonText={t('NoManagedControlPlaneBanner.helpButton')}
-                  illustrationName={IllustrationName.NoData}
-                  helpLink={links.COM_PAGE_GETTING_STARTED_MCP}
+              {controlplanes?.map((cp) => (
+                <ControlPlaneCard
+                  key={`${cp.metadata.name}--${cp.metadata.namespace}`}
+                  controlPlane={cp}
+                  projectName={projectName}
+                  workspace={workspace}
                 />
-              ) : (
-                controlplanes?.map((cp) => (
-                  <ControlPlaneCard
-                    key={`${cp.metadata.name}--${cp.metadata.namespace}`}
-                    controlPlane={cp}
-                    projectName={projectName}
-                    workspace={workspace}
-                  />
-                ))
-              )}
+              ))}
             </Grid>
           )}
         </Panel>
diff --git a/src/components/Projects/ProjectChooser.tsx b/src/components/Projects/ProjectChooser.tsx
@@ -14,7 +14,7 @@ export default function ProjectChooser({ currentProjectName }: Props) {
   const navigate = useLuigiNavigate();
 
   if (error) {
-    return <IllustratedError error={error.message} />;
+    return <IllustratedError details={error.message} />;
   }
 
   return (
diff --git a/src/components/Projects/ProjectsList.tsx b/src/components/Projects/ProjectsList.tsx
@@ -16,7 +16,7 @@ export default function ProjectsList() {
     refreshInterval: 3000,
   });
   if (error) {
-    return <IllustratedError error={error.message} />;
+    return <IllustratedError details={error.message} />;
   }
 
   return (
diff --git a/src/components/Shared/IllustratedError.tsx b/src/components/Shared/IllustratedError.tsx
@@ -1,26 +1,24 @@
 import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
 import { useTranslation } from 'react-i18next';
 import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner';
-import { IllustrationName } from './IllustratedName';
+import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 interface Props {
   title?: string;
-  subtitleText?: string;
-  error?: string;
+  details?: string;
 }
 
 export default function IllustratedError({
   title,
-  subtitleText,
-  error,
+  details,
 }: Props) {
   const { t } = useTranslation();
 
   return (
     <IllustratedBanner
-      illustrationName={IllustrationName.SimpleError}
+      illustrationName={IllustrationMessageType.SimpleError}
       title={title ?? t('IllustratedError.titleText')}
-      subtitle={error ?? subtitleText ?? t('IllustratedError.subtitleText')}
+      subtitle={details ?? t('IllustratedError.subtitleText')}
     />
   );
 }
diff --git a/src/components/Shared/IllustratedName.ts b/src/components/Shared/IllustratedName.ts
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.css b/src/components/Ui/IllustratedBanner/IllustratedBanner.css
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx b/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx
@@ -1,25 +1,25 @@
 import IllustrationMessageDesign from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageDesign.js';
+import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 import { FlexBox, IllustratedMessage, Button } from '@ui5/webcomponents-react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js';
-import { IllustrationName } from '../../Shared/IllustratedName';
 
 type InfoBannerProps = {
   title: string;
   subtitle: string;
-  illustrationName?: IllustrationName; // e.g. 'NoData', 'SimpleError', etc.
-  buttonIcon?: string;
-  helpButtonText?: string;
-  helpLink?: string;
+  illustrationName?: IllustrationMessageType // e.g. 'NoData', 'SimpleError', etc.
+  help?: {
+    link: string;
+    buttonText: string;
+    buttonIcon?: string;
+  }
 };
 
 export const IllustratedBanner = ({
   title,
   subtitle,
-  illustrationName = IllustrationName.NoData,
-  buttonIcon = 'sap-icon://question-mark',
-  helpButtonText,
-  helpLink,
+  illustrationName = IllustrationMessageType.NoData,
+  help
 }: InfoBannerProps) => {
   return (
     <FlexBox direction="Column" alignItems="Center">
@@ -29,14 +29,15 @@ export const IllustratedBanner = ({
         titleText={title}
         subtitleText={subtitle}
       />
-      {helpButtonText && helpLink && (
-        <Button
-          design={ButtonDesign.Transparent}
-          icon={buttonIcon}
-          onClick={() => window.open(helpLink, '_blank')}
-        >
-          {helpButtonText}
-        </Button>
+      {help?.buttonText && help.link && (
+        <a href={help.link} target='_blank'>
+          <Button
+            design={ButtonDesign.Transparent}
+            icon={help.buttonIcon ? help.buttonIcon : 'sap-icon://question-mark'}
+          >
+            {help.buttonIcon}
+          </Button>
+        </a>
       )}
     </FlexBox>
   );
diff --git a/src/lib/shared/McpContext.tsx b/src/lib/shared/McpContext.tsx
@@ -8,14 +8,12 @@ import {
 import { ControlPlane as ManagedControlPlaneResource } from '../api/types/crate/controlPlanes.ts';
 import { GetAuthPropsForContextName } from '../oidc/shared.ts';
 import { AuthProvider, hasAuthParams, useAuth } from 'react-oidc-context';
-import IllustratedError from '../../components/Shared/IllustratedError.tsx';
 import {
   ApiConfigContext,
   ApiConfigProvider,
 } from '../../components/Shared/k8s';
 import useResource from '../api/useApiResource.ts';
 import { GetKubeconfig } from '../api/types/crate/getKubeconfig.ts';
-import { useTranslation } from 'react-i18next';
 
 interface McpContext {
   project: string;
@@ -118,28 +116,13 @@ export function WithinManagedControlPlane({
   children?: ReactNode;
 }) {
   const mcp = useContext(McpContext);
-  const { t } = useTranslation();
 
-  try {
-    const authprops = GetAuthPropsForContextName(mcp.context, mcp.kubeconfig!);
-    return (
-      <>
-        <AuthProvider key={mcp.context} {...authprops}>
-          <RequireDownstreamLogin>{children}</RequireDownstreamLogin>
-        </AuthProvider>
-      </>
-    );
-  } catch (e) {
-    let errorMessage = t('MCPContext.errorMessage');
-
-    if (e instanceof Error) {
-      errorMessage = e.message;
-    } else if (typeof e === 'string') {
-      errorMessage = e;
-    } else if (typeof e === 'object' && e !== null && 'message' in e) {
-      errorMessage = String((e as any).message);
-    }
-
-    return <IllustratedError error={errorMessage} />;
-  }
+  const authprops = GetAuthPropsForContextName(mcp.context, mcp.kubeconfig!);
+  return (
+    <>
+      <AuthProvider key={mcp.context} {...authprops}>
+        <RequireDownstreamLogin>{children}</RequireDownstreamLogin>
+      </AuthProvider>
+    </>
+  );
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -16,14 +16,14 @@ import { AuthProviderOnboarding } from './context/AuthProviderOnboarding.tsx';
 import { ApolloClientProvider } from './spaces/onboarding/services/ApolloClientProvider/ApolloClientProvider.tsx';
 import { IllustratedBanner } from './components/Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useTranslation } from 'react-i18next';
-import { IllustrationName } from './components/Shared/IllustratedName.ts';
+import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 const ErrorFallback = ({ error }: FallbackProps) => {
   const { t } = useTranslation();
 
   return (
     <IllustratedBanner
-      illustrationName={IllustrationName.SimpleError}
+      illustrationName={IllustrationMessageType.SimpleError}
       title={t('IllustratedError.titleText')}
       subtitle={error ? error : t('IllustratedError.subtitleText')}
     />
diff --git a/src/views/ControlPlanes/ControlPlaneView.tsx b/src/views/ControlPlanes/ControlPlaneView.tsx
@@ -45,14 +45,14 @@ export default function ControlPlaneView() {
   }
 
   if (error) {
-    return <IllustratedError error={error.message} />;
+    return <IllustratedError details={error.message} />;
   }
   if (
     !mcp?.status?.access?.key ||
     !mcp?.status?.access?.name ||
     !mcp?.status?.access?.namespace
   ) {
-    return <IllustratedError error={t('ControlPlaneView.accessError')} />;
+    return <IllustratedError details={t('ControlPlaneView.accessError')} />;
   }
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {`
`27`	`27`	`return <Loading />;`
`28`	`28`	`}`
`29`	`29`	`if (error) {`
`30`		`- return <IllustratedError error={error.message} />;`
	`30`	`+ return <IllustratedError details={error.message} />;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export default function ProjectChooser({ currentProjectName }: Props) {`
`14`	`14`	`const navigate = useLuigiNavigate();`
`15`	`15`
`16`	`16`	`if (error) {`
`17`		`- return <IllustratedError error={error.message} />;`
	`17`	`+ return <IllustratedError details={error.message} />;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default function ProjectsList() {`
`16`	`16`	`refreshInterval: 3000,`
`17`	`17`	`});`
`18`	`18`	`if (error) {`
`19`		`- return <IllustratedError error={error.message} />;`
	`19`	`+ return <IllustratedError details={error.message} />;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`return (`