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