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,