[NEW] Added "Add custom emoji" link to emoji picker (#16250)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/emoji/client/emojiPicker.html

@@ -44,6 +44,9 @@
 				{{/each}}
 			{{/if}}
 		</div>
-		<div class="emoji-footer">{{{_"Emoji_provided_by_JoyPixels"}}}</div>
+		<div class="emoji-footer">
+			{{#if hasPermission 'manage-emoji'}}<a class="add-custom" href="/admin/emoji-custom">{{_"Add_custom_emoji"}}</a>{{/if}}
+			{{{_"Emoji_provided_by_JoyPixels"}}}
+		</div>
 	</div>
 </template>

app/emoji/client/emojiPicker.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { ReactiveDict } from 'meteor/reactive-dict';
+import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 
 import { t } from '../../utils/client';
@@ -142,6 +143,12 @@ Template.emojiPicker.events({
 		event.stopPropagation();
 		event.preventDefault();
 	},
+	'click .add-custom'(event) {
+		event.stopPropagation();
+		event.preventDefault();
+		FlowRouter.go('/admin/emoji-custom');
+		EmojiPicker.close();
+	},
 	'click .category-link'(event) {
 		event.stopPropagation();
 		event.preventDefault();

app/theme/client/imports/components/emojiPicker.css

@@ -122,6 +122,12 @@
 	font-size: 12px;
 
 	font-weight: 500;
+
+	& .add-custom {
+		display: inline-block;
+
+		width: 100%;
+	}
 }
 
 .emoji-top {

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -233,6 +233,7 @@
   "MAU_value": "MAU __value__",
   "Activity": "Activity",
   "Add": "Add",
+  "Add_custom_emoji": "Add custom emoji",
   "add-oauth-service": "Add Oauth Service",
   "add-oauth-service_description": "Permission to add a new Oauth service",
   "add-user": "Add User",