PLT-3518/PLT-3519 Custom emoji followup (#3507)

* Fixed emoji list filter when full name or nickname are enabled

* Changed custom emoji list to only be visible if the user can create custom emoji

webapp/components/backstage/components/backstage_sidebar.jsx

@@ -4,6 +4,7 @@
 import React from 'react';
 
 import TeamStore from 'stores/team_store.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 import BackstageCategory from './backstage_category.jsx';
 import BackstageSection from './backstage_section.jsx';
@@ -18,7 +19,7 @@ export default class BackstageSidebar extends React.Component {
     }
 
     renderCustomEmoji() {
-        if (window.mm_config.EnableCustomEmoji !== 'true') {
+        if (window.mm_config.EnableCustomEmoji !== 'true' || !Utils.canCreateCustomEmoji(this.props.user)) {
             return null;
         }
 
@@ -44,7 +45,7 @@ export default class BackstageSidebar extends React.Component {
             return null;
         }
 
-        if (window.mm_config.RestrictCustomEmojiCreation !== 'all' && !TeamStore.isTeamAdmin(this.props.user.id, this.props.team.id)) {
+        if (window.mm_config.EnableOnlyAdminIntegrations !== 'false' && !TeamStore.isTeamAdmin(this.props.user.id, this.props.team.id)) {
             return null;
         }
 

webapp/components/emoji/components/emoji_list.jsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -24,8 +23,6 @@ export default class EmojiList extends React.Component {
     constructor(props) {
         super(props);
 
-        this.canCreateEmojis = this.canCreateEmojis.bind(this);
-
         this.handleEmojiChange = this.handleEmojiChange.bind(this);
 
         this.deleteEmoji = this.deleteEmoji.bind(this);
@@ -68,31 +65,6 @@ export default class EmojiList extends React.Component {
         AsyncClient.deleteEmoji(emoji.id);
     }
 
-    canCreateEmojis() {
-        if (global.window.mm_license.IsLicensed !== 'true') {
-            return true;
-        }
-
-        if (Utils.isSystemAdmin(this.props.user.roles)) {
-            return true;
-        }
-
-        if (window.mm_config.RestrictCustomEmojiCreation === 'all') {
-            return true;
-        }
-
-        if (window.mm_config.RestrictCustomEmojiCreation === 'admin') {
-            // check whether the user is an admin on any of their teams
-            for (const member of TeamStore.getTeamMembers()) {
-                if (Utils.isAdmin(member.roles)) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
     render() {
         const filter = this.state.filter.toLowerCase();
         const isSystemAdmin = Utils.isSystemAdmin(this.props.user.roles);
@@ -131,26 +103,6 @@ export default class EmojiList extends React.Component {
             }
         }
 
-        let addLink = null;
-        if (this.canCreateEmojis()) {
-            addLink = (
-                <Link
-                    className='add-link'
-                    to={'/' + this.props.team.name + '/emoji/add'}
-                >
-                    <button
-                        type='button'
-                        className='btn btn-primary'
-                    >
-                        <FormattedMessage
-                            id='emoji_list.add'
-                            defaultMessage='Add Custom Emoji'
-                        />
-                    </button>
-                </Link>
-            );
-        }
-
         return (
             <div className='backstage-content emoji-list'>
                 <div className='backstage-header'>
@@ -160,7 +112,20 @@ export default class EmojiList extends React.Component {
                             defaultMessage='Custom Emoji'
                         />
                     </h1>
-                    {addLink}
+                    <Link
+                        className='add-link'
+                        to={'/' + this.props.team.name + '/emoji/add'}
+                    >
+                        <button
+                            type='button'
+                            className='btn btn-primary'
+                        >
+                            <FormattedMessage
+                                id='emoji_list.add'
+                                defaultMessage='Add Custom Emoji'
+                            />
+                        </button>
+                    </Link>
                 </div>
                 <div className='backstage-filters'>
                     <div className='backstage-filter__search'>

webapp/components/emoji/components/emoji_list_item.jsx

@@ -45,9 +45,9 @@ export default class EmojiListItem extends React.Component {
 
         if (creator) {
             if (creator.username.toLowerCase().indexOf(filter) !== -1 ||
-                (creator.first_name && creator.first_name.toLowerCase().indexOf(filter)) ||
-                (creator.last_name && creator.last_name.toLowerCase().indexOf(filter)) ||
-                (creator.nickname && creator.nickname.toLowerCase().indexOf(filter))) {
+                (creator.first_name && creator.first_name.toLowerCase().indexOf(filter) !== -1) ||
+                (creator.last_name && creator.last_name.toLowerCase().indexOf(filter) !== -1) ||
+                (creator.nickname && creator.nickname.toLowerCase().indexOf(filter) !== -1)) {
                 return true;
             }
         }

webapp/components/navbar_dropdown.jsx

@@ -30,6 +30,8 @@ export default class NavbarDropdown extends React.Component {
         this.onTeamChange = this.onTeamChange.bind(this);
         this.openAccountSettings = this.openAccountSettings.bind(this);
 
+        this.renderCustomEmojiLink = this.renderCustomEmojiLink.bind(this);
+
         this.state = {
             showUserSettingsModal: false,
             showAboutModal: false,
@@ -37,9 +39,11 @@ export default class NavbarDropdown extends React.Component {
             teamMembers: TeamStore.getTeamMembers()
         };
     }
+
     handleAboutModal() {
         this.setState({showAboutModal: true});
     }
+
     aboutModalDismissed() {
         this.setState({showAboutModal: false});
     }
@@ -69,12 +73,31 @@ export default class NavbarDropdown extends React.Component {
         TeamStore.removeChangeListener(this.onTeamChange);
         document.removeEventListener('keydown', this.openAccountSettings);
     }
+
     openAccountSettings(e) {
         if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.A) {
             e.preventDefault();
             this.setState({showUserSettingsModal: true});
         }
     }
+
+    renderCustomEmojiLink() {
+        if (window.mm_config.EnableCustomEmoji !== 'true' || !Utils.canCreateCustomEmoji(this.props.currentUser)) {
+            return null;
+        }
+
+        return (
+            <li>
+                <Link to={'/' + Utils.getTeamNameFromUrl() + '/emoji'}>
+                    <FormattedMessage
+                        id='navbar_dropdown.emoji'
+                        defaultMessage='Custom Emoji'
+                    />
+                </Link>
+            </li>
+        );
+    }
+
     render() {
         var teamLink = '';
         var inviteLink = '';
@@ -85,7 +108,10 @@ export default class NavbarDropdown extends React.Component {
         var isSystemAdmin = false;
         var teamSettings = null;
         let integrationsLink = null;
-        let customEmojiLink = null;
+
+        if (!currentUser) {
+            return null;
+        }
 
         if (currentUser != null) {
             isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
@@ -177,19 +203,6 @@ export default class NavbarDropdown extends React.Component {
             );
         }
 
-        if (window.mm_config.EnableCustomEmoji === 'true') {
-            customEmojiLink = (
-                <li>
-                    <Link to={'/' + Utils.getTeamNameFromUrl() + '/emoji'}>
-                        <FormattedMessage
-                            id='navbar_dropdown.emoji'
-                            defaultMessage='Custom Emoji'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
         if (isSystemAdmin) {
             sysAdminLink = (
                 <li>
@@ -342,7 +355,7 @@ export default class NavbarDropdown extends React.Component {
                         </li>
                         <li className='divider'></li>
                         {integrationsLink}
-                        {customEmojiLink}
+                        {this.renderCustomEmojiLink()}
                         <li className='divider'></li>
                         {teamSettings}
                         {manageLink}

webapp/stores/team_store.jsx

@@ -214,4 +214,5 @@ TeamStore.dispatchToken = AppDispatcher.register((payload) => {
     }
 });
 
+window.TeamStore = TeamStore;
 export default TeamStore;

webapp/utils/utils.jsx

@@ -1341,3 +1341,29 @@ export function localizeMessage(id, defaultMessage) {
 export function mod(a, b) {
     return ((a % b) + b) % b;
 }
+
+export function canCreateCustomEmoji(user) {
+    if (global.window.mm_license.IsLicensed !== 'true') {
+        return true;
+    }
+
+    if (isSystemAdmin(user.roles)) {
+        return true;
+    }
+
+    // already checked for system admin for both these cases
+    if (window.mm_config.RestrictCustomEmojiCreation === 'system_admin') {
+        return false;
+    } else if (window.mm_config.RestrictCustomEmojiCreation === 'admin') {
+        // check whether the user is an admin on any of their teams
+        for (const member of TeamStore.getTeamMembers()) {
+            if (isAdmin(member.roles)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    return true;
+}