Add latest changes from gitlab-org/gitlab@16-2-stable-eev16.2.0-rc42

3 files changed, 27 insertions, 7 deletions

diff --git a/app/assets/javascripts/emoji/components/category.vue b/app/assets/javascripts/emoji/components/category.vue
index 39881979c4f..a72e7df7769 100644
--- a/app/assets/javascripts/emoji/components/category.vue
+++ b/app/assets/javascripts/emoji/components/category.vue
@@ -33,6 +33,9 @@ export default {
       this.renderGroup = true;
       this.$emit('appear', this.category);
     },
+    onClick(emoji) {
+      this.$emit('click', { category: this.category, emoji });
+    },
   },
 };
 </script>
@@ -48,7 +51,7 @@ export default {
         :key="index"
         :emojis="emojiGroup"
         :render-group="renderGroup"
-        :click-emoji="(emoji) => $emit('click', emoji)"
+        :click-emoji="(emoji) => onClick(emoji)"
       />
     </template>
     <p v-else>
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index 840297b870a..0e3dd9f7535 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -2,7 +2,7 @@
 import { GlIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import { findLastIndex } from 'lodash';
 import VirtualList from 'vue-virtual-scroll-list';
-import { CATEGORY_NAMES } from '~/emoji';
+import { CATEGORY_NAMES, getEmojiCategoryMap, state } from '~/emoji';
 import { CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from '../constants';
 import Category from './category.vue';
 import EmojiList from './emoji_list.vue';
@@ -49,6 +49,7 @@ export default {
     categoryNames() {
       return CATEGORY_NAMES.filter((c) => {
         if (c === FREQUENTLY_USED_KEY) return hasFrequentlyUsedEmojis();
+        if (c === 'custom') return !state.loading && getEmojiCategoryMap().custom.length > 0;
         return true;
       }).map((category) => ({
         name: category,
@@ -66,10 +67,13 @@ export default {
 
       this.$refs.virtualScoller.setScrollTop(top);
     },
-    selectEmoji(name) {
-      this.$emit('click', name);
+    selectEmoji({ category, emoji }) {
+      this.$emit('click', emoji);
       this.$refs.dropdown.hide();
-      addToFrequentlyUsed(name);
+
+      if (category !== 'custom') {
+        addToFrequentlyUsed(emoji);
+      }
     },
     getBoundaryElement() {
       return this.boundary || document.querySelector('.content-wrapper') || 'scrollParent';
@@ -102,7 +106,20 @@ export default {
       @shown="$emit('shown')"
       @hidden="$emit('hidden')"
     >
-      <template #button-content><slot name="button-content"></slot></template>
+      <template #button-content>
+        <slot name="button-content">
+          <gl-icon class="award-control-icon-neutral gl-button-icon gl-icon" name="slight-smile" />
+          <gl-icon
+            class="award-control-icon-positive gl-button-icon gl-icon gl-left-3!"
+            name="smiley"
+          />
+          <gl-icon
+            class="award-control-icon-super-positive gl-button-icon gl-icon gl-left-3!"
+            name="smile"
+          />
+        </slot>
+        <span class="gl-sr-only">{{ __('Add reaction') }}</span>
+      </template>
       <gl-search-box-by-type
         v-model="searchValue"
         class="gl-mx-5! gl-mb-2!"
diff --git a/app/assets/javascripts/emoji/components/utils.js b/app/assets/javascripts/emoji/components/utils.js
index 5eec0992896..2c1c968878b 100644
--- a/app/assets/javascripts/emoji/components/utils.js
+++ b/app/assets/javascripts/emoji/components/utils.js
@@ -52,7 +52,7 @@ export const getEmojiCategories = memoize(async () => {
 
   return Object.freeze(
     Object.keys(categories)
-      .filter((c) => c !== FREQUENTLY_USED_KEY)
+      .filter((c) => c !== FREQUENTLY_USED_KEY && categories[c].length)
       .reduce((acc, category) => {
         const emojis = chunk(categories[category], EMOJIS_PER_ROW);
         const height = generateCategoryHeight(emojis.length);