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