Merge pull request #6 from appirio-tech/cf19

Cf19

Author: PrakashDurlabhji

src/components/MobilePage/MobilePage.scss

@@ -11,6 +11,14 @@
     overflow: hidden;
     overflow-y: scroll;
   }
+
+  .mobile-page-gateway {
+    z-index: 10000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
 }
 
 .container {

src/components/NotificationBadge/NotificationBadge.scss

@@ -1,15 +1,16 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 .badge {
-    display: inline-flex;
-    background: $tc-red-70;
-    color: white;
-    @include roboto-bold;
-    border-radius: 100%;
-    height: 17px;
-    line-height: 17px;
-    justify-content: center;
-    align-items: center;
-    width: 17px;
-    font-size: 11px;
-}
+  display: inline-flex;
+  background: $tc-red-70;
+  color: white;
+  @include roboto-bold;
+  border-radius: 100%;
+  line-height: 17px;
+  justify-content: center;
+  align-items: center;
+  min-width: 17px;
+  min-height: 17px;
+  padding: 0 2px;
+  font-size: 11px;
+}

src/components/ProjectInfo/ProjectInfo.jsx

@@ -9,6 +9,8 @@ import MobileExpandable from '../MobileExpandable/MobileExpandable'
 import MediaQuery from 'react-responsive'
 import { SCREEN_BREAKPOINT_MD, PROJECT_STATUS_ACTIVE, PHASE_STATUS_ACTIVE, PHASE_STATUS_REVIEWED, PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER } from '../../config/constants'
 import ReviewProjectButton from '../../projects/detail/components/ReviewProjectButton'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
+import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
 
 import './ProjectInfo.scss'
 
@@ -51,24 +53,39 @@ class ProjectInfo extends Component {
     return (
       <div className="project-info">
         <div className="project-status">
-          <div>
-            <div styleName="project-name">{_.unescape(project.name)}</div>
-            <div className="project-status-time">Created {moment(project.createdAt).format('MMM DD, YYYY')}</div>
-            {!!code && <div className="project-status-ref">{_.unescape(code)}</div>}
+          <div styleName="project-name">{_.unescape(project.name)}</div>
+
+          <div styleName="project-status-bottom">
+            <div className="project-status-time">
+              Created {moment(project.createdAt).format('MMM DD, YYYY')}
+            </div>
+            {!!code &&
+            <div styleName="tooltip-target-container">
+              <Tooltip styleName="tooltip" theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
+                <div className="tooltip-target">
+                  <div className="project-status-ref">{_.unescape(code)}</div>
+                </div>
+                <div className="tooltip-body">
+                  <span>{_.unescape(code)}</span>
+                </div>
+              </Tooltip>
+            </div>
+
+            }
           </div>
         </div>
-        {showDeleteConfirm &&
+        {showDeleteConfirm && (
           <DeleteProjectModal
             onCancel={toggleProjectDelete}
             onConfirm={onConfirmDelete}
           />
-        }
+        )}
         {showReviewBtn ? (
           reviewButtonSection
         ) : (
           <MobileExpandable title="DESCRIPTION" defaultOpen>
             <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
-              {(matches) => (
+              {matches => (
                 <ProjectCardBody
                   project={project}
                   projectCanBeActive={projectCanBeActive}

src/components/ProjectInfo/ProjectInfo.scss

@@ -1,6 +1,10 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
+  .sticky-inner-wrapper {
+    z-index: 1;
+  }
+
   .project-info {
     display: flex;
     flex-direction: column;
@@ -40,6 +44,8 @@
       margin-bottom: 10px;
       padding-left: 4 * $base_unit;
       padding-right: 4 * $base_unit;
+      display: flex;
+      flex-direction: column;
     }
 
     .project-status-header {
@@ -60,6 +66,7 @@
       text-transform: uppercase;
       white-space: nowrap;
       float: left;
+      margin-right: 10px;
     }
 
     .project-status-ref {
@@ -74,6 +81,9 @@
       margin-top: $base-unit;
       white-space: nowrap;
       float: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
 
     .project-card-body {
@@ -110,3 +120,37 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.project-status-bottom {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tooltip-target-container {
+  flex: 1;
+  width: 0;
+  display: flex;
+  justify-content: flex-end;
+
+  :global {
+    .tooltip-target {
+      height: 100%;
+    }
+
+    .tooltip-body {
+      display: flex;
+
+      span {
+        width: 200px;
+        white-space: normal;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.tooltip {
+  max-width: 100%;
+  height: 100%;
+}

src/components/TopicDrawer/TopicDrawer.jsx

@@ -4,6 +4,8 @@ import Drawer from 'appirio-tech-react-components/components/Drawer/Drawer'
 
 import FeedContainer from '../../projects/detail/containers/FeedContainer'
 
+import './TopicDrawer.scss'
+
 /**
  * A drawer that shows the posts under the selected topic
  */
@@ -18,6 +20,7 @@ const TopicDrawer = ({
   return (
     <Drawer
       open={open}
+      styleName="drawer-container"
       containerStyle={{
         top: '60px',
         height: 'calc(100% - 60px)',

src/components/TopicDrawer/TopicDrawer.scss

@@ -0,0 +1,11 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.drawer-container {
+  > div:nth-child(2) {
+    @media screen and (max-width: $screen-md - 1px) {
+      width: 100% !important;
+      top: 0 !important;
+      height: 100% !important;
+    }
+  }
+}

src/components/UserSidebar/UserSidebar.jsx

@@ -44,9 +44,6 @@ const UserSidebar = ({user}) => {
       <div className="sideAreaWrapper">
         <UserSummary user={user}/>
         <hr styleName="separator"/>
-        <div styleName="section-title">
-          SYSTEM
-        </div>
         <MenuList navLinks={navLinks}/>
       </div>
     </div>

src/config/constants.js

@@ -643,13 +643,15 @@ export const ROLE_CONNECT_ADMIN = 'Connect Admin'
 export const ROLE_ADMINISTRATOR = 'administrator'
 export const ROLE_CONNECT_COPILOT_MANAGER = 'Connect Copilot Manager'
 
+// to be able to start the Connect App we should pass at least the dummy value for `FILE_PICKER_API_KEY`
+// but if we want to test file uploading we should provide the real value in `FILE_PICKER_API_KEY` env variable
+export const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY || 'DUMMY'
 // FIXME .. remove defaults
-export const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY || ''
 export const FILE_PICKER_SUBMISSION_CONTAINER_NAME = process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME || 'submission-staging-dev'
 export const FILE_PICKER_CNAME = process.env.FILE_PICKER_CNAME || 'fs.topcoder.com'
 export const FILE_PICKER_FROM_SOURCES = process.env.FILE_PICKER_FROM_SOURCES || ['local_file_system', 'googledrive', 'dropbox']
 export const PROJECT_ATTACHMENTS_FOLDER = process.env.PROJECT_ATTACHMENTS_FOLDER || 'PROJECT_ATTACHMENTS'
-export const FILE_PICKER_ACCEPT = process.env.FILE_PICKER_ACCEPT || ['.bmp', '.gif', '.jpg', '.tex', '.xls', '.xlsx', '.doc', '.docx', '.zip', '.txt', '.pdf', '.png', '.ppt', '.pptx', '.rtf']
+export const FILE_PICKER_ACCEPT = process.env.FILE_PICKER_ACCEPT || ['.bmp', '.gif', '.jpg', '.tex', '.xls', '.xlsx', '.doc', '.docx', '.zip', '.txt', '.pdf', '.png', '.ppt', '.pptx', '.rtf', '.csv']
 
 export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
 /*

src/helpers/wizardHelper.js

@@ -23,6 +23,7 @@ import _ from 'lodash'
 import update from 'react-addons-update'
 import { evaluate, getFieldNamesFromExpression, populatePreparedConditions } from 'expression-evaluator'
 import { flatten, unflatten } from 'flat'
+import { checkPermission } from './permissions'
 
 /**
  * @typedef {Object} NodeObject
@@ -392,6 +393,13 @@ export const initWizard = (template, project, productTemplates, incompleteWizard
       node
     }
 
+    // precalculate the result for `userPermissionCondition`
+    if (nodeObject.userPermissionCondition && !checkPermission(nodeObject.userPermissionCondition)) {
+      // we calculate this value once as user permissions cannot be changed
+      // and we would use this value to calculate value of `hiddenByCondition`
+      nodeObject.__wizard.hiddenByPermission = true
+    }
+
     // add all found variables from condition to the list of dependant fields of the template
     if (nodeObject.condition) {
       wizardTemplate.__wizard.dependantFields = _.uniq([
@@ -426,6 +434,11 @@ export const initWizard = (template, project, productTemplates, incompleteWizard
       prevWizardStep = getPrevStepToShow(wizardTemplate, lastWizardStep)
     }
 
+    // if the first step we found is hidden, then search for the next step which is not hidden
+    if (!isNodeVisible(wizardTemplate, currentWizardStep)) {
+      currentWizardStep = getStepToShowByDir(wizardTemplate, currentWizardStep, NODE_DIR.NEXT)
+    }
+    // use provided `lastWizardStep` or use the first non-hidden step
     currentWizardStep = lastWizardStep || currentWizardStep
   }
 
@@ -880,7 +893,9 @@ const getParentNode = (node) => {
       ...node,
       subSectionIndex: -1
     }
-  } else if (node.sectionIndex !== -1) {
+  // we shouldn't return parent node with all indexes as `-1`
+  // that's why if we reach this point and `node.sectionIndex === 0` we should also return `null`
+  } else if (node.sectionIndex !== -1 && node.sectionIndex !== 0) {
     return {
       ...node,
       sectionIndex: -1
@@ -1095,8 +1110,10 @@ const getNodeWhichMustBeUpdatedByCondition = (template, flatProjectData) => {
   }
 
   forEachNode(template, (nodeObject, node) => {
-    if (nodeObject.condition) {
-      const hiddenByCondition = !evaluate(nodeObject.condition, flatProjectData)
+    if (nodeObject.condition || nodeObject.userPermissionCondition) {
+      // take into account the result of `userPermissionCondition` which we keep in `hiddenByPermission`
+      const hiddenByCondition = nodeObject.__wizard.hiddenByPermission
+        || nodeObject.condition && !evaluate(nodeObject.condition, flatProjectData)
 
       // only update if the condition result has changed
       if (hiddenByCondition !== nodeObject.__wizard.hiddenByCondition) {
@@ -1194,4 +1211,24 @@ export const buildProjectUpdateQueryByQueryParamSelectCondition = (template, que
   })
 
   return updateQuery
+}
+
+/**
+ * Check if node is visible taking into account parent nodes.
+ * If any parent node or node itself is hidden, then the node is treated as hidden.
+ *
+ * @param {Object} template template
+ * @param {Node} node node
+ *
+ * @returns {Boolean} true if node is visible
+ */
+const isNodeVisible = (template, node) => {
+  let isVisible = !_.get(getNodeObject(template, node), '__wizard.hiddenByCondition')
+
+  let tempNode = node
+  while (isVisible && (tempNode = getParentNode(tempNode))) {
+    isVisible = isVisible && !_.get(getNodeObject(template, tempNode), '__wizard.hiddenByCondition')
+  }
+
+  return isVisible
 }

src/projects/detail/components/PortalSubSection.jsx

@@ -26,11 +26,22 @@ const PortalSubSection = ({
   removeAttachment,
   canManageAttachments,
   attachmentsStorePath,
+  isCreation,
 }) => (
   <div>
     {content.map(({ sectionIndex }) => {
-      if (sectionIndex && sectionIndex !== -1 && template && template.sections[sectionIndex]) {
+      if (sectionIndex !== -1 && template && template.sections[sectionIndex]) {
         const section = template.sections[sectionIndex]
+
+        if (
+          // hide if section is hidden by condition
+          _.get(section, '__wizard.hiddenByCondition') ||
+          // hide section in edit mode, if it should be hidden on edit
+          !isCreation && section.hiddenOnEdit
+        ) {
+          return null
+        }
+
         return (
           <SpecSection
             key={'portal-' + (section.id || `section-${sectionIndex}`)}