fix(editor): fix start from scratch

Author: landonreed

lib/editor/actions/editor.js

@@ -241,6 +241,7 @@ export function uploadBrandingAsset (feedId, entityId, component, file) {
 
 const fetchingBaseGtfs = createAction('FETCHING_BASE_GTFS')
 const receiveBaseGtfs = createAction('RECEIVE_BASE_GTFS')
+const showEditorModal = createAction('SHOW_EDITOR_MODAL')
 
 // FIXME: add additional params
 // TODO: fetch nested elements
@@ -304,6 +305,7 @@ export function fetchBaseGtfs ({namespace, component, newId, activeEntityId, fee
         dispatch(fetchingBaseGtfs({namespace}))
         if (!namespace) {
           console.error('Cannot fetch GTFS for undefined or null namespace')
+          dispatch(showEditorModal())
           return
         }
         return dispatch(fetchGraphQL({query, variables: {namespace}}))

lib/editor/actions/snapshots.js

@@ -66,7 +66,7 @@ export function downloadSnapshot (feedSource, snapshot) {
 export function downloadSnapshotViaCredentials (snapshot, isPublic, prefix) {
   return function (dispatch, getState) {
     const route = isPublic ? 'public' : 'secure'
-    const url = `/api/editor/${route}/snapshot/${snapshot.id}/downloadtoken?feedId=${snapshot.feedSourceId}`
+    const url = `/api/editor/${route}/snapshot/${snapshot.id}/downloadtoken?feedId=${snapshot.feedId}`
     dispatch(secureFetch(url))
     .then(response => response.json())
     .then(credentials => {
@@ -95,11 +95,11 @@ export function createSnapshot (feedSource, name, comment) {
     }
     dispatch(creatingSnapshot({feedSource, snapshot}))
     return dispatch(secureFetch(url, 'post', snapshot))
-      .then((response) => response.json())
-      .then(() => {
-        dispatch(createdSnapshot(name))
-        return dispatch(fetchSnapshots(feedSource))
-      })
+      .then(res => dispatch(handleJobResponse(res, 'Error creating snapshot')))
+      // .then(() => {
+      //   dispatch(createdSnapshot(name))
+      //   return dispatch(fetchSnapshots(feedSource))
+      // })
   }
 }
 
@@ -121,10 +121,10 @@ export function deleteSnapshot (feedSource, snapshot) {
  * triggers a snapshot of the feed version's tables and sets the editor namespace
  * for the version's parent feed source.
  */
-export function loadFeedVersionForEditing (feedVersion) {
+export function loadFeedVersionForEditing ({feedSourceId, feedVersionId}) {
   return function (dispatch, getState) {
-    dispatch(loadingFeedVersionForEditing(feedVersion))
-    const url = `/api/editor/secure/snapshot/import?feedId=${feedVersion.feedSource.id}&feedVersionId=${feedVersion.id}`
+    dispatch(loadingFeedVersionForEditing({feedSourceId, feedVersionId}))
+    const url = `/api/editor/secure/snapshot/import?feedId=${feedSourceId}&feedVersionId=${feedVersionId}`
     return dispatch(secureFetch(url, 'post'))
       .then(res => dispatch(handleJobResponse(res)))
   }

lib/editor/components/EditorFeedSourcePanel.js

@@ -35,12 +35,13 @@ export default class EditorFeedSourcePanel extends Component {
   _openModal = () => this.refs.snapshotModal.open()
 
   _onLoadVersion = () => {
-    const {feedSource} = this.props
+    const {feedSource, loadFeedVersionForEditing} = this.props
     const version = feedSource.feedVersions[feedSource.feedVersions.length - 1]
+    const {id: feedVersionId, feedSourceId} = version
     this.refs.confirmModal.open({
       title: getMessage(this.messages, 'load'),
       body: getMessage(this.messages, 'confirmLoad'),
-      onConfirm: () => this.props.loadFeedVersionForEditing(version)
+      onConfirm: () => loadFeedVersionForEditing({feedSourceId, feedVersionId})
     })
   }
 

lib/editor/components/EditorHelpModal.js

@@ -1,5 +1,9 @@
-import React, { Component, PropTypes } from 'react'
-import { Modal, Button, Checkbox, Carousel } from 'react-bootstrap'
+import Icon from '@conveyal/woonerf/components/icon'
+import React, {Component, PropTypes} from 'react'
+import {Modal, Button, ButtonToolbar, Checkbox} from 'react-bootstrap'
+import {LinkContainer} from 'react-router-bootstrap'
+
+import {getConfigProperty} from '../../common/util/config'
 
 export default class EditorHelpModal extends Component {
   static propTypes = {
@@ -13,6 +17,22 @@ export default class EditorHelpModal extends Component {
 
   _onToggleTutorial = () => this.setState({hideTutorial: !this.state.hideTutorial})
 
+  _buildFromScratch = () => {
+    const {createSnapshot, feedSource} = this.props
+    createSnapshot(feedSource, 'Blank')
+  }
+
+  _onClickLoad = () => {
+    const {feedSource, loadFeedVersionForEditing} = this.props
+    const {latestVersionId: feedVersionId, id: feedSourceId} = feedSource
+    loadFeedVersionForEditing({feedSourceId, feedVersionId})
+  }
+
+  _onClickReload = () => {
+    this.props.onComponentMount({})
+    this.close()
+  }
+
   close = () => {
     if (this.state.hideTutorial !== this.props.hideTutorial) {
       this.props.setTutorialHidden(!this.props.hideTutorial)
@@ -25,21 +45,61 @@ export default class EditorHelpModal extends Component {
   }
 
   render () {
-    if (!this.props.show) {
+    const {feedSource, isNewFeed, show, status} = this.props
+    if (!show) {
       return null
     }
     const {Body, Footer, Header, Title} = Modal
-    const {Caption, Item} = Carousel
     return (
       <Modal
         show={this.state.showModal}
         onHide={this.close}
-        bsSize='large'>
-        <Header closeButton>
+        // Prevent closure of modal if there is no snapshot yet
+        backdrop={isNewFeed ? 'static' : undefined}
+        >
+        <Header closeButton={!isNewFeed}>
           <Title>Welcome to the GTFS Editor</Title>
         </Header>
         <Body>
-          <Carousel>
+          {isNewFeed
+            ? <div>
+              <p>There is no feed loaded in the editor. To begin editing you can either
+              start from scratch or import an existing version (if a version exists).</p>
+              {status.snapshotFinished
+                ? <Button
+                  bsStyle='primary'
+                  bsSize='large'
+                  block
+                  onClick={this._onClickReload} >
+                  <Icon type='check' /> Begin editing
+                </Button>
+                : <ButtonToolbar>
+                  <Button
+                    bsSize='large'
+                    block
+                    onClick={this._buildFromScratch}
+                    disabled={status.creatingSnapshot} >
+                    <Icon type='file' /> Start from scratch
+                  </Button>
+                  <Button
+                    bsSize='large'
+                    block
+                    onClick={this._onClickLoad}
+                    disabled={!feedSource.latestVersionId || status.creatingSnapshot} >
+                    <Icon type='upload' /> Import latest version
+                  </Button>
+                </ButtonToolbar>
+              }
+            </div>
+            : <p>For instructions on using the editor, view the{' '}
+              <a
+                target='_blank'
+                href={`${getConfigProperty('application.docs_url')}/en/latest/user/editor/introduction/`} >
+                documentation
+              </a>.
+              </p>
+          }
+          {/* <Carousel>
             <Item>
               <img width={900} height={500} alt='900x500' src='https://react-bootstrap.github.io/assets/carousel.png' />
               <Caption>
@@ -61,17 +121,22 @@ export default class EditorHelpModal extends Component {
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
               </Caption>
             </Item>
-          </Carousel>
+          </Carousel> */}
         </Body>
         <Footer>
-          <small className='pull-left'>
+          {!isNewFeed && <small className='pull-left'>
             <Checkbox
               checked={this.state.hideTutorial}
               onChange={this._onToggleTutorial}>
               Do not show when editor opens
             </Checkbox>
-          </small>
-          <Button onClick={this.close}>Close</Button>
+          </small>}
+          {isNewFeed
+            ? <LinkContainer to={feedSource ? `/feed/${feedSource.id}` : `/home`}>
+              <Button><Icon type='chevron-left' /> Back to feed source</Button>
+            </LinkContainer>
+            : <Button onClick={this.close}>Close</Button>
+          }
         </Footer>
       </Modal>
     )

lib/editor/components/GtfsEditor.js

@@ -154,6 +154,8 @@ export default class GtfsEditor extends Component {
     const {
       feedSource,
       user,
+      createSnapshot,
+      loadFeedVersionForEditing,
       activeEntityId,
       tableData,
       entities,
@@ -176,6 +178,7 @@ export default class GtfsEditor extends Component {
       newGtfsEntity,
       mapState,
       hideTutorial,
+      status,
       setTutorialHidden,
       project
     } = this.props
@@ -210,6 +213,18 @@ export default class GtfsEditor extends Component {
           expanded={sidebarExpanded}
           feedSource={feedSource}
           setActiveEntity={setActiveEntity} />
+        {status.showEditorModal
+          ? <EditorHelpModal
+            show
+            isNewFeed
+            feedSource={feedSource}
+            status={status}
+            loadFeedVersionForEditing={loadFeedVersionForEditing}
+            onComponentMount={this.props.onComponentMount}
+            createSnapshot={createSnapshot}
+            setTutorialHidden={setTutorialHidden} />
+          : null
+        }
         <div style={{
           position: 'fixed',
           left: sidebarExpanded ? 130 : 50,

lib/editor/containers/ActiveGtfsEditor.js

@@ -40,6 +40,7 @@ import {
   removeEditorLock,
   uploadBrandingAsset
 } from '../actions/editor'
+import {createSnapshot, loadFeedVersionForEditing} from '../actions/snapshots'
 import {updateUserMetadata} from '../../manager/actions/user'
 import {findProjectByFeedSource} from '../../manager/util'
 import {setTutorialHidden} from '../../manager/actions/ui'
@@ -63,7 +64,7 @@ const mapStateToProps = (state, ownProps) => {
   const subEntityId = typeof ownProps.routeParams.subEntityId !== 'undefined' ? +ownProps.routeParams.subEntityId : undefined
   const {data, editSettings: editSettingsState, mapState} = state.editor
   const {present: editSettings} = editSettingsState
-  const {active, tables, tripPatterns} = data
+  const {active, tables, tripPatterns, status} = data
   // FIXME: entityId is now a non-string line number and somewhere the number is
   // being cast to a string.
   const activeEntity =
@@ -121,6 +122,7 @@ const mapStateToProps = (state, ownProps) => {
     mapState,
     controlPoints,
     patternCoordinates,
+    status,
     validationErrors,
     sidebarExpanded: state.ui.sidebarExpanded
   }
@@ -228,6 +230,10 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     handleControlPointDragStart: (controlPoint) => dispatch(handleControlPointDragStart(controlPoint)),
     handleControlPointDrag: (controlPoints, index, latlng, pattern, patternCoordinates) => dispatch(handleControlPointDrag(controlPoints, index, latlng, pattern, patternCoordinates)),
 
+    // SNAPHOTS
+    createSnapshot: (feedSource, name, comment) => dispatch(createSnapshot(feedSource, name, comment)),
+    loadFeedVersionForEditing: (payload) => dispatch(loadFeedVersionForEditing(payload)),
+
     // EDITOR UI
     setTutorialHidden: (value) => dispatch(setTutorialHidden(value))
   }