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