Feature/project september

.circleci/config.yml

@@ -136,7 +136,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['feature/faqs']
+              only: ['feature/faqs', 'feature/project_september']
 
       - deployProd:
           context : org-global

docs/permissions.html

@@ -82,7 +82,6 @@ <h2>Project Members</h2>
               <div class="text-black-50 small-text">Invite new members or delete them. There are some additional restrictions for some roles.</div>
             </div>
             <div class="col-9 py-2">
-                <span class="badge badge-primary" title="Allowed Project Role">copilot</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>
@@ -93,6 +92,48 @@ <h2>Project Members</h2>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
             </div>
           </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              Join topcoder team
+              <div><small><code>JOIN_TOPCODER_TEAM</code></small></div>
+              <div class="text-black-50 small-text">Join Topcoder Team without invitation</div>
+            </div>
+            <div class="col-9 py-2">
+                <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Manager</span>
+            </div>
+          </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              Manage copilots
+              <div><small><code>MANAGE_COPILOTS</code></small></div>
+              <div class="text-black-50 small-text">Directly invite copilots to the project.</div>
+            </div>
+            <div class="col-9 py-2">
+                <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
+            </div>
+          </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              Request copilots
+              <div><small><code>REQUEST_COPILOTS</code></small></div>
+              <div class="text-black-50 small-text">Request copilots to the project.</div>
+            </div>
+            <div class="col-9 py-2">
+                <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>
+                <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
+            </div>
+          </div>
         <div class="row">
           <div class="col pt-5 pb-2">
             <h2>Topics &amp; Posts</h2>
@@ -188,6 +229,7 @@ <h2>User Profile</h2>
                 <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Account Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Business Development Representative</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Presales</span>
@@ -208,6 +250,7 @@ <h2>User Profile</h2>
                 <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Account Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Business Development Representative</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Presales</span>
@@ -217,6 +260,58 @@ <h2>User Profile</h2>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Project Manager</span>
             </div>
           </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              View User Profile as Copilot
+              <div><small><code>VIEW_USER_PROFILE_AS_COPILOT</code></small></div>
+              <div class="text-black-50 small-text"></div>
+            </div>
+            <div class="col-9 py-2">
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot</span>
+            </div>
+          </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              View User Profile as Topcoder Employee
+              <div><small><code>VIEW_USER_PROFILE_AS_TOPCODER_EMPLOYEE</code></small></div>
+              <div class="text-black-50 small-text"></div>
+            </div>
+            <div class="col-9 py-2">
+                <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Account Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Business Development Representative</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Presales</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Account Executive</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Program Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Solution Architect</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Project Manager</span>
+            </div>
+          </div>
+          <div class="row border-top">
+            <div class="col py-2">
+              View User Profile as Customer
+              <div><small><code>VIEW_USER_PROFILE_AS_CUSTOMER</code></small></div>
+              <div class="text-black-50 small-text"></div>
+            </div>
+            <div class="col-9 py-2">
+                <span class="badge badge-success" title="Allowed Topcoder Role">Topcoder User</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">administrator</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Connect Admin</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Connect Manager</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Connect Copilot Manager</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Connect Account Manager</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Business Development Representative</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Presales</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Account Executive</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Program Manager</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Solution Architect</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Project Manager</span>
+                <span class="badge badge-danger" title="Denied Topcoder Role">Connect Copilot</span>
+            </div>
+          </div>
         <div class="row">
           <div class="col pt-5 pb-2">
             <h2>View Member Suggestions</h2>
@@ -251,6 +346,7 @@ <h2>My Projects Filter</h2>
                 <span class="badge badge-success" title="Allowed Topcoder Role">administrator</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Admin</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Manager</span>
+                <span class="badge badge-success" title="Allowed Topcoder Role">Connect Copilot Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Connect Account Manager</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Business Development Representative</span>
                 <span class="badge badge-success" title="Allowed Topcoder Role">Presales</span>

src/components/ActionCard/AddComment.jsx

@@ -25,7 +25,7 @@ export default class AddComment extends React.Component {
   }
 
   render() {
-    const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers, projectMembers } = this.props
+    const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers, projectMembers, defaultContent } = this.props
 
     return (
       <RichTextArea ref="richTextArea"
@@ -41,6 +41,7 @@ export default class AddComment extends React.Component {
         allMembers={allMembers}
         projectMembers={projectMembers}
         canUploadAttachment
+        content={defaultContent}
       />
     )
   }
@@ -57,5 +58,9 @@ AddComment.propTypes = {
   hasError: PropTypes.bool,
   isAdding: PropTypes.bool,
   allMembers: PropTypes.object,
-  projectMembers: PropTypes.object
+  projectMembers: PropTypes.object,
+  /**
+   * Default value for comment content
+   */
+  defaultContent: PropTypes.string,
 }

src/components/Feed/Feed.jsx

@@ -104,7 +104,7 @@ class Feed extends React.Component {
       allowComments, comments, children, onNewCommentChange, onAddNewComment, isAddingComment, onSaveMessageChange,
       onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, allMembers,
       onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId, projectMembers, commentAnchorPrefix, tag,
-      inTopicDrawer, onDrawerClose
+      inTopicDrawer, onDrawerClose, newComment
     } = this.props
     const { editTopicMode, headerHeight } = this.state
 
@@ -222,6 +222,7 @@ class Feed extends React.Component {
           commentId={commentId}
           error={error}
           commentAnchorPrefix={commentAnchorPrefix}
+          newComment={newComment}
         />
         {children}
         {isDeletingTopic &&

src/components/Feed/FeedComments.jsx

@@ -180,7 +180,7 @@ class FeedComments extends React.Component {
     const {
       currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
       onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage, allMembers,
-      totalComments, isFullScreen, headerHeight, projectMembers, commentAnchorPrefix
+      totalComments, isFullScreen, headerHeight, projectMembers, commentAnchorPrefix, newComment
     } = this.props
     let { comments } = this.props
     comments = _.sortBy(comments, 'createdBy')
@@ -383,6 +383,7 @@ class FeedComments extends React.Component {
                     hasError={error}
                     allMembers={allMembers}
                     projectMembers={projectMembers}
+                    defaultContent={newComment}
                   />
                 </div>
               }

src/components/FooterNeedHelp/FooterNeedHelp.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import './FooterNeedHelp.scss'
+
+const FooterNeedHelp = () => (
+  <p styleName="need-help">
+    Have an urgent issue?<br />
+    E: <a href="mailto:support@topcoder.com">support@topcoder.com</a>
+  </p>
+)
+
+export default FooterNeedHelp

src/components/FooterNeedHelp/FooterNeedHelp.scss

@@ -0,0 +1,15 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.need-help {
+  @include roboto;
+  color: $tc-gray-50;
+  font-size: 12px;
+  line-height: 150%;
+  margin-top: 2 * $base-unit;
+  padding-bottom: 8 * $base-unit;
+  text-align: center;
+
+  a {
+    color: $tc-dark-blue-110;
+  }
+}

src/components/IncomepleteUserProfileDialog/IncompleteUserProfileDialog.jsx

@@ -0,0 +1,54 @@
+/**
+ * Dialog which shows incomplete user profile.
+ */
+import React from 'react'
+import PT from 'prop-types'
+import Modal from 'react-modal'
+import IncompleteUserProfile from '../IncompleteUserProfile/IncompleteUserProfile'
+import XMarkIcon from  '../../assets/icons/icon-x-mark.svg'
+import styles from './IncompleteUserProfileDialog.scss'
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator'
+
+const IncompleteUserProfileDialog = ({
+  onCloseDialog,
+  title,
+  ...restProps,
+}) => {
+  return (
+    <Modal
+      isOpen
+      className="project-dialog-conatiner"
+      overlayClassName="management-dialog-overlay incomplete-profile-dialog-overlay"
+      onRequestClose={onCloseDialog}
+      contentLabel=""
+    >
+      <div className={`project-dialog ${styles.dialog}`}>
+        <div className="dialog-title">
+          <h3>{title}</h3>
+          <p styleName="subtitle">Complete your profile now.</p>
+          <span onClick={onCloseDialog}><XMarkIcon /></span>
+        </div>
+
+        <div className={`dialog-body ${styles.body}`}>
+          {restProps.profileSettings.pending && <div styleName="loadingOverlay"><LoadingIndicator /></div>}
+          <IncompleteUserProfile
+            {...restProps}
+            submitButton="Save"
+            buttonExtraClassName="tc-btn-md"
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+IncompleteUserProfileDialog.propTypes = {
+  profileSettings: PT.object.isRequired,
+  saveProfileSettings: PT.func.isRequired,
+  isTopcoderUser: PT.bool.isRequired,
+  user: PT.object.isRequired,
+  onCloseDialog: PT.func.isRequired,
+  title: PT.string.isRequired,
+}
+
+export default IncompleteUserProfileDialog

src/components/IncomepleteUserProfileDialog/IncompleteUserProfileDialog.scss

@@ -0,0 +1,66 @@
+@import '~tc-ui/src/styles/tc-includes';
+@import '../../styles/includes';
+
+:global(.management-dialog-overlay .project-dialog-conatiner .project-dialog) {
+  &.dialog {
+    width: 800px;
+  }
+
+  :global(.dialog-body).body {
+    max-height: 500px;
+    padding-top: $base-unit * 4;
+    position: relative;
+  }
+}
+
+:global(.incomplete-profile-dialog-overlay.management-dialog-overlay .project-dialog-conatiner .project-dialog .input-container) {
+  display: block;
+  background: transparent;
+  border-top: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+
+  input {
+    margin: 0;
+  }
+
+  :global(.dropdown-wrap) {
+    margin: 0;
+    width: 100px;
+  }
+}
+
+.subtitle {
+  padding-top: $base-unit * 4;
+  text-align: center;
+}
+
+.loadingOverlay {
+  align-items: center;
+  background-color: #fff;
+  display: flex;
+  left: 0;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+@media screen and (max-width: $screen-md - 1px) {
+  :global(.management-dialog-overlay .project-dialog-conatiner .project-dialog) {
+    &.dialog {
+      width: 100%;
+    }
+  }
+}
+
+@media screen and (max-height: 700px) {
+  :global(.management-dialog-overlay .project-dialog-conatiner .project-dialog) {
+    :global(.dialog-body).body {
+      max-height: calc(100vh - 200px);
+    }
+  }
+}