Merge branch 'main' into renovate/all-minor-patch

andreaskienle · web-flow · commit 604c85d453b1 · 2025-05-02T15:21:21.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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,6 +72,6 @@
     "sass-embedded": "^1.86.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.6"
+    "vite": "^6.3.4"
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -67,14 +67,17 @@
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
-  "NoManagedControlPlaneBanner": {
+  "IllustratedBanner": {
     "titleMessage": "No ManagedControlPlane",
     "subtitleMessage": "Create a ManagedControlPlane to get started",
     "helpButton": "Help"
   },
   "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}
+        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} />}
+      {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} />}
+      {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} />;
+    return <IllustratedError details={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 IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 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) {
@@ -72,7 +76,7 @@ export function ControlPlaneListWorkspaceGridTile({
             title={t(
               'ControlPlaneListWorkspaceGridTile.permissionErrorMessage',
             )}
-            subtitleText={t(
+            details={t(
               'ControlPlaneListWorkspaceGridTile.permissionErrorMessageSubtitle',
             )}
           />
@@ -145,20 +149,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 ? (
-                <NoManagedControlPlaneBanner />
-              ) : (
-                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/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 details={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 details={error.message} />;
   }
 
   return (
diff --git a/src/components/Shared/IllustratedError.tsx b/src/components/Shared/IllustratedError.tsx
@@ -1,28 +1,21 @@
-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 IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
 
 interface Props {
   title?: string;
-  subtitleText?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error?: any;
+  details?: string;
 }
 
-export default function IllustratedError({
-  title,
-  subtitleText,
-  error,
-}: Props) {
+export default function IllustratedError({ title, details }: Props) {
   const { t } = useTranslation();
 
   return (
-    <IllustratedMessage
-      name="SimpleError"
-      design={IllustrationMessageDesign.Spot}
-      titleText={title ?? t('IllustratedError.titleText')}
-      subtitleText={error ?? subtitleText ?? t('IllustratedError.subtitleText')}
+    <IllustratedBanner
+      illustrationName={IllustrationMessageType.SimpleError}
+      title={title ?? t('IllustratedError.titleText')}
+      subtitle={details ?? t('IllustratedError.subtitleText')}
     />
   );
 }
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.test.tsx b/src/components/Ui/IllustratedBanner/IllustratedBanner.test.tsx
@@ -0,0 +1,60 @@
+import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
+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"
+        illustrationName={IllustrationMessageType.NoData}
+      />,
+    );
+
+    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"
+        illustrationName={IllustrationMessageType.NoData}
+        help={{
+          link: 'https://example.com',
+          buttonText: 'Need Help?',
+        }}
+      />,
+    );
+
+    cy.get('ui5-button').contains('Need Help?').should('be.visible');
+    cy.get('ui5-button').should(
+      'have.attr',
+      'icon',
+      'sap-icon://question-mark',
+    );
+  });
+
+  it('renders a link with correct attributes', () => {
+    cy.mount(
+      <IllustratedBanner
+        title="Click Test"
+        subtitle="Check link attributes"
+        illustrationName={IllustrationMessageType.NoData}
+        help={{
+          link: 'https://example.com',
+          buttonText: 'Go',
+        }}
+      />,
+    );
+
+    cy.get('a')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.attr', 'target', '_blank')
+      .and('have.attr', 'rel', 'noreferrer');
+
+    cy.get('a').contains('Go');
+  });
+});
diff --git a/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx b/src/components/Ui/IllustratedBanner/IllustratedBanner.tsx
@@ -0,0 +1,46 @@
+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';
+
+type InfoBannerProps = {
+  title: string;
+  subtitle: string;
+  illustrationName: IllustrationMessageType; // e.g. 'NoData', 'SimpleError', etc.
+  help?: {
+    link: string;
+    buttonText: string;
+    buttonIcon?: string;
+  };
+};
+
+export const IllustratedBanner = ({
+  title,
+  subtitle,
+  illustrationName,
+  help,
+}: InfoBannerProps) => {
+  return (
+    <FlexBox direction="Column" alignItems="Center">
+      <IllustratedMessage
+        design={IllustrationMessageDesign.Spot}
+        name={illustrationName}
+        titleText={title}
+        subtitleText={subtitle}
+      />
+      {help && (
+        <a href={help.link} target="_blank" rel="noreferrer">
+          <Button
+            design={ButtonDesign.Transparent}
+            icon={
+              help.buttonIcon ? help.buttonIcon : 'sap-icon://question-mark'
+            }
+          >
+            {help.buttonText}
+          </Button>
+        </a>
+      )}
+    </FlexBox>
+  );
+};
diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx
@@ -21,7 +21,7 @@ export const YamlLoader: FC<YamlViewButtonProps> = ({
   const { t } = useTranslation();
   if (isLoading) return <Loading />;
   if (error) {
-    return <IllustratedError error={t('common.cannotLoadData')} />;
+    return <IllustratedError details={t('common.cannotLoadData')} />;
   }
 
   return (
diff --git a/src/context/AuthProviderOnboarding.tsx b/src/context/AuthProviderOnboarding.tsx
@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
-import { AuthProvider } from 'react-oidc-context';
+import { AuthProvider, AuthProviderProps } from 'react-oidc-context';
 import { OIDCConfig, useFrontendConfig } from './FrontendConfigContext.tsx';
-import { WebStorageStateStore } from "oidc-client-ts";
-import { AuthProviderProps } from "react-oidc-context";
-
+import { WebStorageStateStore } from 'oidc-client-ts';
 
 interface AuthProviderOnboardingProps {
   children?: ReactNode;
@@ -33,4 +31,4 @@ function buildAuthProviderConfig(oidcConfig: OIDCConfig) {
     },
   };
   return props;
-}
+}
diff --git a/src/context/FrontendConfigContext.tsx b/src/context/FrontendConfigContext.tsx
diff --git a/src/lib/shared/McpContext.tsx b/src/lib/shared/McpContext.tsx
diff --git a/src/main.tsx b/src/main.tsx
diff --git a/src/views/ControlPlanes/ControlPlaneView.tsx b/src/views/ControlPlanes/ControlPlaneView.tsx

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,6 @@`
`72`	`72`	`"sass-embedded": "^1.86.0",`
`73`	`73`	`"typescript": "^5.7.3",`
`74`	`74`	`"typescript-eslint": "^8.26.1",`
`75`		`- "vite": "^6.2.6"`
	`75`	`+ "vite": "^6.3.4"`
`76`	`76`	`}`
`77`	`77`	`}`
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 details={error.message} />;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`return (`