Experiments Table Headers - Remove context menu's click trigger (#2625)

* Create dedicated header module

* Fix styles imports for header module

* Disable left-click trigger for header context menu

* Remove duplicated code

Author: wolmir

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

@@ -737,19 +737,14 @@ describe('App', () => {
       jest.useRealTimers()
     })
 
-    it('should open on left click', () => {
+    it('should not 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',
-        'Set Max Header Height'
-      ])
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
     })
 
     it('should open on right click and close on esc', () => {

webview/src/experiments/components/table/Table.test.tsx

@@ -18,7 +18,7 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React from 'react'
 import { TableInstance } from 'react-table'
 import tableDataFixture from 'dvc/src/test/fixtures/expShow/tableData'
-import { SortOrder } from './TableHeader'
+import { SortOrder } from './header/TableHeader'
 import { Table } from './Table'
 import styles from './styles.module.scss'
 import { ExperimentsTable } from '../Experiments'

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

@@ -2,7 +2,7 @@ import React, { useRef, useState, CSSProperties } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import styles from './styles.module.scss'
-import { TableHead } from './TableHead'
+import { TableHead } from './header/TableHead'
 import { InstanceProp, RowProp } from './interfaces'
 import { RowSelectionContext } from './RowSelectionContext'
 import { TableBody } from './TableBody'

webview/src/experiments/components/table/MergeHeaderGroups.tsx renamed to webview/src/experiments/components/table/header/MergeHeaderGroups.tsx

@@ -3,8 +3,8 @@ import cx from 'classnames'
 import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
 import { TableHeader } from './TableHeader'
-import styles from './styles.module.scss'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
+import styles from '../styles.module.scss'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 
 export const MergedHeaderGroups: React.FC<{
   headerGroup: HeaderGroup<Experiment>

webview/src/experiments/components/table/TableHead.tsx renamed to webview/src/experiments/components/table/header/TableHead.tsx

@@ -3,17 +3,16 @@ import React, { DragEvent, useRef, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { HeaderGroup, TableInstance } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import styles from './styles.module.scss'
 import { MergedHeaderGroups } from './MergeHeaderGroups'
-import { Indicators } from './Indicators'
-import { setDropTarget } from './headerDropTargetSlice'
-import { useColumnOrder } from '../../hooks/useColumnOrder'
-import { ExperimentsState } from '../../store'
-import { sendMessage } from '../../../shared/vscode'
-import { leafColumnIds, reorderColumnIds } from '../../util/columns'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { getSelectedForPlotsCount } from '../../util/rows'
-
+import { setDropTarget } from '../headerDropTargetSlice'
+import styles from '../styles.module.scss'
+import { Indicators } from '../Indicators'
+import { useColumnOrder } from '../../../hooks/useColumnOrder'
+import { ExperimentsState } from '../../../store'
+import { sendMessage } from '../../../../shared/vscode'
+import { leafColumnIds, reorderColumnIds } from '../../../util/columns'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
+import { getSelectedForPlotsCount } from '../../../util/rows'
 interface TableHeadProps {
   instance: TableInstance<Experiment>
   root: HTMLElement | null

webview/src/experiments/components/table/TableHeader.tsx renamed to webview/src/experiments/components/table/header/TableHeader.tsx

@@ -9,10 +9,10 @@ import { HeaderGroup } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 import { TableHeaderCell } from './TableHeaderCell'
-import { ExperimentsState } from '../../store'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
-import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
+import { ExperimentsState } from '../../../store'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
+import { MessagesMenu } from '../../../../shared/components/messagesMenu/MessagesMenu'
+import { MessagesMenuOptionProps } from '../../../../shared/components/messagesMenu/MessagesMenuOption'
 
 export enum SortOrder {
   ASCENDING = 'Sort Ascending',
@@ -38,6 +38,39 @@ interface TableHeaderProps {
   root: HTMLElement | null
 }
 
+export const sortOption = (
+  label: SortOrder,
+  currentSort: SortOrder,
+  columnId: string
+) => {
+  const sortOrder = currentSort
+  const hidden = sortOrder === label
+  const descending = label === SortOrder.DESCENDING
+  const path = columnId
+  const removeSortMessage = {
+    payload: columnId,
+    type: MessageFromWebviewType.REMOVE_COLUMN_SORT
+  }
+  const payload = {
+    descending,
+    path
+  }
+  const message =
+    label === SortOrder.NONE
+      ? removeSortMessage
+      : {
+          payload,
+          type: MessageFromWebviewType.SORT_COLUMN
+        }
+
+  return {
+    hidden,
+    id: label,
+    label,
+    message
+  } as MessagesMenuOptionProps
+}
+
 export const TableHeader: React.FC<TableHeaderProps> = ({
   column,
   columns,
@@ -116,39 +149,9 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
               <VSCodeDivider />
               <MessagesMenu
                 options={[
-                  {
-                    hidden: sortOrder === SortOrder.ASCENDING,
-                    id: SortOrder.ASCENDING,
-                    label: SortOrder.ASCENDING,
-                    message: {
-                      payload: {
-                        descending: false,
-                        path: column.id
-                      },
-                      type: MessageFromWebviewType.SORT_COLUMN
-                    }
-                  },
-                  {
-                    hidden: sortOrder === SortOrder.DESCENDING,
-                    id: SortOrder.DESCENDING,
-                    label: SortOrder.DESCENDING,
-                    message: {
-                      payload: {
-                        descending: true,
-                        path: column.id
-                      },
-                      type: MessageFromWebviewType.SORT_COLUMN
-                    }
-                  },
-                  {
-                    hidden: sortOrder === SortOrder.NONE,
-                    id: SortOrder.NONE,
-                    label: SortOrder.NONE,
-                    message: {
-                      payload: column.id,
-                      type: MessageFromWebviewType.REMOVE_COLUMN_SORT
-                    }
-                  }
+                  sortOption(SortOrder.ASCENDING, sortOrder, column.id),
+                  sortOption(SortOrder.DESCENDING, sortOrder, column.id),
+                  sortOption(SortOrder.NONE, sortOrder, column.id)
                 ]}
               />
             </>

webview/src/experiments/components/table/TableHeaderCell.tsx renamed to webview/src/experiments/components/table/header/TableHeaderCell.tsx

@@ -8,17 +8,17 @@ import { useSelector } from 'react-redux'
 import { HeaderGroup } from 'react-table'
 import cx from 'classnames'
 import { useInView } from 'react-intersection-observer'
-import styles from './styles.module.scss'
 import { SortOrder } from './TableHeader'
 import { TableHeaderCellContents } from './TableHeaderCellContents'
+import styles from '../styles.module.scss'
 import {
   countUpperLevels,
   isExperimentColumn,
   isFirstLevelHeader
-} from '../../util/columns'
-import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { ExperimentsState } from '../../store'
+} from '../../../util/columns'
+import { ExperimentsState } from '../../../store'
+import { ContextMenu } from '../../../../shared/components/contextMenu/ContextMenu'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 
 const calcResizerHeight = (
   isPlaceholder: boolean,
@@ -147,7 +147,7 @@ export const TableHeaderCell: React.FC<{
     <ContextMenu
       content={menuContent}
       disabled={menuDisabled || menuSuppressed}
-      trigger={'contextmenu click'}
+      trigger={'contextmenu'}
     >
       <div
         {...column.getHeaderProps(

webview/src/experiments/components/table/TableHeaderCellContents.tsx renamed to webview/src/experiments/components/table/header/TableHeaderCellContents.tsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
 import { ColumnType, Experiment } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
-import styles from './styles.module.scss'
 import { SortOrder } from './TableHeader'
+import styles from '../styles.module.scss'
 import {
   Draggable,
   DragFunction
-} from '../../../shared/components/dragDrop/Draggable'
-import { IconMenu } from '../../../shared/components/iconMenu/IconMenu'
-import { DownArrow, Lines, UpArrow } from '../../../shared/components/icons'
+} from '../../../../shared/components/dragDrop/Draggable'
+import { IconMenu } from '../../../../shared/components/iconMenu/IconMenu'
+import { DownArrow, Lines, UpArrow } from '../../../../shared/components/icons'
 
 const getIconMenuItems = (
   sortEnabled: boolean,