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`] = `
+
+
+
+
+
+`;
+
+exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
+
+
+
+
+
+
+
+
+`;
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 (
+
+ );
+ }
+
+ 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 = (
- {channelName}
+ {channelDisplayName}
{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(
+
+ );
+
+ expect(wrapper.getElement()).toMatchSnapshot();
+ });
+
+ test('should match snapshot when isSelfDMChannel is true', () => {
+ const props = {
+ ...baseProps,
+ isSelfDMChannel: true,
+ };
+ const wrapper = shallow(
+ ,
+ {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,