PLT-3518/PLT-3519 Custom emoji followup (mattermost#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

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;
  }
 

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'>

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;
  }
  }

components/navbar_dropdown.jsx

@@ -30,16 +30,20 @@ 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,
  teams: TeamStore.getAll(),
  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}

stores/team_store.jsx

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

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;
+}