PLT-6403: Interactive messages (#7274)

* wip

* finish first pass

* requested changes

* add DoPostAction to Client4

webapp/actions/post_actions.jsx

@@ -351,3 +351,7 @@ export function unpinPost(postId) {
         });
     };
 }
+
+export function doPostAction(postId, actionId) {
+    PostActions.doPostAction(postId, actionId)(dispatch, getState);
+}

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}
             />
         );

webapp/sass/layout/_webhooks.scss

@@ -284,5 +284,20 @@
                 }
             }
         }
+
+        .attachment-actions {
+            margin-top: 9px;
+
+            button {
+                @include border-radius(3px);
+                outline: 0;
+                margin: 8px 8px 0 0;
+                border-width: 1px;
+                border-style: solid;
+                height: 30px;
+                font-size: 13px;
+                font-weight: 700;
+            }
+        }
     }
 }

webapp/utils/utils.jsx

@@ -602,7 +602,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg);
         changeCss('@media(min-width: 768px){.app__body .form-control', 'background:' + theme.centerChannelBg);
         changeCss('@media(min-width: 768px){.app__body .sidebar--right.sidebar--right--expanded .sidebar-right-container', 'background:' + theme.centerChannelBg);
-        changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .attachment__content, .app__body .attachment-actions button', 'background:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
         changeCss('.app__body .shortcut-key, .app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
@@ -653,7 +653,9 @@ export function applyTheme(theme) {
         changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
+        changeCss('.app__body .attachment .attachment__content, .app__body .attachment-actions button', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
+        changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.5));
+        changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.03));
         changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));