From e27b57649a1419086b23ade93c9b2f2accfcbf1e Mon Sep 17 00:00:00 2001
From: Sudheer <sudheer.105@gmail.com>
Date: Fri, 4 Jan 2019 16:49:10 +0530
Subject: [PATCH] MM-13405 Change warning message to be singular when adding
 last user to GM (#2478)

---
 app/screens/more_dms/more_dms.js              |   2 -
 .../__snapshots__/selected_users.test.js.snap | 246 ++++++++++++++++++
 .../more_dms/selected_users/selected_users.js |  43 +--
 .../selected_users/selected_users.test.js     |  70 +++++
 assets/base/i18n/en.json                      |   1 +
 5 files changed, 340 insertions(+), 22 deletions(-)
 create mode 100644 app/screens/more_dms/selected_users/__snapshots__/selected_users.test.js.snap
 create mode 100644 app/screens/more_dms/selected_users/selected_users.test.js

diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js
index aac978391..d0a7cf1d1 100644
--- a/app/screens/more_dms/more_dms.js
+++ b/app/screens/more_dms/more_dms.js
@@ -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>
diff --git a/app/screens/more_dms/selected_users/__snapshots__/selected_users.test.js.snap b/app/screens/more_dms/selected_users/__snapshots__/selected_users.test.js.snap
new file mode 100644
index 000000000..31baa16f6
--- /dev/null
+++ b/app/screens/more_dms/selected_users/__snapshots__/selected_users.test.js.snap
@@ -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>
+`;
diff --git a/app/screens/more_dms/selected_users/selected_users.js b/app/screens/more_dms/selected_users/selected_users.js
index d73ea742f..78c942f52 100644
--- a/app/screens/more_dms/selected_users/selected_users.js
+++ b/app/screens/more_dms/selected_users/selected_users.js
@@ -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 (
diff --git a/app/screens/more_dms/selected_users/selected_users.test.js b/app/screens/more_dms/selected_users/selected_users.test.js
new file mode 100644
index 000000000..cf2cccc0b
--- /dev/null
+++ b/app/screens/more_dms/selected_users/selected_users.test.js
@@ -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();
+    });
+});
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index ab21ab0e2..9ea2f8512 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -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",