Fixing DMs guest label behavior (#3383)

* Fixing DMs guest label behavior

* Adding tests

* Addressing PR review comments
This commit is contained in:
Jesús Espino 2019-10-09 11:45:31 +02:00 committed by GitHub
parent b1b7fa06cd
commit d7971666c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 603 additions and 3 deletions

View file

@ -51,6 +51,133 @@ exports[`ChannelTitle should match snapshot 1`] = `
</TouchableOpacity>
`;
exports[`ChannelTitle should match snapshot when is DM and has guests and the teammate is the guest (when can show subtitles) 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",
}
}
>
Other user
</Text>
<Icon
allowFontScaling={false}
name="chevron-down"
size={12}
style={
Object {
"color": undefined,
"marginHorizontal": 5,
}
}
/>
</View>
<View
style={
Object {
"alignItems": "flex-start",
"flex": 1,
"position": "relative",
"top": -1,
"width": "90%",
}
}
>
<FormattedText
defaultMessage="This person is a guest"
ellipsizeMode="tail"
id="channel.isGuest"
numberOfLines={1}
style={
Object {
"color": undefined,
"fontSize": 14,
"opacity": 0.6,
}
}
/>
</View>
</TouchableOpacity>
`;
exports[`ChannelTitle should match snapshot when is DM and has guests but the teammate is not the guest (when can show subtitles) 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",
}
}
>
Other user
</Text>
<Icon
allowFontScaling={false}
name="chevron-down"
size={12}
style={
Object {
"color": undefined,
"marginHorizontal": 5,
}
}
/>
</View>
</TouchableOpacity>
`;
exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
<TouchableOpacity
activeOpacity={0.2}

View file

@ -59,6 +59,9 @@ export default class ChannelTitle extends PureComponent {
if (!isGuest && !hasGuests) {
return null;
}
if (channelType === General.DM_CHANNEL && !isGuest) {
return null;
}
let messageId;
let defaultMessage;

View file

@ -3,6 +3,7 @@
import React from 'react';
import {shallow} from 'enzyme';
import {General} from 'mattermost-redux/constants';
import ChannelTitle from './channel_title';
@ -38,4 +39,38 @@ describe('ChannelTitle', () => {
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when is DM and has guests but the teammate is not the guest (when can show subtitles)', () => {
const props = {
...baseProps,
displayName: 'Other user',
channelType: General.DM_CHANNEL,
isGuest: false,
hasGuests: true,
canHaveSubtitle: true,
};
const wrapper = shallow(
<ChannelTitle {...props}/>,
{context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when is DM and has guests and the teammate is the guest (when can show subtitles)', () => {
const props = {
...baseProps,
displayName: 'Other user',
channelType: General.DM_CHANNEL,
isGuest: true,
hasGuests: true,
canHaveSubtitle: true,
};
const wrapper = shallow(
<ChannelTitle {...props}/>,
{context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});

View file

@ -27,6 +27,7 @@ exports[`channel_info should match snapshot 1`] = `
isArchived={false}
isBot={false}
isGroupConstrained={false}
isTeammateGuest={false}
memberCount={2}
onPermalinkPress={[Function]}
purpose="Purpose"

View file

@ -408,7 +408,7 @@ exports[`channel_info_header should match snapshot 1`] = `
</SafeAreaView>
`;
exports[`channel_info_header should match snapshot when DM and hasGuests 1`] = `
exports[`channel_info_header should match snapshot when DM and hasGuests and is the teammate 1`] = `
<SafeAreaView>
<View
style={
@ -844,6 +844,414 @@ exports[`channel_info_header should match snapshot when DM and hasGuests 1`] = `
</SafeAreaView>
`;
exports[`channel_info_header should match snapshot when DM and hasGuests but its me and not the teammate 1`] = `
<SafeAreaView>
<View
style={
Object {
"backgroundColor": "#ffffff",
"borderBottomColor": undefined,
"borderBottomWidth": 1,
"marginBottom": 40,
"paddingVertical": 15,
}
}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingVertical": 10,
},
Object {
"paddingHorizontal": 15,
},
]
}
>
<ChannelIcon
isActive={false}
isArchived={false}
isBot={false}
isInfo={true}
isUnread={false}
membersCount={2}
size={16}
status="status"
theme={
Object {
"awayIndicator": "#ffbc42",
"buttonBg": "#166de0",
"buttonColor": "#ffffff",
"centerChannelBg": "#ffffff",
"centerChannelColor": "#3d3c40",
"codeTheme": "github",
"dndIndicator": "#f74343",
"errorTextColor": "#fd5960",
"linkColor": "#2389d7",
"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",
}
}
type="D"
/>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#3d3c40",
"flex": 1,
"fontSize": 15,
"fontWeight": "600",
}
}
>
Channel name
</Text>
</View>
<View
style={
Object {
"marginTop": 15,
}
}
>
<TouchableHighlight
activeOpacity={0.85}
delayPressOut={100}
onLongPress={[Function]}
underlayColor="black"
>
<View
style={
Object {
"paddingHorizontal": 15,
}
}
>
<FormattedText
defaultMessage="Purpose"
id="channel_info.purpose"
style={
Object {
"backgroundColor": "transparent",
"color": "#3d3c40",
"fontSize": 13,
"marginBottom": 10,
}
}
/>
<Connect(Markdown)
baseTextStyle={
Object {
"color": "#3d3c40",
"fontSize": 13,
"lineHeight": 20,
}
}
blockStyles={
Object {
"adjacentParagraph": Object {
"marginTop": 6,
},
"horizontalRule": Object {
"backgroundColor": "#3d3c40",
"height": 0.5,
"marginVertical": 10,
},
"quoteBlockIcon": Object {
"color": undefined,
"padding": 5,
},
}
}
onPermalinkPress={[MockFunction]}
textStyles={
Object {
"code": Object {
"alignSelf": "center",
"backgroundColor": undefined,
"fontFamily": "Menlo",
},
"codeBlock": Object {
"fontFamily": "Menlo",
},
"del": Object {
"textDecorationLine": "line-through",
},
"emph": Object {
"fontStyle": "italic",
},
"error": Object {
"color": "#fd5960",
},
"heading1": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading1Text": Object {
"paddingBottom": 8,
},
"heading2": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading2Text": Object {
"paddingBottom": 8,
},
"heading3": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading3Text": Object {
"paddingBottom": 8,
},
"heading4": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading4Text": Object {
"paddingBottom": 8,
},
"heading5": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading5Text": Object {
"paddingBottom": 8,
},
"heading6": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading6Text": Object {
"paddingBottom": 8,
},
"link": Object {
"color": "#2389d7",
},
"mention": Object {
"color": "#2389d7",
},
"mention_highlight": Object {
"backgroundColor": "#ffe577",
},
"strong": Object {
"fontWeight": "bold",
},
"table_header_row": Object {
"fontWeight": "700",
},
}
}
value="Purpose string"
/>
</View>
</TouchableHighlight>
</View>
<View
style={
Object {
"marginTop": 15,
}
}
>
<TouchableHighlight
activeOpacity={0.85}
delayPressOut={100}
onLongPress={[Function]}
underlayColor="black"
>
<View
style={
Object {
"paddingHorizontal": 15,
}
}
>
<FormattedText
defaultMessage="Header"
id="channel_info.header"
style={
Object {
"backgroundColor": "transparent",
"color": "#3d3c40",
"fontSize": 13,
"marginBottom": 10,
}
}
/>
<Connect(Markdown)
baseTextStyle={
Object {
"color": "#3d3c40",
"fontSize": 13,
"lineHeight": 20,
}
}
blockStyles={
Object {
"adjacentParagraph": Object {
"marginTop": 6,
},
"horizontalRule": Object {
"backgroundColor": "#3d3c40",
"height": 0.5,
"marginVertical": 10,
},
"quoteBlockIcon": Object {
"color": undefined,
"padding": 5,
},
}
}
onChannelLinkPress={[MockFunction]}
onPermalinkPress={[MockFunction]}
textStyles={
Object {
"code": Object {
"alignSelf": "center",
"backgroundColor": undefined,
"fontFamily": "Menlo",
},
"codeBlock": Object {
"fontFamily": "Menlo",
},
"del": Object {
"textDecorationLine": "line-through",
},
"emph": Object {
"fontStyle": "italic",
},
"error": Object {
"color": "#fd5960",
},
"heading1": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading1Text": Object {
"paddingBottom": 8,
},
"heading2": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading2Text": Object {
"paddingBottom": 8,
},
"heading3": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading3Text": Object {
"paddingBottom": 8,
},
"heading4": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading4Text": Object {
"paddingBottom": 8,
},
"heading5": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading5Text": Object {
"paddingBottom": 8,
},
"heading6": Object {
"fontSize": 17,
"fontWeight": "700",
"lineHeight": 25,
},
"heading6Text": Object {
"paddingBottom": 8,
},
"link": Object {
"color": "#2389d7",
},
"mention": Object {
"color": "#2389d7",
},
"mention_highlight": Object {
"backgroundColor": "#ffe577",
},
"strong": Object {
"fontWeight": "bold",
},
"table_header_row": Object {
"fontWeight": "700",
},
}
}
value="Header string"
/>
</View>
</TouchableHighlight>
</View>
<Text
style={
Array [
Object {
"backgroundColor": "transparent",
"color": undefined,
"flexDirection": "row",
"fontSize": 12,
"marginTop": 5,
},
Object {
"paddingHorizontal": 15,
},
]
}
>
<FormattedText
defaultMessage="Created by {creator} on "
id="mobile.routes.channelInfo.createdBy"
values={
Object {
"creator": "Creator",
}
}
/>
<FormattedDate
format="LL"
value={123}
/>
</Text>
</View>
</SafeAreaView>
`;
exports[`channel_info_header should match snapshot when GM and hasGuests 1`] = `
<SafeAreaView>
<View

View file

@ -64,6 +64,7 @@ export default class ChannelInfo extends PureComponent {
canEditChannel: PropTypes.bool.isRequired,
ignoreChannelMentions: PropTypes.bool.isRequired,
isBot: PropTypes.bool.isRequired,
isTeammateGuest: PropTypes.bool.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
@ -559,6 +560,7 @@ export default class ChannelInfo extends PureComponent {
status,
theme,
isBot,
isTeammateGuest,
isLandscape,
} = this.props;
@ -598,6 +600,7 @@ export default class ChannelInfo extends PureComponent {
type={currentChannel.type}
isArchived={currentChannel.delete_at !== 0}
isBot={isBot}
isTeammateGuest={isTeammateGuest}
hasGuests={currentChannelGuestCount > 0}
isGroupConstrained={currentChannel.group_constrained}
/>

View file

@ -60,6 +60,7 @@ describe('channel_info', () => {
status: 'status',
theme: Preferences.THEMES.default,
isBot: false,
isTeammateGuest: false,
isLandscape: false,
actions: {
clearPinnedPosts: jest.fn(),

View file

@ -40,6 +40,7 @@ export default class ChannelInfoHeader extends React.PureComponent {
type: PropTypes.string.isRequired,
isArchived: PropTypes.bool.isRequired,
isBot: PropTypes.bool.isRequired,
isTeammateGuest: PropTypes.bool.isRequired,
hasGuests: PropTypes.bool.isRequired,
isGroupConstrained: PropTypes.bool,
timeZone: PropTypes.string,
@ -50,10 +51,13 @@ export default class ChannelInfoHeader extends React.PureComponent {
};
renderHasGuestText = (style) => {
const {type, hasGuests} = this.props;
const {type, hasGuests, isTeammateGuest} = this.props;
if (!hasGuests) {
return null;
}
if (type === General.DM_CHANNEL && !isTeammateGuest) {
return null;
}
let messageId;
let defaultMessage;

View file

@ -40,6 +40,7 @@ describe('channel_info_header', () => {
type: General.OPEN_CHANNEL,
isArchived: false,
isBot: false,
isTeammateGuest: false,
hasGuests: false,
isGroupConstrained: false,
};
@ -76,12 +77,26 @@ describe('channel_info_header', () => {
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when DM and hasGuests', async () => {
test('should match snapshot when DM and hasGuests but its me and not the teammate', async () => {
const wrapper = shallow(
<ChannelInfoHeader
{...baseProps}
type={General.DM_CHANNEL}
hasGuests={true}
isTeammateGuest={false}
/>,
{context: {intl: intlMock}},
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when DM and hasGuests and is the teammate', async () => {
const wrapper = shallow(
<ChannelInfoHeader
{...baseProps}
type={General.DM_CHANNEL}
hasGuests={true}
isTeammateGuest={true}
/>,
{context: {intl: intlMock}},
);

View file

@ -71,6 +71,7 @@ function mapStateToProps(state) {
let status;
let isBot = false;
let isTeammateGuest = false;
if (currentChannel.type === General.DM_CHANNEL) {
const teammateId = getUserIdFromChannelName(currentUserId, currentChannel.name);
const teammate = getUser(state, teammateId);
@ -79,6 +80,7 @@ function mapStateToProps(state) {
isBot = true;
}
if (isGuest(teammate)) {
isTeammateGuest = true;
currentChannelGuestCount = 1;
}
}
@ -116,6 +118,7 @@ function mapStateToProps(state) {
theme: getTheme(state),
canManageUsers,
isBot,
isTeammateGuest,
isLandscape: isLandscape(state),
timeZone,
};