Restore original behavior for trends and data series

iterative · Jun 22, 2022 · ba9c284 · ba9c284
1 parent a67b9b9
commit ba9c284
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 13 deletions.
diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
@@ -859,7 +859,7 @@ describe('App', () => {
     const target = screen.getByTestId('drop-target')
 
     // eslint-disable-next-line testing-library/no-node-access
-    expect(target.nextElementSibling?.id).toStrictEqual(plots[1].id)
+    expect(target.nextElementSibling?.id).toStrictEqual(plots[0].id)
   })
 
   it('should show a drop target after a plot on drag enter from the right', () => {
@@ -874,7 +874,7 @@ describe('App', () => {
     const target = screen.getByTestId('drop-target')
 
     // eslint-disable-next-line testing-library/no-node-access
-    expect(target.previousElementSibling?.id).toStrictEqual(plots[0].id)
+    expect(target.previousElementSibling?.id).toStrictEqual(plots[1].id)
   })
 
   it('should hide the plot being dragged from the list', () => {

diff --git a/webview/src/plots/components/DropTarget.tsx b/webview/src/plots/components/DropTarget.tsx
@@ -7,7 +7,7 @@ export const DropTarget: React.FC = () => (
   <div
     data-testid="plot_drop-target"
     id="plot-drop-target"
-    className={cx(styles.plot, styles.dropTarget)}
+    className={cx(styles.plot, styles.dropTarget, styles.borderedDropTarget)}
   >
     <Icon
       icon={AllIcons.GRAPH_LINE}

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx
@@ -285,7 +285,9 @@ describe('ComparisonTable', () => {
 
       expect(headers).toStrictEqual(namedRevisions)
 
-      dragAndDrop(startingNode, endingNode)
+      dragAndDrop(startingNode, endingNode, DragEnterDirection.LEFT, {
+        hideDragged: false
+      })
 
       headers = getHeaders().map(header => header.textContent)
 
@@ -331,7 +333,9 @@ describe('ComparisonTable', () => {
 
       expect(headers).toStrictEqual(expectedOrder)
 
-      dragAndDrop(startingNode, endingNode)
+      dragAndDrop(startingNode, endingNode, DragEnterDirection.LEFT, {
+        hideDragged: false
+      })
 
       expect(headers).toStrictEqual(expectedOrder)
     })

diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
@@ -281,6 +281,10 @@ $gap: 20px;
   }
 }
 
+.borderedDropTarget {
+  border: 3px dashed $accent-color;
+}
+
 .dropTargetIndicator {
   position: absolute;
   top: 2px;

diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -129,6 +129,10 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     })
     draggedOverIdTimeout.current = window.setTimeout(() => {
       setDraggedId(id)
+
+      if (hideDragged) {
+        setDraggedOverId(order[toIdx])
+      }
     }, 0)
   }
 
@@ -223,10 +227,18 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     const item = id && buildItem(id, draggable)
 
     if (id === draggedOverId) {
-      return makeTarget(dropTarget, handleDragOver, handleOnDrop, id, {
+      const target = makeTarget(dropTarget, handleDragOver, handleOnDrop, id, {
         children: draggable,
         direction
       })
+
+      if (hideDragged) {
+        return direction === DragEnterDirection.RIGHT
+          ? [item, target]
+          : [target, item]
+      } else {
+        return target
+      }
     }
 
     return item

diff --git a/webview/src/test/dragDrop.ts b/webview/src/test/dragDrop.ts
@@ -59,21 +59,21 @@ export const dragAndDrop = (
   startingNode: HTMLElement,
   endingNode: HTMLElement,
   direction: DragDropUtils.DragEnterDirection = DragDropUtils.DragEnterDirection
-    .LEFT
+    .LEFT,
+  options?: Partial<{ hideDragged: boolean }>
 ) => {
+  const { hideDragged } = { hideDragged: true, ...options }
   dragEnter(startingNode, endingNode, direction)
 
   let targetElement: HTMLElement
 
-  try {
-    targetElement = screen.getByTestId('drop-target')
-  } catch (e) {
+  if (hideDragged) {
     targetElement = endingNode
+  } else {
+    targetElement = screen.getByTestId('drop-target')
+    dragOver(targetElement, direction)
   }
 
-  dragOver(endingNode, direction)
-  dragOver(targetElement, direction)
-
   jest.useFakeTimers()
 
   targetElement.dispatchEvent(createBubbledEvent('drop'))