From 864414b6b14126305c26a85619edf8b2e56a22d0 Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com>
Date: Wed, 3 Apr 2024 09:53:47 -0500
Subject: [PATCH] [ui] Add tooltip with keyboard shortcut info on top nav items
 (#20977)

## Summary & Motivation

Add a tooltip with info about keyboard shortcuts on Search and Help buttons.

<img width="146" alt="Screenshot 2024-04-02 at 13 40 08" src="https://github.com/dagster-io/dagster/assets/2823852/7125d98c-75ff-4c5b-8fdd-2c1d9131b348">

## How I Tested These Changes

View top nav in app, hover on these buttons.
---
 .../ui-core/src/app/AppTopNav/AppTopNav.tsx   |  3 +--
 .../packages/ui-core/src/app/HelpMenu.tsx     |  8 ++++--
 .../packages/ui-core/src/app/TopNavButton.tsx | 25 ++++++++++++++++++-
 .../ui-core/src/search/SearchDialog.tsx       | 15 +++++++----
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
index 193b2ded6a33f..b8189e04b856b 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
@@ -42,8 +42,7 @@ export const AppTopNav = ({children, allowGlobalReload = false}: Props) => {
               }
             }}
             shortcutLabel={`⌥R - ${reloading ? 'Reloading' : 'Reload all code locations'}`}
-            // On OSX Alt + R creates ®, not sure about windows, so checking 'r' for windows
-            shortcutFilter={(e) => e.altKey && (e.key === '®' || e.key === 'r')}
+            shortcutFilter={(e) => e.altKey && e.code === 'KeyR'}
           >
             <div style={{width: '0px', height: '30px'}} />
           </ShortcutHandler>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/HelpMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/HelpMenu.tsx
index 0b97e07e8e793..f2fa952f83c03 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/HelpMenu.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/HelpMenu.tsx
@@ -12,7 +12,7 @@ import {
 import {useCallback, useState} from 'react';
 
 import {ShortcutHandler} from './ShortcutHandler';
-import {TopNavButton} from './TopNavButton';
+import {TooltipShortcutInfo, TopNavButton} from './TopNavButton';
 import DagsterUniversityImage from './dagster_university.svg';
 import {useStateWithStorage} from '../hooks/useStateWithStorage';
 
@@ -100,7 +100,11 @@ export const HelpMenu = ({showContactSales = true}: {showContactSales?: boolean}
             </Menu>
           }
         >
-          <Tooltip content="Help" placement="bottom" canShow={!isOpen}>
+          <Tooltip
+            content={<TooltipShortcutInfo label="Help" shortcutKey="?" />}
+            placement="bottom"
+            canShow={!isOpen}
+          >
             <TopNavButton>
               <Icon name="help_circle" size={20} />
             </TopNavButton>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
index 604efb416d02c..4b11f5e7b876f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
@@ -1,4 +1,5 @@
-import {Colors, IconWrapper, UnstyledButton} from '@dagster-io/ui-components';
+import {Box, Colors, FontFamily, IconWrapper, UnstyledButton} from '@dagster-io/ui-components';
+import {ReactNode} from 'react';
 import styled from 'styled-components';
 
 export const TopNavButton = styled(UnstyledButton)`
@@ -28,3 +29,25 @@ export const TopNavButton = styled(UnstyledButton)`
     background-color: ${Colors.navTextHover()};
   }
 `;
+
+interface TooltipWithShortcutInfoProps {
+  label: ReactNode;
+  shortcutKey: string;
+}
+
+export const TooltipShortcutInfo = ({label, shortcutKey}: TooltipWithShortcutInfoProps) => {
+  return (
+    <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+      <div>{label}</div>
+      <TooltipShortcutKey>{shortcutKey}</TooltipShortcutKey>
+    </Box>
+  );
+};
+
+export const TooltipShortcutKey = styled.div`
+  background-color: ${Colors.navButton()};
+  border-radius: 3px;
+  font-family: ${FontFamily.monospace};
+  padding: 1px 6px;
+  box-shadow: inset 0 0 0 1px ${Colors.borderHover()};
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
index 75bad57bb0921..8f017e8df3adb 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import {Overlay} from '@blueprintjs/core';
-import {Colors, FontFamily, Icon, Spinner} from '@dagster-io/ui-components';
+import {Colors, FontFamily, Icon, Spinner, Tooltip} from '@dagster-io/ui-components';
 import Fuse from 'fuse.js';
 import debounce from 'lodash/debounce';
 import * as React from 'react';
@@ -12,7 +12,7 @@ import {SearchResult} from './types';
 import {useGlobalSearch} from './useGlobalSearch';
 import {__updateSearchVisibility} from './useSearchVisibility';
 import {ShortcutHandler} from '../app/ShortcutHandler';
-import {TopNavButton} from '../app/TopNavButton';
+import {TooltipShortcutInfo, TopNavButton} from '../app/TopNavButton';
 import {useTrackEvent} from '../app/analytics';
 import {Trace, createTrace} from '../performance';
 
@@ -212,9 +212,14 @@ export const SearchDialog = () => {
   return (
     <>
       <ShortcutHandler onShortcut={openSearch} shortcutLabel="/" shortcutFilter={shortcutFilter}>
-        <TopNavButton onClick={openSearch}>
-          <Icon name="search" size={20} />
-        </TopNavButton>
+        <Tooltip
+          content={<TooltipShortcutInfo label="Search" shortcutKey="/" />}
+          placement="bottom"
+        >
+          <TopNavButton onClick={openSearch}>
+            <Icon name="search" size={20} />
+          </TopNavButton>
+        </Tooltip>
       </ShortcutHandler>
       <Overlay
         backdropProps={{style: {backgroundColor: Colors.dialogBackground()}}}