MM-13405 Change warning message to be singular when adding last user to GM (#2478)
This commit is contained in:
Sudheer
GitHub
parent
a81701092d
commit
e27b57649a
5 changed files with 340 additions and 22 deletions
|
|
@ -463,9 +463,7 @@ export default class MoreDirectMessages extends PureComponent {
|
|||
<SelectedUsers
|
||||
selectedIds={this.state.selectedIds}
|
||||
warnCount={5}
|
||||
warnMessage={{id: t('mobile.more_dms.add_more'), defaultMessage: 'You can add {remaining, number} more users'}}
|
||||
maxCount={7}
|
||||
maxMessage={{id: t('mobile.more_dms.cannot_add_more'), defaultMessage: 'You cannot add more users'}}
|
||||
onRemove={this.handleRemoveProfile}
|
||||
/>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,246 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SelectedUsers should match snapshot 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": 5,
|
||||
"marginLeft": 5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
}
|
||||
}
|
||||
>
|
||||
<SelectedUser
|
||||
onRemove={[MockFunction]}
|
||||
teammateNameDisplay="full_name"
|
||||
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",
|
||||
}
|
||||
}
|
||||
user={
|
||||
Object {
|
||||
"id": "userId1",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<FormattedText
|
||||
defaultMessage="You can add {remaining, number} more users"
|
||||
id="mobile.more_dms.add_more"
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(61,60,64,0.6)",
|
||||
"fontSize": 12,
|
||||
"marginBottom": 2,
|
||||
"marginRight": 5,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
values={
|
||||
Object {
|
||||
"remaining": 2,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`SelectedUsers should match snapshot for no warning message 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": 5,
|
||||
"marginLeft": 5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
}
|
||||
}
|
||||
>
|
||||
<SelectedUser
|
||||
onRemove={[MockFunction]}
|
||||
teammateNameDisplay="full_name"
|
||||
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",
|
||||
}
|
||||
}
|
||||
user={
|
||||
Object {
|
||||
"id": "userId1",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`SelectedUsers should match snapshot to show warning for ability to add one more user 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": 5,
|
||||
"marginLeft": 5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
}
|
||||
}
|
||||
>
|
||||
<SelectedUser
|
||||
onRemove={[MockFunction]}
|
||||
teammateNameDisplay="full_name"
|
||||
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",
|
||||
}
|
||||
}
|
||||
user={
|
||||
Object {
|
||||
"id": "userId2",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SelectedUser
|
||||
onRemove={[MockFunction]}
|
||||
teammateNameDisplay="full_name"
|
||||
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",
|
||||
}
|
||||
}
|
||||
user={
|
||||
Object {
|
||||
"id": "userId1",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<FormattedText
|
||||
defaultMessage="You can add 1 more user"
|
||||
id="mobile.more_dms.one_more"
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(61,60,64,0.6)",
|
||||
"fontSize": 12,
|
||||
"marginBottom": 2,
|
||||
"marginRight": 5,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
|
@ -38,21 +38,11 @@ export default class SelectedUsers extends React.PureComponent {
|
|||
*/
|
||||
warnCount: PropTypes.number.isRequired,
|
||||
|
||||
/*
|
||||
* An i18n string displaying how many more users can be selected.
|
||||
*/
|
||||
warnMessage: PropTypes.object.isRequired,
|
||||
|
||||
/*
|
||||
* The maximum number of users that can be selected.
|
||||
*/
|
||||
maxCount: PropTypes.number.isRequired,
|
||||
|
||||
/*
|
||||
* An i18n string displayed when no more users can be selected.
|
||||
*/
|
||||
maxMessage: PropTypes.object.isRequired,
|
||||
|
||||
/*
|
||||
* A handler function that will deselect a user when clicked on.
|
||||
*/
|
||||
|
|
@ -88,19 +78,32 @@ export default class SelectedUsers extends React.PureComponent {
|
|||
message = (
|
||||
<FormattedText
|
||||
style={style.message}
|
||||
{...this.props.maxMessage}
|
||||
id='mobile.more_dms.cannot_add_more'
|
||||
defaultMessage='You cannot add more users'
|
||||
/>
|
||||
);
|
||||
} else if (users.length >= this.props.warnCount) {
|
||||
message = (
|
||||
<FormattedText
|
||||
style={style.message}
|
||||
{...this.props.warnMessage}
|
||||
values={{
|
||||
remaining: this.props.maxCount - users.length,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const remaining = this.props.maxCount - users.length;
|
||||
if (remaining === 1) {
|
||||
message = (
|
||||
<FormattedText
|
||||
style={style.message}
|
||||
id='mobile.more_dms.one_more'
|
||||
defaultMessage='You can add 1 more user'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
message = (
|
||||
<FormattedText
|
||||
style={style.message}
|
||||
id='mobile.more_dms.add_more'
|
||||
defaultMessage='You can add {remaining, number} more users'
|
||||
values={{
|
||||
remaining,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
70
app/screens/more_dms/selected_users/selected_users.test.js
Normal file
70
app/screens/more_dms/selected_users/selected_users.test.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {shallow} from 'enzyme';
|
||||
|
||||
import Preferences from 'mattermost-redux/constants/preferences';
|
||||
|
||||
import SelectedUsers from './selected_users.js';
|
||||
|
||||
describe('SelectedUsers', () => {
|
||||
const baseProps = {
|
||||
onRemove: jest.fn(),
|
||||
maxCount: 3,
|
||||
profiles: {
|
||||
userId1: {
|
||||
id: 'userId1',
|
||||
},
|
||||
userId2: {
|
||||
id: 'userId2',
|
||||
},
|
||||
userId3: {
|
||||
id: 'userId3',
|
||||
},
|
||||
},
|
||||
selectedIds: {
|
||||
userId1: true,
|
||||
},
|
||||
theme: Preferences.THEMES.default,
|
||||
teammateNameDisplay: 'full_name',
|
||||
warnCount: 1,
|
||||
};
|
||||
|
||||
test('should match snapshot', () => {
|
||||
const wrapper = shallow(
|
||||
<SelectedUsers {...baseProps}/>
|
||||
);
|
||||
|
||||
expect(wrapper.getElement()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should match snapshot to show warning for ability to add one more user', () => {
|
||||
const props = {
|
||||
...baseProps,
|
||||
selectedIds: {
|
||||
userId2: true,
|
||||
userId1: true,
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallow(
|
||||
<SelectedUsers {...props}/>
|
||||
);
|
||||
|
||||
expect(wrapper.getElement()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should match snapshot for no warning message', () => {
|
||||
const props = {
|
||||
...baseProps,
|
||||
warnCount: 2,
|
||||
};
|
||||
|
||||
const wrapper = shallow(
|
||||
<SelectedUsers {...props}/>
|
||||
);
|
||||
|
||||
expect(wrapper.getElement()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -282,6 +282,7 @@
|
|||
"mobile.message_length.message": "Your current message is too long. Current character count: {max}/{count}",
|
||||
"mobile.message_length.title": "Message Length",
|
||||
"mobile.more_dms.add_more": "You can add {remaining, number} more users",
|
||||
"mobile.more_dms.one_more": "You can add 1 more user",
|
||||
"mobile.more_dms.cannot_add_more": "You cannot add more users",
|
||||
"mobile.more_dms.start": "Start",
|
||||
"mobile.more_dms.title": "New Conversation",
|
||||
|
|
|
|||
Loading…
Reference in a new issue