src/views-components/main-app-bar/help-menu.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 { MenuItem, Typography } from "@material-ui/core";
   7 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
   8 import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
   9 import { ArvadosTheme } from '~/common/custom-theme';
  10 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
  11
  12 type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     link: {
  16         textDecoration: 'none',
  17         color: 'inherit',
  18         width: '100%',
  19         display: 'flex'
  20     },
  21     icon: {
  22         width: '16px',
  23         height: '16px'
  24     },
  25     title: {
  26         paddingBottom: theme.spacing.unit * 0.5,
  27         paddingLeft: theme.spacing.unit * 2,
  28         paddingTop: theme.spacing.unit * 0.5,
  29         outline: 'none',
  30     },
  31     linkTitle: {
  32         marginLeft: theme.spacing.unit
  33     },
  34 });
  35
  36 const links = [
  37     {
  38         title: "Public Pipelines and Data sets",
  39         link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
  40     },
  41     {
  42         title: "Tutorials and User guide",
  43         link: "http://doc.arvados.org/user/",
  44     },
  45     {
  46         title: "API Reference",
  47         link: "http://doc.arvados.org/api/",
  48     },
  49     {
  50         title: "SDK Reference",
  51         link: "http://doc.arvados.org/sdk/"
  52     },
  53 ];
  54
  55 export const HelpMenu = withStyles(styles)(
  56     ({ classes }: WithStyles<CssRules>) =>
  57         <DropdownMenu
  58             icon={<HelpIcon />}
  59             id="help-menu"
  60             title="Help">
  61             <li className={classes.title}>
  62                 <Typography variant="body1">Help</Typography>
  63             </li>
  64             {
  65                 links.map(link =>
  66                     <MenuItem key={link.title}>
  67                         <a href={link.link} target="_blank" className={classes.link}>
  68                                 <ImportContactsIcon className={classes.icon} />
  69                                 <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
  70                         </a>
  71                     </MenuItem>
  72                 )
  73             }
  74         </DropdownMenu>
  75 );