Remove clear data action (#1945)

* Remove clear data action

* Fix comparison table stories

Author: sroy3

webview/src/plots/actions.ts

@@ -6,8 +6,6 @@ import {
   PlotSize,
   Section
 } from 'dvc/src/plots/webview/contract'
-import { clearData } from '../../actions'
-import { ReducerName } from '../../constants'
 import {
   addCheckpointPlotsWithSnapshots,
   removeCheckpointPlots
@@ -31,17 +29,8 @@ export const checkpointPlotsInitialState: CheckpointPlotsState = {
 }
 
 export const checkpointPlotsSlice = createSlice({
-  extraReducers: builder => {
-    builder
-      .addCase(clearData, (_, action) => {
-        if (!action.payload || action.payload === ReducerName.CHECKPOINT) {
-          return { ...checkpointPlotsInitialState }
-        }
-      })
-      .addDefaultCase(() => {})
-  },
   initialState: checkpointPlotsInitialState,
-  name: ReducerName.CHECKPOINT,
+  name: 'checkpoint',
   reducers: {
     changeSize: (state, action: PayloadAction<PlotSize>) => {
       state.size = action.payload

webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts

@@ -6,8 +6,6 @@ import {
   PlotSize,
   Section
 } from 'dvc/src/plots/webview/contract'
-import { clearData } from '../../actions'
-import { ReducerName } from '../../constants'
 
 export interface ComparisonTableState extends PlotsComparisonData {
   isCollapsed: boolean
@@ -22,17 +20,8 @@ export const comparisonTableInitialState: ComparisonTableState = {
 }
 
 export const comparisonTableSlice = createSlice({
-  extraReducers: builder => {
-    builder
-      .addCase(clearData, (_, action) => {
-        if (!action.payload || action.payload === ReducerName.COMPARISON) {
-          return { ...comparisonTableInitialState }
-        }
-      })
-      .addDefaultCase(() => {})
-  },
   initialState: comparisonTableInitialState,
-  name: ReducerName.COMPARISON,
+  name: 'comparison',
   reducers: {
     changeSize: (state, action: PayloadAction<PlotSize>) => {
       state.size = action.payload

webview/src/plots/components/comparisonTable/comparisonTableSlice.ts

@@ -6,8 +6,6 @@ import {
   Section,
   TemplatePlotsData
 } from 'dvc/src/plots/webview/contract'
-import { clearData } from '../../actions'
-import { ReducerName } from '../../constants'
 import { plotDataStore } from '../plotDataStore'
 
 export interface TemplatePlotsState extends Omit<TemplatePlotsData, 'plots'> {
@@ -24,17 +22,8 @@ export const templatePlotsInitialState: TemplatePlotsState = {
 }
 
 export const templatePlotsSlice = createSlice({
-  extraReducers: builder => {
-    builder
-      .addCase(clearData, (_, action) => {
-        if (!action.payload || action.payload === ReducerName.TEMPLATE) {
-          return { ...templatePlotsInitialState }
-        }
-      })
-      .addDefaultCase(() => {})
-  },
   initialState: templatePlotsInitialState,
-  name: ReducerName.TEMPLATE,
+  name: 'template',
   reducers: {
     changeSize: (state, action: PayloadAction<PlotSize>) => {
       state.size = action.payload

webview/src/plots/components/templatePlots/templatePlotsSlice.ts

@@ -1,8 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Revision } from 'dvc/src/plots/webview/contract'
 import { VegaProps } from 'react-vega/lib/Vega'
-import { clearData } from '../actions'
-import { ReducerName } from '../constants'
 
 type ZoomedInPlotState = {
   plot: VegaProps | undefined
@@ -29,17 +27,8 @@ export const webviewInitialState: WebviewState = {
 }
 
 export const webviewSlice = createSlice({
-  extraReducers: builder => {
-    builder
-      .addCase(clearData, (_, action) => {
-        if (!action.payload || action.payload === ReducerName.WEBVIEW) {
-          return { ...webviewInitialState }
-        }
-      })
-      .addDefaultCase(() => {})
-  },
   initialState: webviewInitialState,
-  name: ReducerName.WEBVIEW,
+  name: 'webview',
   reducers: {
     initialize: state => {
       state.hasData = true

webview/src/plots/components/webviewSlice.ts

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
+import { configureStore } from '@reduxjs/toolkit'
 import { fireEvent, within } from '@testing-library/react'
 import React from 'react'
 import { Provider, useDispatch } from 'react-redux'
@@ -13,18 +14,18 @@ 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 { clearData } from '../plots/actions'
-import { ReducerName } from '../plots/constants'
-import { update } from '../plots/components/comparisonTable/comparisonTableSlice'
-import { store } from '../plots/store'
-import { updateSelectedRevisions } from '../plots/components/webviewSlice'
+import comparisonTableReducer, {
+  update
+} from '../plots/components/comparisonTable/comparisonTableSlice'
+import webviewReducer, {
+  updateSelectedRevisions
+} from '../plots/components/webviewSlice'
 
 const MockedState: React.FC<{
   data: PlotsComparisonData
   selectedRevisions: Revision[]
 }> = ({ children, data, selectedRevisions }) => {
   const dispatch = useDispatch()
-  dispatch(clearData(ReducerName.COMPARISON))
   dispatch(update(data))
   dispatch(updateSelectedRevisions(selectedRevisions))
 
@@ -38,6 +39,12 @@ export default {
 } as Meta
 
 const Template: Story = ({ plots, revisions }) => {
+  const store = configureStore({
+    reducer: {
+      comparison: comparisonTableReducer,
+      webview: webviewReducer
+    }
+  })
   return (
     <Provider store={store}>
       <MockedState

webview/src/plots/constants.ts

@@ -1,3 +1,4 @@
+import { configureStore } from '@reduxjs/toolkit'
 import React from 'react'
 import { Provider, useDispatch } from 'react-redux'
 import { Story, Meta } from '@storybook/react/types-6-0'
@@ -21,14 +22,11 @@ import { Plots } from '../plots/components/Plots'
 import './test-vscode-styles.scss'
 import '../shared/style.scss'
 import '../plots/components/styles.module.scss'
-import { store } from '../plots/store'
 import { feedStore } from '../plots/components/App'
-import { clearData } from '../plots/actions'
+import { storeReducers } from '../plots/store'
 
 const MockedState: React.FC<{ data: PlotsData }> = ({ children, data }) => {
   const dispatch = useDispatch()
-  dispatch(clearData())
-
   const message = { data, type: MessageToWebviewType.SET_DATA }
   feedStore(message, dispatch)
 
@@ -54,6 +52,7 @@ export default {
 const Template: Story<{
   data?: PlotsData
 }> = ({ data }) => {
+  const store = configureStore({ reducer: storeReducers })
   return (
     <Provider store={store}>
       <MockedState data={data}>