Upgrade React to v18 (#1965)

mattseddon · web-flow · commit 43d2cff3c061 · 2022-07-04T08:24:16.000+10:00
* upgrade React to v18

* use addon-interactions

* remove flaky visual test
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -1,4 +1,7 @@
 module.exports = {
-  '**/*.{js,ts,tsx}': ['eslint --fix', 'jest --bail --findRelatedTests'],
+  '**/*.{js,ts,tsx}': [
+    'eslint --fix',
+    'jest --bail --findRelatedTests --passWithNoTests'
+  ],
   '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}': 'prettier --write'
 }
diff --git a/package.json b/package.json
@@ -63,9 +63,10 @@
     "prettier-config-standard": "^5.0.0",
     "ts-node": "^10.8.1",
     "turbo": "^1.3.1",
-    "typescript": "^4.6.3"
+    "typescript": "^4.7.4"
   },
   "resolutions": {
-    "trim": "0.0.3"
+    "trim": "0.0.3",
+    "@types/react": "^18.0.14"
   }
 }
diff --git a/webview/.storybook/main.ts b/webview/.storybook/main.ts
@@ -5,7 +5,9 @@ export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../extension/src/test/fixtures/plotsDiff/staticImages'],
   addons: [
+    'storybook-addon-designs',
     '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
     {
       name: '@storybook/preset-scss',
       options: {
@@ -16,8 +18,7 @@ export default {
           }
         }
       }
-    },
-    'storybook-addon-designs'
+    }
   ],
   core: {
     builder: 'webpack5'
diff --git a/webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx b/webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 type MockButtonProps = {
   onClick: () => void
-  children: React.ReactChildren
+  children: React.ReactNode
 }
 
 export const VSCodeButton: React.FC<MockButtonProps> = ({
diff --git a/webview/package.json b/webview/package.json
@@ -28,37 +28,38 @@
     "classnames": "^2.2.6",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "react-table": "^7.7.0",
+    "react-table": "^7.8.0",
     "react-vega": "^7.4.4",
     "react-virtualized": "^9.22.3",
     "vega": "^5.21.0",
     "vega-lite": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addons": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.8",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.8",
+    "@storybook/react": "^6.5.9",
     "@svgr/cli": "^6.0.0",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^27.4.1",
     "@types/jsdom": "^16.2.6",
     "@types/node": "^16.11.8",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-measure": "^2.0.8",
-    "@types/react-table": "^7.7.8",
+    "@types/react-table": "^7.7.12",
     "@types/react-virtualized": "^9.21.21",
     "@types/webpack": "^5.28.0",
     "@welldone-software/why-did-you-render": "^7.0.1",
-    "chromatic": "^6.5.3",
+    "chromatic": "^6.7.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
diff --git a/webview/src/experiments/components/table/Cell.tsx b/webview/src/experiments/components/table/Cell.tsx
@@ -97,6 +97,7 @@ export const CellWrapper: React.FC<
   CellProp & {
     changes?: string[]
     cellId: string
+    children?: React.ReactNode
   }
 > = ({ cell, cellId, changes }) => (
   <div
diff --git a/webview/src/experiments/components/table/RowSelectionContext.tsx b/webview/src/experiments/components/table/RowSelectionContext.tsx
@@ -13,7 +13,9 @@ export const RowSelectionContext = createContext<RowSelectionContextValue>({
   toggleRowSelected: undefined
 })
 
-export const RowSelectionProvider: React.FC = ({ children }) => {
+export const RowSelectionProvider: React.FC<{ children: React.ReactNode }> = ({
+  children
+}) => {
   const [selectedRows, setSelectedRows] = useState<
     Record<string, RowProp | undefined>
   >({})
diff --git a/webview/src/experiments/components/table/Table.test.tsx b/webview/src/experiments/components/table/Table.test.tsx
@@ -318,25 +318,36 @@ describe('Table', () => {
     })
 
     it('should resize columns and persist new state when a separator is clicked and dragged', async () => {
+      const columnWidths = {
+        id: 333
+      }
+
       const tableDataWithColumnSetting: TableData = {
         ...sortingTableDataFixture,
-        columnWidths: {
-          id: 333
-        }
+        columnWidths
       }
       render(<ExperimentsTable tableData={tableDataWithColumnSetting} />)
       const [experimentColumnResizeHandle] = await screen.findAllByRole(
         'separator'
       )
 
       fireEvent.mouseDown(experimentColumnResizeHandle, {
-        bubbles: true,
-        clientX: 0
+        bubbles: true
+      })
+      fireEvent.mouseUp(experimentColumnResizeHandle)
+
+      expect(mockedPostMessage).toBeCalledWith({
+        payload: { id: 'id', width: 333 },
+        type: MessageFromWebviewType.RESIZE_COLUMN
       })
-      fireEvent.mouseMove(document, {
-        bubbles: true,
-        clientX: 20
+      mockedPostMessage.mockReset()
+
+      fireEvent.mouseDown(experimentColumnResizeHandle, {
+        bubbles: true
       })
+
+      columnWidths.id = 353
+
       fireEvent.mouseUp(experimentColumnResizeHandle)
 
       expect(mockedPostMessage).toBeCalledWith({
diff --git a/webview/src/experiments/react-table-config.d.ts b/webview/src/experiments/react-table-config.d.ts
@@ -47,6 +47,7 @@ declare module 'react-table' {
 
   export interface Cell {
     isPlaceholder: boolean
+    children?: React.ReactNode
   }
 
   export interface Row<
diff --git a/webview/src/experiments/util/buildDynamicColumns.tsx b/webview/src/experiments/util/buildDynamicColumns.tsx
@@ -107,16 +107,15 @@ const buildDynamicColumns = (
 
       const childColumns = buildDynamicColumns(properties, path)
 
-      const column: ColumnGroup<Experiment> | TableColumn<Experiment> = {
+      return {
         Cell,
         Header,
         accessor: pathArray && buildAccessor(pathArray),
         columns: childColumns.length > 0 ? childColumns : undefined,
         group: type,
         id: path,
         name: label
-      }
-      return column
+      } as ColumnGroup<Experiment> | TableColumn<Experiment>
     })
 
 const findMaxDepth = (columns: ColumnGroup<Experiment>[], depth = 1): number =>
diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
@@ -6,12 +6,12 @@ import { configureStore } from '@reduxjs/toolkit'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
-  render,
   cleanup,
-  screen,
+  createEvent,
   fireEvent,
-  within,
-  createEvent
+  render,
+  screen,
+  within
 } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
@@ -566,6 +566,7 @@ describe('App', () => {
     })
 
     plots = screen.getAllByTestId(/summary\.json/)
+
     expect(plots.map(plot => plot.id)).toStrictEqual(newPlotOrder)
 
     fireEvent.mouseEnter(pickerButton)
@@ -769,8 +770,13 @@ describe('App', () => {
 
     expect(topDropIcon).not.toBeInTheDocument()
 
-    multiViewPlot.dispatchEvent(createBubbledEvent('dragstart'))
-    topSection.dispatchEvent(createBubbledEvent('dragenter'))
+    act(() => {
+      multiViewPlot.dispatchEvent(createBubbledEvent('dragstart'))
+    })
+
+    act(() => {
+      topSection.dispatchEvent(createBubbledEvent('dragenter'))
+    })
 
     topDropIcon = screen.queryByTestId(`${NewSectionBlock.TOP}_drop-icon`)
 
diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
@@ -28,6 +28,7 @@ export interface PlotsContainerProps extends CommonPlotsContainerProps {
   title: string
   currentSize: PlotSize
   menu?: PlotsPickerProps
+  children: React.ReactNode
 }
 
 export const SectionDescription = {
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableHeader.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableHeader.tsx
@@ -8,6 +8,7 @@ export interface ComparisonTableHeaderProps {
   displayColor: string
   onClicked: () => void
   isPinned?: boolean
+  children?: React.ReactNode
 }
 
 export const ComparisonTableHeader: React.FC<ComparisonTableHeaderProps> = ({
diff --git a/webview/src/shared/components/copyButton/CopyButton.test.tsx b/webview/src/shared/components/copyButton/CopyButton.test.tsx
@@ -3,14 +3,7 @@
  */
 /* eslint-disable sonarjs/no-identical-functions */
 import React from 'react'
-import {
-  act,
-  cleanup,
-  fireEvent,
-  render,
-  screen,
-  waitFor
-} from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { CopyButton } from './CopyButton'
 
@@ -21,10 +14,13 @@ Object.assign(navigator, {
   }
 })
 
-jest.useFakeTimers()
+beforeEach(() => {
+  jest.useFakeTimers()
+})
 
 afterEach(() => {
   cleanup()
+  jest.useRealTimers()
 })
 
 describe('CopyButton', () => {
@@ -38,11 +34,14 @@ describe('CopyButton', () => {
     render(<CopyButton value={exampleCopyText} tooltip={defaultStateTitle} />)
     const copyButtonElement = screen.getByTitle(defaultStateTitle)
 
+    fireEvent.mouseEnter(copyButtonElement)
+
     fireEvent.click(copyButtonElement, {
       bubbles: true,
       cancelable: true
     })
-    await waitFor(() => screen.findByTitle(successStateTitle))
+
+    await screen.findByTitle(successStateTitle)
 
     expect(mockWriteText).toBeCalledWith(exampleCopyText)
     act(() => {
@@ -81,9 +80,12 @@ describe('CopyButton', () => {
       bubbles: true,
       cancelable: true
     })
-    await screen.findByTitle(successStateTitle)
 
-    jest.advanceTimersByTime(500)
+    act(() => {
+      jest.advanceTimersByTime(990)
+    })
+
+    await screen.findByTitle(successStateTitle)
 
     // Click again while still in success state
     mockWriteText.mockResolvedValueOnce(undefined)
@@ -95,7 +97,9 @@ describe('CopyButton', () => {
     await screen.findByTitle(successStateTitle)
 
     // Ensure state hasn't returned to default after it would have from the first click
-    jest.advanceTimersByTime(600)
+    act(() => {
+      jest.advanceTimersByTime(600)
+    })
     expect(screen.getByTitle(successStateTitle)).toBeInTheDocument()
   })
 })
diff --git a/webview/src/shared/components/dragDrop/DragDropContext.tsx b/webview/src/shared/components/dragDrop/DragDropContext.tsx
@@ -33,7 +33,13 @@ export const DragDropContext = createContext<DragDropContextValue>({
   setGroupState: undefined
 })
 
-export const DragDropProvider: React.FC = ({ children }) => {
+type DragDropProviderProps = {
+  children: React.ReactNode
+}
+
+export const DragDropProvider: React.FC<DragDropProviderProps> = ({
+  children
+}) => {
   const [draggedRef, setDraggedRef] = useState<DraggedInfo>(undefined)
 
   const [groupStates, setGroupStates] = useState<GroupStates>({})
diff --git a/webview/src/shared/components/emptyState/EmptyState.tsx b/webview/src/shared/components/emptyState/EmptyState.tsx
@@ -4,6 +4,7 @@ import styles from './styles.module.scss'
 
 interface EmptyStateProps {
   isFullScreen?: boolean
+  children: React.ReactNode
 }
 
 export const EmptyState: React.FC<EmptyStateProps> = ({
diff --git a/webview/src/shared/components/modal/Modal.tsx b/webview/src/shared/components/modal/Modal.tsx
@@ -5,6 +5,7 @@ import { Close } from '../icons'
 
 interface ModalProps {
   onClose: () => void
+  children?: React.ReactNode
 }
 
 export const Modal: React.FC<ModalProps> = ({ onClose, children }) => {
diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import { configureStore } from '@reduxjs/toolkit'
-import { fireEvent, within } from '@testing-library/react'
+import { within } from '@testing-library/react'
 import React from 'react'
 import { Provider, useDispatch } from 'react-redux'
 import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions'
@@ -20,6 +20,7 @@ import { storeReducers } from '../plots/store'
 const MockedState: React.FC<{
   data: PlotsComparisonData
   selectedRevisions: Revision[]
+  children: React.ReactNode
 }> = ({ children, data, selectedRevisions }) => {
   const dispatch = useDispatch()
   dispatch(update(data))
@@ -66,7 +67,7 @@ WithPinnedColumn.play = async ({ canvasElement }) => {
   const mainHeader = await canvas.findByTestId('main-header')
   const pin = within(mainHeader).getByRole('button')
 
-  fireEvent.click(pin)
+  pin.click()
 }
 
 const removeSingleImage = (
diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx
diff --git a/webview/src/test/dragDrop.ts b/webview/src/test/dragDrop.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`module.exports = {`
`2`		`- '*/.{js,ts,tsx}': ['eslint --fix', 'jest --bail --findRelatedTests'],`
	`2`	`+ '*/.{js,ts,tsx}': [`
	`3`	`+ 'eslint --fix',`
	`4`	`+ 'jest --bail --findRelatedTests --passWithNoTests'`
	`5`	`+ ],`
`3`	`6`	`'*/.{js,json,jsx,md,scss,ts,tsx,yaml,yml}': 'prettier --write'`
`4`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,9 +63,10 @@`
`63`	`63`	`"prettier-config-standard": "^5.0.0",`
`64`	`64`	`"ts-node": "^10.8.1",`
`65`	`65`	`"turbo": "^1.3.1",`
`66`		`- "typescript": "^4.6.3"`
	`66`	`+ "typescript": "^4.7.4"`
`67`	`67`	`},`
`68`	`68`	`"resolutions": {`
`69`		`- "trim": "0.0.3"`
	`69`	`+ "trim": "0.0.3",`
	`70`	`+ "@types/react": "^18.0.14"`
`70`	`71`	`}`
`71`	`72`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,9 @@ export default {`
`5`	`5`	`stories: ['../src/*/.stories.mdx', '../src/*/.stories.@(js\|jsx\|ts\|tsx)'],`
`6`	`6`	`staticDirs: ['../../extension/src/test/fixtures/plotsDiff/staticImages'],`
`7`	`7`	`addons: [`
	`8`	`+ 'storybook-addon-designs',`
`8`	`9`	`'@storybook/addon-essentials',`
	`10`	`+ '@storybook/addon-interactions',`
`9`	`11`	`{`
`10`	`12`	`name: '@storybook/preset-scss',`
`11`	`13`	`options: {`
`@@ -16,8 +18,7 @@ export default {`
`16`	`18`	`}`
`17`	`19`	`}`
`18`	`20`	`}`
`19`		`- },`
`20`		`- 'storybook-addon-designs'`
	`21`	`+ }`
`21`	`22`	`],`
`22`	`23`	`core: {`
`23`	`24`	`builder: 'webpack5'`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react'`
`3`	`3`
`4`	`4`	`type MockButtonProps = {`
`5`	`5`	`onClick: () => void`
`6`		`- children: React.ReactChildren`
	`6`	`+ children: React.ReactNode`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export const VSCodeButton: React.FC<MockButtonProps> = ({`
Original file line number	Diff line number	Diff line change
`@@ -97,6 +97,7 @@ export const CellWrapper: React.FC<`
`97`	`97`	`CellProp & {`
`98`	`98`	`changes?: string[]`
`99`	`99`	`cellId: string`
	`100`	`+ children?: React.ReactNode`
`100`	`101`	`}`
`101`	`102`	`> = ({ cell, cellId, changes }) => (`
`102`	`103`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,7 @@ declare module 'react-table' {`
`47`	`47`
`48`	`48`	`export interface Cell {`
`49`	`49`	`isPlaceholder: boolean`
	`50`	`+ children?: React.ReactNode`
`50`	`51`	`}`
`51`	`52`
`52`	`53`	`export interface Row<`