fix for issue 2180

src/components/Feed/Feed.jsx

@@ -7,10 +7,11 @@ import CommentEditToggle from '../ActionCard/CommentEditToggle'
 import RichTextArea from '../RichTextArea/RichTextArea'
 import NotificationsReader from '../../components/NotificationsReader'
 
-import { EVENT_TYPE } from '../../config/constants'
+import { EVENT_TYPE, PROJECT_FEED_TYPE_MESSAGES } from '../../config/constants'
 
 import XMarkIcon from '../../assets/icons/x-mark.svg'
 import FullscreenIcon from '../../assets/icons/ui-fullscreen.svg'
+import LockIcon from '../../assets/icons/lock.svg'
 
 import './Feed.scss'
 
@@ -86,7 +87,7 @@ class Feed extends React.Component {
       id, user, currentUser, topicMessage, totalComments, hasMoreComments, onLoadMoreComments, isLoadingComments,
       allowComments, comments, children, onNewCommentChange, onAddNewComment, isAddingComment, onSaveMessageChange,
       onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, allMembers,
-      onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId, projectMembers, commentAnchorPrefix
+      onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId, projectMembers, commentAnchorPrefix, tag
     } = this.props
     const { editTopicMode, headerHeight } = this.state
     let authorName = user ? user.firstName : 'Unknown'
@@ -101,7 +102,7 @@ class Feed extends React.Component {
       const content = topicMessage.newContent === null || topicMessage.newContent === undefined ? topicMessage.rawContent : topicMessage.newContent
 
       topicHeader = (
-        <header styleName="feed-header" ref="header">
+        <header styleName={'feed-header' + (tag === PROJECT_FEED_TYPE_MESSAGES ? ' is-private' : '' )} ref="header">
           <NotificationsReader 
             id={`topic-${id}`}
             criteria={{ eventType: EVENT_TYPE.TOPIC.CREATED, contents: { topicId: id } }}
@@ -127,6 +128,7 @@ class Feed extends React.Component {
           ) : (
             <div styleName="header-view">
               <div styleName="header-view-inner">
+                {tag === PROJECT_FEED_TYPE_MESSAGES && <div styleName="lock-icon"><LockIcon /></div>}
                 <div styleName="header-info">
                   <div styleName="title">{title}</div>
                   <div styleName="header-details">

src/components/Feed/Feed.scss

@@ -26,6 +26,10 @@
   background-color: $tc-gray-neutral-light;
   border-radius: $card-border-radius $card-border-radius 0 0;
 
+  &.is-private {
+    background-color: $tc-orange-10;
+  }
+
   .is-fullscreen & {
     border-radius: 0;
     position: fixed;
@@ -75,6 +79,10 @@
   justify-content: space-between;
 }
 
+.lock-icon {
+  margin: $base-unit / 2 4 * $base-unit 0 0;
+}
+
 .title {
   @include roboto;
   color: $tc-black;

src/components/Feed/NewPost.jsx

@@ -13,7 +13,7 @@ class NewPost extends React.Component {
   }
 
   render() {
-    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder, projectMembers} = this.props
+    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder, projectMembers, canAccessPrivatePosts} = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
       authorName += ' ' + currentUser.lastName
@@ -39,6 +39,7 @@ class NewPost extends React.Component {
         authorName={authorName}
         allMembers={allMembers}
         projectMembers={projectMembers}
+        hasPrivateSwitch={canAccessPrivatePosts}
       />
     )
   }
@@ -53,7 +54,8 @@ NewPost.propTypes = {
   onPost: PropTypes.func.isRequired,
   onNewPostChange: PropTypes.func.isRequired,
   hasError: PropTypes.bool,
-  isCreating: PropTypes.bool
+  isCreating: PropTypes.bool,
+  canAccessPrivatePosts: PropTypes.bool,
 }
 
 export default NewPost

src/components/Feed/NewPostMobile.jsx

@@ -13,6 +13,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import MobilePage from '../MobilePage/MobilePage'
 
+import SwitchButton from 'appirio-tech-react-components/components/SwitchButton/SwitchButton'
 import XMartIcon from '../../assets/icons/x-mark.svg'
 import './NewPostMobile.scss'
 
@@ -32,7 +33,8 @@ class NewPostMobile extends React.Component {
       step: props.step,
       statusValue: '',
       commentValue: '',
-      browserActualViewportHeigth: document.documentElement.clientHeight
+      browserActualViewportHeigth: document.documentElement.clientHeight,
+      isPrivate: false
     }
 
     this.setStep = this.setStep.bind(this)
@@ -80,9 +82,9 @@ class NewPostMobile extends React.Component {
   render() {
     const {
       statusTitle, commentTitle, commentPlaceholder, submitText, onPost, onClose,
-      isCreating, nextStepText, statusPlaceholder
+      isCreating, nextStepText, statusPlaceholder, canAccessPrivatePosts
     } = this.props
-    const { step, statusValue, commentValue, browserActualViewportHeigth } = this.state
+    const { step, statusValue, commentValue, browserActualViewportHeigth, isPrivate } = this.state
 
     let value
     let title
@@ -104,15 +106,24 @@ class NewPostMobile extends React.Component {
       placeholder = commentPlaceholder
       onBtnClick = () => onPost({
         title: statusValue,
-        content: commentValue
+        content: commentValue,
+        isPrivate
       })
       btnText = submitText
     }
 
     return (
       <MobilePage>
         <div styleName="header">
-          <div styleName="plug" />
+          {canAccessPrivatePosts ?
+            <SwitchButton
+              name="private-post"
+              onChange={(evt) => this.setState({isPrivate: evt.target.checked})}
+              checked={isPrivate}
+              label="Private"
+            /> :
+            <div styleName="plug" />
+          }
           <div styleName="title">{title}</div>
           <div styleName="close-wrapper"><XMartIcon onClick={onClose} /></div>
         </div>
@@ -153,6 +164,7 @@ NewPostMobile.propTypes = {
   onClose: PropTypes.func.isRequired,
   isCreating: PropTypes.bool,
   hasError: PropTypes.bool,
+  canAccessPrivatePosts: PropTypes.bool,
 }
 
 export default NewPostMobile

src/components/Feed/NewPostMobile.scss

@@ -8,6 +8,18 @@
   justify-content: space-between;
   height: 50px;
   padding: 0 $base-unit * 3;
+
+  :global {
+
+    .SwitchButton label {
+      margin: 0;
+
+      .label {
+        padding: 0 0 0 10px;
+        order: 1;
+      }
+    }
+  }
 }
 
 .title {
@@ -21,13 +33,14 @@
   align-items: center;
   display: flex;
   justify-content: flex-end;
+  margin-left: 59px;
   > svg {
       fill: $tc-gray-neutral-light;
   }
 }
 
 .plug {
-  width: 16px; /* same width as close button to align center title */
+  width: 83px; /* same width as close button to align center title */
 }
 
 .body {

src/components/RichTextArea/RichTextArea.jsx

@@ -20,6 +20,7 @@ import 'draft-js-mention-plugin/lib/plugin.css'
 import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin'
 import _ from 'lodash'
 import { getAvatarResized } from '../../helpers/tcHelpers'
+import SwitchButton from 'appirio-tech-react-components/components/SwitchButton/SwitchButton'
 
 const linkPlugin = createLinkPlugin()
 const blockDndPlugin = createBlockDndPlugin()
@@ -54,7 +55,7 @@ const blocks = [
 class RichTextArea extends React.Component {
   constructor(props) {
     super(props)
-    this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: '', suggestions: [], allSuggestions:[]}
+    this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: '', suggestions: [], allSuggestions:[], isPrivate: false}
     this.onTitleChange = this.onTitleChange.bind(this)
     this.onEditorChange = this.onEditorChange.bind(this)
     this.handleKeyCommand = this.handleKeyCommand.bind(this)
@@ -119,7 +120,8 @@ class RichTextArea extends React.Component {
       titleValue: '',
       editorState: EditorState.push(this.state.editorState, EditorState.createEmpty().getCurrentContent()),
       currentMDContent: null,
-      oldMDContent: null
+      oldMDContent: null,
+      isPrivate: false
     })
   }
 
@@ -168,7 +170,7 @@ class RichTextArea extends React.Component {
     if (!isEditor && !isCloseButton && hasContent) {
       return
     }
-    this.setState({editorExpanded: isEditor && !isCloseButton})
+    this.setState({editorExpanded: isEditor && !isCloseButton, isPrivate: isEditor && !isCloseButton ? this.state.isPrivate : false})
   }
 
   handleKeyCommand(command) {
@@ -224,12 +226,13 @@ class RichTextArea extends React.Component {
     if (this.props.isCreating) {
       return
     }
-    const title = this.state.titleValue
 
+    const title = this.state.titleValue
     const content = this.state.currentMDContent
+    const isPrivate = this.state.isPrivate
 
     if ((this.props.disableTitle || title) && (this.props.disableContent || content)) {
-      this.props.onPost({title, content})
+      this.props.onPost({title, content, isPrivate})
     }
   }
   onSearchChange({value}){
@@ -254,8 +257,8 @@ class RichTextArea extends React.Component {
   render() {
     const {MentionSuggestions} = this.mentionPlugin
     const {className, avatarUrl, authorName, titlePlaceholder, contentPlaceholder, editMode, isCreating,
-      isGettingComment, disableTitle, disableContent, expandedTitlePlaceholder, editingTopic } = this.props
-    const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading} = this.state
+      isGettingComment, disableTitle, disableContent, expandedTitlePlaceholder, editingTopic, hasPrivateSwitch } = this.props
+    const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading, isPrivate} = this.state
     let canSubmit = (disableTitle || titleValue.trim())
         && (disableContent || editorState.getCurrentContent().hasText())
     if (editMode && canSubmit) {
@@ -290,7 +293,7 @@ class RichTextArea extends React.Component {
     }
 
     return (
-      <div className={cn(className, 'rich-editor', {expanded: editorExpanded || editMode})} ref="richEditor">
+      <div className={cn(className, 'rich-editor', {expanded: editorExpanded || editMode}, {'is-private': isPrivate})} ref="richEditor">
         {(isCreating || isGettingComment) &&
          <div className="editing-layer" />
         }
@@ -387,6 +390,14 @@ class RichTextArea extends React.Component {
                     </div>
                   }
                   <div className="tc-btns">
+                    {hasPrivateSwitch &&
+                      <SwitchButton
+                        name="private-post"
+                        onChange={(evt) => this.setState({isPrivate: evt.target.checked})}
+                        checked={isPrivate}
+                        label="Private"
+                      />
+                    }
                     {!editMode &&
                       <button className="tc-btn tc-btn-default tc-btn-sm btn-close-creat">Cancel</button>
                     }
@@ -437,7 +448,8 @@ RichTextArea.propTypes = {
   content: PropTypes.string,
   allMembers: PropTypes.object,
   projectMembers: PropTypes.object,
-  editingTopic: PropTypes.bool
+  editingTopic: PropTypes.bool,
+  hasPrivateSwitch: PropTypes.bool,
 }
 
 export default RichTextArea

src/components/RichTextArea/RichTextArea.scss

@@ -14,6 +14,10 @@
           display: block;
         }
       }
+
+      &.is-private.modal {
+        background-color: $tc-orange-10;
+      }
     }
 
     .modal-row {
@@ -209,7 +213,19 @@
         }
 
         .tc-btns {
+          display: flex;
+          align-items: center;
           margin-left: auto;
+
+          .SwitchButton label {
+            margin: 0 10px 0 0;
+
+            .label {
+              padding: 0 0 0 10px;
+              order: 1;
+            }
+          }
+
           @media screen and (max-width: $screen-rg - 1px) {
             padding-top: $base-unit;
           }

src/config/permissions.js

@@ -16,5 +16,8 @@ export default {
   INVITE_TOPCODER_MEMBER: {
     projectRoles: [PROJECT_ROLE_MANAGER, PROJECT_ROLE_ACCOUNT_MANAGER, ROLE_CONNECT_ADMIN],
     topcoderRoles: [ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN, ROLE_CONNECT_MANAGER, ROLE_CONNECT_ACCOUNT_MANAGER],
+  },
+  ACCESS_PRIVATE_POST: {
+    topcoderRoles: [PROJECT_ROLE_COPILOT, ROLE_CONNECT_MANAGER, ROLE_CONNECT_ADMIN, ROLE_ADMINISTRATOR]
   }
 }

src/projects/detail/containers/DashboardContainer.jsx

@@ -35,12 +35,15 @@ import TwoColsLayout from '../../../components/TwoColsLayout'
 import SystemFeed from '../../../components/Feed/SystemFeed'
 import WorkInProgress from '../components/WorkInProgress'
 import NotificationsReader from '../../../components/NotificationsReader'
+import { checkPermission } from '../../../helpers/permissions'
+import PERMISSIONS from '../../../config/permissions'
 
 import {
   PHASE_STATUS_ACTIVE,
   CODER_BOT_USER_FNAME,
   CODER_BOT_USER_LNAME,
   PROJECT_FEED_TYPE_PRIMARY,
+  PROJECT_FEED_TYPE_MESSAGES,
   EVENT_TYPE,
 } from '../../../config/constants'
 
@@ -204,16 +207,24 @@ class DashboardContainer extends React.Component {
   }
 }
 
-const mapStateToProps = ({ notifications, projectState, projectTopics, templates, phasesTopics }) => ({
-  notifications: preRenderNotifications(notifications.notifications),
-  productTemplates: templates.productTemplates,
-  isProcessing: projectState.processing,
-  phases: projectState.phases,
-  feeds: projectTopics.feeds[PROJECT_FEED_TYPE_PRIMARY].topics,
-  isFeedsLoading: projectTopics.isLoading,
-  phasesStates: projectState.phasesStates,
-  phasesTopics,
-})
+const mapStateToProps = ({ notifications, projectState, projectTopics, templates, phasesTopics }) => {
+  // all feeds includes primary as well as private topics if user has access to private topics
+  let allFeed = projectTopics.feeds[PROJECT_FEED_TYPE_PRIMARY].topics
+  if (checkPermission(PERMISSIONS.ACCESS_PRIVATE_POST)) {
+    allFeed = [...allFeed, ...projectTopics.feeds[PROJECT_FEED_TYPE_MESSAGES].topics]
+  }
+
+  return {
+    notifications: preRenderNotifications(notifications.notifications),
+    productTemplates: templates.productTemplates,
+    isProcessing: projectState.processing,
+    phases: projectState.phases,
+    feeds: allFeed,
+    isFeedsLoading: projectTopics.isLoading,
+    phasesStates: projectState.phasesStates,
+    phasesTopics,
+  }
+}
 
 const mapDispatchToProps = {
   toggleNotificationRead,