From f79ee597833b880551baff9aef059919d80d5cd7 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Thu, 28 Sep 2023 10:30:25 -0400
Subject: [PATCH] 21002: fixed tooltip focus on notificatoin icon
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../dropdown-menu/dropdown-menu.tsx           | 22 ++++----
 .../main-app-bar/notifications-menu.tsx       | 55 ++++++++++++-------
 2 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index bb661bc2..39cce048 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -2,11 +2,11 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
-import Menu from '@material-ui/core/Menu';
-import IconButton from '@material-ui/core/IconButton';
-import { PopoverOrigin } from '@material-ui/core/Popover';
-import { Tooltip } from '@material-ui/core';
+import React from "react";
+import Menu from "@material-ui/core/Menu";
+import IconButton from "@material-ui/core/IconButton";
+import { PopoverOrigin } from "@material-ui/core/Popover";
+import { Tooltip } from "@material-ui/core";
 
 interface DropdownMenuProps {
     id: string;
@@ -20,12 +20,12 @@ interface DropdownMenuState {
 
 export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
     state = {
-        anchorEl: undefined
+        anchorEl: undefined,
     };
 
     transformOrigin: PopoverOrigin = {
         vertical: -50,
-        horizontal: 0
+        horizontal: 0,
     };
 
     render() {
@@ -33,7 +33,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
         const { anchorEl } = this.state;
         return (
             <div>
-                <Tooltip title={title}>
+                <Tooltip
+                    title={title}
+                    disableFocusListener>
                     <IconButton
                         aria-owns={anchorEl ? id : undefined}
                         aria-haspopup="true"
@@ -57,9 +59,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
 
     handleClose = () => {
         this.setState({ anchorEl: undefined });
-    }
+    };
 
     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
         this.setState({ anchorEl: event.currentTarget });
-    }
+    };
 }
diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
index ca97a612..f415c7d5 100644
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -26,11 +26,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 type NotificationsMenuProps = {
     isOpen: boolean;
     bannerUUID?: string;
-}
+};
 
 type NotificationsMenuComponentProps = NotificationsMenuProps & {
     openBanner: any;
-}
+};
 
 export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
     const { isOpen, openBanner } = props;
@@ -39,41 +39,56 @@ export const NotificationsMenuComponent = (props: NotificationsMenuComponentProp
     const menuItems: any[] = [];
 
     if (!isOpen && bannerResult) {
-        menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
+        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');
+            localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, "true");
         }
         window.location.reload();
     }, [tooltipResult]);
 
     if (tooltipResult) {
-        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Enable tooltips</span></MenuItem>);
+        menuItems.push(
+            <MenuItem>
+                <span onClick={toggleTooltips}>Enable tooltips</span>
+            </MenuItem>
+        );
     } else {
-        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Disable tooltips</span></MenuItem>);
+        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>);
-}
+    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);
-- 
2.30.2