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 { ImportContacts } 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     },
  19     icon: {
  20         width: '16px',
  21         height: '16px'
  22     },
  23     title: {
  24         marginLeft: theme.spacing.unit * 2,
  25         paddingBottom: theme.spacing.unit * 0.5,
  26         outline: 'none',
  27     },
  28     linkTitle: {
  29         marginLeft: theme.spacing.unit
  30     }
  31 });
  32
  33 const links = [
  34     {
  35         title: "Public Pipelines and Data sets",
  36         link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
  37     },
  38     {
  39         title: "Tutorials and User guide",
  40         link: "http://doc.arvados.org/user/",
  41     },
  42     {
  43         title: "API Reference",
  44         link: "http://doc.arvados.org/api/",
  45     },
  46     {
  47         title: "SDK Reference",
  48         link: "http://doc.arvados.org/sdk/"
  49     },
  50 ];
  51
  52 export const HelpMenu = withStyles(styles)(
  53     ({ classes }: WithStyles<CssRules>) =>
  54         <DropdownMenu
  55             icon={<HelpIcon />}
  56             id="help-menu"
  57             title="Help">
  58             <Typography variant="body1" className={classes.title}>Help</Typography>
  59             {
  60                 links.map(link =>
  61                     <a key={link.title} href={link.link} target="_blank" className={classes.link}>
  62                         <MenuItem>
  63                             <ImportContacts className={classes.icon} />
  64                             <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
  65                         </MenuItem>
  66                     </a>)
  67             }
  68         </DropdownMenu>
  69 );