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 export const HelpMenu = withStyles(styles)(
  41     ({ classes }: WithStyles<CssRules>) =>
  42         <DropdownMenu
  43             icon={<HelpIcon />}
  44             id="help-menu"
  45             title="Help">
  46             <Typography variant="body1" className={classes.title}>Help</Typography>
  47             {menuItem("Public Pipelines and Data sets", helpMenuLinks.PIPELINES_DATASETS, classes)}
  48             {menuItem("Tutorials and User guide", helpMenuLinks.TUTORIALS, classes)}
  49             {menuItem("API Reference", helpMenuLinks.API_REFERENCE, classes)}
  50             {menuItem("SDK Reference", helpMenuLinks.SDK_REFERENCE, classes)}
  51         </DropdownMenu>
  52 );
  53
  54     // Todo: change help icon
  55 const menuItem = (title: string, link: string, classes: Record<CssRules, string>) =>
  56     <a href={link} target="_blank" className={classes.link}>
  57         <MenuItem>
  58             <HelpIcon className={classes.icon} />
  59             <Typography variant="body1" className={classes.linkTitle}>{title}</Typography>
  60         </MenuItem>
  61     </a>;