Merge branch 'main' into make-test-fixture-static

extension/src/test/cli/index.ts

@@ -1,8 +1,6 @@
 import { mkdirp } from 'fs-extra'
-import { URI } from 'vscode-uri'
-import { stub } from 'sinon'
-import mock from 'mock-require'
 import { TEMP_DIR, ENV_DIR } from './constants'
+require('../../vscode/mockModule')
 
 const importModulesAfterMockingVsCode = () => {
   const { removeDir } = require('../../fileSystem')
@@ -12,32 +10,6 @@ const importModulesAfterMockingVsCode = () => {
   return { removeDir, runMocha, setupVenv }
 }
 
-class MockEventEmitter {
-  public fire() {
-    return stub()
-  }
-
-  public event() {
-    return stub()
-  }
-}
-
-mock('vscode', {
-  EventEmitter: MockEventEmitter,
-  Uri: {
-    file: URI.file
-  }
-})
-
-mock('@hediet/std/disposable', {
-  Disposable: {
-    fn: () => ({
-      track: <T>(disposable: T): T => disposable,
-      untrack: () => undefined
-    })
-  }
-})
-
 const { setupVenv, removeDir, runMocha } = importModulesAfterMockingVsCode()
 
 async function main() {

extension/src/vscode/mockModule.ts

@@ -0,0 +1,29 @@
+import { URI } from 'vscode-uri'
+import { stub } from 'sinon'
+import mock from 'mock-require'
+
+class MockEventEmitter {
+  public fire() {
+    return stub()
+  }
+
+  public event() {
+    return stub()
+  }
+}
+
+mock('vscode', {
+  EventEmitter: MockEventEmitter,
+  Uri: {
+    file: URI.file
+  }
+})
+
+mock('@hediet/std/disposable', {
+  Disposable: {
+    fn: () => ({
+      track: <T>(disposable: T): T => disposable,
+      untrack: () => undefined
+    })
+  }
+})

extension/src/vscode/tree.ts

@@ -12,7 +12,7 @@ export const createTreeView = <T>(
   treeDataProvider: TreeDataProvider<string | T>
 ): TreeView<string | T> =>
   window.createTreeView<string | T>(name, {
-    canSelectMany: true,
+    canSelectMany: false,
     showCollapseAll: true,
     treeDataProvider
   })

scripts/virtualenv-install.ts

@@ -1,5 +1,13 @@
 import { join, resolve } from 'path'
-import { setupVenv } from 'dvc/src/python'
+require('dvc/src/vscode/mockModule')
+
+const importModuleAfterMockingVsCode = () => {
+  const { setupVenv } = require('dvc/src/python')
+
+  return setupVenv
+}
+
+const setupVenv = importModuleAfterMockingVsCode()
 
 const cwd = resolve(__dirname, '..', 'demo')
 

webview/package.json

@@ -26,7 +26,6 @@
     "@vscode/webview-ui-toolkit": "^1.0.0",
     "classnames": "^2.2.6",
     "react": "^17.0.1",
-    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.1",
     "react-table": "^7.7.0",
     "react-vega": "^7.4.4",
@@ -49,7 +48,6 @@
     "@types/jsdom": "^16.2.6",
     "@types/node": "^16.11.8",
     "@types/react": "^17.0.35",
-    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-measure": "^2.0.8",
     "@types/react-table": "^7.7.8",
@@ -66,7 +64,6 @@
     "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^12.3.7",
     "raw-loader": "^4.0.2",
-    "react-beautiful-dnd-test-utils": "^3.2.2",
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",

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

@@ -18,12 +18,6 @@ import {
   MessageFromWebviewType,
   MessageToWebviewType
 } from 'dvc/src/webview/contract'
-import {
-  mockDndElSpacing,
-  mockGetComputedSpacing,
-  makeDnd,
-  DND_DIRECTION_RIGHT
-} from 'react-beautiful-dnd-test-utils'
 import {
   Column,
   ColumnType,
@@ -38,14 +32,15 @@ import { vsCodeApi } from '../../shared/api'
 import {
   commonColumnFields,
   expectHeaders,
-  makeGetDragEl,
   tableData as sortingTableDataFixture
 } from '../../test/sort'
 import {
   CELL_TOOLTIP_DELAY,
   HEADER_TOOLTIP_DELAY
 } from '../../shared/components/tooltip/Tooltip'
 import { getRow } from '../../test/queries'
+import { dragAndDrop } from '../../test/dragDrop'
+import { DragEnterDirection } from '../../shared/components/dragDrop/util'
 
 jest.mock('../../shared/api')
 jest.mock('../../util/styles')
@@ -200,9 +195,7 @@ describe('App', () => {
   })
 
   it('should be able to order a column to the final space after a new column is added', async () => {
-    const view = render(<App />)
-    mockDndElSpacing(view)
-    mockGetComputedSpacing()
+    render(<App />)
     fireEvent(
       window,
       new MessageEvent('message', {
@@ -236,12 +229,10 @@ describe('App', () => {
       })
     )
 
-    await makeDnd({
-      direction: DND_DIRECTION_RIGHT,
-      getByText: view.getByText,
-      getDragEl: makeGetDragEl('B'),
-      positions: 2
-    })
+    const headerB = screen.getByText('B')
+    const headerD = screen.getByText('D')
+
+    dragAndDrop(headerB, headerD, DragEnterDirection.AUTO)
 
     await expectHeaders(['A', 'C', 'D', 'B'])
   })

webview/src/experiments/components/Experiments.tsx

@@ -24,6 +24,7 @@ import buildDynamicColumns from '../util/buildDynamicColumns'
 import { sendMessage } from '../../shared/vscode'
 import { useThemeVariables } from '../../shared/components/theme/Theme'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 
 const DEFAULT_COLUMN_WIDTH = 75
 const MINIMUM_COLUMN_WIDTH = 50
@@ -208,7 +209,11 @@ export const ExperimentsTable: React.FC<{
     return <EmptyState>No Experiments to Display.</EmptyState>
   }
 
-  return <Table instance={instance} tableData={tableData} />
+  return (
+    <DragDropProvider>
+      <Table instance={instance} tableData={tableData} />
+    </DragDropProvider>
+  )
 }
 
 const Experiments: React.FC<{

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

@@ -3,54 +3,50 @@ import cx from 'classnames'
 import { SortDefinition } from 'dvc/src/experiments/model/sortBy'
 import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
-import { DragDropContext, Droppable, Responders } from 'react-beautiful-dnd'
 import { TableHeader } from './TableHeader'
 import styles from './styles.module.scss'
+import {
+  OnDragOver,
+  OnDragStart,
+  OnDrop
+} from '../../../shared/components/dragDrop/DragDropWorkbench'
 
-export const MergedHeaderGroup: React.FC<
-  {
-    headerGroup: HeaderGroup<Experiment>
-    columns: HeaderGroup<Experiment>[]
-    sorts: SortDefinition[]
-    orderedColumns: Column[]
-  } & Responders
-> = ({
+export const MergedHeaderGroups: React.FC<{
+  headerGroup: HeaderGroup<Experiment>
+  columns: HeaderGroup<Experiment>[]
+  sorts: SortDefinition[]
+  orderedColumns: Column[]
+  onDragUpdate: OnDragOver
+  onDragStart: OnDragStart
+  onDragEnd: OnDrop
+}> = ({
   headerGroup,
   sorts,
   columns,
   orderedColumns,
-  onDragStart,
   onDragUpdate,
-  onDragEnd
+  onDragEnd,
+  onDragStart
 }) => {
   return (
-    <DragDropContext
-      onDragStart={onDragStart}
-      onDragUpdate={onDragUpdate}
-      onDragEnd={onDragEnd}
+    <div
+      {...headerGroup.getHeaderGroupProps({
+        className: cx(styles.tr, styles.headerRow)
+      })}
     >
-      <Droppable droppableId="droppable" direction="horizontal">
-        {provided => (
-          <div
-            ref={provided.innerRef}
-            {...headerGroup.getHeaderGroupProps({
-              className: cx(styles.tr, styles.headerRow)
-            })}
-          >
-            {headerGroup.headers.map((column: HeaderGroup<Experiment>, i) => (
-              <TableHeader
-                orderedColumns={orderedColumns}
-                key={column.id}
-                column={column}
-                columns={columns}
-                sorts={sorts}
-                index={i}
-              />
-            ))}
-            <div className={styles.dndPlaceholder}>{provided.placeholder}</div>
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
+      {headerGroup.headers.map((column: HeaderGroup<Experiment>) => (
+        <div key={column.id}>
+          <TableHeader
+            orderedColumns={orderedColumns}
+            column={column}
+            columns={columns}
+            sorts={sorts}
+            onDragOver={onDragUpdate}
+            onDragStart={onDragStart}
+            onDrop={onDragEnd}
+          />
+        </div>
+      ))}
+    </div>
   )
 }