Cf16

src/components/ActionCard/Comment.jsx

@@ -58,8 +58,8 @@ class Comment extends React.Component {
   }
 
   render() {
-    const {message, author, date, edited, children, noInfo, self, isSaving, hasError, readonly, allMembers, canDelete, projectMembers} = this.props
-    const messageAnchor = `comment-${message.id}`
+    const {message, author, date, edited, children, noInfo, self, isSaving, hasError, readonly, allMembers, canDelete, projectMembers, commentAnchorPrefix} = this.props
+    const messageAnchor = commentAnchorPrefix + message.id
     const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#${messageAnchor}`
     const authorName = author ? (author.firstName + ' ' + author.lastName) : 'Connect user'
     const avatarUrl = _.get(author, 'photoURL', null)
@@ -141,6 +141,10 @@ class Comment extends React.Component {
   }
 }
 
+Comment.defaultProps = {
+  commentAnchorPrefix: 'comment-',
+}
+
 Comment.propTypes = {
   /**
    * The author (user object)
@@ -204,6 +208,10 @@ Comment.propTypes = {
    * The can delete flag
    */
   canDelete: PropTypes.bool,
+  /**
+   * The prefix for comment anchor
+   */
+  commentAnchorPrefix: PropTypes.string,
 }
 
 export default Comment

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
+      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">
@@ -182,6 +184,7 @@ class Feed extends React.Component {
           headerHeight={headerHeight}
           commentId={commentId}
           error={error}
+          commentAnchorPrefix={commentAnchorPrefix}
         />
         {children}
         {isDeletingTopic &&
@@ -223,6 +226,7 @@ Feed.propTypes = {
   isSavingTopic: PropTypes.bool,
   onEnterFullscreenClick: PropTypes.func,
   isFullScreen: PropTypes.bool,
+  commentAnchorPrefix: PropTypes.string,
 }
 
 export default Feed

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/FeedComments.jsx

@@ -177,10 +177,13 @@ class FeedComments extends React.Component {
 
   render() {
     const {
-      comments, currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
+      currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
       onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage, allMembers,
-      totalComments, isFullScreen, headerHeight, projectMembers
+      totalComments, isFullScreen, headerHeight, projectMembers, commentAnchorPrefix
     } = this.props
+    let { comments } = this.props
+    comments = _.sortBy(comments, 'createdBy')
+    comments = comments.reverse()
     const { isNewCommentMobileOpen, stickyRowNext, stickyRowPrev } = this.state
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
@@ -322,6 +325,7 @@ class FeedComments extends React.Component {
           projectMembers={projectMembers}
           noInfo={item.noInfo}
           canDelete={idx !== 0}
+          commentAnchorPrefix={commentAnchorPrefix}
         >
           <div dangerouslySetInnerHTML={{__html: markdownToHTML(itemContent)}} />
         </Comment>
@@ -370,14 +374,14 @@ class FeedComments extends React.Component {
           {(matches) => (matches ? (
             <div>
               <div styleName="comments">
+                {commentRows}
                 {hasMoreComments &&
                   <div styleName="load-more" key="load-more">
                     <a href="javascript:" onClick={ handleLoadMoreClick } styleName="load-btn">
                       {isLoadingComments ? 'Loading...' : 'load earlier posts'}
                     </a>
                   </div>
                 }
-                {commentRows}
               </div>
               {allowComments &&
                 <div styleName="add-comment" key="add-comment">
@@ -435,10 +439,11 @@ class FeedComments extends React.Component {
   }
 }
 FeedComments.defaultProps = {
-  comments: []
+  comments: [],
 }
 FeedComments.propTypes = {
-  comments: PropTypes.array
+  comments: PropTypes.array,
+  commentAnchorPrefix: PropTypes.string,
 }
 
 export default FeedComments

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/LinksMenu/DeleteFileLinkModal.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const DeleteFileLinkModal = ({ onCancel, onConfirm}) => {
+  return (
+    <div className="modal delete-link-modal">
+      <div className="modal-title danger">
+        You're about to delete a File
+      </div>
+      <div className="modal-body">
+        <p className="message">
+          Your team might need this link, are you sure you want to delete it? This action can't be undone.
+        </p>
+
+        <div className="button-area flex center">
+          <button className="tc-btn tc-btn-default tc-btn-sm btn-cancel" onClick={onCancel}>Cancel</button>
+          <button className="tc-btn tc-btn-warning tc-btn-sm" onClick={onConfirm}>Delete file</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+DeleteFileLinkModal.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired
+  // link: PropTypes.object.isRequired
+}
+
+export default DeleteFileLinkModal