PLT-6403: Interactive messages (#7274)

* wip

* finish first pass

* requested changes

* add DoPostAction to Client4

webapp/components/post_view/post_attachment.jsx

@@ -4,6 +4,8 @@
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import {localizeMessage} from 'utils/utils.jsx';
 
+import * as PostActions from 'actions/post_actions.jsx';
+
 import $ from 'jquery';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -11,6 +13,11 @@ import PropTypes from 'prop-types';
 export default class PostAttachment extends React.PureComponent {
     static propTypes = {
 
+        /**
+         * The post id
+         */
+        postId: PropTypes.string.isRequired,
+
         /**
          * The attachment to render
          */
@@ -20,6 +27,8 @@ export default class PostAttachment extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
+        this.getActionView = this.getActionView.bind(this);
         this.getFieldsTable = this.getFieldsTable.bind(this);
         this.getInitState = this.getInitState.bind(this);
         this.shouldCollapse = this.shouldCollapse.bind(this);
@@ -80,6 +89,41 @@ export default class PostAttachment extends React.PureComponent {
         return TextFormatting.formatText(text) + `<div><a class="attachment-link-more" href="#">${localizeMessage('post_attachment.more', 'Show more...')}</a></div>`;
     }
 
+    getActionView() {
+        const actions = this.props.attachment.actions;
+        if (!actions || !actions.length) {
+            return '';
+        }
+
+        const buttons = [];
+
+        actions.forEach((action) => {
+            if (!action.id || !action.name) {
+                return;
+            }
+            buttons.push(
+                <button
+                    key={action.id}
+                    onClick={() => this.handleActionButtonClick(action.id)}
+                >
+                    {action.name}
+                </button>
+            );
+        });
+
+        return (
+            <div
+                className='attachment-actions'
+            >
+                {buttons}
+            </div>
+        );
+    }
+
+    handleActionButtonClick(actionId) {
+        PostActions.doPostAction(this.props.postId, actionId);
+    }
+
     getFieldsTable() {
         const fields = this.props.attachment.fields;
         if (!fields || !fields.length) {
@@ -275,6 +319,7 @@ export default class PostAttachment extends React.PureComponent {
         }
 
         const fields = this.getFieldsTable();
+        const actions = this.getActionView();
 
         let useBorderStyle;
         if (data.color && data.color[0] === '#') {
@@ -301,6 +346,7 @@ export default class PostAttachment extends React.PureComponent {
                                 {text}
                                 {image}
                                 {fields}
+                                {actions}
                             </div>
                             {thumb}
                             <div style={{clear: 'both'}}/>

webapp/components/post_view/post_attachment_list.jsx

@@ -9,6 +9,11 @@ import PropTypes from 'prop-types';
 export default class PostAttachmentList extends React.PureComponent {
     static propTypes = {
 
+        /**
+         * The post id
+         */
+        postId: PropTypes.string.isRequired,
+
         /**
          * Array of attachments to render
          */
@@ -21,6 +26,7 @@ export default class PostAttachmentList extends React.PureComponent {
             content.push(
                 <PostAttachment
                     attachment={attachment}
+                    postId={this.props.postId}
                     key={'att_' + i}
                 />
             );

webapp/components/post_view/post_body_additional_content.jsx

@@ -90,6 +90,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
         return (
             <PostAttachmentList
                 attachments={attachments}
+                postId={this.props.post.id}
                 key={this.props.post.id}
             />
         );