diff --git a/public/locales/en.json b/public/locales/en.json index c9f3294b..aa053a98 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -5,6 +5,10 @@ "learnMore": "Learn more in our documentation", "signInButton": "Sign in" }, + "Entities": { + "ManagedControlPlane": "Managed Control Plane", + "Project": "Project" + }, "ComponentList": { "tableComponentHeader": "Name", "tableVersionHeader": "Version" @@ -87,6 +91,11 @@ "subtitleMessage": "Get started by creating your first Managed Control Plane.", "helpButton": "Help" }, + "NotFoundBanner": { + "titleMessage": "{{entityType}} not found", + "subtitleMessage": "Sorry, we couldn’t find what you are looking for.
The link may be incorrect or the {{entityType}} might have been removed.", + "navigateHome": "Back to Homepage" + }, "IntelligentBreadcrumbs": { "homeLabel": "Home" }, @@ -151,7 +160,7 @@ "EditMembers": { "addButton": "Add" }, - "ControlPlaneListView": { + "ProjectsPage": { "header": "Your instances of ManagedControlPlane", "projectHeader": "Project:" }, @@ -161,7 +170,7 @@ "deleteProject": "Delete project", "deleteConfirmationDialog": "Project deleted" }, - "ControlPlaneView": { + "McpPage": { "accessError": "Managed Control Plane does not have access information yet", "componentsTitle": "Components", "crossplaneTitle": "Crossplane", diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index b65c4ff4..b621a018 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -1,10 +1,10 @@ import { HashRouter as Router, Navigate, Route } from 'react-router-dom'; -import ControlPlaneView from './views/ControlPlanes/ControlPlaneView.tsx'; import ProjectListView from './views/ProjectList'; -import ControlPlaneListView from './views/ControlPlanes/ControlPlaneListView.tsx'; import GlobalProviderOutlet from './components/Core/ApiConfigWrapper.tsx'; import { ShellBarComponent } from './components/Core/ShellBar.tsx'; import { SentryRoutes } from './mount.ts'; +import ProjectPage from './spaces/onboarding/pages/ProjectPage.tsx'; +import McpPage from './spaces/mcp/pages/McpPage.tsx'; function AppRouter() { return ( @@ -14,13 +14,14 @@ function AppRouter() { }> } /> - } /> + } /> } + element={} /> } /> + } /> diff --git a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx index 05cb4341..8e764abf 100644 --- a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx +++ b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx @@ -1,36 +1,26 @@ import { Button, FlexBox, IllustratedMessage } from '@ui5/webcomponents-react'; -import IllustratedError from '../../Shared/IllustratedError.tsx'; import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js'; import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js'; import '@ui5/webcomponents-icons/dist/delete'; -import Loading from '../../Shared/Loading.tsx'; import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import { ControlPlaneListWorkspaceGridTile } from './ControlPlaneListWorkspaceGridTile.tsx'; -import { useApiResource } from '../../../lib/api/useApiResource.ts'; -import { ListWorkspaces } from '../../../lib/api/types/crate/listWorkspaces.ts'; +import { ListWorkspacesType } from '../../../lib/api/types/crate/listWorkspaces.ts'; import { useLink } from '../../../lib/shared/useLink.ts'; import { useTranslation } from 'react-i18next'; interface Props { projectName: string; + workspaces: ListWorkspacesType[]; } -export default function ControlPlaneListAllWorkspaces({ projectName }: Props) { +export default function ControlPlaneListAllWorkspaces({ projectName, workspaces }: Props) { const { workspaceCreationGuide } = useLink(); - const { data: allWorkspaces, error } = useApiResource(ListWorkspaces(projectName)); const { t } = useTranslation(); - if (!allWorkspaces) { - return ; - } - if (error) { - return ; - } - return ( <> - {allWorkspaces.length === 0 ? ( + {workspaces.length === 0 ? ( ) : ( - allWorkspaces.map((workspace) => ( + workspaces.map((workspace) => ( ', () => { cy.contains('Test subtitle').should('be.visible'); }); + it('renders subtitle nodes', () => { + cy.mount( + Button as subtitle} + illustrationName={IllustrationMessageType.NoData} + />, + ); + + cy.get('button').contains('Button as subtitle').should('be.visible'); + }); + it('renders help button with correct text and icon', () => { cy.mount( { +export const IllustratedBanner = ({ + title, + subtitle: subtitleProp, + illustrationName, + help, + button, +}: InfoBannerProps) => { + let subtitleText, subtitleNode; + if (typeof subtitleProp === 'string') { + subtitleText = subtitleProp; + } else { + subtitleNode = subtitleProp; + } + return ( {help && ( diff --git a/src/components/Ui/NotFoundBanner/NotFoundBanner.cy.tsx b/src/components/Ui/NotFoundBanner/NotFoundBanner.cy.tsx new file mode 100644 index 00000000..771ea4df --- /dev/null +++ b/src/components/Ui/NotFoundBanner/NotFoundBanner.cy.tsx @@ -0,0 +1,18 @@ +import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js'; +import { NotFoundBanner } from './NotFoundBanner.tsx'; +import { MemoryRouter } from 'react-router-dom'; + +describe('', () => { + it('renders title and subtitle interpolating the entityType', () => { + cy.mount( + + + , + ); + + cy.contains('%entityType% not found').should('be.visible'); + cy.contains('Sorry, we couldn’t find what you are looking for').should('be.visible'); + + cy.get('ui5-button').contains('Back to Homepage'); + }); +}); diff --git a/src/components/Ui/NotFoundBanner/NotFoundBanner.module.css b/src/components/Ui/NotFoundBanner/NotFoundBanner.module.css new file mode 100644 index 00000000..f017a659 --- /dev/null +++ b/src/components/Ui/NotFoundBanner/NotFoundBanner.module.css @@ -0,0 +1,9 @@ +.subtitleContainer { + display: flex; + flex-direction: column; +} + +.button { + margin-inline: auto; + margin-block: 2rem; +} \ No newline at end of file diff --git a/src/components/Ui/NotFoundBanner/NotFoundBanner.tsx b/src/components/Ui/NotFoundBanner/NotFoundBanner.tsx new file mode 100644 index 00000000..8e2e7741 --- /dev/null +++ b/src/components/Ui/NotFoundBanner/NotFoundBanner.tsx @@ -0,0 +1,32 @@ +import { IllustratedBanner } from '../IllustratedBanner/IllustratedBanner.tsx'; +import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js'; +import { Trans, useTranslation } from 'react-i18next'; + +import styles from './NotFoundBanner.module.css'; +import { Button } from '@ui5/webcomponents-react'; +import { useNavigate } from 'react-router-dom'; + +export interface NotFoundBannerProps { + entityType: string; +} +export function NotFoundBanner({ entityType }: NotFoundBannerProps) { + const { t } = useTranslation(); + const navigate = useNavigate(); + + return ( + + + + + + + } + /> + ); +} diff --git a/src/lib/api/error.spec.ts b/src/lib/api/error.spec.ts new file mode 100644 index 00000000..53338c82 --- /dev/null +++ b/src/lib/api/error.spec.ts @@ -0,0 +1,34 @@ +import { describe, it, expect } from 'vitest'; +import { isNotFoundError, APIError } from './error'; + +describe('error', () => { + describe('isNotFoundError', () => { + it('should return true if error.status is 404', () => { + expect(isNotFoundError(new APIError('', 404))).toBe(true); + expect(isNotFoundError(new APIError('not found', 404))).toBe(true); + }); + + it('should return true if error.status is 403', () => { + expect(isNotFoundError(new APIError('', 403))).toBe(true); + expect(isNotFoundError(new APIError('not found', 403))).toBe(true); + }); + + it('should return false if error is undefined', () => { + expect(isNotFoundError(undefined)).toBe(false); + }); + + it('should return false if error is null', () => { + expect(isNotFoundError(null)).toBe(false); + }); + + it('should return false if error has no status field', () => { + expect(isNotFoundError({} as APIError)).toBe(false); + }); + + it('should return false if error.status is not 404 or 403', () => { + expect(isNotFoundError(new APIError('', 500))).toBe(false); + expect(isNotFoundError(new APIError('', 400))).toBe(false); + expect(isNotFoundError(new APIError('', 401))).toBe(false); + }); + }); +}); diff --git a/src/lib/api/error.ts b/src/lib/api/error.ts index 97788900..3b35a067 100644 --- a/src/lib/api/error.ts +++ b/src/lib/api/error.ts @@ -21,3 +21,7 @@ export class ValidationError extends Error { Object.setPrototypeOf(this, ValidationError.prototype); } } + +export function isNotFoundError(error?: APIError | null): boolean { + return !!error && (error.status === 404 || error.status === 403); +} diff --git a/src/lib/api/types/crate/controlPlanes.ts b/src/lib/api/types/crate/controlPlanes.ts index 453fef8d..0df87bcf 100644 --- a/src/lib/api/types/crate/controlPlanes.ts +++ b/src/lib/api/types/crate/controlPlanes.ts @@ -73,9 +73,9 @@ export const ListControlPlanes = ( }; export const ControlPlane = ( - projectName: string, - workspaceName: string, - controlPlaneName: string, + projectName?: string, + workspaceName?: string, + controlPlaneName?: string, ): Resource => { return { path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}--ws-${workspaceName}/managedcontrolplanes/${controlPlaneName}`, diff --git a/src/lib/api/types/crate/listWorkspaces.ts b/src/lib/api/types/crate/listWorkspaces.ts index 8870fba6..ffbbe59c 100644 --- a/src/lib/api/types/crate/listWorkspaces.ts +++ b/src/lib/api/types/crate/listWorkspaces.ts @@ -19,7 +19,7 @@ export function isWorkspaceReady(workspace: ListWorkspacesType): boolean { return workspace.status != null && workspace.status.namespace != null; } -export const ListWorkspaces = (projectName: string): Resource => { +export const ListWorkspaces = (projectName?: string): Resource => { return { path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}/workspaces`, jq: '[.items[] | {metadata: .metadata | {name, namespace, annotations, deletionTimestamp}, status: .status, spec: .spec | {members: [.members[] | {name, roles}]}}]', diff --git a/src/views/ControlPlanes/ControlPlaneView.tsx b/src/spaces/mcp/pages/McpPage.tsx similarity index 60% rename from src/views/ControlPlanes/ControlPlaneView.tsx rename to src/spaces/mcp/pages/McpPage.tsx index 1a5910e2..ca2e4b5d 100644 --- a/src/views/ControlPlanes/ControlPlaneView.tsx +++ b/src/spaces/mcp/pages/McpPage.tsx @@ -1,45 +1,50 @@ -import { ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react'; +import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react'; import { useParams } from 'react-router-dom'; -import CopyKubeconfigButton from '../../components/ControlPlanes/CopyKubeconfigButton.tsx'; +import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx'; import '@ui5/webcomponents-fiori/dist/illustrations/SimpleBalloon'; import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError'; // thorws error sometimes if not imported import '@ui5/webcomponents-fiori/dist/illustrations/BeforeSearch'; -import IllustratedError from '../../components/Shared/IllustratedError.tsx'; -import IntelligentBreadcrumbs from '../../components/Core/IntelligentBreadcrumbs.tsx'; +import IllustratedError from '../../../components/Shared/IllustratedError.tsx'; +import IntelligentBreadcrumbs from '../../../components/Core/IntelligentBreadcrumbs.tsx'; -import FluxList from '../../components/ControlPlane/FluxList.tsx'; -import { ControlPlane as ControlPlaneResource } from '../../lib/api/types/crate/controlPlanes.ts'; +import FluxList from '../../../components/ControlPlane/FluxList.tsx'; +import { ControlPlane as ControlPlaneResource } from '../../../lib/api/types/crate/controlPlanes.ts'; import { useTranslation } from 'react-i18next'; -import { McpContextProvider, WithinManagedControlPlane } from '../../lib/shared/McpContext.tsx'; -import { ManagedResources } from '../../components/ControlPlane/ManagedResources.tsx'; -import { ProvidersConfig } from '../../components/ControlPlane/ProvidersConfig.tsx'; -import { Providers } from '../../components/ControlPlane/Providers.tsx'; -import ComponentList from '../../components/ControlPlane/ComponentList.tsx'; -import MCPHealthPopoverButton from '../../components/ControlPlane/MCPHealthPopoverButton.tsx'; -import { useApiResource } from '../../lib/api/useApiResource'; +import { McpContextProvider, WithinManagedControlPlane } from '../../../lib/shared/McpContext.tsx'; +import { ManagedResources } from '../../../components/ControlPlane/ManagedResources.tsx'; +import { ProvidersConfig } from '../../../components/ControlPlane/ProvidersConfig.tsx'; +import { Providers } from '../../../components/ControlPlane/Providers.tsx'; +import ComponentList from '../../../components/ControlPlane/ComponentList.tsx'; +import MCPHealthPopoverButton from '../../../components/ControlPlane/MCPHealthPopoverButton.tsx'; +import { useApiResource } from '../../../lib/api/useApiResource.ts'; -import { YamlViewButtonWithLoader } from '../../components/Yaml/YamlViewButtonWithLoader.tsx'; -import { Landscapers } from '../../components/ControlPlane/Landscapers.tsx'; -import { AuthProviderMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx'; +import { YamlViewButtonWithLoader } from '../../../components/Yaml/YamlViewButtonWithLoader.tsx'; +import { Landscapers } from '../../../components/ControlPlane/Landscapers.tsx'; +import { AuthProviderMcp } from '../auth/AuthContextMcp.tsx'; +import { isNotFoundError } from '../../../lib/api/error.ts'; +import { NotFoundBanner } from '../../../components/Ui/NotFoundBanner/NotFoundBanner.tsx'; -export default function ControlPlaneView() { +export default function McpPage() { const { projectName, workspaceName, controlPlaneName, contextName } = useParams(); const { t } = useTranslation(); - const { data: mcp, error } = useApiResource( - ControlPlaneResource(projectName ?? '', workspaceName ?? '', controlPlaneName ?? ''), - ); + const { + data: mcp, + error, + isLoading, + } = useApiResource(ControlPlaneResource(projectName, workspaceName, controlPlaneName)); - if (!projectName || !workspaceName || !controlPlaneName) { - return <>; + if (isLoading) { + return ; } - if (error) { - return ; + if (!projectName || !workspaceName || !controlPlaneName || !contextName || isNotFoundError(error)) { + return ; } - if (!mcp?.status?.access?.key || !mcp?.status?.access?.name || !mcp?.status?.access?.namespace) { - return ; + + if (error || !mcp) { + return ; } return ( @@ -48,7 +53,7 @@ export default function ControlPlaneView() { project: projectName, workspace: workspaceName, name: controlPlaneName, - context: contextName!, + context: contextName, }} > @@ -89,13 +94,13 @@ export default function ControlPlaneView() { {t('ControlPlaneView.componentsTitle')}} + header={{t('McpPage.componentsTitle')}} noAnimation > @@ -104,13 +109,13 @@ export default function ControlPlaneView() { {t('ControlPlaneView.crossplaneTitle')}} + header={{t('McpPage.crossplaneTitle')}} noAnimation >
@@ -127,13 +132,13 @@ export default function ControlPlaneView() { {t('ControlPlaneView.landscapersTitle')}} + header={{t('McpPage.landscapersTitle')}} noAnimation > @@ -142,13 +147,13 @@ export default function ControlPlaneView() { {t('ControlPlaneView.gitOpsTitle')}} + header={{t('McpPage.gitOpsTitle')}} noAnimation > diff --git a/src/spaces/onboarding/pages/ProjectPage.tsx b/src/spaces/onboarding/pages/ProjectPage.tsx new file mode 100644 index 00000000..aa5288a8 --- /dev/null +++ b/src/spaces/onboarding/pages/ProjectPage.tsx @@ -0,0 +1,65 @@ +import { ObjectPage, ObjectPageTitle, Title } from '@ui5/webcomponents-react'; +import ProjectChooser from '../../../components/Projects/ProjectChooser.tsx'; +import { useParams } from 'react-router-dom'; +import ControlPlaneListAllWorkspaces from '../../../components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx'; +import IntelligentBreadcrumbs from '../../../components/Core/IntelligentBreadcrumbs.tsx'; +import { ControlPlaneListToolbar } from '../../../components/ControlPlanes/List/ControlPlaneListToolbar.tsx'; +import { Trans, useTranslation } from 'react-i18next'; +import { useApiResource } from '../../../lib/api/useApiResource.ts'; +import { ListWorkspaces } from '../../../lib/api/types/crate/listWorkspaces.ts'; +import Loading from '../../../components/Shared/Loading.tsx'; +import { isNotFoundError } from '../../../lib/api/error.ts'; +import { NotFoundBanner } from '../../../components/Ui/NotFoundBanner/NotFoundBanner.tsx'; +import IllustratedError from '../../../components/Shared/IllustratedError.tsx'; + +export default function ProjectPage() { + const { projectName } = useParams(); + const { data: workspaces, error, isLoading } = useApiResource(ListWorkspaces(projectName)); + const { t } = useTranslation(); + + if (isLoading) { + return ; + } + + if (isNotFoundError(error)) { + return ; + } + + if (error || !workspaces || !projectName) { + return ; + } + + return ( + <> + + }} /> + + } + subHeader={ +
+

{t('ProjectsPage.projectHeader')}

+ +
+ } + breadcrumbs={} + actionsBar={} + /> + } + //TODO: project chooser should be part of the breadcrumb section if possible? + > + + + + ); +} diff --git a/src/views/ControlPlanes/ControlPlaneListView.tsx b/src/views/ControlPlanes/ControlPlaneListView.tsx deleted file mode 100644 index 67d92fd3..00000000 --- a/src/views/ControlPlanes/ControlPlaneListView.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ObjectPage, ObjectPageTitle, Title } from '@ui5/webcomponents-react'; -import ProjectChooser from '../../components/Projects/ProjectChooser.tsx'; -import { useParams } from 'react-router-dom'; -import ControlPlaneListAllWorkspaces from '../../components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx'; -import IntelligentBreadcrumbs from '../../components/Core/IntelligentBreadcrumbs.tsx'; -import { ControlPlaneListToolbar } from '../../components/ControlPlanes/List/ControlPlaneListToolbar.tsx'; -import { Trans, useTranslation } from 'react-i18next'; - -export default function ControlPlaneListView() { - const { projectName } = useParams(); - const { t } = useTranslation(); - - return ( - <> - - }} /> - - } - subHeader={ -
-

{t('ControlPlaneListView.projectHeader')}

- -
- } - breadcrumbs={} - actionsBar={} - /> - } - //TODO: project chooser should be part of the breadcrumb section if possible? - > - - - - ); -}