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

* refactor(app): Standardize modals and pages

app/src/components/App.js

@@ -3,6 +3,7 @@ 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'
@@ -18,15 +19,17 @@ export default function App () {
     <div className={styles.wrapper} onDragOver={stopEvent} onDrop={stopEvent}>
       <NavBar />
       <SidePanel />
-      <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>
+      </PageWrapper>
     </div>
   )
 }

app/src/components/LabwareCalibration/index.js

@@ -1,60 +1,21 @@
 // @flow
 // info panel and controls for labware calibration page
 import * as React from 'react'
-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 {withRouter} from 'react-router'
+import type {Labware} from '../../robot'
 import DeckMap from '../DeckMap'
 import InfoBox from './InfoBox'
-import ConfirmModal from './ConfirmModal'
-
-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)
-)
+type Props = {
+  labware: ?Labware
+}
+export default withRouter(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,28 +1,12 @@
 @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;
 
@@ -34,11 +18,11 @@
 .position_diagram,
 .jog_container {
   width: 100%;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .position_diagram {
-  padding: 1rem 2rem;
+  padding: 0.5rem 2rem;
 }
 
 .diagram_title {

app/src/components/Page/PageWrapper.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react'
+
+import LostConnectionAlert from '../LostConnectionAlert'
+import {AnalyticsSettingsModal} from '../analytics-settings'
+
+import styles from './styles.css'
+
+type Props = {
+  children: React.Node
+}
+export default function PageWrapper (props: Props) {
+  return (
+    <div className={styles.relative}>
+      {props.children}
+      <LostConnectionAlert />
+      <AnalyticsSettingsModal />
+    </div>
+  )
+}

app/src/components/Page/index.js

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react'
+
+import styles from './styles.css'
+import {TitleBar, type TitleBarProps} from '@opentrons/components'
+import PageWrapper from './PageWrapper'
+
+type Props = {
+  titleBarProps?: TitleBarProps,
+  children: React.Node,
+}
+
+export default function Page (props: Props) {
+  const {titleBarProps, children} = props
+  return (
+    <main className={styles.task}>
+      {titleBarProps && (
+         <TitleBar {...titleBarProps} />
+       )}
+      {children}
+    </main>
+  )
+}
+
+export {PageWrapper}

app/src/components/Page/styles.css

@@ -0,0 +1,17 @@
+:root {
+  --relative-fill: {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+
+.relative {
+  @apply --relative-fill;
+}
+
+.task {
+  @apply --relative-fill;
+
+  overflow-y: auto;
+}

app/src/components/RobotSettings/index.js

@@ -1,7 +1,6 @@
 // @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'
@@ -41,11 +40,8 @@ export default function RobotSettings (props: Props) {
           <CalibrationCard {...props} />
         </div>
       </div>
-      <Route path={updateUrl} render={() => (
-        <UpdateModal {...props} />
-      )} />
     </div>
   )
 }
 
-export {ConnectAlertModal}
+export {ConnectAlertModal, UpdateModal}

app/src/components/SessionHeader/index.js

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

app/src/pages/Calibrate/Instruments.js

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