Change the style of the comparison drag and drop feedback (#2077)

* Change the drag and drop feedback for the comparison table * Fix tests * Add tests * mend * Remove unused style * Try to fix windows tests * Change the style of the dragged column in the comparison table * Fix test
iterative · Jul 22, 2022 · ddece56 · ddece56
1 parent 2922378
commit ddece56
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 6 deletions.
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import { Revision } from 'dvc/src/plots/webview/contract'
 import cx from 'classnames'
+import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
 import { DropTarget } from './DropTarget'
 import { ComparisonTableHeader } from './ComparisonTableHeader'
 import { DragDropContainer } from '../../../shared/components/dragDrop/DragDropContainer'
+import { RootState } from '../../store'
 
 export type ComparisonTableColumn = Revision
 
@@ -21,14 +23,19 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
   setColumnsOrder,
   setPinnedColumn
 }) => {
+  const draggedId = useSelector(
+    (state: RootState) => state.dragAndDrop.draggedRef?.itemId
+  )
+
   const items = columns.map(({ revision, displayColor, group }) => {
     const isPinned = revision === pinnedColumn
     return (
       <th
         key={revision}
         id={revision}
         className={cx(styles.comparisonTableHeader, {
-          [styles.pinnedColumnHeader]: isPinned
+          [styles.pinnedColumnHeader]: isPinned,
+          [styles.draggedColumn]: draggedId === revision
         })}
       >
         <ComparisonTableHeader

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.test.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.test.tsx
@@ -1,16 +1,19 @@
 /**
  * @jest-environment jsdom
  */
+import { configureStore } from '@reduxjs/toolkit'
 import { join } from 'dvc/src/test/util/path'
 import React from 'react'
 import { render, cleanup, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import comparisonPlotsFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
+import { Provider } from 'react-redux'
 import {
   ComparisonTableRow,
   ComparisonTableRowProps
 } from './ComparisonTableRow'
 import styles from '../styles.module.scss'
+import { storeReducers } from '../../store'
 
 jest.mock('../../../shared/api')
 
@@ -32,9 +35,15 @@ describe('ComparisonTableRow', () => {
 
   const renderRow = (props = basicProps) =>
     render(
-      <table>
-        <ComparisonTableRow {...props} />
-      </table>
+      <Provider
+        store={configureStore({
+          reducer: storeReducers
+        })}
+      >
+        <table>
+          <ComparisonTableRow {...props} />
+        </table>
+      </Provider>
     )
 
   it('should render a row toggler', () => {

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx
@@ -2,11 +2,13 @@ import { ComparisonPlot } from 'dvc/src/plots/webview/contract'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React, { useState } from 'react'
 import cx from 'classnames'
+import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
 import { Icon } from '../../../shared/components/Icon'
 import { RefreshButton } from '../../../shared/components/button/RefreshButton'
 import { sendMessage } from '../../../shared/vscode'
 import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
+import { RootState } from '../../store'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -21,6 +23,9 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
   nbColumns,
   pinnedColumn
 }) => {
+  const draggedId = useSelector(
+    (state: RootState) => state.dragAndDrop.draggedRef?.itemId
+  )
   const [isShown, setIsShown] = useState(true)
 
   const toggleIsShownState = () => setIsShown(!isShown)
@@ -46,7 +51,8 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
               key={path + plot.revision}
               className={cx({
                 [styles.pinnedColumnCell]: isPinned,
-                [styles.missing]: isShown && missing
+                [styles.missing]: isShown && missing,
+                [styles.draggedColumn]: draggedId === plot.revision
               })}
             >
               <div

diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -163,3 +163,7 @@ $gap: 4px;
   height: 100%;
   border-right: 2px dashed $accent-color;
 }
+
+.draggedColumn {
+  opacity: 0.4;
+}
diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -157,6 +157,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
       setDraggedId('')
     }, 0)
     if (e.dataTransfer.getData('itemId') === draggedOverId) {
+      dispatch(changeRef(undefined))
       return
     }
     const newOrder = [...order]
@@ -203,12 +204,17 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     }
   }
 
+  const handleDragEnd = () => {
+    dispatch(changeRef(undefined))
+    cleanup()
+  }
+
   const buildItem = (id: string, draggable: JSX.Element) => (
     <draggable.type
       key={draggable.key}
       {...draggable.props}
       onDragStart={handleDragStart}
-      onDragEnd={cleanup}
+      onDragEnd={handleDragEnd}
       onDragOver={handleDragOver}
       onDragEnter={handleDragEnter}
       onDrop={handleOnDrop}