Dismiss tooltip/context menus on Escape (#2354)

* dismiss tooltip/context menus on Escape

* add header context menu tests and fix issues

Author: mattseddon

webview/src/experiments/components/App.test.tsx

@@ -671,6 +671,46 @@ describe('App', () => {
     })
   })
 
+  describe('Header Context Menu', () => {
+    beforeAll(() => {
+      jest.useFakeTimers()
+    })
+    afterAll(() => {
+      jest.useRealTimers()
+    })
+
+    it('should open on left click', () => {
+      renderTableWithoutRunningExperiments()
+
+      const paramsFileHeader = screen.getByText('params.yaml')
+      fireEvent.click(paramsFileHeader, { bubbles: true })
+
+      jest.advanceTimersByTime(100)
+      const menuitems = screen.getAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toStrictEqual([
+        'Open to the Side',
+        'Sort Ascending',
+        'Sort Descending'
+      ])
+    })
+
+    it('should open on right click and close on esc', () => {
+      renderTableWithoutRunningExperiments()
+
+      const paramsFileHeader = screen.getByText('params.yaml')
+      fireEvent.contextMenu(paramsFileHeader, { bubbles: true })
+
+      jest.advanceTimersByTime(100)
+
+      const menuitems = screen.getAllByRole('menuitem')
+      expect(menuitems).toHaveLength(3)
+
+      fireEvent.keyDown(paramsFileHeader, { bubbles: true, key: 'Escape' })
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+    })
+  })
+
   describe('Row Context Menu', () => {
     beforeAll(() => {
       jest.useFakeTimers()
@@ -719,7 +759,7 @@ describe('App', () => {
       ])
     })
 
-    it('should present the correct option for an experiment with checkpoints', () => {
+    it('should present the correct option for an experiment with checkpoints and close on esc', () => {
       renderTableWithoutRunningExperiments()
 
       const target = screen.getByText('[exp-e7a67]')
@@ -739,6 +779,9 @@ describe('App', () => {
         'Star',
         'Remove'
       ])
+
+      fireEvent.keyDown(menuitems[0], { bubbles: true, key: 'Escape' })
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
     })
 
     it('should be removed with a left click', () => {

webview/src/experiments/components/table/TableHeaderCellContents.tsx

@@ -41,9 +41,6 @@ export const ColumnDragHandle: React.FC<{
     <span
       data-testid="rendered-header"
       className={cx(styles.cellContents)}
-      onKeyDown={e => {
-        e.stopPropagation()
-      }}
       role={'columnheader'}
       tabIndex={0}
     >

webview/src/plots/components/App.test.tsx

@@ -1318,6 +1318,41 @@ describe('App', () => {
     ).toBeInTheDocument()
   })
 
+  it('should dismiss a tooltip by pressing esc', () => {
+    renderAppWithOptionalData({
+      checkpoint: checkpointPlotsFixture,
+      comparison: comparisonTableFixture,
+      template: complexTemplatePlotsFixture
+    })
+
+    const [templateInfo] = screen.getAllByTestId('info-tooltip-toggle')
+
+    const getSectionText = (sectionNode: ReactElement) =>
+      // eslint-disable-next-line testing-library/no-node-access
+      sectionNode.props.children || ''
+
+    fireEvent.mouseEnter(templateInfo, { bubbles: true })
+    expect(
+      screen.getByText(
+        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
+      )
+    ).toBeInTheDocument()
+
+    fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Space' })
+    expect(
+      screen.getByText(
+        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
+      )
+    ).toBeInTheDocument()
+
+    fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Escape' })
+    expect(
+      screen.queryByText(
+        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
+      )
+    ).not.toBeInTheDocument()
+  })
+
   describe('Virtualization', () => {
     const createCheckpointPlots = (nbOfPlots: number) => {
       const plots = []

webview/src/shared/components/tooltip/Tooltip.tsx

@@ -6,6 +6,27 @@ import 'tippy.js/dist/tippy.css'
 export const HEADER_TOOLTIP_DELAY = 100
 export const CELL_TOOLTIP_DELAY = 1000
 
+const hideOnEsc = {
+  defaultValue: true,
+  fn({ hide }: { hide: () => void }) {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        hide()
+      }
+    }
+
+    return {
+      onHide() {
+        document.removeEventListener('keydown', onKeyDown)
+      },
+      onShow() {
+        document.addEventListener('keydown', onKeyDown)
+      }
+    }
+  },
+  name: 'hideOnEsc'
+}
+
 const TooltipRenderFunction: React.ForwardRefRenderFunction<
   unknown,
   TippyProps & { isContextMenu?: boolean }
@@ -57,6 +78,7 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     onShow={onShow}
     onHide={onHide}
     ref={ref as Ref<Element>}
+    plugins={[hideOnEsc]}
   >
     {children}
   </Tippy>