Merge branch 'master' into 14125-help-page-is-empty

refs #14125

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 0ec7ccf48b97e9d42f1cb4433fdf328b64491b5e..afc0fed1adbc6c6aba4d4b8096d794d3f7e154fa 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -11,6 +11,7 @@ import Cached from '@material-ui/icons/Cached';
 import CloudUpload from '@material-ui/icons/CloudUpload';
 import Code from '@material-ui/icons/Code';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ImportContacts from '@material-ui/icons/ImportContacts';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import Close from '@material-ui/icons/Close';
 import ContentCopy from '@material-ui/icons/FileCopyOutlined';
@@ -29,6 +30,7 @@ import LastPage from '@material-ui/icons/LastPage';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import Menu from '@material-ui/icons/Menu';
 import MoreVert from '@material-ui/icons/MoreVert';
+import Mail from '@material-ui/icons/Mail';
 import MoveToInbox from '@material-ui/icons/MoveToInbox';
 import Notifications from '@material-ui/icons/Notifications';
 import People from '@material-ui/icons/People';
@@ -42,6 +44,7 @@ import SettingsApplications from '@material-ui/icons/SettingsApplications';
 import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
+import HelpOutline from '@material-ui/icons/HelpOutline';
 
 export type IconType = React.SFC<{ className?: string }>;
 
@@ -87,3 +90,6 @@ export const TrashIcon: IconType = (props) => <Delete {...props} />;
 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
+export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
+export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
+export const MailIcon: IconType = (props) => <Mail {...props} />;

diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
new file mode 100644 (file)
index 0000000..de3ed3b
--- /dev/null
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -0,0 +1,75 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as 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 { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+
+type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    link: {
+        textDecoration: 'none',
+        color: 'inherit',
+        width: '100%',
+        display: 'flex'
+    },
+    icon: {
+        width: '16px',
+        height: '16px'
+    },
+    title: {
+        paddingBottom: theme.spacing.unit * 0.5,
+        paddingLeft: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 0.5,
+        outline: 'none',
+    },
+    linkTitle: {
+        marginLeft: theme.spacing.unit
+    },
+});
+
+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/"
+    },
+];
+
+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}>
+                                <ImportContactsIcon className={classes.icon} />
+                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                        </a>
+                    </MenuItem>
+                )
+            }
+        </DropdownMenu>
+);