feat(app): Add open a new file warning modal and guards

closes #1032

app/src/components/UploadPanel/Upload.js

@@ -0,0 +1,62 @@
+// @flow
+import * as React from 'react'
+import UploadInput from './UploadInput'
+
+type Props = {
+  sessionLoaded: boolean,
+  createSession: (file: File) => void,
+  confirmUpload: () => void,
+}
+
+type State = {
+  uploadedFile: ?File,
+}
+
+export default class Upload extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      uploadedFile: null
+    }
+  }
+
+  onUpload = (
+    event: SyntheticInputEvent<HTMLInputElement> | SyntheticDragEvent<*>
+  ) => {
+    let files: Array<File> = []
+    if (event.dataTransfer && event.dataTransfer.files) {
+      files = (event.dataTransfer.files: any)
+    } else if (event.target.files) {
+      files = (event.target.files: any)
+    }
+
+    if (files.length < 1) {
+      return
+    }
+
+    if (!this.props.sessionLoaded) {
+      return this.props.createSession(files[0])
+    }
+
+    this.setState({uploadedFile: files[0]})
+    return this.props.confirmUpload()
+  }
+
+  // TODO (ka 2018-7-30): refactor to consider edge case where robot disconnects while on upload page
+  componentDidUpdate () {
+    const {uploadedFile} = this.state
+    if (uploadedFile && !this.props.sessionLoaded) {
+      this.props.createSession(uploadedFile)
+      this.setState({uploadedFile: null})
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        <UploadInput onUpload={this.onUpload} isButton />
+        <UploadInput onUpload={this.onUpload}/>
+      </div>
+    )
+  }
+}

app/src/components/UploadPanel/UploadInput.js

@@ -5,7 +5,7 @@ import {PrimaryButton, Icon} from '@opentrons/components'
 import styles from './upload-panel.css'
 
 type Props = {
-  onUpload: (SyntheticEvent<>) => void,
+  onUpload: (SyntheticInputEvent<HTMLInputElement> | SyntheticDragEvent<*>) => void,
   isButton?: boolean
 }
 

app/src/components/UploadPanel/index.js

@@ -1,37 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import {push} from 'react-router-redux'
 
 import {
   actions as robotActions,
   selectors as robotSelectors
 } from '../../robot'
 
 import {SidePanel} from '@opentrons/components'
-import UploadInput from './UploadInput'
-import UploadWarning from './UploadWarning'
+import Upload from './Upload'
 
 export default connect(mapStateToProps, mapDispatchToProps)(UploadPanel)
 
 UploadPanel.propTypes = {
-  isSessionLoaded: PropTypes.bool.isRequired,
-  onUpload: PropTypes.func.isRequired
+  isSessionLoaded: PropTypes.bool.isRequired
 }
 
 function UploadPanel (props) {
-  const warning = props.isSessionLoaded && (<UploadWarning />)
-
   return (
     <SidePanel title='Open Protocol'>
-      <div>
-        <UploadInput {...props} isButton />
-        <UploadInput {...props} />
-        {warning}
-      </div>
+      <Upload {...props}/>
     </SidePanel>
   )
 }
 
+// move me to UploadIntercept  rename to Upload
 function mapStateToProps (state) {
   return {
     isSessionLoaded: robotSelectors.getSessionIsLoaded(state)
@@ -40,19 +34,25 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    onUpload: (event) => {
-      let files
-
-      if (event.dataTransfer) {
-        files = event.dataTransfer.files
-      } else {
-        files = event.target.files
-      }
-
-      dispatch(robotActions.session(files[0]))
-
-      // reset the state of the input to allow file re-uploads
-      event.target.value = null
+    confirmUpload: () => {
+      dispatch(push('/upload/confirm'))
+    },
+    createSession: (file) => {
+      dispatch(robotActions.session(file))
     }
+    // onUpload: (event) => {
+    //   let files
+    //
+    //   if (event.dataTransfer) {
+    //     files = event.dataTransfer.files
+    //   } else {
+    //     files = event.target.files
+    //   }
+    //
+    //   dispatch(robotActions.session(files[0]))
+    //
+    //   // reset the state of the input to allow file re-uploads
+    //   event.target.value = null
+    // }
   }
 }

app/src/pages/Upload.js

@@ -1,12 +1,29 @@
 import React from 'react'
+import {Route} from 'react-router'
 
+import {AlertModal} from '@opentrons/components'
 import UploadStatus from '../components/UploadStatus'
 import Page from '../components/Page'
 
 export default function UploadPage () {
   return (
     <Page>
       <UploadStatus />
+      <Route path='/upload/cancel' component={ConfirmUploadModal} />
     </Page>
   )
 }
+
+function ConfirmUploadModal () {
+  return (
+    <AlertModal
+      heading={'Are you sure you want to open a new protocol?'}
+      buttons={[
+        {children: 'cancel', onClick: () => console.log('cancel upload')},
+        {children: 'continue', onClick: () => console.log('continue upload')}
+      ]}
+    >
+      Doing so will close your current protocol and clear any unsaved calibration progress.
+    </AlertModal>
+  )
+}