Generic Phases with New Milestone Types

.circleci/config.yml

@@ -128,7 +128,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['dev']
+              only: ['dev', 'feature/generic-phases-with-new-milestone-types']
 
       - deployTest01:
           context : org-global

config/constants/dev.js

@@ -43,6 +43,7 @@ module.exports = {
   PREDIX_PROGRAM_ID         : 3448,
   IBM_COGNITIVE_PROGRAM_ID  : 3449,
   HEAP_ANALYTICS_APP_ID     : '4153837120',
+  PHASE_PRODUCT_TEMPLATE_ID : 166,
 
   TC_NOTIFICATION_URL: 'https://api.topcoder-dev.com/v5/notifications',
   CONNECT_MESSAGE_API_URL: 'https://api.topcoder-dev.com/v5',

config/constants/master.js

@@ -43,6 +43,7 @@ module.exports = {
   PREDIX_PROGRAM_ID         : 3448,
   IBM_COGNITIVE_PROGRAM_ID  : 3449,
   HEAP_ANALYTICS_APP_ID     : '638908330',
+  PHASE_PRODUCT_TEMPLATE_ID : 33,
 
   TC_NOTIFICATION_URL: 'https://api.topcoder.com/v5/notifications',
   CONNECT_MESSAGE_API_URL: 'https://api.topcoder.com/v5',

config/constants/qa.js

@@ -42,6 +42,7 @@ module.exports = {
   PREDIX_PROGRAM_ID         : 3448,
   IBM_COGNITIVE_PROGRAM_ID  : 3449,
   HEAP_ANALYTICS_APP_ID     : '4153837120',
+  PHASE_PRODUCT_TEMPLATE_ID : 166,
 
   TC_NOTIFICATION_URL: 'https://api.topcoder-dev.com/v5/notifications',
   CONNECT_MESSAGE_API_URL: 'https://api.topcoder-qa.com/v5',

docs/permissions.html

@@ -996,6 +996,30 @@ <h2 class="anchor-container">
               </div>
             </div>
           </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              <div class="permission-title anchor-container">
+                <a href="#EDIT_PROJECT_STATUS_TO_SPECIAL" name="EDIT_PROJECT_STATUS_TO_SPECIAL" class="anchor"></a>Edit project status to special
+              </div>
+              <div class="permission-variable"><small><code>EDIT_PROJECT_STATUS_TO_SPECIAL</code></small></div>
+              <div class="text-black-50 small-text">Special values are any values except of &quot;Active&quot; and &quot;Completed&quot;.</div>
+            </div>
+            <div class="col-9 py-2">
+              <div>
+                    <span class="badge badge-primary" title="Allowed Project Role">manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">account_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">account_executive</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">project_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">program_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">solution_architect</span>
+              </div>
+
+              <div>
+                    <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
+                    <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
+              </div>
+            </div>
+          </div>
           <div class="row border-top">
             <div class="col py-2">
               <div class="permission-title anchor-container">
@@ -1167,6 +1191,12 @@ <h2 class="anchor-container">
             <div class="col-9 py-2">
               <div>
                     <span class="badge badge-primary" title="Allowed Project Role">customer</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">account_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">account_executive</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">project_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">program_manager</span>
+                    <span class="badge badge-primary" title="Allowed Project Role">solution_architect</span>
               </div>
 
               <div>

src/api/projects.js

@@ -184,26 +184,6 @@ export function createPhaseProduct(projectId, phaseId, product) {
     .then( resp => resp.data)
 }
 
-export function createProjectWithStatus(projectProps, status) {
-  // Phase out discussions
-  // TODO: Remove this once none of the active projects
-  // have the discussions tab enabled
-  projectProps.details.hideDiscussions = true
-
-  return axios.post(`${PROJECTS_API_URL}/v5/projects/`, projectProps)
-    .then( resp => resp.data)
-    .then(project => {
-      const updatedProps = { status }
-      const projectId = project.id
-      return axios.patch(`${PROJECTS_API_URL}/v5/projects/${projectId}/`, updatedProps)
-        .then(resp => resp.data)
-        .catch(error => { // eslint-disable-line no-unused-vars
-          // return created project even if status update fails to prevent error page
-          return project
-        })
-    })
-}
-
 export function deleteProject(projectId) {
   return axios.delete(`${PROJECTS_API_URL}/v5/projects/${projectId}/`)
     .then(() => {

src/components/Layout/Layout.scss

@@ -22,8 +22,5 @@
     &[data-route*='new-project'] {
       background-color: $tc-gray-neutral-light;
     }
-    &[data-route*='add-phase'] {
-      background-color: $tc-gray-neutral-light;
-    }
   }
 }

src/components/ProjectStatus/ProjectStatus.scss

@@ -8,22 +8,22 @@
   .ProjectStatus {
     position: relative;
     height: $status-height;
-  
+
     .status-icon {
       position: relative;
       display: inline-block;
       min-width: 4 * $base-unit;
       width: 4 * $base-unit;
       height: 4 * $base-unit;
       // top: 3px;
-  
+
       i {
         display: block;
         width: 4 * $base-unit;
         height: 4 * $base-unit;
       }
     }
-  
+
     .status-label {
       position: relative;
       @include tc-label-xs;
@@ -33,7 +33,7 @@
       margin-left: 10px;
     }
   }
-  
+
   .EditableProjectStatus {
     &.modal-active {
       .modal-overlay {
@@ -59,7 +59,7 @@
     .status-label {
       vertical-align: top;
     }
-  
+
     .status-header {
       display: flex;
       // position: absolute;
@@ -70,19 +70,19 @@
       user-select: none;
       border-radius: $base-unit*4;
       cursor: default;
-  
+
       .caret {
         display: none;
       }
-  
+
       &.editable {
         cursor: pointer;
-  
+
         &:hover {
           &::after {
           }
         }
-  
+
         .caret {
           // content: '';
           // z-index: 3;
@@ -97,33 +97,33 @@
           path {
             stroke: $tc-gray-70;
           }
-  
+
           .Icon {
             width: 100%;
             height: 100%;
             display: block;
           }
         }
       }
-  
-  
+
+
       &.unified-header {
         background-color: $tc-gray-40;
-  
+
         .status-label {
           color: $tc-white;
         }
       }
     }
-  
+
     .status-label {
       position: relative;
       @include tc-label-xs;
       height: $base-unit*4;
       padding-right: $base-unit;
       margin-left: 10px;
     }
-  
+
     // Stylize the dropdown elements
     .status-dropdown {
       min-width: 150px;
@@ -138,12 +138,12 @@
       right: -10px;
       z-index: 20;
       transition: 250ms all;
-  
+
       &.dropdown-up {
         top: auto;
         bottom: 0;
       }
-  
+
       .status-header {
         @include roboto-medium;
         font-size: $tc-label-md;
@@ -154,7 +154,7 @@
         margin-bottom: 2px;
         white-space: nowrap;
       }
-  
+
       .status-option {
         display: flex;
         @include roboto-medium;
@@ -163,19 +163,37 @@
         line-height: 30px;
         padding: 0 20px;
         white-space: nowrap;
-  
+
         &:hover {
           background: $tc-dark-blue-10;
         }
-  
+
         &.active {
           background: $tc-gray-10;
         }
-
+
+        &.disabled {
+          &,
+          &:hover,
+          &:active,
+          &:focus {
+            background: transparent;
+            cursor: default;
+
+            .status-label {
+              color: $tc-gray-30;
+            }
+
+            svg {
+              opacity: 0.5;
+            }
+          }
+        }
+
         svg {
           margin-top: 7px;
         }
-  
+
         .status-label {
           color: $tc-gray-80;
           line-height: 30px;
@@ -185,4 +203,4 @@
     }
   }
 }
-  
+

src/components/ProjectStatus/editableProjectStatus.js

@@ -4,13 +4,17 @@ import ProjectStatusChangeConfirmation from './ProjectStatusChangeConfirmation'
 import cn from 'classnames'
 import _ from 'lodash'
 import enhanceDropdown from 'appirio-tech-react-components/components/Dropdown/enhanceDropdown'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
 import {
   PROJECT_STATUS,
   PROJECT_STATUS_COMPLETED,
   PROJECT_STATUS_CANCELLED,
-  PROJECT_STATUS_DRAFT
+  PROJECT_STATUS_DRAFT,
+  TOOLTIP_DEFAULT_DELAY
 } from '../../config/constants'
 import CarretDownNormal9px from '../../assets/icons/arrow-9px-carret-down-normal.svg'
+import { hasPermission } from '../../helpers/permissions'
+import { PERMISSIONS } from '../../config/permissions'
 
 
 const hocStatusDropdown = (CompositeComponent, statusList) => {
@@ -55,24 +59,33 @@ const hocStatusDropdown = (CompositeComponent, statusList) => {
               <div className="status-header">Project Status</div>
               <ul>
                 {
-                  statusList.sort((a, b) => a.order - b.order).map((item) =>
-                    (
-                      <div key={item.value} className="tooltip-target">
-                        <li>
-                          <a
-                            href="javascript:"
-                            className={cn('status-option', 'status-' + item.value, { active: item.value === status, disabled: item.disabled })}
-                            onClick={(e) => {
-                              if (!item.disabled)
-                                onItemSelect(item.value, e)
-                            }}
-                          >
-                            <CompositeComponent status={item} showText />
-                          </a>
-                        </li>
-                      </div>
+                  statusList.sort((a, b) => a.order - b.order).map((item) => {
+                    const selectItem = (
+                      <li key={item.value}>
+                        <a
+                          href="javascript:"
+                          className={cn('status-option', 'status-' + item.value, { active: item.value === status, disabled: item.disabled })}
+                          onClick={(e) => {
+                            if (!item.disabled)
+                              onItemSelect(item.value, e)
+                          }}
+                        >
+                          <CompositeComponent status={item} showText />
+                        </a>
+                      </li>
                     )
-                  )
+
+                    return item.toolTipMessage ? (
+                      <Tooltip theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY} key={item.value} usePortal>
+                        <div className="tooltip-target">
+                          {selectItem}
+                        </div>
+                        <div className="tooltip-body">
+                          {item.toolTipMessage}
+                        </div>
+                      </Tooltip>
+                    ) : selectItem
+                  })
                 }
               </ul>
             </div>
@@ -132,10 +145,29 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
   }
 
   getProjectStatusDropdownValues(status) {
-    if (status === PROJECT_STATUS_DRAFT) {
-      return [{color: 'gray', name: 'Draft', fullName: 'Project is in draft', value: PROJECT_STATUS_DRAFT, order: 2, dropDownOrder: 1 }].concat(PROJECT_STATUS)
+    const statusList = status === PROJECT_STATUS_DRAFT
+      // if current status, is "Draft" which is deprecated, then show it on the list
+      ? [{color: 'gray', name: 'Draft', fullName: 'Project is in draft', value: PROJECT_STATUS_DRAFT, order: 2, dropDownOrder: 1 }].concat(PROJECT_STATUS)
+      // otherwise don't show deprecated status
+      : PROJECT_STATUS
+
+    if (hasPermission(PERMISSIONS.EDIT_PROJECT_STATUS_TO_SPECIAL)) {
+      return statusList
+    } else {
+      return statusList.map((statusOption) => {
+        // if option is not special anyone can choose it
+        // also, don't disable special option, if it's the current value
+        if (!statusOption.isSpecial || statusOption.value === status) {
+          return statusOption
+        }
+
+        return {
+          ...statusOption,
+          disabled: true,
+          toolTipMessage: 'Only managers and admins can change to this status'
+        }
+      })
     }
-    return PROJECT_STATUS
   }
 
   render() {