MM-19708 Adjusted display name width to 80% for landscape (#3599)

* MM-19708 Adjusted display name width to 80% for landscape

Adjusted landscape maxWidth for both the base display of the name and the adjusted width with bot/reply buttons.

* Making less complex

* MM-19708 Reduced complexity of style code

Reduced complexity of style code

* MM-19708 Updated snapshots

* MM-19708 Updated for eslint

app/components/post_header/__snapshots__/post_header.test.js.snap

@@ -70,6 +70,78 @@ exports[`PostHeader should match snapshot when just a base post 1`] = `
 </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%",
+            },
+            Object {
+              "maxWidth": "80%",
+            },
+          ]
+        }
+        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 post is autoresponder 1`] = `
 <React.Fragment>
   <View
@@ -466,6 +538,158 @@ exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyB
 </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": "70%",
+            },
+          ]
+        }
+        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 renders Commented On for new post 1`] = `
 <React.Fragment>
   <View

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,
         };
     };

app/components/post_header/post_header.js

@@ -47,6 +47,7 @@ export default class PostHeader extends PureComponent {
         post: PropTypes.object,
         beforePrevPostUserId: PropTypes.string,
         isFirstReply: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -110,6 +111,33 @@ export default class PostHeader extends PureComponent {
         );
     };
 
+    calcNameWidth = () => {
+        const {
+            fromWebHook,
+            fromAutoResponder,
+            renderReplies,
+            shouldRenderReplyButton,
+            commentedOnDisplayName,
+            commentCount,
+            isBot,
+            isLandscape,
+            theme,
+        } = this.props;
+
+        const style = getStyleSheet(theme);
+        const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies);
+        const reduceWidth = showReply && (isBot || fromAutoResponder || fromWebHook);
+
+        if (reduceWidth && isLandscape) {
+            return style.displayNameContainerLandscapeBotReplyWidth;
+        } else if (isLandscape) {
+            return style.displayNameContainerLandscape;
+        } else if (reduceWidth) {
+            return style.displayNameContainerBotReplyWidth;
+        }
+        return null;
+    }
+
     renderDisplayName = () => {
         const {
             displayName,
@@ -119,16 +147,12 @@ 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];
+
+        const displayNameWidth = this.calcNameWidth();
+        const displayNameStyle = [style.displayNameContainer, displayNameWidth];
 
         if (fromAutoResponder || fromWebHook) {
             let name = displayName;
@@ -369,5 +393,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         displayNameContainerBotReplyWidth: {
             maxWidth: '50%',
         },
+        displayNameContainerLandscape: {
+            maxWidth: '80%',
+        },
+        displayNameContainerLandscapeBotReplyWidth: {
+            maxWidth: '70%',
+        },
+
     };
 });

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();
+    });
 });