Merge branch '17782-react-scripts-ts-migration' into main. Closes #17782

[arvados.git] / src / views-components / main-app-bar / help-menu.tsx

diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
index 2c56c85e27669395a2d4eb0cbe591c6844035981..af76e4f127daa760b849eb884b26545c5844adf6 100644 (file)
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -2,20 +2,24 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
+import React from "react";
 import { MenuItem, Typography } from "@material-ui/core";
-import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
-import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
-import { ArvadosTheme } from '~/common/custom-theme';
+import { DropdownMenu } from "components/dropdown-menu/dropdown-menu";
+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' | 'linkContent';
+type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     link: {
         textDecoration: 'none',
         color: 'inherit',
         width: '100%',
+        display: 'flex'
     },
     icon: {
         width: '16px',
@@ -30,16 +34,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     linkTitle: {
         marginLeft: theme.spacing.unit
     },
-    linkContent: {
-        display: 'flex'
-    }
 });
 
 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/",
@@ -54,26 +51,33 @@ const links = [
     },
 ];
 
-export const HelpMenu = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) =>
-        <DropdownMenu
-            icon={<HelpIcon />}
-            id="help-menu"
-            title="Help">
-            <li className={classes.title}>
-                <Typography variant="body1">Help</Typography>
-            </li>
-            {
-                links.map(link =>
-                    <MenuItem key={link.title}>
-                        <a href={link.link} target="_blank" className={classes.link}>
-                            <div className={classes.linkContent}>
+interface HelpMenuProps {
+    currentRoute: string;
+}
+
+const mapStateToProps = ({ router }: RootState) => ({
+    currentRoute: router.location ? router.location.pathname : '',
+});
+
+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" rel="noopener noreferrer" className={classes.link}>
                                 <ImportContactsIcon className={classes.icon} />
-                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
-                            </div>
-                        </a>
-                    </MenuItem>
-                )
-            }
-        </DropdownMenu>
-);
+                                <Typography className={classes.linkTitle}>{link.title}</Typography>
+                            </a>
+                        </MenuItem>
+                    )
+                }
+            </DropdownMenu>
+    );