Flow type components

__tests__/end-to-end.js

@@ -151,11 +151,8 @@ async function expectSelectorToNotContainHtml (selector: string, html: string) {
 async function createProject (projectName: string) {
   log.info(`creating project with name: ${projectName}`)
   await click('#context-dropdown')
-  await waitForSelector('a[href="/project"]')
-  await click('a[href="/project"]')
-  await waitForSelector('[data-test-id="create-new-project-button"]')
-  await wait(2000, 'for projects to load')
-  await click('[data-test-id="create-new-project-button"]')
+  await waitForAndClick('a[href="/project"]')
+  await waitForAndClick('[data-test-id="create-new-project-button"]')
   await waitForSelector('.project-name-editable input')
   await page.type('.project-name-editable input', projectName)
   await click('.project-name-editable button')
@@ -172,17 +169,15 @@ async function deleteProject (projectId: string) {
   await goto(`http://localhost:9966/project/${projectId}/settings`)
 
   // delete that project
-  await waitForSelector('[data-test-id="delete-project-button"]')
-  await click('[data-test-id="delete-project-button"]')
-  await waitForSelector('[data-test-id="modal-confirm-ok-button"]')
-  await click('[data-test-id="modal-confirm-ok-button"]')
+  await waitForAndClick('[data-test-id="delete-project-button"]')
+  await wait(500, 'for modal to appear')
+  await waitForAndClick('[data-test-id="modal-confirm-ok-button"]')
   log.info('deleted project')
 
   // verify deletion
   await goto(`http://localhost:9966/project/${projectId}`)
   await waitForSelector('.project-not-found')
   await expectSelectorToContainHtml('.project-not-found', projectId)
-  await click('[data-test-id="status-modal-close-button"]')
   log.info(`confirmed successful deletion of project with id ${projectId}`)
 }
 
@@ -410,14 +405,15 @@ async function appendText (selector: string, text: string) {
 
 async function waitForSelector (selector: string, options?: any) {
   const startTime = new Date()
+  await wait(100, 'delay before looking for selector...')
   log.info(`waiting for selector: ${selector}`)
   await page.waitForSelector(selector, options)
   log.info(`selector ${selector} took ${formatSecondsElapsed(startTime)}`)
 }
 
 async function click (selector: string) {
   log.info(`clicking selector: ${selector}`)
-  await page.click(selector)
+  await page.click(selector) // , {delay: 3})
 }
 
 async function waitForAndClick (selector: string, waitOptions?: any) {
@@ -441,9 +437,10 @@ describe('end-to-end', () => {
     // Ping the otp endpoint to ensure the server is running.
     try {
       log.info(`Pinging OTP at ${OTP_ROOT}`)
-      const response = await fetch(`${OTP_ROOT}`)
-      if (response.status !== 200) throw new Error('OTP not ready!')
-      else log.info('OTP is OK.')
+      await fetch(`${OTP_ROOT}`)
+      log.info('OTP is OK.')
+      // if (response.status !== 200) throw new Error('OTP not ready!')
+      // else log.info('OTP is OK.')
     } catch (e) {
       if (testOptions.failFast) {
         log.error('OpenTripPlanner not accepting requests. Exiting due to fail fast option.')
@@ -477,15 +474,18 @@ describe('end-to-end', () => {
     log.info('Chromium closed.')
   })
 
+  /// Begin tests
+
   makeTest('should load the page', async () => {
     await goto('http://localhost:9966')
+    await waitForSelector('h1')
     await expectSelectorToContainHtml('h1', 'Conveyal Datatools')
     testResults['should load the page'] = true
   })
 
   makeTest('should login', async () => {
     await goto('http://localhost:9966')
-    await click('[data-test-id="header-log-in-button"]')
+    await waitForAndClick('[data-test-id="header-log-in-button"]')
     await waitForSelector('button[class="auth0-lock-submit"]')
     await page.type('input[class="auth0-lock-input"][name="email"]', config.username)
     await page.type('input[class="auth0-lock-input"][name="password"]', config.password)
@@ -520,7 +520,7 @@ describe('end-to-end', () => {
 
     makeTestPostLogin('should update a project by adding a otp server', async () => {
       // open settings tab
-      await click('#project-viewer-tabs-tab-settings')
+      await waitForAndClick('#project-viewer-tabs-tab-settings')
 
       // navigate to deployments
       await waitForAndClick('[data-test-id="deployment-settings-link"]', { visible: true })
@@ -645,7 +645,7 @@ describe('end-to-end', () => {
       // set fetch url
       await page.type(
         '[data-test-id="feed-source-url-input-group"] input',
-        'https://github.com/catalogueglobal/datatools-ui/raw/end-to-end/configurations/end-to-end/test-gtfs-to-fetch.zip'
+        'https://github.com/catalogueglobal/datatools-ui/raw/dev/configurations/end-to-end/test-gtfs-to-fetch.zip'
       )
       await click('[data-test-id="feed-source-url-input-group"] button')
       await wait(2000, 'for feed source to update')

lib/admin/components/CreateUser.js

@@ -8,13 +8,14 @@ import UserSettings from './UserSettings'
 import UserPermissions from '../../common/user/UserPermissions'
 import {getComponentMessages, getMessage} from '../../common/util/config'
 
+import type {UserState} from '../../manager/reducers/user'
 import type {Organization, Project} from '../../types'
 
 type Props = {
   createUser: ({email: string, password: string, permissions: UserPermissions}) => void,
   fetchProjectFeeds: string => void,
   projects: Array<Project>,
-  creatingUser: boolean,
+  creatingUser: UserState,
   organizations: Array<Organization>
 }
 
@@ -24,39 +25,37 @@ type State = {
   showModal: boolean
 }
 
+const DEFAULT_STATE = {
+  email: '',
+  password: '',
+  showModal: false
+}
+
 export default class CreateUser extends Component<Props, State> {
-  state = {
-    email: '',
-    password: '',
-    showModal: false
-  }
+  state = DEFAULT_STATE
 
-  save = (e: any) => {
+  save = (e: SyntheticInputEvent<HTMLInputElement>) => {
     e.preventDefault()
     if (!e.target.checkValidity()) {
       console.warn('Form inputs are invalid!')
       return
     }
-    this.setState({showModal: false})
     const {email, password} = this.state
     this.props.createUser({
       email,
       password,
       permissions: this.refs.userSettings.getSettings()
     })
+    this.setState(DEFAULT_STATE)
   }
 
-  cancel () {
-    this.setState({
-      showModal: false
-    })
+  _updateField = (evt: SyntheticInputEvent<HTMLInputElement>) => {
+    this.setState({[evt.target.name]: evt.target.value})
   }
 
-  open = () => {
-    this.setState({
-      showModal: true
-    })
-  }
+  cancel = () => this.setState(DEFAULT_STATE)
+
+  open = () => this.setState({showModal: true})
 
   render () {
     const messages = getComponentMessages('CreateUser')
@@ -66,6 +65,7 @@ export default class CreateUser extends Component<Props, State> {
       projects,
       fetchProjectFeeds
     } = this.props
+    const {email, password, showModal} = this.state
     return (
       <div>
         <Button
@@ -75,7 +75,9 @@ export default class CreateUser extends Component<Props, State> {
           <Icon type='plus' />{' '}
           Create User
         </Button>
-        <Modal show={this.state.showModal} onHide={this.cancel.bind(this)}>
+        <Modal
+          show={showModal}
+          onHide={this.cancel}>
           <Modal.Header closeButton>
             <Modal.Title>Create User</Modal.Title>
           </Modal.Header>
@@ -84,18 +86,20 @@ export default class CreateUser extends Component<Props, State> {
               <FormGroup controlId='formControlsEmail'>
                 <ControlLabel>Email Address</ControlLabel>
                 <FormControl
-                  ref='email'
+                  name='email'
                   autoFocus
-                  value={this.state.email}
+                  onChange={this._updateField}
+                  value={email}
                   autoComplete='username email'
                   type='email'
                   placeholder='Enter email' />
               </FormGroup>
               <FormGroup controlId='formControlsPassword'>
                 <ControlLabel>Password</ControlLabel>
                 <FormControl
-                  ref='password'
-                  value={this.state.password}
+                  name='password'
+                  onChange={this._updateField}
+                  value={password}
                   minLength='8'
                   type='password'
                   placeholder='Enter password for new user'

lib/admin/components/OrganizationList.js

@@ -1,31 +1,35 @@
+// @flow
+
 import Icon from '@conveyal/woonerf/components/icon'
-import React, { PropTypes, Component} from 'react'
+import React, {Component} from 'react'
 import { Panel, Modal, Row, Col, Button, FormControl, Label, ListGroup, ListGroupItem, Image } from 'react-bootstrap'
 import validator from 'validator'
 
 import UserPermissions from '../../common/user/UserPermissions'
 import { getComponentMessages, getMessage } from '../../common/util/config'
 import OrganizationSettings from './OrganizationSettings'
 
-export default class OrganizationList extends Component {
-  static propTypes = {
-    // userSearch: PropTypes.func,
-    // page: PropTypes.number,
-    // perPage: PropTypes.number,
-    // userCount: PropTypes.number,
-    // projects: PropTypes.array,
-    // fetchProjectFeeds: PropTypes.func,
-    // createUser: PropTypes.func,
-    // setPage: PropTypes.func,
-    // isFetching: PropTypes.bool,
-    organizations: PropTypes.object,
-    users: PropTypes.object
-    // setUserPermission: PropTypes.func,
-    // saveUser: PropTypes.func,
-    // deleteUser: PropTypes.func,
-    // token: PropTypes.string
-  }
+import type {OrganizationsState} from '../reducers/organizations'
+import type {UsersState} from '../reducers/users'
+import type {Organization, UserProfile, Project} from '../../types'
+
+type Props = {
+  createOrganization: any => Promise<any>,
+  deleteOrganization: Organization => void,
+  fetchOrganizations: () => void,
+  saveOrganization: Organization => void,
+  isFetching: boolean,
+  organizations: OrganizationsState,
+  projects: Array<Project>,
+  updateOrganization: (Organization, any) => void,
+  users: UsersState
+}
 
+type State = {
+  showModal?: boolean
+}
+
+export default class OrganizationList extends Component<Props, State> {
   state = {}
 
   componentWillMount () {
@@ -82,15 +86,15 @@ export default class OrganizationList extends Component {
               </ListGroupItem>
               : organizations.data && organizations.data.map((organization, i) => {
                 const orgUsers = users.data ? users.data.filter(u => {
-                  const permissions = new UserPermissions(u.app_metadata && u.app_metadata.datatools ? u.app_metadata.datatools : null)
+                  const permissions = new UserPermissions(u.app_metadata && u.app_metadata.datatools)
                   return permissions.getOrganizationId() === organization.id
                 }) : []
                 return (
                   <OrganizationRow
                     {...this.props}
                     organization={organization}
                     key={i}
-                    users={orgUsers} />
+                    orgUsers={orgUsers} />
                 )
               })
             }
@@ -119,12 +123,11 @@ export default class OrganizationList extends Component {
   }
 }
 
-class OrganizationRow extends Component {
-  static propTypes = {
-    organization: PropTypes.object,
-    users: PropTypes.array
-  }
-
+class OrganizationRow extends Component<Props & {
+  organization: Organization,
+  orgUsers: Array<UserProfile>
+},
+{isEditing: boolean}> {
   state = {
     isEditing: false
   }
@@ -152,7 +155,7 @@ class OrganizationRow extends Component {
   render () {
     const {
       organization,
-      users
+      orgUsers
     } = this.props
     return (
       <ListGroupItem
@@ -167,7 +170,7 @@ class OrganizationRow extends Component {
             <Col xs={8} sm={5} md={6}>
               <h5>
                 {organization.name}{' '}
-                {users.length ? <Label>{users.length} users</Label> : null}
+                {orgUsers.length ? <Label>{orgUsers.length} users</Label> : null}
               </h5>
               <small />
             </Col>