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: "Public Pipelines and Data sets",
  42         link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
  43     },
  44     {
  45         title: "Tutorials and User guide",
  46         link: "http://doc.arvados.org/user/",
  47     },
  48     {
  49         title: "API Reference",
  50         link: "http://doc.arvados.org/api/",
  51     },
  52     {
  53         title: "SDK Reference",
  54         link: "http://doc.arvados.org/sdk/"
  55     },
  56 ];
  57
  58 interface HelpMenuProps {
  59     currentRoute: string;
  60 }
  61
  62 const mapStateToProps = ({ router }: RootState) => ({
  63     currentRoute: router.location ? router.location.pathname : '',
  64 });
  65
  66 export const HelpMenu = compose(
  67     connect(mapStateToProps),
  68     withStyles(styles))(
  69         ({ classes, currentRoute }: HelpMenuProps & WithStyles<CssRules>) =>
  70             <DropdownMenu
  71                 icon={<HelpIcon />}
  72                 id="help-menu"
  73                 title="Help"
  74                 key={currentRoute}>
  75                 <MenuItem disabled>Help</MenuItem>
  76                 {
  77                     links.map(link =>
  78                         <MenuItem key={link.title}>
  79                             <a href={link.link} target="_blank" className={classes.link}>
  80                                 <ImportContactsIcon className={classes.icon} />
  81                                 <Typography  className={classes.linkTitle}>{link.title}</Typography>
  82                             </a>
  83                         </MenuItem>
  84                     )
  85                 }
  86             </DropdownMenu>
  87     );