From e9a2ab37a415aea46cd43cbbebb822ed2aa25cc2 Mon Sep 17 00:00:00 2001
From: CJ <38697367+imisshtml@users.noreply.github.com>
Date: Wed, 18 Dec 2019 13:11:03 -0500
Subject: [PATCH] MM-19708 Adjusted display name width to 80% for landscape
 (#3721)

Adjusted landscape maxWidth for both the base display of the name and the adjusted width with bot/reply buttons.
---
 .../__snapshots__/post_header.test.js.snap    | 234 ++++++++++++++++++
 app/components/post_header/index.js           |   2 +
 app/components/post_header/post_header.js     |  12 +-
 .../post_header/post_header.test.js           |  28 +++
 4 files changed, 275 insertions(+), 1 deletion(-)

diff --git a/app/components/post_header/__snapshots__/post_header.test.js.snap b/app/components/post_header/__snapshots__/post_header.test.js.snap
index 1ae92ee78..2cdfe3e0c 100644
--- a/app/components/post_header/__snapshots__/post_header.test.js.snap
+++ b/app/components/post_header/__snapshots__/post_header.test.js.snap
@@ -31,6 +31,80 @@ exports[`PostHeader should match snapshot when just a base post 1`] = `
               "maxWidth": "60%",
             },
             null,
+            null,
+          ]
+        }
+        type="opacity"
+      >
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#3d3c40",
+              "flexGrow": 1,
+              "fontSize": 15,
+              "fontWeight": "600",
+              "paddingVertical": 2,
+            }
+          }
+        >
+          John Smith
+        </Text>
+      </TouchableWithFeedbackIOS>
+      <FormattedTime
+        hour12={true}
+        style={
+          Object {
+            "color": "#3d3c40",
+            "flex": 1,
+            "fontSize": 12,
+            "marginTop": 5,
+            "opacity": 0.5,
+          }
+        }
+        timeZone=""
+        value={0}
+      />
+    </View>
+  </View>
+</React.Fragment>
+`;
+
+exports[`PostHeader should match snapshot when just a base post in landscape mode 1`] = `
+<React.Fragment>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "marginTop": 10,
+        },
+        false,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TouchableWithFeedbackIOS
+        onPress={[Function]}
+        style={
+          Array [
+            Object {
+              "marginBottom": 3,
+              "marginRight": 5,
+              "maxWidth": "60%",
+            },
+            null,
+            Object {
+              "maxWidth": "80%",
+            },
           ]
         }
         type="opacity"
@@ -100,6 +174,7 @@ exports[`PostHeader should match snapshot when post is autoresponder 1`] = `
               "maxWidth": "60%",
             },
             null,
+            null,
           ]
         }
       >
@@ -275,6 +350,7 @@ exports[`PostHeader should match snapshot when post is same thread, so dont disp
               "maxWidth": "60%",
             },
             null,
+            null,
           ]
         }
         type="opacity"
@@ -364,6 +440,162 @@ exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyB
             Object {
               "maxWidth": "50%",
             },
+            null,
+          ]
+        }
+        type="opacity"
+      >
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#3d3c40",
+              "flexGrow": 1,
+              "fontSize": 15,
+              "fontWeight": "600",
+              "paddingVertical": 2,
+            }
+          }
+        >
+          John Smith
+        </Text>
+      </TouchableWithFeedbackIOS>
+      <BotTag
+        style={
+          Object {
+            "marginBottom": 5,
+            "marginLeft": 0,
+            "marginRight": 5,
+          }
+        }
+        theme={
+          Object {
+            "awayIndicator": "#ffbc42",
+            "buttonBg": "#166de0",
+            "buttonColor": "#ffffff",
+            "centerChannelBg": "#ffffff",
+            "centerChannelColor": "#3d3c40",
+            "codeTheme": "github",
+            "dndIndicator": "#f74343",
+            "errorTextColor": "#fd5960",
+            "linkColor": "#2389d7",
+            "mentionBg": "#ffffff",
+            "mentionBj": "#ffffff",
+            "mentionColor": "#145dbf",
+            "mentionHighlightBg": "#ffe577",
+            "mentionHighlightLink": "#166de0",
+            "newMessageSeparator": "#ff8800",
+            "onlineIndicator": "#06d6a0",
+            "sidebarBg": "#145dbf",
+            "sidebarHeaderBg": "#1153ab",
+            "sidebarHeaderTextColor": "#ffffff",
+            "sidebarText": "#ffffff",
+            "sidebarTextActiveBorder": "#579eff",
+            "sidebarTextActiveColor": "#ffffff",
+            "sidebarTextHoverBg": "#4578bf",
+            "sidebarUnreadText": "#ffffff",
+            "type": "Mattermost",
+          }
+        }
+      />
+      <FormattedTime
+        hour12={true}
+        style={
+          Object {
+            "color": "#3d3c40",
+            "flex": 1,
+            "fontSize": 12,
+            "marginTop": 5,
+            "opacity": 0.5,
+          }
+        }
+        timeZone=""
+        value={0}
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "justifyContent": "flex-end",
+          }
+        }
+      >
+        <TouchableWithFeedbackIOS
+          onPress={[MockFunction]}
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "minWidth": 40,
+              "paddingBottom": 10,
+              "paddingTop": 2,
+            }
+          }
+          type="opacity"
+        >
+          <ReplyIcon
+            color="#2389d7"
+            height={16}
+            width={16}
+          />
+          <Text
+            style={
+              Object {
+                "color": "#2389d7",
+                "fontSize": 12,
+                "marginLeft": 2,
+                "marginTop": 2,
+              }
+            }
+          >
+            0
+          </Text>
+        </TouchableWithFeedbackIOS>
+      </View>
+    </View>
+  </View>
+</React.Fragment>
+`;
+
+exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyButton in landscape mode 1`] = `
+<React.Fragment>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "marginTop": 10,
+        },
+        false,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TouchableWithFeedbackIOS
+        onPress={[Function]}
+        style={
+          Array [
+            Object {
+              "marginBottom": 3,
+              "marginRight": 5,
+              "maxWidth": "60%",
+            },
+            Object {
+              "maxWidth": "50%",
+            },
+            Object {
+              "maxWidth": "70%",
+            },
           ]
         }
         type="opacity"
@@ -514,6 +746,7 @@ exports[`PostHeader should match snapshot when post renders Commented On for new
               "maxWidth": "60%",
             },
             null,
+            null,
           ]
         }
         type="opacity"
@@ -601,6 +834,7 @@ exports[`PostHeader should match snapshot when post should display reply button
               "maxWidth": "60%",
             },
             null,
+            null,
           ]
         }
         type="opacity"
diff --git a/app/components/post_header/index.js b/app/components/post_header/index.js
index 960a3d4df..b3fbf97d3 100644
--- a/app/components/post_header/index.js
+++ b/app/components/post_header/index.js
@@ -15,6 +15,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import {fromAutoResponder} from 'app/utils/general';
 import {isGuest} from 'app/utils/users';
+import {isLandscape} from 'app/selectors/device';
 
 import PostHeader from './post_header';
 
@@ -47,6 +48,7 @@ function makeMapStateToProps() {
             username: user.username,
             isBot: user.is_bot || false,
             isGuest: isGuest(user),
+            isLandscape: isLandscape(state),
             userTimezone,
         };
     };
diff --git a/app/components/post_header/post_header.js b/app/components/post_header/post_header.js
index 7b2841f59..cf341e73b 100644
--- a/app/components/post_header/post_header.js
+++ b/app/components/post_header/post_header.js
@@ -46,6 +46,7 @@ export default class PostHeader extends PureComponent {
         previousPostExists: PropTypes.bool,
         post: PropTypes.object,
         beforePrevPostUserId: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -122,11 +123,14 @@ export default class PostHeader extends PureComponent {
             commentedOnDisplayName,
             commentCount,
             isBot,
+            isLandscape,
         } = this.props;
 
         const style = getStyleSheet(theme);
         const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies);
-        const displayNameStyle = [style.displayNameContainer, showReply && (isBot || fromAutoResponder || fromWebHook) ? style.displayNameContainerBotReplyWidth : null];
+        const reduceWidth = showReply && (isBot || fromAutoResponder || fromWebHook);
+        const isLandscapeStyle = isLandscape && reduceWidth ? style.displayNameContainerLandscapeBotReplyWidth : isLandscape ? style.displayNameContainerLandscape : null; //eslint-disable-line no-nested-ternary
+        const displayNameStyle = [style.displayNameContainer, reduceWidth ? style.displayNameContainerBotReplyWidth : null, isLandscapeStyle];
 
         if (fromAutoResponder || fromWebHook) {
             let name = displayName;
@@ -367,5 +371,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         displayNameContainerBotReplyWidth: {
             maxWidth: '50%',
         },
+        displayNameContainerLandscape: {
+            maxWidth: '80%',
+        },
+        displayNameContainerLandscapeBotReplyWidth: {
+            maxWidth: '70%',
+        },
     };
 });
diff --git a/app/components/post_header/post_header.test.js b/app/components/post_header/post_header.test.js
index bfd9f4fde..6cff0863d 100644
--- a/app/components/post_header/post_header.test.js
+++ b/app/components/post_header/post_header.test.js
@@ -29,6 +29,7 @@ describe('PostHeader', () => {
         username: 'JohnSmith',
         isBot: false,
         isGuest: false,
+        isLandscape: false,
         userTimezone: '',
         enableTimezone: false,
         previousPostExists: false,
@@ -126,4 +127,31 @@ describe('PostHeader', () => {
         );
         expect(wrapper.getElement()).toMatchSnapshot();
     });
+
+    test('should match snapshot when just a base post in landscape mode', () => {
+        const props = {
+            ...baseProps,
+            isLandscape: true,
+        };
+
+        const wrapper = shallow(
+            <PostHeader {...props}/>
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+        expect(wrapper.find('#ReplyIcon').exists()).toEqual(false);
+    });
+
+    test('should match snapshot when post isBot and shouldRenderReplyButton in landscape mode', () => {
+        const props = {
+            ...baseProps,
+            shouldRenderReplyButton: true,
+            isBot: true,
+            isLandscape: true,
+        };
+
+        const wrapper = shallow(
+            <PostHeader {...props}/>
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
 });
\ No newline at end of file