-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[3951] Provide an error page to redirect users in case of error
Bug: #3951 Signed-off-by: Stéphane Bégaudeau <[email protected]>
- Loading branch information
1 parent
e5fbf3c
commit 0a4f6ba
Showing
9 changed files
with
179 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
117 changes: 117 additions & 0 deletions
117
packages/sirius-web/frontend/sirius-web-application/src/views/error/ErrorView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2024 Obeo. | ||
| * This program and the accompanying materials | ||
| * are made available under the terms of the Eclipse Public License v2.0 | ||
| * which accompanies this distribution, and is available at | ||
| * https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| * | ||
| * Contributors: | ||
| * Obeo - initial API and implementation | ||
| *******************************************************************************/ | ||
|
|
||
| import { useComponent, useData } from '@eclipse-sirius/sirius-components-core'; | ||
| import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; | ||
| import Container from '@mui/material/Container'; | ||
| import Link from '@mui/material/Link'; | ||
| import Paper from '@mui/material/Paper'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import { Link as RouterLink, useParams } from 'react-router-dom'; | ||
| import { makeStyles } from 'tss-react/mui'; | ||
| import { footerExtensionPoint } from '../../footer/FooterExtensionPoints'; | ||
| import { NavigationBar } from '../../navigationBar/NavigationBar'; | ||
| import { ErrorMessageProvider, ErrorViewParams } from './ErrorView.types'; | ||
| import { errorMessageProvidersExtensionPoint } from './ErrorViewExtensionPoints'; | ||
|
|
||
| const useErrorViewStyles = makeStyles()((theme) => ({ | ||
| errorView: { | ||
| display: 'grid', | ||
| gridTemplateColumns: '1fr', | ||
| gridTemplateRows: 'min-content 1fr min-content', | ||
| minHeight: '100vh', | ||
| }, | ||
| main: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| gap: theme.spacing(2), | ||
| height: '100%', | ||
| }, | ||
| error: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| gap: theme.spacing(4), | ||
| paddingTop: theme.spacing(3), | ||
| paddingLeft: theme.spacing(2), | ||
| paddingRight: theme.spacing(2), | ||
| paddingBottom: theme.spacing(3), | ||
| minWidth: '500px', | ||
| }, | ||
| title: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| gap: theme.spacing(1), | ||
| }, | ||
| })); | ||
|
|
||
| const messageProvider = (code: string, errorMessageProviders: ErrorMessageProvider[]): string => { | ||
| let message: string | null = null; | ||
|
|
||
| let index: number = 0; | ||
| while (message === null && index < errorMessageProviders.length) { | ||
| const errorMessageProvider = errorMessageProviders[index]; | ||
| message = errorMessageProvider(code); | ||
|
|
||
| index = index + 1; | ||
| } | ||
|
|
||
| // Fallback for the default messages | ||
| if (message === null) { | ||
| message = 'An unexpected error has occurred, please contact the server administrator for additional information'; | ||
|
|
||
| if (code === '404') { | ||
| message = 'The content that you are looking for has not been found'; | ||
| } | ||
| } | ||
|
|
||
| return message; | ||
| }; | ||
|
|
||
| export const ErrorView = () => { | ||
| const { code } = useParams<ErrorViewParams>(); | ||
| const { classes } = useErrorViewStyles(); | ||
|
|
||
| const { data: errorMessageProviders } = useData(errorMessageProvidersExtensionPoint); | ||
| const message: string = messageProvider(code, errorMessageProviders); | ||
|
|
||
| const { Component: Footer } = useComponent(footerExtensionPoint); | ||
|
|
||
| return ( | ||
| <div className={classes.errorView}> | ||
| <NavigationBar /> | ||
| <Container maxWidth="sm"> | ||
| <div className={classes.main}> | ||
| <Paper className={classes.error}> | ||
| <div className={classes.title}> | ||
| <ErrorOutlineIcon sx={{ fontSize: 40 }} /> | ||
| <Typography variant="h2" align="center"> | ||
| Error {code} | ||
| </Typography> | ||
| </div> | ||
| <Typography variant="body1" sx={{ fontSize: '1rem', textAlign: 'justify' }}> | ||
| {message} | ||
| </Typography> | ||
| </Paper> | ||
| <Link variant="body1" component={RouterLink} to="/projects"> | ||
| Back to the homepage | ||
| </Link> | ||
| </div> | ||
| </Container> | ||
| <Footer /> | ||
| </div> | ||
| ); | ||
| }; |
18 changes: 18 additions & 0 deletions
18
packages/sirius-web/frontend/sirius-web-application/src/views/error/ErrorView.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2024 Obeo. | ||
| * This program and the accompanying materials | ||
| * are made available under the terms of the Eclipse Public License v2.0 | ||
| * which accompanies this distribution, and is available at | ||
| * https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| * | ||
| * Contributors: | ||
| * Obeo - initial API and implementation | ||
| *******************************************************************************/ | ||
|
|
||
| export interface ErrorViewParams { | ||
| code: string; | ||
| } | ||
|
|
||
| export type ErrorMessageProvider = (code: string) => string | null; |
20 changes: 20 additions & 0 deletions
20
...s/sirius-web/frontend/sirius-web-application/src/views/error/ErrorViewExtensionPoints.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2024 Obeo. | ||
| * This program and the accompanying materials | ||
| * are made available under the terms of the Eclipse Public License v2.0 | ||
| * which accompanies this distribution, and is available at | ||
| * https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| * | ||
| * Contributors: | ||
| * Obeo - initial API and implementation | ||
| *******************************************************************************/ | ||
|
|
||
| import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core'; | ||
| import { ErrorMessageProvider } from './ErrorView.types'; | ||
|
|
||
| export const errorMessageProvidersExtensionPoint: DataExtensionPoint<Array<ErrorMessageProvider>> = { | ||
| identifier: 'error#messageProviders', | ||
| fallback: [], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters