import * as React from "react";
import { MenuItem, Typography } from "@material-ui/core";
import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
-import { HelpIcon } from "~/components/icon/icon";
+import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
import { ArvadosTheme } from '~/common/custom-theme';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { RootState } from "~/store/store";
+import { compose } from "redux";
+import { connect } from "react-redux";
type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
link: {
textDecoration: 'none',
- color: 'inherit'
+ color: 'inherit',
+ width: '100%',
+ display: 'flex'
},
icon: {
width: '16px',
height: '16px'
},
title: {
- marginLeft: theme.spacing.unit * 2,
- marginBottom: theme.spacing.unit * 0.5,
+ paddingBottom: theme.spacing.unit * 0.5,
+ paddingLeft: theme.spacing.unit * 2,
+ paddingTop: theme.spacing.unit * 0.5,
outline: 'none',
},
linkTitle: {
marginLeft: theme.spacing.unit
- }
+ },
});
-enum helpMenuLinks {
- PIPELINES_DATASETS = "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
- TUTORIALS = "http://doc.arvados.org/user/",
- API_REFERENCE = "http://doc.arvados.org/api/",
- SDK_REFERENCE = "http://doc.arvados.org/sdk/"
+const links = [
+ {
+ title: "Public Pipelines and Data sets",
+ link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
+ },
+ {
+ title: "Tutorials and User guide",
+ link: "http://doc.arvados.org/user/",
+ },
+ {
+ title: "API Reference",
+ link: "http://doc.arvados.org/api/",
+ },
+ {
+ title: "SDK Reference",
+ link: "http://doc.arvados.org/sdk/"
+ },
+];
+
+interface HelpMenuProps {
+ currentRoute: string;
}
-export const HelpMenu = withStyles(styles)(
- ({ classes }: WithStyles<CssRules>) =>
- <DropdownMenu
- icon={<HelpIcon />}
- id="help-menu"
- title="Help">
- <Typography variant="body1" className={classes.title}>Help</Typography>
- {menuItem("Public Pipelines and Data sets", helpMenuLinks.PIPELINES_DATASETS, classes)}
- {menuItem("Tutorials and User guide", helpMenuLinks.TUTORIALS, classes)}
- {menuItem("API Reference", helpMenuLinks.API_REFERENCE, classes)}
- {menuItem("SDK Reference", helpMenuLinks.SDK_REFERENCE, classes)}
- </DropdownMenu>
-);
+const mapStateToProps = ({ router }: RootState) => ({
+ currentRoute: router.location ? router.location.pathname : '',
+});
- // Todo: change help icon
-const menuItem = (title: string, link: string, classes: Record<CssRules, string>) =>
- <a href={link} target="_blank" className={classes.link}>
- <MenuItem>
- <HelpIcon className={classes.icon} />
- <Typography variant="body1" className={classes.linkTitle}>{title}</Typography>
- </MenuItem>
- </a>;
+export const HelpMenu = compose(
+ connect(mapStateToProps),
+ withStyles(styles))(
+ ({ classes, currentRoute }: HelpMenuProps & WithStyles<CssRules>) =>
+ <DropdownMenu
+ icon={<HelpIcon />}
+ id="help-menu"
+ title="Help"
+ key={currentRoute}>
+ <MenuItem disabled>Help</MenuItem>
+ {
+ links.map(link =>
+ <MenuItem key={link.title}>
+ <a href={link.link} target="_blank" className={classes.link}>
+ <ImportContactsIcon className={classes.icon} />
+ <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+ </a>
+ </MenuItem>
+ )
+ }
+ </DropdownMenu>
+ );