PLT-4100 Made SuggestionList dividers optional (#3990)

* Made SuggestionList dividers optional

* Stopped mutating the User object in the AtMentionProvider

webapp/components/suggestion/at_mention_provider.jsx

@@ -99,7 +99,7 @@ class AtMentionSuggestion extends Suggestion {
     }
 }
 
-function filterUsersByPrefix(users, prefix, limit) {
+function filterUsersByPrefix(users, prefix, limit, type) {
     const filtered = [];
 
     for (const id of Object.keys(users)) {
@@ -117,7 +117,8 @@ function filterUsersByPrefix(users, prefix, limit) {
             (user.first_name && user.first_name.toLowerCase().startsWith(prefix)) ||
             (user.last_name && user.last_name.toLowerCase().startsWith(prefix)) ||
             (user.nickname && user.nickname.toLowerCase().startsWith(prefix))) {
-            filtered.push(user);
+            // create a new object here since we're mutating it by adding the type field
+            filtered.push(Object.assign({}, user, {type}));
         }
     }
 
@@ -145,15 +146,15 @@ export default class AtMentionProvider {
 
             // Filter users by prefix.
             const filteredMembers = filterUsersByPrefix(
-                    channelMembers, prefix, MaxUserSuggestions);
+                    channelMembers, prefix, MaxUserSuggestions, Constants.MENTION_MEMBERS);
             const filteredNonmembers = filterUsersByPrefix(
-                    channelNonmembers, prefix, MaxUserSuggestions - filteredMembers.length);
+                    channelNonmembers, prefix, MaxUserSuggestions - filteredMembers.length, Constants.MENTION_NONMEMBERS);
             let filteredSpecialMentions = [];
             if (!pretext.startsWith('/msg')) {
                 filteredSpecialMentions = ['here', 'channel', 'all'].filter((item) => {
                     return item.startsWith(prefix);
                 }).map((name) => {
-                    return {username: name};
+                    return {username: name, type: Constants.MENTION_SPECIAL};
                 });
             }
 
@@ -173,16 +174,6 @@ export default class AtMentionProvider {
                 });
             });
 
-            filteredMembers.forEach((item) => {
-                item.type = Constants.MENTION_MEMBERS;
-            });
-            filteredNonmembers.forEach((item) => {
-                item.type = Constants.MENTION_NONMEMBERS;
-            });
-            filteredSpecialMentions.forEach((item) => {
-                item.type = Constants.MENTION_SPECIAL;
-            });
-
             const filtered = filteredMembers.concat(filteredSpecialMentions).concat(filteredNonmembers);
 
             const mentions = filtered.map((user) => '@' + user.username);

webapp/components/suggestion/suggestion_box.jsx

@@ -189,6 +189,7 @@ export default class SuggestionBox extends React.Component {
                 <SuggestionListComponent
                     suggestionId={this.suggestionId}
                     location={this.props.listStyle}
+                    renderDividers={this.props.renderDividers}
                 />
             </div>
         );
@@ -220,6 +221,7 @@ SuggestionBox.propTypes = {
     value: React.PropTypes.string.isRequired,
     providers: React.PropTypes.arrayOf(React.PropTypes.object),
     listStyle: React.PropTypes.string,
+    renderDividers: React.PropTypes.bool,
 
     // explicitly name any input event handlers we override and need to manually call
     onInput: React.PropTypes.func,

webapp/components/suggestion/suggestion_list.jsx

@@ -121,7 +121,7 @@ export default class SuggestionList extends React.Component {
             // ReactComponent names need to be upper case when used in JSX
             const Component = this.state.components[i];
 
-            if (item.type !== lastType) {
+            if (this.props.renderDividers && item.type !== lastType) {
                 items.push(this.renderDivider(item.type));
                 lastType = item.type;
             }
@@ -157,5 +157,10 @@ export default class SuggestionList extends React.Component {
 
 SuggestionList.propTypes = {
     suggestionId: React.PropTypes.string.isRequired,
-    location: React.PropTypes.string
+    location: React.PropTypes.string,
+    renderDividers: React.PropTypes.bool
 };
+
+SuggestionList.defaultProps = {
+    renderDividers: false
+};

webapp/components/textbox.jsx

@@ -198,6 +198,7 @@ export default class Textbox extends React.Component {
                     providers={this.suggestionProviders}
                     channelId={this.props.channelId}
                     value={this.props.messageText}
+                    renderDividers={true}
                 />
                 <div
                     ref='preview'