PLT-3553 Fix System messages show an empty box (#3689)

webapp/components/post_view/components/post_body.jsx

@@ -154,26 +154,13 @@ export default class PostBody extends React.Component {
         }
 
         let message;
-        let removeButton;
         if (this.props.post.state === Constants.POST_DELETED) {
-            removeButton = (
-                <a
-                    href='#'
-                    className='post__remove theme'
-                    type='button'
-                    onClick={this.removePost}
-                >
-                    {'×'}
-                </a>
-            );
-
             message = (
                 <p>
                     <FormattedMessage
                         id='post_body.deleted'
                         defaultMessage='(message deleted)'
                     />
-                    {removeButton}
                 </p>
             );
         } else {

webapp/components/post_view/components/post_info.jsx

@@ -20,6 +20,7 @@ export default class PostInfo extends React.Component {
 
         this.handleDropdownClick = this.handleDropdownClick.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
+        this.removePost = this.removePost.bind(this);
     }
     handleDropdownClick(e) {
         var position = $('#post-list').height() - $(e.target).offset().top;
@@ -170,6 +171,23 @@ export default class PostInfo extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
 
+    removePost() {
+        GlobalActions.emitRemovePost(this.props.post);
+    }
+
+    createRemovePostButton() {
+        return (
+            <a
+                href='#'
+                className='post__remove theme'
+                type='button'
+                onClick={this.removePost}
+            >
+                {'×'}
+            </a>
+        );
+    }
+
     render() {
         var post = this.props.post;
         var comments = '';
@@ -203,7 +221,26 @@ export default class PostInfo extends React.Component {
             );
         }
 
-        var dropdown = this.createDropdown();
+        let options;
+        if (Utils.isPostEphemeral(post)) {
+            options = (
+                <li className='col col__remove'>
+                    {this.createRemovePostButton()}
+                </li>
+            );
+        } else {
+            options = (
+                <li className='col col__reply'>
+                    <div
+                        className='dropdown'
+                        ref='dotMenu'
+                    >
+                        {this.createDropdown()}
+                    </div>
+                    {comments}
+                </li>
+            );
+        }
 
         return (
             <ul className='post__header--info'>
@@ -215,15 +252,7 @@ export default class PostInfo extends React.Component {
                         useMilitaryTime={this.props.useMilitaryTime}
                     />
                 </li>
-                <li className='col col__reply'>
-                    <div
-                        className='dropdown'
-                        ref='dotMenu'
-                    >
-                        {dropdown}
-                    </div>
-                    {comments}
-                </li>
+                {options}
             </ul>
         );
     }

webapp/sass/layout/_post.scss

@@ -812,6 +812,11 @@ body.ios {
             white-space: nowrap;
         }
 
+        .col__remove {
+            position: absolute;
+            right: 10px;
+        }
+
         .permalink-popover {
             min-width: 0;