Promoting to prod

src/components/Feed/Feed.jsx

@@ -36,8 +36,8 @@ const Feed = (props) => {
           <div className="card-body draftjs-post" dangerouslySetInnerHTML={{__html: html}} />
         </div>
       </Panel.Body>
-      {allowComments &&
       <FeedComments
+        allowComments={ allowComments }
         totalComments={totalComments}
         hasMoreComments={hasMoreComments}
         onLoadMoreComments={onLoadMoreComments}
@@ -49,7 +49,7 @@ const Feed = (props) => {
         avatarUrl={currentUser.photoURL}
         comments={comments}
         isAddingComment={ isAddingComment }
-      />}
+      />
       {children}
     </ActionCard>
   )

src/components/Feed/FeedComments.jsx

@@ -25,7 +25,7 @@ class FeedComments extends React.Component {
   render() {
     const {
     comments, currentUser, totalComments, onLoadMoreComments, isLoadingComments, hasMoreComments, onAdd,
-    onChange, content, avatarUrl, isAddingComment
+    onChange, content, avatarUrl, isAddingComment, allowComments
   } = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
@@ -77,6 +77,7 @@ class FeedComments extends React.Component {
           <div dangerouslySetInnerHTML={{__html: item.content}} />
         </Comment>
       )}
+      {allowComments &&
       <AddComment
         placeholder="Create a new comment..."
         onAdd={onAdd}
@@ -85,7 +86,7 @@ class FeedComments extends React.Component {
         avatarUrl={avatarUrl}
         authorName={ authorName }
         isAdding={ isAddingComment }
-      />
+      />}
     </div>
   )
   }

src/components/Feed/NewPost.jsx

@@ -41,12 +41,13 @@ class NewPost extends React.Component {
   constructor(props) {
     super(props)
     this.state = {editorState: EditorState.createEmpty(), expandedEditor: false, canSubmit: false}
+    this.onTitleChange = this.onTitleChange.bind(this)
     this.onEditorChange = this.onEditorChange.bind(this)
     this.handleKeyCommand = this.handleKeyCommand.bind(this)
     this.toggleBlockType = this.toggleBlockType.bind(this)
     this.toggleInlineStyle = this.toggleInlineStyle.bind(this)
     this.onClickOutside = this.onClickOutside.bind(this)
-    this.onNewPostChange = this.onNewPostChange.bind(this)
+    this.validateSubmitState = this.validateSubmitState.bind(this)
   }
 
   componentDidMount() {
@@ -59,11 +60,11 @@ class NewPost extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!(nextProps.isCreating || nextProps.hasError && !nextProps.isCreating)) {
+    if (nextProps.isCreating !== this.props.isCreating && !nextProps.isCreating && !nextProps.hasError) {
       this.setState({editorState: EditorState.createEmpty()})
       this.refs.title.value = ''
     }
-    this.onNewPostChange()
+    this.validateSubmitState()
   }
 
   onClickOutside(evt) {
@@ -125,15 +126,29 @@ class NewPost extends React.Component {
 
   onEditorChange(editorState) {
     this.setState({editorState})
-    this.onNewPostChange()
+    this.validateSubmitState()
+    if (this.props.onNewPostChange) {
+      // NOTE: uses getPlainText method to avoid newline character for empty content
+      this.props.onNewPostChange(this.refs.title.value, editorState.getCurrentContent().getPlainText())
+    }
   }
 
-  onNewPostChange() {
+  validateSubmitState() {
+    const { editorState } = this.state
     this.setState({
-      canSubmit: this.refs.title && !!this.refs.title.value.trim().length && this.state.editorState.getCurrentContent().hasText()
+      canSubmit: this.refs.title && !!this.refs.title.value.trim().length && editorState.getCurrentContent().hasText()
     })
   }
 
+  onTitleChange() {
+    const { editorState } = this.state
+    this.validateSubmitState()
+    if (this.props.onNewPostChange) {
+      // NOTE: uses getPlainText method to avoid newline character for empty content
+      this.props.onNewPostChange(this.refs.title.value, editorState.getCurrentContent().getPlainText())
+    }
+  }
+
   render() {
     const {currentUser, titlePlaceholder, isCreating} = this.props
     const {editorState, canSubmit} = this.state
@@ -191,7 +206,7 @@ class NewPost extends React.Component {
               ref="title"
               className="new-post-title"
               type="text"
-              onChange={this.onNewPostChange}
+              onChange={this.onTitleChange}
               placeholder={ titlePlaceholder || 'Title of the post'}
             />
             <div className="draftjs-editor tc-textarea">

src/components/Footer/Footer.jsx

@@ -9,7 +9,7 @@ const Footer = () => {
   const otherNavigationItems = [
     {img: '', text: 'About', link: 'https://www.topcoder.com/about-topcoder/', target: '_blank'},
     {img: '', text: 'Contact', link: 'https://www.topcoder.com/about-topcoder/contact/', target: '_blank'},
-    {img: '', text: 'Help', link: 'https://help.topcoder.com/hc/en-us', target: '_blank'},
+    {img: '', text: 'Help', link: 'https://help.topcoder.com/hc/en-us/articles/225540188-Topcoder-Connect-FAQs', target: '_blank'},
     {img: '', text: 'Privacy', link: 'https://www.topcoder.com/community/how-it-works/privacy-policy/', target: '_blank'},
     {img: '', text: 'Terms', link: 'https://connect.topcoder.com/terms'}
   ]

src/components/FooterV2/FooterV2.jsx

@@ -6,7 +6,7 @@ const FooterV2 = () => (
     <ul className="footer-links">
       <li><a href="https://www.topcoder.com/about-topcoder/" target="_blank">About</a></li>
       <li><a href="https://www.topcoder.com/about-topcoder/contact/" target="_blank">Contact</a></li>
-      <li><a href="https://help.topcoder.com/hc/en-us" target="_blank">Help</a></li>
+      <li><a href="https://help.topcoder.com/hc/en-us/articles/225540188-Topcoder-Connect-FAQs" target="_blank">Help</a></li>
       <li><a href="https://www.topcoder.com/community/how-it-works/privacy-policy/" target="_blank">Privacy</a></li>
       <li><a href="https://connect.topcoder.com/terms">Terms</a></li>
     </ul>

src/components/MessageList/MessageList.jsx

@@ -57,8 +57,9 @@ class MessageList extends Component {
   componentDidMount() {
     const { scrollPosition } = this.props
     const panelMessages = this.refs.panelMessages
-    // 145 = 60 for topbar + 45 for panel title + 20px for margin between topbar and left panel + 10px padding
-    panelMessages.style.height = (window.innerHeight - 145) + 'px'
+    // 215 = 60 for topbar + 45 for panel title + 20px for margin between topbar and left panel + 10px padding
+    // + 60px footer + 10px margin bw footer and left panel
+    panelMessages.style.height = (window.innerHeight - 215) + 'px'
     if (scrollPosition) {
       // We use requestAnimationFrame because this function may be executed before
       // the DOM elements are actually drawn.

src/components/TeamManagement/TeamManagement.scss

@@ -214,6 +214,10 @@ $tc-body-extra-small	: 12px;
         }
       }
 
+      input::-ms-clear {
+        display: none;
+      }
+
       .modal-inline-form{
         display: flex;
         margin-bottom: $base-unit*2;

src/components/TopBar/TopBar.jsx

@@ -6,7 +6,7 @@ import cn from 'classnames'
 import _ from 'lodash'
 import { UserDropdown, Icons } from 'appirio-tech-react-components'
 
-const { ConnectLogoBeta } = Icons
+const { ConnectLogo } = Icons
 import { SearchBar } from 'appirio-tech-react-components'
 import Filters from './Filters'
 import ProjectToolBar from './ProjectToolBar'
@@ -67,7 +67,7 @@ class TopBar extends Component {
     ]
     const logo = (
       <div className="logo-wrapper">
-        <Link className="logo" to={logoTargetUrl} target="_self"><ConnectLogoBeta /></Link>
+        <Link className="logo" to={logoTargetUrl} target="_self"><ConnectLogo /></Link>
       </div>
     )
     const avatar = (

src/projects/detail/Dashboard.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import ProjectInfoContainer from './containers/ProjectInfoContainer'
 import FeedContainer from './containers/FeedContainer'
 import Sticky from 'react-stickynode'
+import spinnerWhileLoading from '../../components/LoadingSpinner'
 
 require('./Dashboard.scss')
 
-const Dashboard = ({project, currentMemberRole}) => (
+const DashboardView = ({project, currentMemberRole, route}) => (
   <div>
     <div className="dashboard-container">
       <div className="left-area">
@@ -16,10 +18,29 @@ const Dashboard = ({project, currentMemberRole}) => (
         </Sticky>
       </div>
       <div className="right-area">
-        <FeedContainer currentMemberRole={currentMemberRole} project={project} />
+        <FeedContainer currentMemberRole={currentMemberRole} project={project} route={route} />
       </div>
     </div>
   </div>
 )
 
-export default Dashboard
+const enhance = spinnerWhileLoading(props => !props.isLoading)
+const EnhancedDashboardView = enhance(DashboardView)
+
+class Dashboard extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return <EnhancedDashboardView {...this.props} />
+  }
+}
+
+const mapStateToProps = ({ projectState }) => {
+  return {
+    isLoading      : projectState.isLoading
+  }
+}
+
+export default connect(mapStateToProps)(Dashboard)

src/projects/detail/Messages.jsx

@@ -4,7 +4,12 @@ import MessagesContainer from './containers/MessagesContainer'
 
 require('./Messages.scss')
 
-const Messages = ({ location, project, currentMemberRole }) => (
-  <MessagesContainer location={ location } project={ project } currentMemberRole={ currentMemberRole } />
+const Messages = ({ location, project, currentMemberRole, route }) => (
+  <MessagesContainer
+    location={ location }
+    project={ project }
+    currentMemberRole={ currentMemberRole }
+    route={ route }
+  />
 )
 export default Messages

src/projects/detail/Messages.scss

@@ -18,12 +18,13 @@
   @include flexBox;
   max-width: 1110px;
   margin: 20px auto;
-  height: calc(100% - 20px);// 20px is for bottom margin
+  height: calc(100% - 80px);// 20px is for bottom margin, 60px for footer
 
   .left-area {
     @include flexWidth(1);
     max-width: 360px;
     z-index: 14;/* Don't know the exact reason, but it needs explicit z-index to get behind the topbar*/
+    transform: translate3d(0px, 0px, 0px);
   }
   .right-area {
     @include flexWidth(2);

src/projects/detail/containers/FeedContainer.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import { withRouter } from 'react-router'
 import _ from 'lodash'
 import {
   THREAD_MESSAGES_PAGE_SIZE,
@@ -36,7 +37,16 @@ class FeedView extends React.Component {
     this.onNewCommentChange = this.onNewCommentChange.bind(this)
     this.onShowAllComments = this.onShowAllComments.bind(this)
     this.onAddNewComment = this.onAddNewComment.bind(this)
-    this.state = { feeds : [], showAll: [] }
+    this.onLeave = this.onLeave.bind(this)
+    this.isChanged = this.isChanged.bind(this)
+    this.onNewPostChange = this.onNewPostChange.bind(this)
+    this.state = { feeds : [], showAll: [], newPost: {} }
+  }
+
+  componentDidMount() {
+    const routeLeaveHook = this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
+    window.addEventListener('beforeunload', this.onLeave)
+    this.setState({ routeLeaveHook })
   }
 
   componentWillMount() {
@@ -47,7 +57,28 @@ class FeedView extends React.Component {
     this.init(nextProps)
   }
 
-  mapFeed(feed, showAll = false) {
+  componentWillUnmount() {
+    if (this.state.routeLeaveHook) {
+      this.state.routeLeaveHook()
+    }
+    window.removeEventListener('beforeunload', this.onLeave)
+  }
+
+  // Notify user if they navigate away while the form is modified.
+  onLeave(e) {
+    if (this.isChanged()) {
+      return e.returnValue = 'You have uposted content. Are you sure you want to leave?'
+    }
+  }
+
+  isChanged() {
+    const { newPost } = this.state
+    const hasComment = !_.isUndefined(_.find(this.state.feeds, (feed) => feed.newComment && feed.newComment.length))
+    const hasThread = (newPost.title && !!newPost.title.trim().length) || ( newPost.content && !!newPost.content.trim().length)
+    return hasThread || hasComment
+  }
+
+  mapFeed(feed, showAll = false, resetNewComment = false) {
     const { allMembers } = this.props
     const item = _.pick(feed, ['id', 'date', 'read', 'tag', 'title', 'totalPosts', 'userId', 'reference', 'referenceId', 'postIds', 'isAddingComment', 'isLoadingComments', 'error'])
     if (isSystemUser(item.userId)) {
@@ -72,20 +103,27 @@ class FeedView extends React.Component {
         author: isSystemUser(p.userId) ? SYSTEM_USER : allMembers[p.userId]
       }
     }
+    const validPost = (post) => {
+      return post.type === 'post' && (post.body && post.body.trim().length || !isSystemUser(post.userId))
+    }
     if (showAll) {
       // if we are showing all comments, just iterate through the entire array
       _.forEach(_.slice(feed.posts, 1), p => {
-        p.type === 'post' ? item.comments.push(_toComment(p)) : item.totalComments--
+        validPost(p) ? item.comments.push(_toComment(p)) : item.totalComments--
       })
     } else {
       // otherwise iterate from right and add to the beginning of the array
       _.forEachRight(_.slice(feed.posts, 1), (p) => {
-        p.type === 'post' ? item.comments.unshift(_toComment(p)) : item.totalComments--
+        validPost(p) ? item.comments.unshift(_toComment(p)) : item.totalComments--
         if (!feed.showAll && item.comments.length === THREAD_MESSAGES_PAGE_SIZE)
           return false
       })
     }
     item.newComment = ''
+    if (!resetNewComment) {
+      const feedFromState = _.find(this.state.feeds, f => feed.id === f.id)
+      item.newComment = feedFromState ? feedFromState.newComment : ''
+    }
     item.hasMoreComments = item.comments.length !== item.totalComments
     return item
   }
@@ -99,6 +137,12 @@ class FeedView extends React.Component {
     })
   }
 
+  onNewPostChange(title, content) {
+    this.setState({
+      newPost: {title, content}
+    })
+  }
+
   onNewPost({title, content}) {
     const { project } = this.props
     const newFeed = {
@@ -194,6 +238,7 @@ class FeedView extends React.Component {
             isCreating={ isCreatingFeed }
             hasError={ error }
             heading="NEW STATUS POST"
+            onNewPostChange={this.onNewPostChange}
             titlePlaceholder="Share the latest project updates with the team"
           />
         }
@@ -203,7 +248,7 @@ class FeedView extends React.Component {
   }
 }
 const enhance = spinnerWhileLoading(props => !props.isLoading)
-const EnhancedFeedView = enhance(FeedView)
+const EnhancedFeedView = withRouter(enhance(FeedView))
 
 
 class FeedContainer extends React.Component {