From 558f6ad2800965627d6754ee10d4bc00df9aced3 Mon Sep 17 00:00:00 2001
From: CJ <38697367+imisshtml@users.noreply.github.com>
Date: Mon, 28 Oct 2019 12:22:50 -0400
Subject: [PATCH] MM-19308 Fixed date wrapping (#3445)
* MM-19308 Fixed date wrapping
Updated the displayName to check for the reply button and bot tag. If seen the displayName container is set from 60% to 55% to allow for the extra space.
* MM-19308 Updated logic and added tests
Updated logic based on feedback.
Added Jest/Snapshots
* MM-19308 Apply change to other sections
Applied the change to autoresponder/webhook section.
---
.../__snapshots__/post_header.test.js.snap | 507 ++++++++++++++++++
app/components/post_header/post_header.js | 14 +-
.../post_header/post_header.test.js | 98 ++++
3 files changed, 617 insertions(+), 2 deletions(-)
create mode 100644 app/components/post_header/__snapshots__/post_header.test.js.snap
create mode 100644 app/components/post_header/post_header.test.js
diff --git a/app/components/post_header/__snapshots__/post_header.test.js.snap b/app/components/post_header/__snapshots__/post_header.test.js.snap
new file mode 100644
index 000000000..8a06a9d70
--- /dev/null
+++ b/app/components/post_header/__snapshots__/post_header.test.js.snap
@@ -0,0 +1,507 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostHeader should match snapshot when just a base post 1`] = `
+
+
+
+
+
+ John Smith
+
+
+
+
+
+
+`;
+
+exports[`PostHeader should match snapshot when post is autoresponder 1`] = `
+
+
+
+
+
+ John Smith
+
+
+
+
+
+
+
+`;
+
+exports[`PostHeader should match snapshot when post is from system message 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyButton 1`] = `
+
+
+
+
+
+ John Smith
+
+
+
+
+
+
+
+
+ 0
+
+
+
+
+
+
+`;
+
+exports[`PostHeader should match snapshot when post should display reply button 1`] = `
+
+
+
+
+
+ John Smith
+
+
+
+
+
+
+
+ 0
+
+
+
+
+
+
+`;
diff --git a/app/components/post_header/post_header.js b/app/components/post_header/post_header.js
index db9b20cdb..7b2841f59 100644
--- a/app/components/post_header/post_header.js
+++ b/app/components/post_header/post_header.js
@@ -117,9 +117,16 @@ export default class PostHeader extends PureComponent {
fromAutoResponder,
overrideUsername,
theme,
+ renderReplies,
+ shouldRenderReplyButton,
+ commentedOnDisplayName,
+ commentCount,
+ isBot,
} = this.props;
const style = getStyleSheet(theme);
+ const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies);
+ const displayNameStyle = [style.displayNameContainer, showReply && (isBot || fromAutoResponder || fromWebHook) ? style.displayNameContainerBotReplyWidth : null];
if (fromAutoResponder || fromWebHook) {
let name = displayName;
@@ -128,7 +135,7 @@ export default class PostHeader extends PureComponent {
}
return (
-
+
{
marginBottom: 3,
lineHeight: 21,
},
+ displayNameContainerBotReplyWidth: {
+ maxWidth: '50%',
+ },
};
});
diff --git a/app/components/post_header/post_header.test.js b/app/components/post_header/post_header.test.js
new file mode 100644
index 000000000..2baab41c1
--- /dev/null
+++ b/app/components/post_header/post_header.test.js
@@ -0,0 +1,98 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import PostHeader from './post_header';
+
+describe('PostHeader', () => {
+ const baseProps = {
+ commentCount: 0,
+ commentedOnDisplayName: '',
+ createAt: 0,
+ displayName: 'John Smith',
+ enablePostUsernameOverride: false,
+ fromWebHook: false,
+ isPendingOrFailedPost: false,
+ isSearchResult: false,
+ isSystemMessage: false,
+ fromAutoResponder: false,
+ militaryTime: false,
+ overrideUsername: '',
+ renderReplies: false,
+ shouldRenderReplyButton: false,
+ showFullDate: false,
+ theme: Preferences.THEMES.default,
+ username: 'JohnSmith',
+ isBot: false,
+ isGuest: false,
+ userTimezone: '',
+ enableTimezone: false,
+ previousPostExists: false,
+ post: {id: 'post'},
+ beforePrevPostUserId: '0',
+ onPress: jest.fn(),
+ };
+
+ test('should match snapshot when just a base post', () => {
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ expect(wrapper.find('#ReplyIcon').exists()).toEqual(false);
+ });
+
+ test('should match snapshot when post isBot and shouldRenderReplyButton', () => {
+ const props = {
+ ...baseProps,
+ shouldRenderReplyButton: true,
+ isBot: true,
+ };
+
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ });
+
+ test('should match snapshot when post should display reply button', () => {
+ const props = {
+ ...baseProps,
+ shouldRenderReplyButton: true,
+ };
+
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ });
+
+ test('should match snapshot when post is autoresponder', () => {
+ const props = {
+ ...baseProps,
+ fromAutoResponder: true,
+ };
+
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ expect(wrapper.find('#ReplyIcon').exists()).toEqual(false);
+ });
+
+ test('should match snapshot when post is from system message', () => {
+ const props = {
+ ...baseProps,
+ isSystemMessage: true,
+ };
+
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ expect(wrapper.find('#ReplyIcon').exists()).toEqual(false);
+ });
+});
\ No newline at end of file