Merge branch 'dev' into mtc-deploy-with-dev

Author: binh-dam-ibigroup

lib/common/components/ManagerPage.js

@@ -42,13 +42,12 @@ export default class ManagerPage extends React.Component<Props> {
   render () {
     const {itemToLock, title} = this.props
     const homeIsActive = this.isActive('home') || this.isActive('feed') || this.isActive('project')
-    const appTitle = getConfigProperty('application.title') || this.messages('datatools')
     const changelogUrl: ?string = getConfigProperty('application.changelog_url')
     const docsUrl: ?string = getConfigProperty('application.docs_url')
     const supportEmail: ?string = getConfigProperty('application.support_email')
     return (
       <div>
-        <Title>{`${appTitle}${title ? ` - ${title}` : ''}`}</Title>
+        <Title subTitle={title} />
         <CurrentStatusMessage />
         <ConfirmModal ref='confirmModal' />
         <InfoModal ref='infoModal' />

lib/common/components/Title.js

@@ -1,34 +1,28 @@
 // @flow
 
-import {Component} from 'react'
+import { Component } from 'react'
+
+import { getAppName } from '../../common/util/config'
 
 type Props = {
-  children: string
+  subTitle?: ?string
 }
 
-export default class Title extends Component<Props> {
-  oldTitle = ''
+function makeTitle (subTitle?: ?string): string {
+  return `${getAppName()}${subTitle ? ` - ${subTitle}` : ''}`
+}
 
+export default class Title extends Component<Props> {
   componentWillMount () {
-    this.oldTitle = document.title
-    document.title = this.props.children
-  }
-
-  componentWillUnmount () {
-    document.title = this.oldTitle
+    document.title = makeTitle(this.props.subTitle)
   }
 
   componentWillReceiveProps (nextProps: Props) {
-    if (nextProps.children !== this.props.children) {
-      document.title = nextProps.children
+    if (nextProps.subTitle !== this.props.subTitle) {
+      document.title = makeTitle(this.props.subTitle)
     }
   }
 
-  shouldComponentUpdate (nextProps: Props) {
-    // Never update the component when the title changes.
-    return false
-  }
-
   render () {
     return null
   }

lib/common/util/config.js

@@ -9,6 +9,7 @@ import type {
   MessageFile,
   ModuleType
 } from '../../types'
+import { DEFAULT_TITLE } from '../constants'
 
 const DEFAULT_CONFIG = {
   extensions: {},
@@ -77,6 +78,14 @@ export function isExtensionEnabled (extensionName: ExtensionType): boolean {
   )
 }
 
+export function getAppName () {
+  // A localized app title might exist in the ManagerPage i18n messages.
+  // Use that as first fallback, then DEFAULT_TITLE if that one is not provided.
+  const managerPageMessages = getComponentMessages('ManagerPage')
+  const localizedDataToolsName = managerPageMessages('datatools')
+  return getConfigProperty('application.title') || localizedDataToolsName || DEFAULT_TITLE
+}
+
 function initializeConfig () {
   if (!process.env.SETTINGS) {
     throw new Error('SETTINGS environment variable not set')

lib/editor/components/GtfsEditor.js

@@ -17,7 +17,6 @@ import * as userActions from '../../manager/actions/user'
 import ActiveEntityList from '../containers/ActiveEntityList'
 import ActiveTimetableEditor from '../containers/ActiveTimetableEditor'
 import ActiveFeedInfoPanel from '../containers/ActiveFeedInfoPanel'
-import {getConfigProperty} from '../../common/util/config'
 import {getEntityName, getTableById} from '../util/gtfs'
 import {getEditorEnabledState, GTFS_ICONS} from '../util/ui'
 import type {Props as ContainerProps} from '../containers/ActiveGtfsEditor'
@@ -245,10 +244,7 @@ export default class GtfsEditor extends Component<Props, State> {
 
   getEditorTitle () {
     const {activeComponent, activeEntity} = this.props
-    const appName = getConfigProperty('application.title')
-    let title = ''
-    if (appName) title += `${appName} - `
-    title += 'GTFS Editor'
+    let title = 'GTFS Editor'
     if (activeEntity) {
       title += ` - ${getEntityName(activeEntity)}`
     } else if (activeComponent) {
@@ -303,7 +299,7 @@ export default class GtfsEditor extends Component<Props, State> {
       : null
     return (
       <div className='GtfsEditor'>
-        <Title>{this.getEditorTitle()}</Title>
+        <Title subTitle={this.getEditorTitle()} />
         <ActiveEditorLockManager
           disableLock={!namespace}
           feedSourceId={feedSourceId}

lib/manager/components/UserHomePage.js

@@ -10,8 +10,8 @@ import * as feedsActions from '../actions/feeds'
 import * as userActions from '../actions/user'
 import * as visibilityFilterActions from '../actions/visibilityFilter'
 import ManagerPage from '../../common/components/ManagerPage'
-import { AUTH0_DISABLED, DEFAULT_DESCRIPTION, DEFAULT_TITLE } from '../../common/constants'
-import {getConfigProperty, getComponentMessages} from '../../common/util/config'
+import { AUTH0_DISABLED, DEFAULT_DESCRIPTION } from '../../common/constants'
+import {getConfigProperty, getComponentMessages, getAppName} from '../../common/util/config'
 import {defaultSorter} from '../../common/util/util'
 import type {Props as ContainerProps} from '../containers/ActiveUserHomePage'
 import type {Project} from '../../types'
@@ -85,7 +85,7 @@ export default class UserHomePage extends Component<Props, State> {
     } = this.props
     const visibleProjects = projects.sort(defaultSorter)
     const activeProject = project
-    const appTitle = getConfigProperty('application.title') || 'datatools'
+    const appTitle = getAppName()
     return (
       <ManagerPage
         ref='page'
@@ -97,7 +97,7 @@ export default class UserHomePage extends Component<Props, State> {
             <Col md={8} xs={12}>
               {/* Top Welcome Box */}
               <Jumbotron style={{ padding: 30 }}>
-                <h2>{this.messages('welcomeTo')} {appTitle || DEFAULT_TITLE}!</h2>
+                <h2>{this.messages('welcomeTo')} {appTitle}!</h2>
                 <p>{getConfigProperty('application.description') || DEFAULT_DESCRIPTION}</p>
                 <ButtonToolbar>
                   <Button

lib/manager/components/deployment/DeploymentViewer.js

@@ -26,7 +26,7 @@ import Loading from '../../../common/components/Loading'
 import EditableTextField from '../../../common/components/EditableTextField'
 import Title from '../../../common/components/Title'
 import WatchButton from '../../../common/containers/WatchButton'
-import {getComponentMessages, getConfigProperty} from '../../../common/util/config'
+import {getComponentMessages} from '../../../common/util/config'
 import {formatTimestamp, fromNow} from '../../../common/util/date-time'
 import {defaultTileLayerProps} from '../../../common/util/maps'
 import { versionsSorter } from '../../../common/util/util'
@@ -385,11 +385,9 @@ export default class DeploymentViewer extends Component<Props, State> {
     const oldDeployment = (target && project.deployments)
       ? project.deployments.find(d => d.deployedTo === target && deployment.routerId === d.routerId)
       : null
-    const appName = getConfigProperty('application.title')
-    const title = `${appName ? appName + ' - ' : ''}${deployment.name}`
     return (
       <div>
-        <Title>{title}</Title>
+        <Title subTitle={deployment.name} />
         {target && (
           <DeploymentConfirmModal
             deployment={deployment}

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

@@ -172,7 +172,9 @@ exports[`lib > manager > ActiveProjectViewer should render with newly created pr
         title="mock-project"
       >
         <div>
-          <Title />
+          <Title
+            subTitle="mock-project"
+          />
           <Connect(StatusMessage)>
             <StatusMessage
               dispatch={[Function]}

lib/public/components/PublicLandingPage.js

@@ -5,8 +5,8 @@ import { Button, Grid, Row, Col } from 'react-bootstrap'
 import {Link} from 'react-router'
 import {LinkContainer} from 'react-router-bootstrap'
 
-import { DEFAULT_DESCRIPTION, DEFAULT_LOGO, DEFAULT_TITLE } from '../../common/constants'
-import { getComponentMessages, getConfigProperty, isModuleEnabled } from '../../common/util/config'
+import { DEFAULT_DESCRIPTION, DEFAULT_LOGO } from '../../common/constants'
+import { getAppName, getComponentMessages, getConfigProperty, isModuleEnabled } from '../../common/util/config'
 import type {Props as ContainerProps} from '../containers/ActivePublicLandingPage'
 import type {ManagerUserState} from '../../types/reducers'
 
@@ -20,7 +20,6 @@ export default class PublicLandingPage extends Component<Props> {
   messages = getComponentMessages('PublicLandingPage')
 
   render () {
-    const appTitle = getConfigProperty('application.title') || DEFAULT_TITLE
     const appDescription = getConfigProperty('application.description') || DEFAULT_DESCRIPTION
     const logoLarge = getConfigProperty('application.logo_large') || DEFAULT_LOGO
     return (
@@ -29,7 +28,7 @@ export default class PublicLandingPage extends Component<Props> {
           <Row>
             <Col style={{textAlign: 'center'}} smOffset={4} xs={12} sm={4}>
               <img alt={this.messages('appLogo')} src={logoLarge} style={{maxWidth: '256px'}} />
-              <h1>{appTitle}</h1>
+              <h1>{getAppName()}</h1>
             </Col>
           </Row>
           <Row>

lib/public/components/PublicPage.js

@@ -7,7 +7,6 @@ import ConfirmModal from '../../common/components/ConfirmModal'
 import SelectFileModal from '../../common/components/SelectFileModal'
 import Title from '../../common/components/Title'
 import ActivePublicHeader from '../containers/ActivePublicHeader'
-import { getConfigProperty } from '../../common/util/config'
 
 type Props = {
   children?: Node
@@ -23,10 +22,9 @@ export default class PublicPage extends Component<Props> {
   }
 
   render () {
-    const appTitle = getConfigProperty('application.title') || 'Data Tools'
     return (
       <div>
-        <Title>{appTitle}</Title>
+        <Title />
         <ActivePublicHeader />
         {this.props.children}
         <CurrentStatusMessage />

lib/public/containers/ActivePublicHeader.js

@@ -5,14 +5,14 @@ import { connect } from 'react-redux'
 
 import PublicHeader from '../components/PublicHeader'
 import * as userActions from '../../manager/actions/user'
-import { getConfigProperty } from '../../common/util/config'
+import { getAppName } from '../../common/util/config'
 import type { AppState } from '../../types/reducers'
 
 export type Props = {}
 
 const mapStateToProps = (state: AppState, ownProps: Props) => {
   return {
-    title: getConfigProperty('application.title'),
+    title: getAppName(),
     username: state.user.profile ? state.user.profile.email : null,
     userPicture: state.user.profile ? state.user.profile.picture : null
   }