Skip to content

Commit

Permalink
[ui] Add tooltip with keyboard shortcut info on top nav items (#20977)
Browse files Browse the repository at this point in the history
## 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.
  • Loading branch information
hellendag authored Apr 3, 2024
1 parent 9d6f360 commit 864414b
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions js_modules/dagster-ui/packages/ui-core/src/app/HelpMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand Down
25 changes: 24 additions & 1 deletion js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
Original file line number Diff line number Diff line change
@@ -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)`
Expand Down Expand Up @@ -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()};
`;
15 changes: 10 additions & 5 deletions js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand Down Expand Up @@ -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()}}}
Expand Down

1 comment on commit 864414b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-ho8cs13nt-elementl.vercel.app

Built with commit 864414b.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.