20085: Almost works, needs to save on change to share/public/private

[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 30a5756f2a00998466a1ecb975409cd9a0850497..ca97a612bb11875460c17eeed6487266b9c46cf3 100644 (file)
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -11,6 +11,8 @@ 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,
@@ -32,13 +34,29 @@ type NotificationsMenuComponentProps = NotificationsMenuProps & {
 
 export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
     const { isOpen, openBanner } = props;
-    const result = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
+    const bannerResult = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
+    const tooltipResult = localStorage.getItem(TOOLTIP_LOCAL_STORAGE_KEY);
     const menuItems: any[] = [];
 
-    if (!isOpen && result) {
+    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>);
     }
@@ -53,7 +71,7 @@ export const NotificationsMenuComponent = (props: NotificationsMenuComponentProp
         id="account-menu"
         title="Notifications">
         {
-            menuItems.map(item => item)
+            menuItems.map((item, i) => <div key={i}>{item}</div>)
         }
     </DropdownMenu>);
 }