services/workbench2/src/views/not-found-panel/not-found-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Location } from 'history';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { Paper, Grid } from '@mui/material';
   9 import { WithStyles } from '@mui/styles';
  10 import withStyles from '@mui/styles/withStyles';
  11 import { ArvadosTheme } from 'common/custom-theme';
  12 import { ClusterConfigJSON } from 'common/config';
  13
  14 export type CssRules = 'root' | 'title' | 'active';
  15
  16 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     root: {
  18         overflow: 'hidden',
  19         width: '100vw',
  20         height: '100vh'
  21     },
  22     title: {
  23         paddingLeft: theme.spacing(3),
  24         paddingTop: theme.spacing(3),
  25         paddingBottom: theme.spacing(3),
  26         fontSize: '18px'
  27     },
  28     active: {
  29         color: theme.customs.colors.grey700,
  30         textDecoration: 'none',
  31     }
  32 });
  33
  34 export interface NotFoundPanelOwnProps {
  35     notWrapped?: boolean;
  36 }
  37
  38 export interface NotFoundPanelRootDataProps {
  39     location: Location<any> | null;
  40     clusterConfig: ClusterConfigJSON;
  41 }
  42
  43 type NotFoundPanelRootProps = NotFoundPanelRootDataProps & NotFoundPanelOwnProps & WithStyles<CssRules>;
  44
  45 const getAdditionalMessage = (location: Location | null) => {
  46     if (!location) {
  47         return null;
  48     }
  49
  50     const { pathname } = location;
  51
  52     if (pathname.indexOf('collections') > -1) {
  53         const uuidHash = pathname.replace('/collections/', '');
  54
  55         return (
  56             <p>
  57                 Please make sure that provided UUID/ObjectHash '{uuidHash}' is valid.
  58             </p>
  59         );
  60     }
  61
  62     return null;
  63 };
  64
  65 const getEmailLink = (email: string, classes: Record<CssRules, string>) => {
  66     const { location: { href: windowHref } } = window;
  67     const href = `mailto:${email}?body=${encodeURIComponent('Problem while viewing page ')}${encodeURIComponent(windowHref)}&subject=${encodeURIComponent('Workbench problem report')}`;
  68
  69     return (<a
  70         className={classes.active}
  71         href={href}>
  72         email us
  73     </a>);
  74 };
  75
  76
  77 export const NotFoundPanelRoot = withStyles(styles)(
  78     ({ classes, clusterConfig, location, notWrapped }: NotFoundPanelRootProps) => {
  79
  80         const content = <Grid container justifyContent="space-between" wrap="nowrap" alignItems="center">
  81             <div data-cy="not-found-content" className={classes.title}>
  82                 <h2>Not Found</h2>
  83                 {getAdditionalMessage(location)}
  84                 <p>
  85                     The page you requested was not found,&nbsp;
  86                     {
  87                         !!clusterConfig.Mail && clusterConfig.Mail.SupportEmailAddress ?
  88                             getEmailLink(clusterConfig.Mail.SupportEmailAddress, classes) :
  89                             'email us'
  90                     }
  91                     &nbsp;if you suspect this is a bug.
  92                 </p>
  93             </div>
  94         </Grid>;
  95
  96         return !notWrapped ? <Paper data-cy="not-found-page"> {content}</Paper> : content;
  97     }
  98 );