Illustrated Banner Component

Hubert-Szczepanski-SAP · Hubert-Szczepanski-SAP · commit 653879b9ed2e · 2025-04-29T11:42:16.000+02:00
diff --git a/cypress/screenshots/Dialogs/DeleteConfirmationDialog.test.tsx/DeleteConfirmationDialog -- should display correct resource name in all labels (failed).png b/cypress/screenshots/Dialogs/DeleteConfirmationDialog.test.tsx/DeleteConfirmationDialog -- should display correct resource name in all labels (failed).png
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -75,6 +75,9 @@
   "IntelligentBreadcrumbs": {
     "homeLabel": "Home"
   },
+  "MCPContext": {
+    "errorMessage": "An unknown error occurred"
+  },
   "NotInLuigiView": {
     "titleMessage": "Opened outside of Hyperspace Portal",
     "subtitleMessage": "Looks like this page is not opened inside of the Hyperspace Portal. Contact admins for 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 || kustomizationErr}
+        error={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} />}
+      {error && <IllustratedError error={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} />}
+      {error && <IllustratedError error={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} />;
+    return <IllustratedError error={error.message} />;
   }
 
   return (
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -10,7 +10,6 @@ import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
 import { CopyButton } from '../../Shared/CopyButton.tsx';
-import { NoManagedControlPlaneBanner } from '../NoManagedControlPlaneBanner.tsx';
 import { ControlPlaneCard } from '../ControlPlaneCard/ControlPlaneCard.tsx';
 import {
   ListWorkspacesType,
@@ -35,6 +34,9 @@ import IllustratedError from '../../Shared/IllustratedError.tsx';
 import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
 import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
+import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
+import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
+import { IllustrationName } from '../../Shared/IllustratedName.ts';
 
 interface Props {
   projectName: string;
@@ -62,6 +64,8 @@ export function ControlPlaneListWorkspaceGridTile({
   const { trigger } = useApiResourceMutation<DeleteWorkspaceType>(
     DeleteWorkspaceResource(projectNamespace, workspaceName),
   );
+
+  const { links } = useFrontendConfig();
   const errorView = createErrorView(cpsError);
 
   function createErrorView(error: APIError) {
@@ -148,7 +152,13 @@ export function ControlPlaneListWorkspaceGridTile({
           ) : (
             <Grid defaultSpan="XL4 L4 M7 S12">
               {controlplanes?.length === 0 ? (
-                <NoManagedControlPlaneBanner />
+                <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
diff --git a/src/components/ControlPlanes/NoManagedControlPlaneBanner.tsx b/src/components/ControlPlanes/NoManagedControlPlaneBanner.tsx
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} />;
+    return <IllustratedError error={error.message} />;
   }
 
   return (
diff --git a/src/components/Projects/ProjectsList.tsx b/src/components/Projects/ProjectsList.tsx
@@ -77,7 +77,7 @@ export default function ProjectsList() {
     [],
   );
   if (error) {
-    return <IllustratedError error={error} />;
+    return <IllustratedError error={error.message} />;
   }
 
   return (
diff --git a/src/components/Shared/IllustratedError.tsx b/src/components/Shared/IllustratedError.tsx
@@ -1,13 +1,12 @@
-import { IllustratedMessage } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
-import IllustrationMessageDesign from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageDesign.js';
 import { useTranslation } from 'react-i18next';
+import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner';
+import { IllustrationName } from './IllustratedName';
 
 interface Props {
   title?: string;
   subtitleText?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error?: any;
+  error?: string;
 }
 
 export default function IllustratedError({
@@ -18,11 +17,10 @@ export default function IllustratedError({
   const { t } = useTranslation();
 
   return (
-    <IllustratedMessage
-      name="SimpleError"
-      design={IllustrationMessageDesign.Spot}
-      titleText={title ?? t('IllustratedError.titleText')}
-      subtitleText={error ?? subtitleText ?? t('IllustratedError.subtitleText')}
+    <IllustratedBanner
+      illustrationName={IllustrationName.SimpleError}
+      title={title ?? t('IllustratedError.titleText')}
+      subtitle={error ?? subtitleText ?? t('IllustratedError.subtitleText')}
     />
   );
 }
diff --git a/src/components/Shared/IllustratedName.ts b/src/components/Shared/IllustratedName.ts
@@ -0,0 +1,4 @@
+export enum IllustrationName {
+  SimpleError = 'SimpleError',
+  NoData = 'NoData',
+}
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.css b/src/components/Ui/IllustratedBanner/IllustratedBanner.css
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.test.tsx b/src/components/Ui/IllustratedBanner/IllustratedBanner.test.tsx
@@ -0,0 +1,74 @@
+import { IllustratedBanner } from './IllustratedBanner';
+import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js';
+
+describe('<IllustratedBanner />', () => {
+  it('renders title and subtitle', () => {
+    cy.mount(<IllustratedBanner title="Test title" subtitle="Test subtitle" />);
+
+    cy.contains('Test title').should('be.visible');
+    cy.contains('Test subtitle').should('be.visible');
+  });
+
+  it('renders help button with correct text and icon', () => {
+    cy.mount(
+      <IllustratedBanner
+        title="With Help"
+        subtitle="Subtitle"
+        helpButtonText="Need Help?"
+        helpLink="https://example.com"
+      />,
+    );
+
+    cy.get('ui5-button').contains('Need Help?').should('be.visible');
+    cy.get('ui5-button').should(
+      'have.attr',
+      'icon',
+      'sap-icon://question-mark',
+    );
+  });
+
+  it('does not render button when props are missing', () => {
+    cy.mount(
+      <IllustratedBanner
+        title="No Button"
+        subtitle="Nothing here"
+        helpButtonText="Help"
+      />,
+    );
+
+    cy.get('ui5-button').should('not.exist');
+
+    cy.mount(
+      <IllustratedBanner
+        title="Still No Button"
+        subtitle="Still nothing"
+        helpLink="https://example.com"
+      />,
+    );
+
+    cy.get('ui5-button').should('not.exist');
+  });
+
+  it('opens a new tab when button is clicked', () => {
+    // Stub window.open
+    cy.window().then((win) => {
+      cy.stub(win, 'open').as('windowOpen');
+    });
+
+    cy.mount(
+      <IllustratedBanner
+        title="Click Test"
+        subtitle="Check window.open"
+        helpButtonText="Go"
+        helpLink="https://example.com"
+      />,
+    );
+
+    cy.get('ui5-button').contains('Go').click();
+    cy.get('@windowOpen').should(
+      'have.been.calledWith',
+      'https://example.com',
+      '_blank',
+    );
+  });
+});
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx b/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx
@@ -0,0 +1,43 @@
+import IllustrationMessageDesign from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageDesign.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;
+};
+
+export const IllustratedBanner = ({
+  title,
+  subtitle,
+  illustrationName = IllustrationName.NoData,
+  buttonIcon = 'sap-icon://question-mark',
+  helpButtonText,
+  helpLink,
+}: InfoBannerProps) => {
+  return (
+    <FlexBox direction="Column" alignItems="Center">
+      <IllustratedMessage
+        design={IllustrationMessageDesign.Spot}
+        name={illustrationName}
+        titleText={title}
+        subtitleText={subtitle}
+      />
+      {helpButtonText && helpLink && (
+        <Button
+          design={ButtonDesign.Transparent}
+          icon={buttonIcon}
+          onClick={() => window.open(helpLink, '_blank')}
+        >
+          {helpButtonText}
+        </Button>
+      )}
+    </FlexBox>
+  );
+};
diff --git a/src/lib/shared/McpContext.tsx b/src/lib/shared/McpContext.tsx
@@ -15,6 +15,7 @@ import {
 } 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;
@@ -117,6 +118,7 @@ export function WithinManagedControlPlane({
   children?: ReactNode;
 }) {
   const mcp = useContext(McpContext);
+  const { t } = useTranslation();
 
   try {
     const authprops = GetAuthPropsForContextName(mcp.context, mcp.kubeconfig!);
@@ -128,6 +130,16 @@ export function WithinManagedControlPlane({
       </>
     );
   } catch (e) {
-    return <IllustratedError error={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} />;
   }
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -12,12 +12,22 @@ import { DarkModeSystemSwitcher } from './components/Core/DarkModeSystemSwitcher
 import '.././i18n.ts';
 import './utils/i18n/timeAgo';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import IllustratedError from './components/Shared/IllustratedError.tsx';
 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';
 
 const ErrorFallback = ({ error }: FallbackProps) => {
-  return <IllustratedError error={error} />;
+  const { t } = useTranslation();
+
+  return (
+    <IllustratedBanner
+      illustrationName={IllustrationName.SimpleError}
+      title={t('IllustratedError.titleText')}
+      subtitle={error ? error : t('IllustratedError.subtitleText')}
+    />
+  );
 };
 
 const rootElement = document.getElementById('root');
diff --git a/src/views/ControlPlanes/ControlPlaneView.tsx b/src/views/ControlPlanes/ControlPlaneView.tsx
@@ -46,7 +46,7 @@ export default function ControlPlaneView() {
   }
 
   if (error) {
-    return <IllustratedError error={error} />;
+    return <IllustratedError error={error.message} />;
   }
   if (
     !mcp?.status?.access?.key ||

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} />;`
	`30`	`+ return <IllustratedError error={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} />;`
	`17`	`+ return <IllustratedError error={error.message} />;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export default function ProjectsList() {`
`77`	`77`	`[],`
`78`	`78`	`);`
`79`	`79`	`if (error) {`
`80`		`- return <IllustratedError error={error} />;`
	`80`	`+ return <IllustratedError error={error.message} />;`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`return (`