diff --git a/languageServer/package.json b/languageServer/package.json index 66ef5308f0..26c164db84 100644 --- a/languageServer/package.json +++ b/languageServer/package.json @@ -24,7 +24,7 @@ "format": "prettier --write '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'", "lint:prettier": "prettier -c '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'", "lint:eslint": "eslint --cache '**/*.{js,ts,jsx,tsx}'", - "lint:tsc": "tsc --noEmit", + "lint:compile": "webpack --mode development", "lint": "run-p 'lint:*'", "dev": "webpack watch --mode development", "test": "jest --collect-coverage" diff --git a/webview/package.json b/webview/package.json index 79613c4f3e..7165abd7ae 100644 --- a/webview/package.json +++ b/webview/package.json @@ -6,7 +6,7 @@ "format": "prettier --write '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'", "lint:prettier": "prettier -c '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'", "lint:eslint": "eslint --cache '**/*.{js,ts,jsx,tsx}'", - "lint:tsc": "tsc --noEmit", + "lint:compile": "webpack --mode development", "lint": "run-p 'lint:*'", "dev": "webpack watch --mode development", "build": "webpack --mode production", diff --git a/webview/src/experiments/components/App.test.tsx b/webview/src/experiments/components/App.test.tsx index 615f5f1ba7..dcad10a026 100644 --- a/webview/src/experiments/components/App.test.tsx +++ b/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', () => { diff --git a/webview/src/experiments/components/table/Table.test.tsx b/webview/src/experiments/components/table/Table.test.tsx index 8cf5162470..93f718cfd7 100644 --- a/webview/src/experiments/components/table/Table.test.tsx +++ b/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' diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx index de24b64b25..8bfe107324 100644 --- a/webview/src/experiments/components/table/Table.tsx +++ b/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' diff --git a/webview/src/experiments/components/table/MergeHeaderGroups.tsx b/webview/src/experiments/components/table/header/MergeHeaderGroups.tsx similarity index 91% rename from webview/src/experiments/components/table/MergeHeaderGroups.tsx rename to webview/src/experiments/components/table/header/MergeHeaderGroups.tsx index 22b5292535..6e36292edb 100644 --- a/webview/src/experiments/components/table/MergeHeaderGroups.tsx +++ b/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 diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/header/TableHead.tsx similarity index 87% rename from webview/src/experiments/components/table/TableHead.tsx rename to webview/src/experiments/components/table/header/TableHead.tsx index c5624dff2c..d34a178696 100644 --- a/webview/src/experiments/components/table/TableHead.tsx +++ b/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 root: HTMLElement | null diff --git a/webview/src/experiments/components/table/TableHeader.tsx b/webview/src/experiments/components/table/header/TableHeader.tsx similarity index 67% rename from webview/src/experiments/components/table/TableHeader.tsx rename to webview/src/experiments/components/table/header/TableHeader.tsx index 4833095029..a0eacec2df 100644 --- a/webview/src/experiments/components/table/TableHeader.tsx +++ b/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 = ({ column, columns, @@ -116,39 +149,9 @@ export const TableHeader: React.FC = ({ diff --git a/webview/src/experiments/components/table/TableHeaderCell.tsx b/webview/src/experiments/components/table/header/TableHeaderCell.tsx similarity index 93% rename from webview/src/experiments/components/table/TableHeaderCell.tsx rename to webview/src/experiments/components/table/header/TableHeaderCell.tsx index aef24799ef..009e5a6b78 100644 --- a/webview/src/experiments/components/table/TableHeaderCell.tsx +++ b/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<{