Merge branch '14434-display-workflow-name'
[arvados-workbench2.git] / 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 variant="body1" className={classes.linkTitle}>{link.title}</Typography>
82                             </a>
83                         </MenuItem>
84                     )
85                 }
86             </DropdownMenu>
87     );