Revert "refactor(app): Standardize modals and pages (#1705)"

This reverts commit 9070b21.

app/src/components/App.js

@@ -3,7 +3,6 @@ import {Switch, Route, Redirect} from 'react-router'
 
 import NavBar from './nav-bar'
 
-import {PageWrapper} from '../components/Page'
 import SidePanel from '../pages/SidePanel'
 import Robots from '../pages/Robots'
 import More from '../pages/More'
@@ -19,17 +18,15 @@ export default function App () {
     <div className={styles.wrapper} onDragOver={stopEvent} onDrop={stopEvent}>
       <NavBar />
       <SidePanel />
-      <PageWrapper>
-        <Switch>
-          <Redirect from='(.*)/index.html' to='/' />
-          <Redirect exact from='/' to='/robots' />
-          <Route path='/robots/:name?' component={Robots} />
-          <Route path='/menu' component={More} />
-          <Route path='/upload' component={Upload} />
-          <Route path='/calibrate' component={Calibrate} />
-          <Route path='/run' component={Run} />
-        </Switch>
-      </PageWrapper>
+      <Switch>
+        <Redirect from='(.*)/index.html' to='/' />
+        <Redirect exact from='/' to='/robots' />
+        <Route path='/robots/:name?' component={Robots} />
+        <Route path='/menu' component={More} />
+        <Route path='/upload' component={Upload} />
+        <Route path='/calibrate' component={Calibrate} />
+        <Route path='/run' component={Run} />
+      </Switch>
     </div>
   )
 }

app/src/components/LabwareCalibration/index.js

@@ -1,21 +1,60 @@
 // @flow
 // info panel and controls for labware calibration page
 import * as React from 'react'
-import {withRouter} from 'react-router'
-import type {Labware} from '../../robot'
+import {connect} from 'react-redux'
+import {Redirect, Route, withRouter} from 'react-router'
+import {push} from 'react-router-redux'
+
+import {
+  selectors as robotSelectors,
+  type Labware
+} from '../../robot'
+
 import DeckMap from '../DeckMap'
 import InfoBox from './InfoBox'
+import ConfirmModal from './ConfirmModal'
 
-type Props = {
-  labware: ?Labware
-}
-export default withRouter(LabwareCalibration)
+type OwnProps = {slot: ?string, url: string}
+type StateProps = {labware: ?Labware}
+type DispatchProps = {onBackClick: () => void}
+type Props = StateProps & DispatchProps & OwnProps
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(LabwareCalibration)
+)
 
 function LabwareCalibration (props: Props) {
+  const {url, labware, onBackClick} = props
+
   return (
     <div>
       <InfoBox {...props} />
       <DeckMap />
+      <Route path={`${url}/confirm`} render={() => {
+        if (!labware || labware.calibration === 'confirmed') {
+          return (
+            <Redirect to={url} />
+          )
+        }
+
+        return (
+          <ConfirmModal labware={labware} onBackClick={onBackClick} />
+        )
+      }} />
     </div>
   )
 }
+
+function mapStateToProps (state, ownProps: OwnProps): StateProps {
+  // TODO(mc, 2018-02-05): getCurrentLabware selector
+  const labware = robotSelectors.getLabware(state)
+  const currentLabware = labware.find((lw) => lw.slot === ownProps.slot)
+
+  return {labware: currentLabware}
+}
+
+function mapDispatchToProps (dispatch, ownProps: OwnProps): DispatchProps {
+  return {
+    onBackClick: () => { dispatch(push(ownProps.url)) }
+  }
+}

app/src/components/LabwareCalibration/styles.css

@@ -1,12 +1,28 @@
 @import '@opentrons/components';
 
+.modal {
+  @apply --modal;
+
+  padding: 6rem 4rem;
+}
+
 .title_bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
 }
 
+.modal_contents {
+  z-index: 1;
+  width: 100%;
+  max-width: 38rem;
+  margin: auto;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+}
+
 .in_progress_contents {
   background-color: transparent;
 
@@ -18,11 +34,11 @@
 .position_diagram,
 .jog_container {
   width: 100%;
-  margin: 0.5rem 0;
+  margin: 1rem 0;
 }
 
 .position_diagram {
-  padding: 0.5rem 2rem;
+  padding: 1rem 2rem;
 }
 
 .diagram_title {

app/src/components/Page.css

@@ -0,0 +1,5 @@
+.task {
+  flex: 1 1;
+  position: relative;
+  overflow-y: scroll;
+}

app/src/components/Page.js

@@ -0,0 +1,16 @@
+// task component
+import React from 'react'
+
+import styles from './Page.css'
+import LostConnectionAlert from './LostConnectionAlert'
+import {AnalyticsSettingsModal} from './analytics-settings'
+
+export default function Page (props) {
+  return (
+    <main className={styles.task}>
+      {props.children}
+      <LostConnectionAlert />
+      <AnalyticsSettingsModal />
+    </main>
+  )
+}

app/src/components/RobotSettings/index.js

@@ -1,6 +1,7 @@
 // @flow
 // robot status panel with connect button
 import * as React from 'react'
+import {Route} from 'react-router'
 import type {Robot} from '../../robot'
 
 import StatusCard from './StatusCard'
@@ -40,8 +41,11 @@ export default function RobotSettings (props: Props) {
           <CalibrationCard {...props} />
         </div>
       </div>
+      <Route path={updateUrl} render={() => (
+        <UpdateModal {...props} />
+      )} />
     </div>
   )
 }
 
-export {ConnectAlertModal, UpdateModal}
+export {ConnectAlertModal}

app/src/components/SessionHeader/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import {Link} from 'react-router-dom'
+import {TitleBar} from '@opentrons/components'
 
 import {
   selectors as robotSelectors
@@ -9,11 +10,15 @@ import {
 export default connect(mapStateToProps)(SessionHeader)
 
 function SessionHeader (props) {
-  return (
+  const title = (
     <Link to='/upload'>
       {props.sessionName}
     </Link>
   )
+
+  return (
+    <TitleBar title={title} subtitle={props.subtitle} />
+  )
 }
 
 function mapStateToProps (state) {

app/src/pages/AppSettings.js

@@ -0,0 +1,76 @@
+// @flow
+// view info about the app and update
+import React from 'react'
+import {connect} from 'react-redux'
+import {Route, Switch, Redirect, type ContextRouter} from 'react-router'
+import {push} from 'react-router-redux'
+
+import type {State} from '../types'
+import type {ShellUpdate} from '../shell'
+import {
+  getShellUpdate,
+  checkForShellUpdates,
+  downloadShellUpdate,
+  quitAndInstallShellUpdate,
+  setUpdateSeen
+} from '../shell'
+
+import Page from '../components/Page'
+import AppSettings, {AppUpdateModal} from '../components/AppSettings'
+
+type OP = ContextRouter
+
+type SP = {
+  update: ShellUpdate,
+}
+
+type DP = {
+  checkForUpdates: () => mixed,
+  downloadUpdate: () => mixed,
+  quitAndInstall: () => mixed,
+  closeUpdateModal: () => mixed,
+}
+
+type Props = OP & SP & DP
+
+export default connect(mapStateToProps, mapDispatchToProps)(AppSettingsPage)
+
+function AppSettingsPage (props: Props) {
+  const {update, match: {path}} = props
+
+  return (
+    <Page>
+      <AppSettings {...props} />
+      <Switch>
+        <Route path={`${path}/update`} render={() => (
+          <AppUpdateModal {...props} close={props.closeUpdateModal} />
+        )} />
+        <Route render={() => {
+          if (update.available && !update.seen) {
+            return (<Redirect to='/menu/app/update' />)
+          }
+
+          return null
+        }} />
+      </Switch>
+    </Page>
+  )
+}
+
+function mapStateToProps (state: State): SP {
+  return {
+    update: getShellUpdate(state)
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch): DP {
+  return {
+    checkForUpdates: () => dispatch(checkForShellUpdates()),
+    downloadUpdate: () => dispatch(downloadShellUpdate()),
+    quitAndInstall: () => quitAndInstallShellUpdate(),
+    closeUpdateModal: () => {
+      dispatch(setUpdateSeen())
+      dispatch(push('/menu/app'))
+    }
+  }
+}

app/src/pages/Calibrate/Instruments.js

@@ -37,18 +37,17 @@ function SetupInstrumentsPage (props: Props) {
   }
 
   return (
-    <Page
-      titleBarProps={{title: (<SessionHeader />)}}
-    >
+    <Page>
+      <SessionHeader />
       <InstrumentTabs {...{instruments, currentInstrument}} />
       <Instruments {...props} />
-      {!!currentInstrument && (
+      {currentInstrument && (
         <TipProbe
           {...currentInstrument}
           confirmTipProbeUrl={confirmTipProbeUrl}
         />
       )}
-      {!!currentInstrument && (
+      {currentInstrument && (
         <Route path={confirmTipProbeUrl} render={() => (
           <ConfirmTipProbeModal
             mount={currentInstrument.mount}