From 73d20fdcdf6ef2e593f4d0e664973acc7cfe8316 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Thu, 26 Sep 2019 16:54:45 +0200
Subject: [PATCH] Automated cherry pick of #3293 (#3330)

* Add (you) suffix to self DM channel title

* Use FormattedText component
---
 .../__snapshots__/channel_title.test.js.snap  | 98 +++++++++++++++++++
 .../channel_title/channel_title.js            | 42 +++++++-
 .../channel_title/channel_title.test.js       | 39 ++++++++
 .../channel_nav_bar/channel_title/index.js    |  3 +
 4 files changed, 177 insertions(+), 5 deletions(-)
 create mode 100644 app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
 create mode 100644 app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js

diff --git a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
new file mode 100644
index 000000000..286ecbdf1
--- /dev/null
+++ b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChannelTitle should match snapshot 1`] = `
+<TouchableOpacity
+  activeOpacity={0.2}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "flex-start",
+        "position": "relative",
+        "top": -1,
+        "width": "90%",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": undefined,
+          "fontSize": 18,
+          "fontWeight": "bold",
+          "textAlign": "center",
+        }
+      }
+    />
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
+<TouchableOpacity
+  activeOpacity={0.2}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "flex-start",
+        "position": "relative",
+        "top": -1,
+        "width": "90%",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": undefined,
+          "fontSize": 18,
+          "fontWeight": "bold",
+          "textAlign": "center",
+        }
+      }
+    >
+      <FormattedText
+        defaultMessage="{displayName} (you)"
+        id="channel_header.directchannel.you"
+        values={
+          Object {
+            "displayname": undefined,
+          }
+        }
+      />
+    </Text>
+    <Icon
+      allowFontScaling={false}
+      name="chevron-down"
+      size={12}
+      style={
+        Object {
+          "color": undefined,
+          "marginHorizontal": 5,
+        }
+      }
+    />
+  </View>
+</TouchableOpacity>
+`;
diff --git a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
index 89de4fadf..deedc4c0b 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
@@ -28,12 +28,14 @@ export default class ChannelTitle extends PureComponent {
         isGuest: PropTypes.bool.isRequired,
         hasGuests: PropTypes.bool.isRequired,
         canHaveSubtitle: PropTypes.bool.isRequired,
+        isSelfDMChannel: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
         currentChannel: {},
         displayName: null,
         theme: {},
+        isSelfDMChannel: false,
     };
 
     archiveIcon(style) {
@@ -85,15 +87,45 @@ export default class ChannelTitle extends PureComponent {
         );
     }
 
+    renderChannelDisplayName = () => {
+        const {
+            displayName,
+            currentChannelName,
+            isSelfDMChannel,
+        } = this.props;
+
+        const channelDisplayName = displayName || currentChannelName;
+
+        if (isSelfDMChannel) {
+            const messageId = t('channel_header.directchannel.you');
+            const defaultMessage = '{displayName} (you)';
+            const values = {displayname: channelDisplayName};
+
+            return (
+                <FormattedText
+                    id={messageId}
+                    defaultMessage={defaultMessage}
+                    values={values}
+                />
+            );
+        }
+
+        return channelDisplayName;
+    }
+
     render() {
-        const {currentChannelName, displayName, isChannelMuted, onPress, theme} = this.props;
+        const {
+            isChannelMuted,
+            onPress,
+            theme,
+        } = this.props;
 
         const style = getStyle(theme);
-
-        const channelName = displayName || currentChannelName;
         const hasGuestsText = this.renderHasGuestsText(style);
+        const channelDisplayName = this.renderChannelDisplayName();
+
         let icon;
-        if (channelName) {
+        if (channelDisplayName) {
             icon = (
                 <Icon
                     style={style.icon}
@@ -126,7 +158,7 @@ export default class ChannelTitle extends PureComponent {
                         numberOfLines={1}
                         style={style.text}
                     >
-                        {channelName}
+                        {channelDisplayName}
                     </Text>
                     {icon}
                     {mutedIcon}
diff --git a/app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js b/app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js
new file mode 100644
index 000000000..703b6597a
--- /dev/null
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import ChannelTitle from './channel_title';
+
+jest.mock('react-intl');
+
+describe('ChannelTitle', () => {
+    const baseProps = {
+        isGuest: false,
+        hasGuests: false,
+        canHaveSubtitle: false,
+        isSelfDMChannel: false,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <ChannelTitle {...baseProps}/>
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot when isSelfDMChannel is true', () => {
+        const props = {
+            ...baseProps,
+            isSelfDMChannel: true,
+        };
+        const wrapper = shallow(
+            <ChannelTitle {...props}/>,
+            {context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});
diff --git a/app/screens/channel/channel_nav_bar/channel_title/index.js b/app/screens/channel/channel_nav_bar/channel_title/index.js
index 23bd5407f..8795c3b89 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/index.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/index.js
@@ -20,13 +20,16 @@ function mapStateToProps(state) {
     const stats = getCurrentChannelStats(state) || {member_count: 0, guest_count: 0};
 
     let isTeammateGuest = false;
+    let isSelfDMChannel = false;
     if (currentChannel && currentChannel.type === General.DM_CHANNEL) {
         const teammateId = getUserIdFromChannelName(currentUserId, currentChannel.name);
         const teammate = getUser(state, teammateId);
         isTeammateGuest = isGuest(teammate);
+        isSelfDMChannel = currentUserId === currentChannel.teammate_id;
     }
 
     return {
+        isSelfDMChannel,
         currentChannelName: currentChannel ? currentChannel.display_name : '',
         isArchived: currentChannel ? currentChannel.delete_at !== 0 : false,
         displayName: state.views.channel.displayName,