Merge branch '18368-notification-banner' into 19836-new-tooltip-impl

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

diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
index e27bdad552f7c51c34610c3e3bba38d2ed87a279..ca97a612bb11875460c17eeed6487266b9c46cf3 100644 (file)
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -3,21 +3,77 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from "react";
-import { Badge, MenuItem } from '@material-ui/core';
+import { Dispatch } from "redux";
+import { connect } from "react-redux";
+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>;
+import { NotificationIcon } from "components/icon/icon";
+import bannerActions from "store/banner/banner-action";
+import { BANNER_LOCAL_STORAGE_KEY } from "views-components/baner/banner";
+import { RootState } from "store/store";
+import { TOOLTIP_LOCAL_STORAGE_KEY } from "store/tooltips/tooltips-middleware";
+import { useCallback } from "react";
 
+const mapStateToProps = (state: RootState): NotificationsMenuProps => ({
+    isOpen: state.banner.isOpen,
+    bannerUUID: state.auth.config.clusterConfig.Workbench.BannerUUID,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    openBanner: () => dispatch<any>(bannerActions.openBanner()),
+});
+
+type NotificationsMenuProps = {
+    isOpen: boolean;
+    bannerUUID?: string;
+}
+
+type NotificationsMenuComponentProps = NotificationsMenuProps & {
+    openBanner: any;
+}
+
+export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
+    const { isOpen, openBanner } = props;
+    const bannerResult = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
+    const tooltipResult = localStorage.getItem(TOOLTIP_LOCAL_STORAGE_KEY);
+    const menuItems: any[] = [];
+
+    if (!isOpen && bannerResult) {
+        menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
+    }
+
+    const toggleTooltips = useCallback(() => {
+        if (tooltipResult) {
+            localStorage.removeItem(TOOLTIP_LOCAL_STORAGE_KEY);
+        } else {
+            localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, 'true');
+        }
+        window.location.reload();
+    }, [tooltipResult]);
+
+    if (tooltipResult) {
+        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Enable tooltips</span></MenuItem>);
+    } else {
+        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Disable tooltips</span></MenuItem>);
+    }
+
+    if (menuItems.length === 0) {
+        menuItems.push(<MenuItem>You are up to date</MenuItem>);
+    }
+
+    return (<DropdownMenu
+        icon={
+            <Badge
+                badgeContent={0}
+                color="primary">
+                <NotificationIcon />
+            </Badge>}
+        id="account-menu"
+        title="Notifications">
+        {
+            menuItems.map((item, i) => <div key={i}>{item}</div>)
+        }
+    </DropdownMenu>);
+}
+
+export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);