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 import { RootState } from "~/store/store";
  12 import { compose } from "redux";
  13 import { connect } from "react-redux";
  14
  15 type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     link: {
  19         textDecoration: 'none',
  20         color: 'inherit',
  21         width: '100%',
  22         display: 'flex'
  23     },
  24     icon: {
  25         width: '16px',
  26         height: '16px'
  27     },
  28     title: {
  29         paddingBottom: theme.spacing.unit * 0.5,
  30         paddingLeft: theme.spacing.unit * 2,
  31         paddingTop: theme.spacing.unit * 0.5,
  32         outline: 'none',
  33     },
  34     linkTitle: {
  35         marginLeft: theme.spacing.unit
  36     },
  37 });
  38
  39 const links = [
  40     {
  41         title: "Tutorials and User guide",
  42         link: "http://doc.arvados.org/user/",
  43     },
  44     {
  45         title: "API Reference",
  46         link: "http://doc.arvados.org/api/",
  47     },
  48     {
  49         title: "SDK Reference",
  50         link: "http://doc.arvados.org/sdk/"
  51     },
  52 ];
  53
  54 interface HelpMenuProps {
  55     currentRoute: string;
  56 }
  57
  58 const mapStateToProps = ({ router }: RootState) => ({
  59     currentRoute: router.location ? router.location.pathname : '',
  60 });
  61
  62 export const HelpMenu = compose(
  63     connect(mapStateToProps),
  64     withStyles(styles))(
  65         ({ classes, currentRoute }: HelpMenuProps & WithStyles<CssRules>) =>
  66             <DropdownMenu
  67                 icon={<HelpIcon />}
  68                 id="help-menu"
  69                 title="Help"
  70                 key={currentRoute}>
  71                 <MenuItem disabled>Help</MenuItem>
  72                 {
  73                     links.map(link =>
  74                         <MenuItem key={link.title}>
  75                             <a href={link.link} target="_blank" className={classes.link}>
  76                                 <ImportContactsIcon className={classes.icon} />
  77                                 <Typography className={classes.linkTitle}>{link.title}</Typography>
  78                             </a>
  79                         </MenuItem>
  80                     )
  81                 }
  82             </DropdownMenu>
  83     );