Merge branch 'main' from arvados-workbench2.git
[arvados.git] / 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 "@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" rel="noopener noreferrer" 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     );