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