Use Redux for drag and drop state (#1944)

* WIP add redux

* WIP add redux

* Fix sections and zoomedInPlot

* Fix storybook

* Fix lint errors

* Fix some tests

* Fix tests

* Revert demo changed files

* Revert demo changed files

* Revert demo changed files

* Use Redux state for drag and drop

* e Redux for drag and drop state

* Remove clear data action

* Revert changes to experiments

* Revert change to experiments

* Fix comparison table stories

* Fix storybook

Author: sroy3

webview/src/plots/components/Plots.tsx

@@ -10,7 +10,6 @@ import { setZoomedInPlot } from './webviewSlice'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { Modal } from '../../shared/components/modal/Modal'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
-import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { RootState } from '../store'
 
@@ -56,11 +55,9 @@ const PlotsContent = () => {
   return (
     <>
       <Ribbon />
-      <DragDropProvider>
-        {hasTemplateData && <TemplatePlotsWrapper />}
-        {hasComparisonData && <ComparisonTableWrapper />}
-        {hasCheckpointData && <CheckpointPlotsWrapper />}
-      </DragDropProvider>
+      {hasTemplateData && <TemplatePlotsWrapper />}
+      {hasComparisonData && <ComparisonTableWrapper />}
+      {hasCheckpointData && <CheckpointPlotsWrapper />}
 
       {zoomedInPlot?.plot && (
         <Modal

webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx

@@ -26,7 +26,6 @@ import {
 } from '../../../test/dragDrop'
 import { vsCodeApi } from '../../../shared/api'
 import { DragEnterDirection } from '../../../shared/components/dragDrop/util'
-import { DragDropProvider } from '../../../shared/components/dragDrop/DragDropContext'
 import { storeReducers } from '../../store'
 import { webviewInitialState } from '../webviewSlice'
 
@@ -74,9 +73,7 @@ describe('ComparisonTable', () => {
             reducer: storeReducers
           })}
         >
-          <DragDropProvider>
-            <ComparisonTable />
-          </DragDropProvider>
+          <ComparisonTable />
         </Provider>
       ) || {}
     )

webview/src/plots/components/ribbon/Ribbon.tsx

@@ -7,7 +7,6 @@ import { RibbonBlock } from './RibbonBlock'
 import { sendMessage } from '../../../shared/vscode'
 import { IconButton } from '../../../shared/components/button/IconButton'
 import { performOrderedUpdate } from '../../../util/objects'
-
 import { RootState } from '../../store'
 import { Lines, Refresh } from '../../../shared/components/icons'
 

webview/src/plots/components/templatePlots/AddedSection.tsx

@@ -1,10 +1,11 @@
-import React, { DragEvent, useContext } from 'react'
+import React, { DragEvent } from 'react'
+import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { TemplatePlotSection } from 'dvc/src/plots/webview/contract'
 import styles from '../styles.module.scss'
 import { getIDWithoutIndex } from '../../../util/ids'
+import { RootState } from '../../store'
 import { Icon } from '../../../shared/components/Icon'
-import { DragDropContext } from '../../../shared/components/dragDrop/DragDropContext'
 import { GraphLine } from '../../../shared/components/icons'
 
 interface AddedSectionProps {
@@ -24,7 +25,7 @@ export const AddedSection: React.FC<AddedSectionProps> = ({
   closestSection,
   acceptedGroups
 }) => {
-  const { draggedRef } = useContext(DragDropContext)
+  const { draggedRef } = useSelector((state: RootState) => state.dragAndDrop)
   const handleDragLeave = () => {
     setHoveredSection('')
   }

webview/src/plots/store.ts

@@ -3,10 +3,12 @@ import checkpointPlotsReducer from './components/checkpointPlots/checkpointPlots
 import comparisonTableReducer from './components/comparisonTable/comparisonTableSlice'
 import templatePlotsReducer from './components/templatePlots/templatePlotsSlice'
 import webviewReducer from './components/webviewSlice'
+import dragAndDropReducer from '../shared/components/dragDrop/dragDropSlice'
 
 export const storeReducers = {
   checkpoint: checkpointPlotsReducer,
   comparison: comparisonTableReducer,
+  dragAndDrop: dragAndDropReducer,
   template: templatePlotsReducer,
   webview: webviewReducer
 }

webview/src/shared/components/dragDrop/DragDropContainer.tsx

@@ -3,13 +3,14 @@ import React, {
   useEffect,
   useState,
   useRef,
-  useContext,
   DragEventHandler
 } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { DragEnterDirection, getDragEnterDirection } from './util'
-import { DragDropContext, DragDropContextValue } from './DragDropContext'
+import { changeRef } from './dragDropSlice'
 import { getIDIndex, getIDWithoutIndex } from '../../../util/ids'
 import { Any } from '../../../util/objects'
+import { RootState } from '../../../plots/store'
 
 const orderIdxTune = (direction: DragEnterDirection, isAfter: boolean) => {
   if (direction === DragEnterDirection.RIGHT) {
@@ -84,9 +85,9 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   const [draggedOverId, setDraggedOverId] = useState('')
   const [draggedId, setDraggedId] = useState('')
   const [direction, setDirection] = useState(DragEnterDirection.LEFT)
-  const { draggedRef, setDraggedRef } =
-    useContext<DragDropContextValue>(DragDropContext)
+  const { draggedRef } = useSelector((state: RootState) => state.dragAndDrop)
   const draggedOverIdTimeout = useRef<number>(0)
+  const dispatch = useDispatch()
 
   const cleanup = () => {
     setDraggedOverId('')
@@ -119,11 +120,13 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     e.dataTransfer.setData('group', group)
     e.dataTransfer.effectAllowed = 'move'
     e.dataTransfer.dropEffect = 'move'
-    setDraggedRef?.({
-      group,
-      itemId: id,
-      itemIndex
-    })
+    dispatch(
+      changeRef({
+        group,
+        itemId: id,
+        itemIndex
+      })
+    )
     draggedOverIdTimeout.current = window.setTimeout(() => {
       setDraggedId(id)
       setDraggedOverId(order[toIdx])
@@ -143,7 +146,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     newOrder.splice(droppedIndex, 0, dragged)
 
     setOrder(newOrder)
-    setDraggedRef?.(undefined)
+    dispatch(changeRef(undefined))
 
     onDrop?.(oldDraggedId, e.dataTransfer.getData('group'), group, droppedIndex)
   }

webview/src/shared/components/dragDrop/dragDropSlice.ts

@@ -0,0 +1,33 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type DraggedInfo =
+  | {
+      itemIndex: string
+      itemId: string
+      group?: string
+    }
+  | undefined
+export interface DragDropState {
+  draggedRef: DraggedInfo
+}
+
+export const dragDropInitialState: DragDropState = {
+  draggedRef: undefined
+}
+
+export const dragDropSlice = createSlice({
+  initialState: dragDropInitialState,
+  name: 'dragAndDrop',
+  reducers: {
+    changeRef: (state, action: PayloadAction<DraggedInfo>) => {
+      return {
+        ...state,
+        draggedRef: action.payload
+      }
+    }
+  }
+})
+
+export const { changeRef } = dragDropSlice.actions
+
+export default dragDropSlice.reducer

webview/src/stories/ComparisonTable.stories.tsx

@@ -13,13 +13,9 @@ import {
 import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
 import { ComparisonTable } from '../plots/components/comparisonTable/ComparisonTable'
 import { WebviewWrapper } from '../shared/components/webviewWrapper/WebviewWrapper'
-import { DragDropProvider } from '../shared/components/dragDrop/DragDropContext'
-import comparisonTableReducer, {
-  update
-} from '../plots/components/comparisonTable/comparisonTableSlice'
-import webviewReducer, {
-  updateSelectedRevisions
-} from '../plots/components/webviewSlice'
+import { update } from '../plots/components/comparisonTable/comparisonTableSlice'
+import { updateSelectedRevisions } from '../plots/components/webviewSlice'
+import { storeReducers } from '../plots/store'
 
 const MockedState: React.FC<{
   data: PlotsComparisonData
@@ -40,10 +36,7 @@ export default {
 
 const Template: Story = ({ plots, revisions }) => {
   const store = configureStore({
-    reducer: {
-      comparison: comparisonTableReducer,
-      webview: webviewReducer
-    }
+    reducer: storeReducers
   })
   return (
     <Provider store={store}>
@@ -55,9 +48,7 @@ const Template: Story = ({ plots, revisions }) => {
         selectedRevisions={revisions}
       >
         <WebviewWrapper>
-          <DragDropProvider>
-            <ComparisonTable />
-          </DragDropProvider>
+          <ComparisonTable />
         </WebviewWrapper>
       </MockedState>
     </Provider>