Merge pull request #2684 from appirio-tech/hotfix/show-error-for-project

[HOTFIX] [PROD] for issue #2683 - show proper error message when error happens during project loading

Author: RishiRajSahu

src/components/TopBar/ProjectToolBar.js

@@ -72,7 +72,7 @@ class ProjectToolBar extends React.Component {
             <span ref="name" onMouseEnter={this.onNameEnter} onMouseLeave={this.onNameLeave}>{_.unescape(project.name)}</span>
             {isTooltipVisible && <div className="breadcrumb-tooltip">{_.unescape(project.name)}</div>}
           </div>}
-          <div className="bar-column project-name mobile"><span>{_.unescape(project.name)}</span></div>
+          {project && project.name && <div className="bar-column project-name mobile"><span>{_.unescape(project.name)}</span></div>}
           <div className="bar-column">
             <NewProjectNavLink compact />
             {userMenu}

src/projects/detail/ProjectDetail.jsx

@@ -57,20 +57,20 @@ const ProjectDetailView = (props) => {
   const regex = /#(feed-([0-9]+)|comment-([0-9]+))/
   const match = props.location.hash.match(regex)
   const ids = match ? { feedId: match[2], commentId: match[3] } : {}
-  const children = React.Children.map(props.children, (child) => {
-    return React.cloneElement(child, {
-      project: props.project,
-      currentMemberRole: currentMemberRole || '',
-      isSuperUser: props.isSuperUser,
-      isManageUser: props.isManageUser,
-      isCustomerUser: props.isCustomerUser,
-      isProcessing: props.isProcessing,
-      allProductTemplates: props.allProductTemplates,
-      productsTimelines: props.productsTimelines,
-      ...ids
-    })
-  })
-  return <div>{children}</div>
+
+  const { component: Component } = props
+  const componentProps = {
+    project: props.project,
+    currentMemberRole: currentMemberRole || '',
+    isSuperUser: props.isSuperUser,
+    isManageUser: props.isManageUser,
+    isCustomerUser: props.isCustomerUser,
+    isProcessing: props.isProcessing,
+    allProductTemplates: props.allProductTemplates,
+    productsTimelines: props.productsTimelines,
+    ...ids
+  }
+  return <Component {...componentProps} />
 }
 const EnhancedProjectDetailView = spinner(errorHandler(ProjectDetailView))
 

src/projects/routes.jsx

@@ -21,20 +21,15 @@ import { requiresAuthentication } from '../components/AuthenticatedComponent'
 const ProjectLayoutWithAuth = requiresAuthentication(ProjectLayout)
 const FileDownloadWithAuth = requiresAuthentication(FileDownload)
 
-// NOTE:
-// we cannot move up ProjectDetail component
-// we have to keep it like it's done below because
-// Dashboard, SpecificationContainer and ProjectMessages have to be immediate children
-// of ProjectDetail component because ProjectDetail updates children props by React.Children method
 const ProjectDetailWithAuth = withProps({ main:
   <Switch>
-    <Route exact path="/projects/:projectId" render={() => <ProjectDetail><Dashboard /></ProjectDetail>} />
-    <Route path="/projects/:projectId/status/:statusId" render={() => <ProjectDetail><Dashboard /></ProjectDetail>} />
-    <Route path="/projects/:projectId/specification" render={() => <ProjectDetail><SpecificationContainer /></ProjectDetail>} />
-    <Route path="/projects/:projectId/scope" render={() => <ProjectDetail><Scope /></ProjectDetail>} />
-    <Route path="/projects/:projectId/plan" render={() => <ProjectDetail><ProjectPlan /></ProjectDetail>} />
-    <Route path="/projects/:projectId/add-phase" render={() => <ProjectDetail><ProjectAddPhaseContainer /></ProjectDetail>} />
-    <Route path="/projects/:projectId/discussions/:discussionId?" render={() => <ProjectDetail><ProjectMessages /></ProjectDetail>} />
+    <Route exact path="/projects/:projectId" render={() => <ProjectDetail component={Dashboard} />} />
+    <Route path="/projects/:projectId/status/:statusId" render={() => <ProjectDetail component={Dashboard} />} />
+    <Route path="/projects/:projectId/specification" render={() => <ProjectDetail component={SpecificationContainer} />} />
+    <Route path="/projects/:projectId/scope" render={() => <ProjectDetail component={Scope} />} />
+    <Route path="/projects/:projectId/plan" render={() => <ProjectDetail component={ProjectPlan} />} />
+    <Route path="/projects/:projectId/add-phase" render={() => <ProjectDetail component={ProjectAddPhaseContainer} />} />
+    <Route path="/projects/:projectId/discussions/:discussionId?" render={() => <ProjectDetail component={ProjectMessages} />} />
     <Route render={() => <CoderBot code={404}/>} />
   </Switch>
 })(ProjectLayoutWithAuth)