PLT-5188: Reinstate delete option on system messages. (#5113)

* PLT-5188: Reinstate delete option on system messages.

* Fix styling.

* Fix empty hover box.

2 files changed, 48 insertions, 31 deletions

diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index e368e65f4..331fdeb00 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -53,10 +53,8 @@ export default class PostInfo extends React.Component {
     }
 
     createDropdown() {
-        var post = this.props.post;
-
-        this.canDelete = PostUtils.canDeletePost(post);
-        this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
+        const post = this.props.post;
+        const isSystemMessage = PostUtils.isSystemMessage(post);
 
         if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
             return '';
@@ -131,22 +129,24 @@ export default class PostInfo extends React.Component {
             }
         }
 
-        dropdownContents.push(
-            <li
-                key='copyLink'
-                role='presentation'
-            >
-                <a
-                    href='#'
-                    onClick={this.handlePermalink}
+        if (!isSystemMessage) {
+            dropdownContents.push(
+                <li
+                    key='copyLink'
+                    role='presentation'
                 >
-                    <FormattedMessage
-                        id='post_info.permalink'
-                        defaultMessage='Permalink'
-                    />
-                </a>
-            </li>
-        );
+                    <a
+                        href='#'
+                        onClick={this.handlePermalink}
+                    >
+                        <FormattedMessage
+                            id='post_info.permalink'
+                            defaultMessage='Permalink'
+                        />
+                    </a>
+                </li>
+            );
+        }
 
         if (this.canDelete) {
             dropdownContents.push(
@@ -267,6 +267,9 @@ export default class PostInfo extends React.Component {
         var commentCountText = this.props.commentCount;
         const flagIcon = Constants.FLAG_ICON_SVG;
 
+        this.canDelete = PostUtils.canDeletePost(post);
+        this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
+
         if (this.props.commentCount >= 1) {
             showCommentClass = ' icon--show';
         } else {
@@ -296,18 +299,21 @@ export default class PostInfo extends React.Component {
                     {this.createRemovePostButton()}
                 </li>
             );
-        } else if (!PostUtils.isSystemMessage(post)) {
-            options = (
-                <li className='col col__reply'>
-                    <div
-                        className='dropdown'
-                        ref='dotMenu'
-                    >
-                        {this.createDropdown()}
-                    </div>
-                    {comments}
-                </li>
-            );
+        } else {
+            const dropdown = this.createDropdown();
+            if (dropdown) {
+                options = (
+                    <li className='col col__reply'>
+                        <div
+                            className='dropdown'
+                            ref='dotMenu'
+                        >
+                            {dropdown}
+                        </div>
+                        {comments}
+                    </li>
+                );
+            }
         }
 
         let flag;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 6f148cd7e..5157c3080 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -518,6 +518,17 @@
     position: relative;
     word-wrap: break-word;
 
+    &.post--system {
+        .post__header {
+            .col__reply {
+                min-width: 0;
+            }
+            .dropdown {
+                margin-right: 0;
+            }
+        }
+    }
+
     &:hover {
         .dropdown,
         .comment-icon__container,