Shared Stops Support File Upload

__tests__/test-utils/mock-data/manager.js

@@ -117,6 +117,7 @@ export const mockProject = {
     updaters: null,
     walkSpeed: null
   },
+  sharedStopsConfig: null,
   useCustomOsmBounds: false,
   user: null
 }

i18n/english.yml

@@ -96,6 +96,7 @@ components:
     title: Create a new snapshot
   CustomCSVForm:
     numLines: "%numLines% lines."
+    csvInvalid: CSV invalid!
   DatatoolsNavbar:
     account: My Account
     alerts: Alerts
@@ -972,6 +973,9 @@ components:
         defaultLocation: 'Default location (lat, lng)'
         defaultTimeZone: Default time zone
         title: Location
+      sharedStops:
+        title: Shared Stops
+        placeholder: Shared stops config CSV
       name: Project name
       title: General
       updates:

i18n/german.yml

@@ -1052,6 +1052,9 @@ components:
       localPlacesIndex:
         title: Adress-Index
         webhookUrl: Webhook URL
+      sharedStops:
+        title: Shared Stops
+        placeholder: Shared stops config CSV
       location:
         boundingBox: Gebiets-Grenzen (W,S,E,N)
         boundingBoxPlaceHolder: min_lon, min_lat, max_lon, max_lat

i18n/polish.yml

@@ -1038,6 +1038,9 @@ components:
       localPlacesIndex:
         title: Local Places Index
         webhookUrl: Webhook URL
+      sharedStops:
+        title: Shared Stops
+        placeholder: Shared stops config CSV
       location:
         boundingBox: Bounding box (W,S,E,N)
         boundingBoxPlaceHolder: min_lon, min_lat, max_lon, max_lat

lib/manager/actions/__tests__/__snapshots__/projects.js.snap

@@ -98,6 +98,7 @@ Object {
         "updaters": null,
         "walkSpeed": null,
       },
+      "sharedStopsConfig": null,
       "useCustomOsmBounds": false,
       "user": null,
     },

lib/manager/components/ProjectSettingsForm.js

@@ -31,6 +31,8 @@ import { parseBounds, validationState } from '../util'
 import type { Bounds, Project } from '../../types'
 import type { ManagerUserState } from '../../types/reducers'
 
+import CustomCSVForm from './transform/CustomCSVForm'
+
 type ProjectModel = {
   autoFetchFeeds?: boolean,
   autoFetchHour?: number,
@@ -39,7 +41,8 @@ type ProjectModel = {
   defaultTimeZone?: string,
   id?: string,
   name?: string,
-  peliasWebhookUrl?: string
+  peliasWebhookUrl?: string,
+  sharedStopsConfig?: string
 }
 
 type Props = {
@@ -182,8 +185,10 @@ export default class ProjectSettingsForm extends Component<Props, State> {
     this.setState(update(this.state, {model: {$merge: {defaultTimeZone}}}))
   }
 
-  _onChangeTextInput = ({target}: {target: HTMLInputElement}) => {
+  _onChangeTextInput = ({target}: {target: {name?: string, value: string}}) => {
     const {name, value} = target
+    if (!name) return
+
     this.setState(
       update(
         this.state,
@@ -223,6 +228,7 @@ export default class ProjectSettingsForm extends Component<Props, State> {
     return Object.keys(validation).every(k => validation[k])
   }
 
+  // eslint-disable-next-line complexity
   render () {
     const {editDisabled, showDangerZone} = this.props
     const {model, validation} = this.state
@@ -324,6 +330,26 @@ export default class ProjectSettingsForm extends Component<Props, State> {
             </ListGroupItem>
           </ListGroup>
         </Panel>
+        <Panel>
+          <Panel.Heading><Panel.Title componentClass='h4'>{this.messages('fields.sharedStops.title')}</Panel.Title></Panel.Heading>
+          <ListGroup>
+            <ListGroupItem>
+              <FormGroup>
+                {/* TODO: on enter, textarea should NOT submit. This causes strange behavior when
+                editing in the textarea
+
+                see: https://github.com/ibi-group/datatools-ui/pull/977#discussion_r1288916749 */}
+                <CustomCSVForm
+                  name={'sharedStopsConfig'}
+                  csvData={model.sharedStopsConfig || ''}
+                  hideSaveButton
+                  onChangeCsvData={(e) => this._onChangeTextInput(e)}
+                  onSaveCsvData={() => { alert('save') }}
+                />
+              </FormGroup>
+            </ListGroupItem>
+          </ListGroup>
+        </Panel>
         <Panel>
           <Panel.Heading><Panel.Title componentClass='h4'>{this.messages('fields.localPlacesIndex.title')}</Panel.Title></Panel.Heading>
           <ListGroup>

lib/manager/components/transform/AddCustomFile.js

@@ -42,7 +42,7 @@ export default class AddCustomFile extends Component<TransformProps<AddCustomFil
     this.props.onSave({csvData, table}, this.props.index)
   }
 
-  _onChangeCsvData = (evt: SyntheticInputEvent<HTMLInputElement>) => {
+  _onChangeCsvData = (evt: {target: {name?: string, value: string}}) => {
     const newState = {...this.state, csvData: evt.target.value}
     this.setState(newState)
   }

lib/manager/components/transform/CustomCSVForm.js

@@ -1,24 +1,39 @@
 // @flow
 
-import React from 'react'
+// $FlowFixMe Flow is outdated
+import React, { useEffect, useState } from 'react'
 import { Button } from 'react-bootstrap'
+import { parseString } from '@fast-csv/parse'
 
 import { getComponentMessages } from '../../../common/util/config'
 
 type Props = {
-  buttonText: string,
-  csvData: ?string,
-  headerText: string,
-  inputIsSame: boolean,
-  onChangeCsvData: (SyntheticInputEvent<HTMLInputElement>) => void,
+  buttonText?: string,
+  csvData?: ?string,
+  headerText?: string,
+  hideSaveButton?: boolean,
+  inputIsSame?: boolean,
+  name?: string,
+  onChangeCsvData: ({target: {name?: string, value: string}}) => void,
   onSaveCsvData: () => void,
 }
 const CustomCSVForm = (props: Props) => {
-  const { buttonText, csvData, headerText, inputIsSame, onChangeCsvData, onSaveCsvData } = props
+  const [errorCount, setErrorCount] = useState(0)
+
+  const { buttonText, csvData, headerText, hideSaveButton, inputIsSame, name, onChangeCsvData, onSaveCsvData } = props
+
+  useEffect(() => {
+    setErrorCount(0)
+
+    parseString(csvData, { headers: true })
+      .on('error', _ => setErrorCount(errorCount + 1))
+  }, [csvData])
 
   const numLines = !csvData ? 0 : csvData.split(/\r*\n/).length
   const messages = getComponentMessages('CustomCSVForm')
 
+  const csvIsValid = errorCount === 0
+
   return (
     <div>
       <label
@@ -32,6 +47,7 @@ const CustomCSVForm = (props: Props) => {
         {headerText}
         <textarea
           id='csvData'
+          name={name}
           onChange={onChangeCsvData}
           placeholder={
             `stop_id,stop_code,stop_name,stop_lat,stop_lon\n1234567,188390987,Broad Ave,33.98768,-87.72686`
@@ -47,15 +63,29 @@ const CustomCSVForm = (props: Props) => {
           value={csvData} />
       </label>
       <div style={{marginBottom: '10px'}}>
-        <Button
+        <input
+          type='file'
+          name='file'
+          onChange={(e) => {
+            if (e.target && e.target.files.length > 0) {
+              const reader = new FileReader()
+              reader.onload = fileContents => {
+                onChangeCsvData({target: {name, value: fileContents.target.result}})
+              }
+              reader.readAsText(e.target.files[0])
+            }
+          }}
+        />
+        {!hideSaveButton && <Button
           bsSize='xsmall'
-          disabled={inputIsSame}
+          disabled={!csvIsValid || inputIsSame}
           onClick={onSaveCsvData}
           style={{marginRight: '5px'}}
         >
           {buttonText}
-        </Button>
+        </Button>}
         <small>{messages('numLines').replace('%numLines%', numLines.toString())}</small>
+        {!csvIsValid && <small style={{paddingLeft: '1ch', color: 'red'}}>{messages('csvInvalid')}</small>}
       </div>
     </div>
   )

lib/manager/components/transform/ReplaceFileFromString.js

@@ -24,7 +24,7 @@ export default class ReplaceFileFromString extends Component<TransformProps<Repl
     this._updateErrors()
   }
 
-  _onChangeCsvData = (evt: SyntheticInputEvent<HTMLInputElement>) => {
+  _onChangeCsvData = (evt: {target: {name?: string, value: string}}) => {
     const newState = {csvData: evt.target.value}
     this.setState(newState)
     this._updateErrors(newState)

lib/manager/containers/__tests__/__snapshots__/ActiveProjectViewer.js.snap

@@ -84,6 +84,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
             "updaters": null,
             "walkSpeed": null,
           },
+          "sharedStopsConfig": null,
           "useCustomOsmBounds": false,
           "user": null,
         }
@@ -2035,6 +2036,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                             "updaters": null,
                                                             "walkSpeed": null,
                                                           },
+                                                          "sharedStopsConfig": null,
                                                           "useCustomOsmBounds": false,
                                                           "user": null,
                                                         }
@@ -2084,6 +2086,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                               "updaters": null,
                                                               "walkSpeed": null,
                                                             },
+                                                            "sharedStopsConfig": null,
                                                             "useCustomOsmBounds": false,
                                                             "user": null,
                                                           }
@@ -2223,6 +2226,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                                               "updaters": null,
                                                                               "walkSpeed": null,
                                                                             },
+                                                                            "sharedStopsConfig": null,
                                                                             "useCustomOsmBounds": false,
                                                                             "user": null,
                                                                           }
@@ -2294,6 +2298,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                                                 "updaters": null,
                                                                                 "walkSpeed": null,
                                                                               },
+                                                                              "sharedStopsConfig": null,
                                                                               "useCustomOsmBounds": false,
                                                                               "user": null,
                                                                             }
@@ -4224,6 +4229,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                             "updaters": null,
                                                             "walkSpeed": null,
                                                           },
+                                                          "sharedStopsConfig": null,
                                                           "useCustomOsmBounds": false,
                                                           "user": null,
                                                         }
@@ -4350,6 +4356,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                             "updaters": null,
                                                             "walkSpeed": null,
                                                           },
+                                                          "sharedStopsConfig": null,
                                                           "useCustomOsmBounds": false,
                                                           "user": null,
                                                         }
@@ -4435,6 +4442,7 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
                                                             "updaters": null,
                                                             "walkSpeed": null,
                                                           },
+                                                          "sharedStopsConfig": null,
                                                           "useCustomOsmBounds": false,
                                                           "user": null,
                                                         }

lib/manager/containers/__tests__/__snapshots__/DeploymentsPanel.js.snap

@@ -247,6 +247,7 @@ exports[`lib > manager > DeploymentsPanel should render with the list of deploym
           "updaters": null,
           "walkSpeed": null,
         },
+        "sharedStopsConfig": null,
         "useCustomOsmBounds": false,
         "user": null,
       }
@@ -488,6 +489,7 @@ exports[`lib > manager > DeploymentsPanel should render with the list of deploym
             "updaters": null,
             "walkSpeed": null,
           },
+          "sharedStopsConfig": null,
           "useCustomOsmBounds": false,
           "user": null,
         }
@@ -953,6 +955,7 @@ exports[`lib > manager > DeploymentsPanel should render with the list of deploym
                       "updaters": null,
                       "walkSpeed": null,
                     },
+                    "sharedStopsConfig": null,
                     "useCustomOsmBounds": false,
                     "user": null,
                   }
@@ -1441,6 +1444,7 @@ exports[`lib > manager > DeploymentsPanel should render with the list of deploym
                                     "updaters": null,
                                     "walkSpeed": null,
                                   },
+                                  "sharedStopsConfig": null,
                                   "useCustomOsmBounds": false,
                                   "user": null,
                                 }
@@ -1855,6 +1859,7 @@ exports[`lib > manager > DeploymentsPanel should render with the list of deploym
                                     "updaters": null,
                                     "walkSpeed": null,
                                   },
+                                  "sharedStopsConfig": null,
                                   "useCustomOsmBounds": false,
                                   "user": null,
                                 }