Extract appbar menus to their own components

Feature #14149

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/main-app-bar/account-menu.tsx b/src/views-components/main-app-bar/account-menu.tsx
new file mode 100644 (file)
index 0000000..2597c19
--- /dev/null
+++ b/src/views-components/main-app-bar/account-menu.tsx
@@ -0,0 +1,36 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { MenuItem } from "@material-ui/core";
+import { User, getUserFullname } from "~/models/user";
+import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
+import { UserPanelIcon } from "~/components/icon/icon";
+import { DispatchProp, connect } from 'react-redux';
+import { logout } from "~/store/auth/auth-action";
+import { RootState } from "~/store/store";
+
+interface AccountMenuProps {
+    user?: User;
+}
+
+const mapStateToProps = (state: RootState): AccountMenuProps => ({
+    user: state.auth.user
+});
+
+export const AccountMenu = connect(mapStateToProps)(
+    ({ user, dispatch }: AccountMenuProps & DispatchProp<any>) =>
+        user
+            ? <DropdownMenu
+                icon={<UserPanelIcon />}
+                id="account-menu"
+                title="Account Management">
+                <MenuItem>
+                    {getUserFullname(user)}
+                </MenuItem>
+                <MenuItem>Current token</MenuItem>
+                <MenuItem>My account</MenuItem>
+                <MenuItem onClick={() => dispatch(logout())}>Logout</MenuItem>
+            </DropdownMenu>
+            : null);

diff --git a/src/views-components/main-app-bar/anonymous-menu.tsx b/src/views-components/main-app-bar/anonymous-menu.tsx
new file mode 100644 (file)
index 0000000..6f77a52
--- /dev/null
+++ b/src/views-components/main-app-bar/anonymous-menu.tsx
@@ -0,0 +1,16 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Button } from '@material-ui/core';
+import { DispatchProp, connect } from 'react-redux';
+import { login } from '~/store/auth/auth-action';
+
+export const AnonymousMenu = connect()(
+    ({ dispatch }: DispatchProp<any>) =>
+        <Button
+            color="inherit"
+            onClick={() => dispatch(login())}>
+            Sign in
+        </Button>);

diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index 04e0fb804a75dba4ac8eae7116d4606617889aa6..63bdd8bfcbd816433f7454a215425c49609f8ebc 100644 (file)
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -12,6 +12,9 @@ import { SearchBar } from "~/components/search-bar/search-bar";
 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
 import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "~/components/icon/icon";
 import { Routes } from '~/routes/routes';
+import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
+import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
+import { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
 
 type CssRules = 'link';
 
@@ -54,15 +57,15 @@ export const MainAppBar = withStyles(styles)(
         return <AppBar position="static">
             <Toolbar>
                 <Grid container justify="space-between">
-                    <Grid item xs={3}>
+                    <Grid container item xs={3} alignItems="center">
                         <Typography variant="headline" color="inherit" noWrap>
                             <Link to={Routes.ROOT} className={props.classes.link}>
-                                Arvados 2
+                                arvados workbench
                             </Link>
                         </Typography>
-                        <Typography variant="body1" color="inherit" noWrap >
+                        {/* <Typography variant="body1" color="inherit" noWrap >
                             {props.buildInfo}
-                        </Typography>
+                        </Typography> */}
                     </Grid>
                     <Grid item xs={6} container alignItems="center">
                         {
@@ -75,58 +78,24 @@ export const MainAppBar = withStyles(styles)(
                     </Grid>
                     <Grid item xs={3} container alignItems="center" justify="flex-end">
                         {
-                            props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
+                            props.user
+                                ? <>
+                                    <NotificationsMenu />
+                                    <AccountMenu />
+                                </>
+                                : <AnonymousMenu />
                         }
                     </Grid>
                 </Grid>
             </Toolbar>
-            <Toolbar >
+            {/* <Toolbar >
                 {props.user && <props.breadcrumbs />}
                 {props.user && <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
                     <Tooltip title="Additional Info">
                         <DetailsIcon />
                     </Tooltip>
                 </IconButton>}
-            </Toolbar>
+            </Toolbar> */}
         </AppBar>;
     }
 );
-
-const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
-    return (
-        <>
-            <IconButton color="inherit">
-                <Tooltip title="Notification">
-                    <Badge badgeContent={3} color="primary">
-                        <NotificationIcon />
-                    </Badge>
-                </Tooltip>
-            </IconButton>
-            <DropdownMenu icon={<UserPanelIcon />} id="account-menu" title="Account Management">
-                <MenuItem>
-                    {getUserFullname(user)}
-                </MenuItem>
-                {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
-            </DropdownMenu>
-            <DropdownMenu icon={<HelpIcon />} id="help-menu" title="Help">
-                {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
-            </DropdownMenu>
-        </>
-    );
-};
-
-const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
-    return menuItems.anonymousMenu.map((item, index) => (
-        <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
-            {item.label}
-        </Button>
-    ));
-};
-
-const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
-    return menuItems.map((item, index) => (
-        <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
-            {item.label}
-        </MenuItem>
-    ));
-};

diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
new file mode 100644 (file)
index 0000000..5781ec1
--- /dev/null
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -0,0 +1,23 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Badge, MenuItem } from '@material-ui/core';
+import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
+import { NotificationIcon } from '~/components/icon/icon';
+
+export const NotificationsMenu = 
+    () =>
+        <DropdownMenu
+            icon={
+                <Badge
+                    badgeContent={0}
+                    color="primary">
+                    <NotificationIcon />
+                </Badge>}
+            id="account-menu"
+            title="Notifications">
+            <MenuItem>You are up to date</MenuItem>
+        </DropdownMenu>;
+