Merge branch '15768-multi-select-operations'

[arvados-workbench2.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 5781ec16d4c4e126ab285d49ca959e33bcde1af9..89fd2e9184793bf7cd790d7d052c43ad1917d1d8 100644 (file)
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -2,22 +2,95 @@
 //
 // 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';
+import React from "react";
+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";
+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";
 
-export const NotificationsMenu = 
-    () =>
+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 onClick={openBanner}>
+                <span>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 onClick={toggleTooltips}>
+                <span>Enable tooltips</span>
+            </MenuItem>
+        );
+    } else {
+        menuItems.push(
+            <MenuItem onClick={toggleTooltips}>
+                <span>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">
+                    color="primary"
+                >
                     <NotificationIcon />
-                </Badge>}
+                </Badge>
+            }
             id="account-menu"
-            title="Notifications">
-            <MenuItem>You are up to date</MenuItem>
-        </DropdownMenu>;
+            title="Notifications"
+        >
+            {menuItems.map((item, i) => (
+                <div key={i}>{item}</div>
+            ))}
+        </DropdownMenu>
+    );
+};
 
+export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);