Merge pull request #1324 from appirio-tech/feature/project-listing-updates#1268

Feature/project listing updates#1268

Author: vikasrohit

src/components/ProjectInfo/ProjectInfo.jsx

@@ -28,7 +28,7 @@ class ProjectInfo extends Component {
   }
 
   render() {
-    const { project, currentMemberRole, duration, canDeleteProject, onChangeStatus, directLinks } = this.props
+    const { project, currentMemberRole, duration, canDeleteProject, onChangeStatus, directLinks, isManager } = this.props
     const { showDeleteConfirm } = this.state
     return (
       <div className="project-info">
@@ -54,6 +54,7 @@ class ProjectInfo extends Component {
           duration={duration}
           descLinesCount={4}
           onChangeStatus={onChangeStatus}
+          isManager={isManager}
         />
         <ProjectDirectLinks
           directLinks={directLinks}

src/components/ProjectStatus/ProjectStatus.scss

@@ -154,7 +154,7 @@ $status-height :  20px;
       @include roboto-medium;
       font-size: $tc-label-md;
       text-align: left;
-      color: $tc-light-blue;
+      color: $tc-black;
       line-height: 30px;
       padding-left: 20px;
       margin-bottom: 20px;
@@ -179,6 +179,7 @@ $status-height :  20px;
       .status-label {
         color: #394146;
         padding-right: 0px;
+        font-size: 13px;
       }
     }
   }

src/projects/detail/Dashboard.jsx

@@ -7,13 +7,17 @@ import spinnerWhileLoading from '../../components/LoadingSpinner'
 
 require('./Dashboard.scss')
 
-const DashboardView = ({project, currentMemberRole, route, params}) => (
+const DashboardView = ({project, currentMemberRole, route, params, isManager }) => (
   <div>
     <div className="dashboard-container">
       <div className="left-area">
         <Sticky top={80}>
           <div className="dashboard-left-panel">
-            <ProjectInfoContainer currentMemberRole={currentMemberRole} project={project} />
+            <ProjectInfoContainer
+              currentMemberRole={currentMemberRole}
+              project={project}
+              isManager={isManager}
+            />
           </div>
         </Sticky>
       </div>

src/projects/detail/ProjectDetail.jsx

@@ -5,7 +5,10 @@ import { connect } from 'react-redux'
 import _ from 'lodash'
 import { renderComponent, branch, compose, withProps } from 'recompose'
 import { loadProjectDashboard } from '../actions/projectDashboard'
-import { LOAD_PROJECT_FAILURE, PROJECT_ROLE_CUSTOMER, PROJECT_ROLE_OWNER } from '../../config/constants'
+import {
+  LOAD_PROJECT_FAILURE, PROJECT_ROLE_CUSTOMER, PROJECT_ROLE_OWNER,
+  ROLE_ADMINISTRATOR, ROLE_CONNECT_MANAGER
+} from '../../config/constants'
 import spinnerWhileLoading from '../../components/LoadingSpinner'
 import CoderBot from '../../components/CoderBot/CoderBot'
 
@@ -26,7 +29,8 @@ const ProjectDetailView = (props) => {
   const children = React.Children.map(props.children, (child) => {
     return React.cloneElement(child, {
       project: props.project,
-      currentMemberRole: props.currentMemberRole
+      currentMemberRole: props.currentMemberRole,
+      isManager: props.isManager
     })
   })
   return <div>{children}</div>
@@ -67,7 +71,15 @@ class ProjectDetail extends Component {
 
   render() {
     const currentMemberRole = this.getProjectRoleForCurrentUser(this.props)
-    return <EnhancedProjectDetailView {...this.props} currentMemberRole={currentMemberRole} />
+    const managerRoles = [ROLE_ADMINISTRATOR, ROLE_CONNECT_MANAGER]
+    const isManager = this.props.currentUserRoles.some((role) => managerRoles.indexOf(role) !== -1)
+    return (
+      <EnhancedProjectDetailView
+        {...this.props}
+        currentMemberRole={currentMemberRole}
+        isManager={isManager}
+      />
+    )
   }
 }
 
@@ -77,9 +89,11 @@ const mapStateToProps = ({projectState, projectDashboard, loadUser}) => {
     isLoading: projectDashboard.isLoading,
     isProcessing: projectState.processing,
     error: projectState.error,
-    project: projectState.project
+    project: projectState.project,
+    currentUserRoles: loadUser.user.roles
   }
 }
+
 const mapDispatchToProps = { loadProjectDashboard }
 
 ProjectDetail.propTypes = {

src/projects/detail/containers/ProjectInfoContainer.js

@@ -74,8 +74,7 @@ class ProjectInfoContainer extends React.Component {
 
   render() {
     const { duration } = this.state
-    const { project, currentMemberRole } = this.props
-
+    const { project, currentMemberRole, isManager } = this.props
     let directLinks = null
     // check if direct links need to be added
     const isMemberOrCopilot = _.indexOf([PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER], currentMemberRole) > -1
@@ -108,6 +107,7 @@ class ProjectInfoContainer extends React.Component {
           onDeleteProject={this.onDeleteProject}
           onChangeStatus={this.onChangeStatus}
           directLinks={directLinks}
+          isManager={isManager}
         />
         <LinksMenu
           links={project.bookmarks || []}

src/projects/list/components/Projects/ProjectCardBody.jsx

@@ -4,17 +4,18 @@ import TextTruncate from 'react-text-truncate'
 import ProjectProgress from '../../../../components/ProjectProgress/ProjectProgress'
 import ProjectStatus from '../../../../components/ProjectStatus/ProjectStatus'
 import editableProjectStatus from '../../../../components/ProjectStatus/editableProjectStatus'
-import { PROJECT_STATUS_ACTIVE, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER } from '../../../../config/constants'
+import { PROJECT_STATUS_ACTIVE, PROJECT_ROLE_COPILOT } from '../../../../config/constants'
 import './ProjectCardBody.scss'
 import _ from 'lodash'
 
 const EnhancedProjectStatus = editableProjectStatus(ProjectStatus)
 
 function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount = 8,
-  onChangeStatus }) {
+  onChangeStatus, isManager }) {
   if (!project) return null
-  const canEdit = currentMemberRole
-    && _.indexOf([PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER], currentMemberRole) > -1
+
+  const canEdit = isManager || (currentMemberRole
+    && (_.indexOf([PROJECT_ROLE_COPILOT], currentMemberRole) > -1))
 
   return (
     <div className="project-card-body">
@@ -26,7 +27,7 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount
         textTruncateChild={<span><Link className="read-more-link" to={`/projects/${project.id}/specification`}> read more </Link></span>}
       />
       <div className="project-status">
-        {project.status !== PROJECT_STATUS_ACTIVE &&
+        {(duration && duration.percent === 0) &&
           <EnhancedProjectStatus
             status={project.status}
             showText
@@ -37,7 +38,7 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount
             onChangeStatus={onChangeStatus}
           />
         }
-        {project.status === PROJECT_STATUS_ACTIVE &&
+        {(project.status === PROJECT_STATUS_ACTIVE && duration && duration.percent !== 0) &&
           <ProjectProgress {...duration} viewType={ProjectProgress.ViewTypes.CIRCLE} percent={46}>
             <span className="progress-text">{duration.percent}% completed</span>
           </ProjectProgress>

src/projects/list/components/Projects/ProjectCardBody.scss

@@ -18,7 +18,6 @@
   .project-status {
     border-top: 1px solid $tc-gray-10;
     border-bottom: 1px solid $tc-gray-10;
-    padding: 10px 0px;
     display: flex;
     justify-content: center;
     margin-top: 20px;

src/projects/list/components/Projects/ProjectDirectLinks.scss

@@ -6,6 +6,8 @@
   color: $tc-gray-40;
   line-height: $base-unit*6;
   padding-top: 2 * $base_unit;
+  padding-left: 4 * $base_unit;
+  padding-right: 4 * $base_unit;
   ul {
     padding: 0;
     li {