Adds the improved emoji picker to the set status modal

Moves away from our old emoji picker to the new picker
in the set status modal.

https://gitlab.com/gitlab-org/gitlab/-/issues/23607

app/assets/javascripts/emoji/components/picker.vue

@@ -23,6 +23,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dropdownClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -78,6 +83,7 @@ export default {
       ref="dropdown"
       :toggle-class="toggleClass"
       :boundary="getBoundaryElement()"
+      :class="dropdownClass"
       menu-class="dropdown-extended-height"
       category="tertiary"
       no-flip

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -18,6 +18,7 @@ import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
 import { updateUserStatus } from '~/rest_api';
 import { timeRanges } from '~/vue_shared/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import EmojiMenuInModal from './emoji_menu_in_modal';
 import { isUserBusy } from './utils';
 
@@ -44,10 +45,12 @@ export default {
     GlFormCheckbox,
     GlDropdown,
     GlDropdownItem,
+    EmojiPicker: () => import('~/emoji/components/picker.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     defaultEmoji: {
       type: String,
@@ -102,7 +105,9 @@ export default {
     this.$root.$emit(BV_SHOW_MODAL, this.modalId);
   },
   beforeDestroy() {
-    this.emojiMenu.destroy();
+    if (this.emojiMenu) {
+      this.emojiMenu.destroy();
+    }
   },
   methods: {
     closeModal() {
@@ -121,13 +126,16 @@ export default {
           this.noEmoji = this.emoji === '';
           this.defaultEmojiTag = Emoji.glEmojiTag(this.defaultEmoji);
 
-          this.emojiMenu = new EmojiMenuInModal(
-            Emoji,
-            toggleEmojiMenuButtonSelector,
-            emojiMenuClass,
-            this.setEmoji,
-            this.$refs.userStatusForm,
-          );
+          if (!this.glFeatures.improvedEmojiPicker) {
+            this.emojiMenu = new EmojiMenuInModal(
+              Emoji,
+              toggleEmojiMenuButtonSelector,
+              emojiMenuClass,
+              this.setEmoji,
+              this.$refs.userStatusForm,
+            );
+          }
+
           this.setDefaultEmoji();
         })
         .catch(() => createFlash(__('Failed to load emoji list.')));
@@ -164,7 +172,12 @@ export default {
       this.emoji = emoji;
       this.noEmoji = false;
       this.clearEmoji();
-      this.emojiTag = emojiTag;
+
+      if (this.glFeatures.improvedEmojiPicker) {
+        this.emojiTag = Emoji.glEmojiTag(this.emoji);
+      } else {
+        this.emojiTag = emojiTag;
+      }
     },
     clearEmoji() {
       if (this.emojiTag) {
@@ -241,7 +254,26 @@ export default {
       <div ref="userStatusForm" class="form-group position-relative m-0">
         <div class="input-group gl-mb-5">
           <span class="input-group-prepend">
+            <emoji-picker
+              v-if="glFeatures.improvedEmojiPicker"
+              dropdown-class="gl-h-full"
+              toggle-class="btn emoji-menu-toggle-button gl-px-4! gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
+              @click="setEmoji"
+            >
+              <template #button-content>
+                <span v-html="emojiTag"></span>
+                <span
+                  v-show="noEmoji"
+                  class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
+                >
+                  <gl-icon name="slight-smile" class="award-control-icon-neutral" />
+                  <gl-icon name="smiley" class="award-control-icon-positive" />
+                  <gl-icon name="smile" class="award-control-icon-super-positive" />
+                </span>
+              </template>
+            </emoji-picker>
             <button
+              v-else
               ref="toggleEmojiMenuButton"
               v-gl-tooltip.bottom.hover
               :title="s__('SetStatusModal|Add status emoji')"

lib/gitlab/gon_helper.rb

@@ -47,6 +47,7 @@ module Gitlab
       push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
       push_frontend_feature_flag(:usage_data_api, type: :ops, default_enabled: :yaml)
       push_frontend_feature_flag(:security_auto_fix, default_enabled: false)
+      push_frontend_feature_flag(:improved_emoji_picker, default_enabled: :yaml)
     end
 
     # Exposes the state of a feature flag to the frontend code.

spec/features/profiles/user_edit_profile_spec.rb

@@ -8,6 +8,8 @@ RSpec.describe 'User edit profile' do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(improved_emoji_picker: false)
+
     sign_in(user)
     visit(profile_path)
   end

spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js

@@ -2,6 +2,7 @@ import { GlModal, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { initEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
+import EmojiPicker from '~/emoji/components/picker.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import SetStatusModalWrapper, {
   AVAILABILITY_STATUS,
@@ -25,7 +26,7 @@ describe('SetStatusModalWrapper', () => {
     defaultEmoji,
   };
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, improvedEmojiPicker = false) => {
     return shallowMount(SetStatusModalWrapper, {
       propsData: {
         ...defaultProps,
@@ -34,6 +35,9 @@ describe('SetStatusModalWrapper', () => {
       mocks: {
         $toast,
       },
+      provide: {
+        glFeatures: { improvedEmojiPicker },
+      },
     });
   };
 
@@ -106,6 +110,20 @@ describe('SetStatusModalWrapper', () => {
     });
   });
 
+  describe('improvedEmojiPicker is true', () => {
+    beforeEach(async () => {
+      mockEmoji = await initEmojiMock();
+      wrapper = createComponent({}, true);
+      return initModal();
+    });
+
+    it('sets emojiTag when clicking in emoji picker', async () => {
+      await wrapper.findComponent(EmojiPicker).vm.$emit('click', 'thumbsup');
+
+      expect(wrapper.vm.emojiTag).toContain('data-name="thumbsup"');
+    });
+  });
+
   describe('with no currentMessage set', () => {
     beforeEach(async () => {
       mockEmoji = await initEmojiMock();