[PLT-6744] Add "Only visible to you" note for ephemeral messages (#6790)

6 files changed, 51 insertions, 2 deletions

diff --git a/webapp/components/post_view/post_body/post_body.jsx b/webapp/components/post_view/post_body/post_body.jsx
index 4c0e00c47..2f8f86d82 100644
--- a/webapp/components/post_view/post_body/post_body.jsx
+++ b/webapp/components/post_view/post_body/post_body.jsx
@@ -162,6 +162,7 @@ export default class PostBody extends React.PureComponent {
                 <PostMessageView
                     lastPostCount={this.props.lastPostCount}
                     post={this.props.post}
+                    compactDisplay={this.props.compactDisplay}
                 />
             </div>
         );
diff --git a/webapp/components/post_view/post_info/post_info.jsx b/webapp/components/post_view/post_info/post_info.jsx
index 6eaef0e0b..71f73b631 100644
--- a/webapp/components/post_view/post_info/post_info.jsx
+++ b/webapp/components/post_view/post_info/post_info.jsx
@@ -55,6 +55,11 @@ export default class PostInfo extends React.PureComponent {
         lastPostCount: PropTypes.number,
 
         /**
+         * Set to render in compact view
+         */
+        compactDisplay: PropTypes.bool,
+
+        /**
          * Function to get the post list HTML element
          */
         getPostList: PropTypes.func.isRequired,
@@ -208,6 +213,18 @@ export default class PostInfo extends React.PureComponent {
             }
         }
 
+        let visibleMessage;
+        if (isEphemeral && !this.props.compactDisplay) {
+            visibleMessage = (
+                <span className='post__visibility'>
+                    <FormattedMessage
+                        id='post_info.message.visible'
+                        defaultMessage='(Only visible to you)'
+                    />
+                </span>
+            );
+        }
+
         let pinnedBadge;
         if (post.is_pinned) {
             pinnedBadge = (
@@ -237,6 +254,7 @@ export default class PostInfo extends React.PureComponent {
                         isFlagged={this.props.isFlagged}
                         isEphemeral={isEphemeral}
                     />
+                    {visibleMessage}
                 </div>
                 {options}
             </div>
diff --git a/webapp/components/post_view/post_message_view/post_message_view.jsx b/webapp/components/post_view/post_message_view/post_message_view.jsx
index 76037741f..1c6035df9 100644
--- a/webapp/components/post_view/post_message_view/post_message_view.jsx
+++ b/webapp/components/post_view/post_message_view/post_message_view.jsx
@@ -61,7 +61,12 @@ export default class PostMessageView extends React.PureComponent {
         /*
          * Post identifiers for selenium tests
          */
-        lastPostCount: PropTypes.number
+        lastPostCount: PropTypes.number,
+
+        /**
+         * Set to render post body compactly
+         */
+        compactDisplay: PropTypes.bool
     };
 
     static defaultProps = {
@@ -167,7 +172,13 @@ export default class PostMessageView extends React.PureComponent {
             postId = Utils.createSafeId('lastPostMessageText' + this.props.lastPostCount);
         }
 
-        const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options);
+        let message = this.props.post.message;
+        const isEphemeral = Utils.isPostEphemeral(this.props.post);
+        if (this.props.compactDisplay && isEphemeral) {
+            const visibleMessage = Utils.localizeMessage('post_info.message.visible.compact', ' (Only visible to you)');
+            message = message.concat(visibleMessage);
+        }
+        const htmlFormattedText = TextFormatting.formatText(message, options);
         const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText);
 
         return (
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 6592c487d..3813fe5a0 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -226,6 +226,7 @@ export default class RhsComment extends React.Component {
             />
         );
 
+        let visibleMessage;
         if (post.props && post.props.from_webhook) {
             if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
                 userProfile = (
@@ -259,6 +260,15 @@ export default class RhsComment extends React.Component {
                     disablePopover={true}
                 />
             );
+
+            visibleMessage = (
+                <span className='post__visibility'>
+                    <FormattedMessage
+                        id='post_info.message.visible'
+                        defaultMessage='(Only visible to you)'
+                    />
+                </span>
+            );
         }
 
         let failedPostOptions;
@@ -430,6 +440,7 @@ export default class RhsComment extends React.Component {
                                     isFlagged={this.props.isFlagged}
                                     isEphemeral={isEphemeral}
                                 />
+                                {visibleMessage}
                             </div>
                             {options}
                         </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 34c6207b5..1ba02cfff 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1903,6 +1903,8 @@
   "post_delete.okay": "Okay",
   "post_delete.someone": "Someone deleted the message on which you tried to post a comment.",
   "post_focus_view.beginning": "Beginning of Channel Archives",
+  "post_info.message.visible": "(Only visible to you)",
+  "post_info.message.visible.compact": " (Only visible to you)",
   "post_info.del": "Delete",
   "post_info.edit": "Edit",
   "post_info.mobile.flag": "Flag",
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index b227d818c..272d22479 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1383,6 +1383,12 @@
         }
     }
 
+    .post__visibility {
+        @include opacity(.6);
+        font-size: .9em;
+        padding: 8px;
+    }
+
     .post__time {
         @include opacity(.6);
         font-size: .9em;