Merge branch 'dev' into feature/draftjs-link-editor

# Conflicts:
#	package-lock.json
#	src/components/RichTextArea/RichTextArea.jsx

Author: maxceem

.circleci/config.yml

@@ -127,7 +127,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['dev', 'dev-msinteg', 'feature/form-redesign']
+              only: ['dev', 'dev-msinteg']
 
       - deployProd:
           context : org-global

src/api/messages.js

@@ -76,7 +76,11 @@ export function deleteTopic(topicId) {
 }
 
 export function addTopicPost(topicId, post) {
-  return axios.post(`${apiBaseUrl}/topics/${topicId}/posts/create`, { post: post.content }, { timeout } )
+  const payload = {
+    post: post.content,
+    attachmentIds: post.attachmentIds
+  }
+  return axios.post(`${apiBaseUrl}/topics/${topicId}/posts/create`, payload, { timeout } )
     .then( resp => {
       return {
         topicId,
@@ -86,7 +90,11 @@ export function addTopicPost(topicId, post) {
 }
 
 export function saveTopicPost(topicId, post) {
-  return axios.post(`${apiBaseUrl}/topics/${topicId}/posts/${post.id}/edit`, { post: post.content }, { timeout } )
+  const payload = {
+    post: post.content,
+    attachmentIds: post.attachmentIds
+  }
+  return axios.post(`${apiBaseUrl}/topics/${topicId}/posts/${post.id}/edit`, payload, { timeout } )
     .then( resp => {
       return {
         topicId,
@@ -149,3 +157,28 @@ export function getTopicsWithComments(reference, referenceId, tag, removeCoderBo
 
     })
 }
+
+export function createTopicAttachment(attachment) {
+  return axios.post(`${apiBaseUrl}/topics/attachments/create`, attachment, { timeout } )
+    .then( resp => {
+      return {
+        result : _.get(resp.data, 'result.content', {})
+      }
+    })
+}
+
+export function getTopicAttachment(attachmentId) {
+  return axios.get(`${apiBaseUrl}/topics/attachments/${attachmentId}/read`, { timeout } )
+    .then( resp => {
+      return _.get(resp.data, 'result.content.url', '')
+    })
+}
+
+export function deleteTopicAttachment(attachmentId) {
+  return axios.delete(`${apiBaseUrl}/topics/attachments/${attachmentId}/delete`, { timeout } )
+    .then( resp => {
+      return {
+        result : _.get(resp.data, 'result.content', {})
+      }
+    })
+}

src/components/ActionCard/ActionCard.jsx

@@ -42,8 +42,8 @@ class Header extends React.Component{
   onTopicChange(title, content) {
     this.props.onTopicChange(this.props.topicMessage.id, title, content, true)
   }
-  onSaveTopic({title, content}) {
-    this.props.onSaveTopic(this.props.topicMessage.id, title, content)
+  onSaveTopic({title, content, onSaveTopic}) {
+    this.props.onSaveTopic(this.props.topicMessage.id, title, content, onSaveTopic)
   }
 
   render() {
@@ -67,6 +67,7 @@ class Header extends React.Component{
           avatarUrl={this.props.avatarUrl}
           authorName={this.props.authorName}
           cancelEdit={this.cancelEditTopic}
+          canUploadAttachment
         />
       )
     }

src/components/ActionCard/AddComment.jsx

@@ -16,8 +16,8 @@ export default class AddComment extends React.Component {
     }
   }
 
-  onPost({content}) {
-    this.props.onAdd(content)
+  onPost({ content, attachmentIds }) {
+    this.props.onAdd(content, attachmentIds)
   }
 
   onChange(title, content) {
@@ -40,6 +40,7 @@ export default class AddComment extends React.Component {
         authorName={authorName}
         allMembers={allMembers}
         projectMembers={projectMembers}
+        canUploadAttachment
       />
     )
   }

src/components/ActionCard/Comment.jsx

@@ -3,17 +3,18 @@ import PropTypes from 'prop-types'
 import cn from 'classnames'
 import UserTooltip from '../User/UserTooltip'
 import RichTextArea from '../RichTextArea/RichTextArea'
-import { Link } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom'
 import CommentEditToggle from './CommentEditToggle'
 import _ from 'lodash'
 import moment from 'moment'
 import NotificationsReader from '../../components/NotificationsReader'
-import { 
+import {
   POST_TIME_FORMAT,
-  EVENT_TYPE, 
+  EVENT_TYPE,
 } from '../../config/constants.js'
 
 import './Comment.scss'
+import { PROJECT_ATTACHMENTS_FOLDER } from '../../config/constants'
 
 class Comment extends React.Component {
 
@@ -25,18 +26,24 @@ class Comment extends React.Component {
     this.edit = this.edit.bind(this)
     this.delete = this.delete.bind(this)
     this.cancelEdit = this.cancelEdit.bind(this)
+    this.getDownloadAttachmentUrl = this.getDownloadAttachmentUrl.bind(this)
+    this.getDownloadAttachmentFilename = this.getDownloadAttachmentFilename.bind(this)
   }
 
   componentWillMount() {
-    this.setState({editMode: this.props.message && this.props.message.editMode || this.props.isSaving})
+    const projectId = this.props.match.params.projectId
+    this.setState({
+      editMode: this.props.message && this.props.message.editMode || this.props.isSaving,
+      attachmentsStorePath: `${PROJECT_ATTACHMENTS_FOLDER}/${projectId}/`
+    })
   }
 
   componentWillReceiveProps(nextProps) {
     this.setState({editMode: nextProps.message && nextProps.message.editMode || nextProps.isSaving})
   }
 
-  onSave({content}) {
-    this.props.onSave(this.props.message, content)
+  onSave({content, attachmentIds}) {
+    this.props.onSave(this.props.message, content, attachmentIds)
   }
 
   onChange(title, content) {
@@ -57,6 +64,16 @@ class Comment extends React.Component {
     this.props.onChange(null, false)
   }
 
+  getDownloadAttachmentUrl(attachmentId) {
+    return `/projects/messages/attachments/${attachmentId}`
+  }
+
+  getDownloadAttachmentFilename(attachmentOriginalFilename) {
+    const regex = new RegExp(`^${_.escapeRegExp(this.state.attachmentsStorePath)}.[a-zA-Z0-9]*.(.*.)`, 'g')
+    const match = regex.exec(attachmentOriginalFilename)
+    return match[1]
+  }
+
   render() {
     const {message, author, date, edited, children, noInfo, self, isSaving, hasError, readonly, allMembers, canDelete, projectMembers, commentAnchorPrefix} = this.props
     const messageAnchor = commentAnchorPrefix + message.id
@@ -86,18 +103,20 @@ class Comment extends React.Component {
             allMembers={allMembers}
             projectMembers={projectMembers}
             editingTopic = {false}
+            canUploadAttachment
+            attachments={message.attachments}
           />
         </div>
       )
     }
 
     return (
       <div styleName={cn('container', { self, 'is-deleting': isDeleting })} id={messageAnchor}>
-        <NotificationsReader 
+        <NotificationsReader
           id={messageAnchor}
           criteria={[
-            { eventType: EVENT_TYPE.POST.CREATED, contents: { postId: message.id } }, 
-            { eventType: EVENT_TYPE.POST.UPDATED, contents: { postId: message.id } }, 
+            { eventType: EVENT_TYPE.POST.CREATED, contents: { postId: message.id } },
+            { eventType: EVENT_TYPE.POST.UPDATED, contents: { postId: message.id } },
             { eventType: EVENT_TYPE.POST.MENTION, contents: { postId: message.id } },
           ]}
         />
@@ -130,6 +149,19 @@ class Comment extends React.Component {
           <div styleName="text" className="draftjs-post">
             {children}
           </div>
+          { message.attachments &&
+            <div styleName="download-attachment-files">
+              <ul>
+                {
+                  message.attachments.map(attachment => (
+                    <li key={`attachment-${attachment.id}`}>
+                      <a href={this.getDownloadAttachmentUrl(attachment.id)} target="_blank">{this.getDownloadAttachmentFilename(attachment.originalFileName)}</a>
+                    </li>
+                  ))
+                }
+              </ul>
+            </div>
+          }
           {isDeleting &&
             <div styleName="deleting-layer">
               <div>Deleting post ...</div>
@@ -214,4 +246,4 @@ Comment.propTypes = {
   commentAnchorPrefix: PropTypes.string,
 }
 
-export default Comment
+export default withRouter(Comment)

src/components/ActionCard/Comment.scss

@@ -35,7 +35,7 @@
   min-width: 0;
 }
 
-.text { 
+.text {
   a,
   a:hover {
     color:$tc-dark-blue-110;
@@ -120,3 +120,83 @@
     line-height: 20px;
   }
 }
+
+.download-attachment-files {
+  margin-top: 10px;
+  width: 50%;
+  li{
+    @include roboto;
+    font-size: $tc-label-md;
+    color: $tc-dark-blue-110;
+    line-height: 1;
+    padding: $base-unit 0 $base-unit 0;
+    display: flex;
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    &.is-active {
+      background-color: $tc-gray-neutral-dark;
+
+      &:not(.delete-confirmation-modal):hover {
+        background-color: $tc-gray-neutral-dark;
+      }
+    }
+
+    .button-group {
+      margin-left: auto;
+      padding-left:20px;
+      width: 110px;
+    }
+
+    .buttons{
+      visibility: hidden;
+      margin-right: 5px;
+      margin-left: auto;
+      button {
+        padding: 0;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        opacity: 0.4;
+        height: 16px;
+        width: 16px;
+        background-size: 16px;
+        display: inline-block;
+        margin-left: 15px;
+      }
+    }
+    a {
+      color: $tc-dark-blue-110;
+      line-height: $base-unit*4;
+      max-width: 220px;
+      text-overflow: ellipsis;
+      overflow-x: hidden;
+
+      &:visited {
+        color: $tc-dark-blue-110;
+      }
+    }
+  }
+  @media screen and (min-width: $screen-md) {
+    li:hover{
+      background: $tc-gray-neutral-light;
+      color: $tc-dark-blue;
+
+      .buttons{
+        display: block;
+      }
+      .link-buttons{
+        visibility: visible;
+      }
+    }
+  }
+
+  li:before {
+    content: '\b7\a0';
+    font-size: 200%;
+    color: $tc-dark-blue-110;
+    line-height: $base-unit*3;
+  }
+}

src/components/Feed/Feed.jsx

@@ -67,8 +67,8 @@ class Feed extends React.Component {
     this.props.onTopicChange(this.props.topicMessage.id, title, content, true)
   }
 
-  onSaveTopic({title, content}) {
-    this.props.onSaveTopic(this.props.topicMessage.id, title, content)
+  onSaveTopic({title, content, attachmentIds}) {
+    this.props.onSaveTopic(this.props.topicMessage.id, title, content, attachmentIds)
   }
 
   updateHeaderHeight() {

src/components/Feed/FeedComments.jsx

@@ -425,7 +425,7 @@ class FeedComments extends React.Component {
                   submitText="Post"
                   nextStepText="Add a post"
                   onClose={this.toggleNewCommentMobile}
-                  onPost={({ content }) => onAddNewComment(content)}
+                  onPost={({ content, attachmentIds }) => onAddNewComment(content, attachmentIds)}
                   isCreating={isAddingComment}
                   hasError={error}
                   onNewPostChange={this.onNewCommentChange}

src/components/Feed/NewPost.jsx

@@ -40,6 +40,7 @@ class NewPost extends React.Component {
         allMembers={allMembers}
         projectMembers={projectMembers}
         hasPrivateSwitch={canAccessPrivatePosts}
+        canUploadAttachment
       />
     )
   }