fix(app,labware-library): Upgrade to react-router 5 and fix imports (#…

…4084)

app/package.json

@@ -25,7 +25,7 @@
     "@opentrons/shared-data": "3.12.0",
     "@thi.ng/paths": "^1.6.5",
     "classnames": "^2.2.5",
-    "connected-react-router": "^6.4.0",
+    "connected-react-router": "^6.5.2",
     "events": "^3.0.0",
     "formik": "^1.3.1",
     "history": "^4.7.2",
@@ -37,8 +37,7 @@
     "react-dom": "^16.8.6",
     "react-hot-loader": "^3.0.0-beta.7",
     "react-redux": "^7.1.0",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^5.0.1",
     "redux": "^4.0.1",
     "redux-observable": "^1.1.0",
     "redux-thunk": "^2.3.0",

app/src/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Switch, Route, Redirect } from 'react-router'
+import { Switch, Route, Redirect } from 'react-router-dom'
 
 import NavBar from './nav-bar'
 

app/src/components/AppSettings/AdvancedSettingsCard.js

@@ -19,7 +19,7 @@ import { Card } from '@opentrons/components'
 import { LabeledToggle, LabeledSelect, LabeledButton } from '../controls'
 import AddManualIp from './AddManualIp'
 
-import type { ContextRouter } from 'react-router'
+import type { ContextRouter } from 'react-router-dom'
 import type { DropdownOption } from '@opentrons/components'
 import type { State, Dispatch } from '../../types'
 import type { UpdateChannel } from '../../config/types'

app/src/components/CalibrateDeck/index.js

@@ -2,17 +2,10 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { push, goBack } from 'connected-react-router'
-import { Switch, Route, withRouter } from 'react-router'
+import { Switch, Route, withRouter } from 'react-router-dom'
 
 import type { State, Dispatch } from '../../types'
-import type {
-  WithRouterOP,
-  OP,
-  SP,
-  DP,
-  CalibrateDeckProps,
-  CalibrationStep,
-} from './types'
+import type { OP, SP, DP, CalibrateDeckProps, CalibrationStep } from './types'
 
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import { chainActions } from '../../util'
@@ -41,7 +34,7 @@ const BAD_PIPETTE_ERROR = 'Unexpected pipette response from robot'
 const ERROR_DESCRIPTION =
   'An unexpected error has cleared your deck calibration progress, please try again.'
 
-export default withRouter<WithRouterOP>(
+export default withRouter<_, _>(
   connect<CalibrateDeckProps, OP, SP, _, _, _>(
     makeMapStateToProps,
     mapDispatchToProps

app/src/components/CalibrateDeck/types.js

@@ -1,5 +1,5 @@
 // @flow
-import type { ContextRouter } from 'react-router'
+import type { ContextRouter } from 'react-router-dom'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
 import type { RobotService, Mount } from '../../robot'
 import type {
@@ -10,14 +10,10 @@ import type { Jog } from '../JogControls'
 
 export type CalibrationStep = '1' | '2' | '3' | '4' | '5' | '6'
 
-export type WithRouterOP = {|
-  robot: RobotService,
-  parentUrl: string,
-|}
-
 export type OP = {|
   ...ContextRouter,
-  ...WithRouterOP,
+  robot: RobotService,
+  parentUrl: string,
 |}
 
 export type SP = {|

app/src/components/CalibrateLabware/index.js

@@ -1,15 +1,15 @@
 // @flow
 // info panel and controls for labware calibration page
 import * as React from 'react'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import type { Labware } from '../../robot'
 import DeckMap from '../DeckMap'
 import InfoBox from './InfoBox'
 import styles from './styles.css'
 
 type Props = { labware: ?Labware }
 
-export default withRouter<$Exact<Props>>(CalibrateLabware)
+export default withRouter<$Exact<Props>, _>(CalibrateLabware)
 
 function CalibrateLabware(props: Props) {
   return (

app/src/components/CalibratePanel/LabwareList.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 
 import { TitledList } from '@opentrons/components'
 import LabwareListItem from './LabwareListItem'
@@ -31,7 +31,7 @@ type Props = {
   setLabware: (labware: Labware) => mixed,
 }
 
-export default withRouter<{||}>(
+export default withRouter<{||}, _>(
   connect<Props, _, SP, {||}, State, Dispatch>(
     mapStateToProps,
     null,

app/src/components/CalibratePanel/PipetteList.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 
 import {
   constants as robotConstants,
@@ -19,7 +19,7 @@ type Props = {
 
 const TITLE = 'Pipette Calibration'
 
-export default withRouter<{||}>(
+export default withRouter<{||}, _>(
   connect<Props, _, _, _, _, _>(mapStateToProps)(PipetteList)
 )
 

app/src/components/CalibratePanel/TipRackList.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 
 import { TitledList } from '@opentrons/components'
 import LabwareListItem from './LabwareListItem'
@@ -11,9 +11,12 @@ import {
   actions as robotActions,
 } from '../../robot'
 
+import type { ContextRouter } from 'react-router-dom'
 import type { State, Dispatch } from '../../types'
 import type { Labware, Mount } from '../../robot'
 
+type OP = ContextRouter
+
 type SP = {|
   disabled: boolean,
   tipracks: Array<Labware>,
@@ -23,14 +26,14 @@ type SP = {|
 
 type DP = {| dispatch: Dispatch |}
 
-type Props = {
+type Props = {|
   tipracks: Array<Labware>,
   disabled: boolean,
   setLabware: (labware: Labware) => mixed,
-}
+|}
 
-export default withRouter<{||}>(
-  connect<Props, _, SP, {||}, State, Dispatch>(
+export default withRouter<_, _>(
+  connect<Props, OP, SP, {||}, State, Dispatch>(
     mapStateToProps,
     null,
     mergeProps
@@ -64,7 +67,7 @@ function mapStateToProps(state: State): SP {
   }
 }
 
-function mergeProps(stateProps: SP, dispatchProps: DP): Props {
+function mergeProps(stateProps: SP, dispatchProps: DP, ownProps: OP): Props {
   const { tipracks, disabled, _calibrator, _deckPopulated } = stateProps
   const { dispatch } = dispatchProps
 

app/src/components/ChangePipette/InstructionStep.js

@@ -18,7 +18,7 @@ type DiagramProps = {
   mount: Mount,
   channels: PipetteChannels,
   diagram: Diagram,
-  displayCategory: PipetteDisplayCategory,
+  displayCategory: ?PipetteDisplayCategory,
 }
 
 type Props = DiagramProps & {

app/src/components/ChangePipette/index.js

@@ -2,14 +2,24 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { push, goBack } from 'connected-react-router'
-import { Switch, Route, withRouter, type Match } from 'react-router'
+import { Switch, Route, withRouter } from 'react-router-dom'
 import {
   getPipetteNameSpecs,
   getPipetteModelSpecs,
   type PipetteDisplayCategory,
 } from '@opentrons/shared-data'
+
 import { getConfig } from '../../config'
+import { fetchPipettes, getPipettesState } from '../../robot-api'
+import {
+  home,
+  moveRobotTo,
+  disengagePipetteMotors,
+  makeGetRobotMove,
+  makeGetRobotHome,
+} from '../../http-api-client'
 
+import type { ContextRouter } from 'react-router-dom'
 import type {
   PipetteNameSpecs,
   PipetteModelSpecs,
@@ -19,15 +29,6 @@ import type { Mount } from '../../robot'
 import type { Robot } from '../../discovery'
 import type { Direction, ChangePipetteProps } from './types'
 import type { RobotHome, RobotMove } from '../../http-api-client'
-import {
-  home,
-  moveRobotTo,
-  disengagePipetteMotors,
-  makeGetRobotMove,
-  makeGetRobotHome,
-} from '../../http-api-client'
-
-import { fetchPipettes, getPipettesState } from '../../robot-api'
 
 import ClearDeckAlertModal from '../ClearDeckAlertModal'
 import ExitAlertModal from './ExitAlertModal'
@@ -36,15 +37,11 @@ import Instructions from './Instructions'
 import ConfirmPipette from './ConfirmPipette'
 import RequestInProgressModal from './RequestInProgressModal'
 
-type Props = {
-  match: Match,
+type Props = {|
+  ...ContextRouter,
   robot: Robot,
   parentUrl: string,
-}
-
-const TITLE = 'Pipette Setup'
-// used to guarantee mount param in route is left or right
-const RE_MOUNT = '(left|right)'
+|}
 
 type OP = {|
   title: string,
@@ -80,8 +77,12 @@ type DP = {|
   goToConfirmUrl: () => mixed,
 |}
 
-const ConnectedChangePipetteRouter = withRouter<OP>(
-  connect<ChangePipetteProps, _, SP, DP, State, Dispatch>(
+const TITLE = 'Pipette Setup'
+// used to guarantee mount param in route is left or right
+const RE_MOUNT = '(left|right)'
+
+const ConnectedChangePipetteRouter = withRouter<_, _>(
+  connect<ChangePipetteProps, OP, SP, DP, State, Dispatch>(
     makeMapStateToProps,
     mapDispatchToProps
   )(ChangePipetteRouter)

app/src/components/ChangePipette/types.js

@@ -12,14 +12,14 @@ import type { PipetteSelectionProps } from './PipetteSelection'
 
 export type Direction = 'attach' | 'detach'
 
-export type ChangePipetteProps = {
+export type ChangePipetteProps = {|
   title: string,
   subtitle: string,
   mount: Mount,
   wantedPipette: ?PipetteNameSpecs,
   actualPipette: ?PipetteModelSpecs,
   displayName: string,
-  displayCategory: PipetteDisplayCategory,
+  displayCategory: ?PipetteDisplayCategory,
   direction: Direction,
   success: boolean,
   attachedWrong: boolean,
@@ -38,4 +38,4 @@ export type ChangePipetteProps = {
   checkPipette: () => mixed,
   goToConfirmUrl: () => mixed,
   __pipettePlusEnabled: boolean,
-}
+|}

app/src/components/ConnectPanel/RobotItem.js

@@ -1,7 +1,7 @@
 // @flow
 // item in a RobotList
 import { connect } from 'react-redux'
-import { withRouter, type ContextRouter } from 'react-router'
+import { withRouter, type ContextRouter } from 'react-router-dom'
 
 import { actions as robotActions } from '../../robot'
 import { getBuildrootUpdateAvailable } from '../../shell'
@@ -10,17 +10,15 @@ import { RobotListItem } from './RobotListItem.js'
 import type { State, Dispatch } from '../../types'
 import type { ViewableRobot } from '../../discovery'
 
-type WithRouterOP = {| robot: ViewableRobot |}
-
-type OP = {| ...ContextRouter, ...WithRouterOP |}
+type OP = {| ...ContextRouter, robot: ViewableRobot |}
 
 type SP = {| upgradable: boolean, selected: boolean |}
 
 type DP = {| connect: () => mixed, disconnect: () => mixed |}
 
 export type RobotItemProps = { ...OP, ...SP, ...DP }
 
-export default withRouter<WithRouterOP>(
+export default withRouter<_, _>(
   connect<RobotItemProps, OP, SP, DP, State, Dispatch>(
     mapStateToProps,
     mapDispatchToProps

app/src/components/DeckMap/index.js

@@ -1,12 +1,12 @@
 // @flow
 import React, { useMemo, type ElementProps } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import some from 'lodash/some'
 import map from 'lodash/map'
 import mapValues from 'lodash/mapValues'
 import { type DeckSlotId } from '@opentrons/shared-data'
-import type { ContextRouter } from 'react-router'
+import type { ContextRouter } from 'react-router-dom'
 
 import { RobotWorkSpace, Module as ModuleItem } from '@opentrons/components'
 import { getDeckDefinitions } from '@opentrons/components/src/deck/getDeckDefinitions'
@@ -25,17 +25,13 @@ import LabwareItem from './LabwareItem'
 export { LabwareItem }
 export type { LabwareItemProps } from './LabwareItem'
 
-type WithRouterOP = {|
+type OP = {|
+  ...ContextRouter,
   modulesRequired?: boolean,
   enableLabwareSelection?: boolean,
   className?: string,
 |}
 
-type OP = {|
-  ...ContextRouter,
-  ...WithRouterOP,
-|}
-
 type DP = {| dispatch: Dispatch |}
 type DisplayModule = {|
   ...$Exact<SessionModule>,
@@ -169,6 +165,6 @@ function mapStateToProps(state: State, ownProps: OP): SP {
   }
 }
 
-export default withRouter<WithRouterOP>(
+export default withRouter<_, _>(
   connect<Props, OP, SP, DP, State, Dispatch>(mapStateToProps)(DeckMap)
 )

app/src/components/LostConnectionAlert/ModalCopy.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { Switch, Route } from 'react-router'
+import { Switch, Route } from 'react-router-dom'
 
 import styles from './styles.css'