Merge branch 'ph/removeImprovedEmojiPickerFeatyreFlag' into 'master'

Remove improved_emoji_picker feature flag

See merge request gitlab-org/gitlab!82117

app/assets/javascripts/emoji/awards_app/index.js

@@ -5,6 +5,8 @@ import AwardsList from '~/vue_shared/components/awards_list.vue';
 import createstore from './store';
 
 export default (el) => {
+  if (!el) return null;
+
   const {
     dataset: { path },
   } = el;

app/assets/javascripts/issues/index.js

 import $ from 'jquery';
 import IssuableForm from 'ee_else_ce/issuable/issuable_form';
-import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
@@ -22,6 +21,7 @@ import MilestoneSelect from '~/milestones/milestone_select';
 import initNotesApp from '~/notes';
 import { store } from '~/notes/stores';
 import ZenMode from '~/zen_mode';
+import initAwardsApp from '~/emoji/awards_app';
 import FilteredSearchServiceDesk from './filtered_search_service_desk';
 
 export function initFilteredSearchServiceDesk() {
@@ -72,15 +72,7 @@ export function initShow() {
   initRelatedMergeRequests();
   initSentryErrorStackTrace();
 
-  const awardEmojiEl = document.getElementById('js-vue-awards-block');
-
-  if (awardEmojiEl) {
-    import('~/emoji/awards_app')
-      .then((m) => m.default(awardEmojiEl))
-      .catch(() => {});
-  } else {
-    loadAwardsHandler();
-  }
+  initAwardsApp(document.getElementById('js-vue-awards-block'));
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then((module) => module.default())

app/assets/javascripts/notes/components/note_actions.vue

@@ -292,40 +292,18 @@ export default {
       class="line-resolve-btn note-action-button"
       @click="onResolve"
     />
-    <template v-if="canAwardEmoji">
-      <emoji-picker
-        v-if="glFeatures.improvedEmojiPicker"
-        toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!"
-        @click="setAwardEmoji"
-      >
-        <template #button-content>
-          <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" />
-          <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" />
-          <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" />
-        </template>
-      </emoji-picker>
-      <gl-button
-        v-else
-        v-gl-tooltip
-        :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
-        class="note-action-button note-emoji-button add-reaction-button js-add-award js-note-emoji"
-        category="tertiary"
-        variant="default"
-        :title="$options.i18n.addReactionLabel"
-        :aria-label="$options.i18n.addReactionLabel"
-        data-position="right"
-      >
-        <span class="reaction-control-icon reaction-control-icon-neutral">
-          <gl-icon name="slight-smile" />
-        </span>
-        <span class="reaction-control-icon reaction-control-icon-positive">
-          <gl-icon name="smiley" />
-        </span>
-        <span class="reaction-control-icon reaction-control-icon-super-positive">
-          <gl-icon name="smile" />
-        </span>
-      </gl-button>
-    </template>
+    <emoji-picker
+      v-if="canAwardEmoji"
+      toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!"
+      data-testid="note-emoji-button"
+      @click="setAwardEmoji"
+    >
+      <template #button-content>
+        <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" />
+        <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" />
+        <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" />
+      </template>
+    </emoji-picker>
     <reply-button
       v-if="showReply"
       ref="replyButton"

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { initPipelineCountListener } from '~/commit/pipelines/utils';
 import { initIssuableSidebar } from '~/issuable';
@@ -8,23 +7,16 @@ import StatusBox from '~/issuable/components/status_box.vue';
 import createDefaultClient from '~/lib/graphql';
 import initSourcegraph from '~/sourcegraph';
 import ZenMode from '~/zen_mode';
+import initAwardsApp from '~/emoji/awards_app';
 import getStateQuery from './queries/get_state.query.graphql';
 
 export default function initMergeRequestShow() {
-  const awardEmojiEl = document.getElementById('js-vue-awards-block');
-
   new ZenMode(); // eslint-disable-line no-new
   initPipelineCountListener(document.querySelector('#commit-pipeline-table-view'));
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   initSourcegraph();
   initIssuableSidebar();
-  if (awardEmojiEl) {
-    import('~/emoji/awards_app')
-      .then((m) => m.default(awardEmojiEl))
-      .catch(() => {});
-  } else {
-    loadAwardsHandler();
-  }
+  initAwardsApp(document.getElementById('js-vue-awards-block'));
 
   const el = document.querySelector('.js-mr-status-box');
   const apolloProvider = new VueApollo({

app/assets/javascripts/pages/projects/snippets/show/index.js

 import '~/snippet/snippet_show';
+import initAwardsApp from '~/emoji/awards_app';
 
-const awardEmojiEl = document.getElementById('js-vue-awards-block');
-
-if (awardEmojiEl) {
-  import('~/emoji/awards_app')
-    .then((m) => m.default(awardEmojiEl))
-    .catch(() => {});
-}
+initAwardsApp(document.getElementById('js-vue-awards-block'));

app/assets/javascripts/set_status_modal/emoji_menu_in_modal.js

-import { AwardsHandler } from '~/awards_handler';
-
-class EmojiMenuInModal extends AwardsHandler {
-  constructor(emoji, toggleButtonSelector, menuClass, selectEmojiCallback, targetContainerEl) {
-    super(emoji);
-
-    this.selectEmojiCallback = selectEmojiCallback;
-    this.toggleButtonSelector = toggleButtonSelector;
-    this.menuClass = menuClass;
-    this.targetContainerEl = targetContainerEl;
-
-    this.bindEvents();
-  }
-
-  postEmoji($emojiButton, awardUrl, selectedEmoji) {
-    this.selectEmojiCallback(selectedEmoji, this.emoji.glEmojiTag(selectedEmoji));
-  }
-}
-
-export default EmojiMenuInModal;

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -19,10 +19,8 @@ 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';
 
-const emojiMenuClass = 'js-modal-status-emoji-menu';
 export const AVAILABILITY_STATUS = {
   BUSY: 'busy',
   NOT_SET: 'not_set',
@@ -83,7 +81,6 @@ export default {
       emoji: this.currentEmoji,
       emojiMenu: null,
       emojiTag: '',
-      isEmojiMenuVisible: false,
       message: this.currentMessage,
       modalId: 'set-user-status-modal',
       noEmoji: true,
@@ -105,17 +102,11 @@ export default {
   mounted() {
     this.$root.$emit(BV_SHOW_MODAL, this.modalId);
   },
-  beforeDestroy() {
-    if (this.emojiMenu) {
-      this.emojiMenu.destroy();
-    }
-  },
   methods: {
     closeModal() {
       this.$root.$emit(BV_HIDE_MODAL, this.modalId);
     },
     setupEmojiListAndAutocomplete() {
-      const toggleEmojiMenuButtonSelector = '#set-user-status-modal .js-toggle-emoji-menu';
       const emojiAutocomplete = new GfmAutoComplete();
       emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
 
@@ -127,16 +118,6 @@ export default {
           this.noEmoji = this.emoji === '';
           this.defaultEmojiTag = Emoji.glEmojiTag(this.defaultEmoji);
 
-          if (!this.glFeatures.improvedEmojiPicker) {
-            this.emojiMenu = new EmojiMenuInModal(
-              Emoji,
-              toggleEmojiMenuButtonSelector,
-              emojiMenuClass,
-              this.setEmoji,
-              this.$refs.userStatusForm,
-            );
-          }
-
           this.setDefaultEmoji();
         })
         .catch(() =>
@@ -145,19 +126,6 @@ export default {
           }),
         );
     },
-    showEmojiMenu(e) {
-      e.stopPropagation();
-      this.isEmojiMenuVisible = true;
-      this.emojiMenu.showEmojiMenu($(this.$refs.toggleEmojiMenuButton));
-    },
-    hideEmojiMenu() {
-      if (!this.isEmojiMenuVisible) {
-        return;
-      }
-
-      this.isEmojiMenuVisible = false;
-      this.emojiMenu.hideMenuElement($(`.${emojiMenuClass}`));
-    },
     setDefaultEmoji() {
       const { emojiTag } = this;
       const hasStatusMessage = Boolean(this.message.length);
@@ -173,16 +141,12 @@ export default {
         this.clearEmoji();
       }
     },
-    setEmoji(emoji, emojiTag) {
+    setEmoji(emoji) {
       this.emoji = emoji;
       this.noEmoji = false;
       this.clearEmoji();
 
-      if (this.glFeatures.improvedEmojiPicker) {
-        this.emojiTag = Emoji.glEmojiTag(this.emoji);
-      } else {
-        this.emojiTag = emojiTag;
-      }
+      this.emojiTag = Emoji.glEmojiTag(this.emoji);
     },
     clearEmoji() {
       if (this.emojiTag) {
@@ -194,7 +158,6 @@ export default {
       this.message = '';
       this.noEmoji = true;
       this.clearEmoji();
-      this.hideEmojiMenu();
     },
     removeStatus() {
       this.availability = false;
@@ -249,7 +212,6 @@ export default {
     :action-secondary="$options.actionSecondary"
     modal-class="set-user-status-modal"
     @shown="setupEmojiListAndAutocomplete"
-    @hide="hideEmojiMenu"
     @primary="setStatus"
     @secondary="removeStatus"
   >
@@ -264,7 +226,6 @@ export default {
         <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!"
               boundary="viewport"
@@ -283,27 +244,6 @@ export default {
                 </span>
               </template>
             </emoji-picker>
-            <button
-              v-else
-              ref="toggleEmojiMenuButton"
-              v-gl-tooltip.bottom.hover
-              :title="s__('SetStatusModal|Add status emoji')"
-              :aria-label="s__('SetStatusModal|Add status emoji')"
-              name="button"
-              type="button"
-              class="js-toggle-emoji-menu emoji-menu-toggle-button btn"
-              @click="showEmojiMenu"
-            >
-              <span v-safe-html:[$options.safeHtmlConfig]="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>
-            </button>
           </span>
           <input
             ref="statusMessageField"
@@ -314,7 +254,6 @@ export default {
             name="user[status][message]"
             @keyup="setDefaultEmoji"
             @keyup.enter.prevent
-            @click="hideEmojiMenu"
           />
           <span v-show="isDirty" class="input-group-append">
             <button

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -198,10 +198,10 @@ export default {
     </gl-button>
     <div v-if="canAwardEmoji" class="award-menu-holder gl-my-2">
       <emoji-picker
-        v-if="glFeatures.improvedEmojiPicker"
         v-gl-tooltip.viewport
         :title="__('Add reaction')"
         :toggle-class="['add-reaction-button btn-icon gl-relative!', { 'is-active': isMenuOpen }]"
+        data-testid="emoji-picker"
         @click="handleAward"
         @shown="setIsMenuOpen(true)"
         @hidden="setIsMenuOpen(false)"
@@ -219,24 +219,6 @@ export default {
           </span>
         </template>
       </emoji-picker>
-      <gl-button
-        v-else
-        v-gl-tooltip.viewport
-        :class="addButtonClass"
-        class="add-reaction-button js-add-award"
-        title="Add reaction"
-        :aria-label="__('Add reaction')"
-      >
-        <span class="reaction-control-icon reaction-control-icon-neutral">
-          <gl-icon name="slight-smile" />
-        </span>
-        <span class="reaction-control-icon reaction-control-icon-positive">
-          <gl-icon name="smiley" />
-        </span>
-        <span class="reaction-control-icon reaction-control-icon-super-positive">
-          <gl-icon name="smile" />
-        </span>
-      </gl-button>
     </div>
   </div>
 </template>

app/controllers/projects/issues_controller.rb

@@ -37,7 +37,6 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_download_code!, only: [:related_branches]
 
   before_action do
-    push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
     push_frontend_feature_flag(:vue_issues_list, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:contacts_autocomplete, project&.group, default_enabled: :yaml)

app/controllers/projects/merge_requests_controller.rb

@@ -37,7 +37,6 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:core_security_mr_widget_counts, project)
     push_frontend_feature_flag(:paginated_notes, project, default_enabled: :yaml)
     push_frontend_feature_flag(:confidential_notes, project, default_enabled: :yaml)
-    push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
     push_frontend_feature_flag(:restructured_mr_widget, project, default_enabled: :yaml)
     push_frontend_feature_flag(:refactor_mr_widgets_extensions, project, default_enabled: :yaml)
     push_frontend_feature_flag(:rebase_without_ci_ui, project, default_enabled: :yaml)

app/controllers/projects/snippets_controller.rb

@@ -14,10 +14,6 @@ class Projects::SnippetsController < Projects::Snippets::ApplicationController
   before_action :authorize_read_snippet!, except: [:new, :index]
   before_action :authorize_update_snippet!, only: :edit
 
-  before_action only: [:show] do
-    push_frontend_feature_flag(:improved_emoji_picker, @project, default_enabled: :yaml)
-  end
-
   urgency :low, [:index]
 
   def index

app/helpers/issues_helper.rb

@@ -251,9 +251,7 @@ module IssuesHelper
   end
 
   def award_emoji_issue_api_path(issue)
-    if Feature.enabled?(:improved_emoji_picker, issue.project, default_enabled: :yaml)
-      api_v4_projects_issues_award_emoji_path(id: issue.project.id, issue_iid: issue.iid)
-    end
+    api_v4_projects_issues_award_emoji_path(id: issue.project.id, issue_iid: issue.iid)
   end
 end
 

app/helpers/merge_requests_helper.rb

@@ -203,9 +203,7 @@ module MergeRequestsHelper
   end
 
   def award_emoji_merge_request_api_path(merge_request)
-    if Feature.enabled?(:improved_emoji_picker, merge_request.project, default_enabled: :yaml)
-      api_v4_projects_merge_requests_award_emoji_path(id: merge_request.project.id, merge_request_iid: merge_request.iid)
-    end
+    api_v4_projects_merge_requests_award_emoji_path(id: merge_request.project.id, merge_request_iid: merge_request.iid)
   end
 
   private

app/helpers/snippets_helper.rb

@@ -77,8 +77,6 @@ module SnippetsHelper
   end
 
   def project_snippets_award_api_path(snippet)
-    if Feature.enabled?(:improved_emoji_picker, snippet.project, default_enabled: :yaml)
-      api_v4_projects_snippets_award_emoji_path(id: snippet.project.id, snippet_id: snippet.id)
-    end
+    api_v4_projects_snippets_award_emoji_path(id: snippet.project.id, snippet_id: snippet.id)
   end
 end

config/feature_flags/development/improved_emoji_picker.yml

----
-name: improved_emoji_picker
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54469
-rollout_issue_url:
-milestone: '13.9'
-type: development
-group: group::code review
-default_enabled: true

ee/app/assets/javascripts/pages/groups/epics/show/index.js

 import ShortcutsEpic from 'ee/behaviors/shortcuts/shortcuts_epic';
 import initEpicApp from 'ee/epic/epic_bundle';
-import loadAwardsHandler from '~/awards_handler';
 import initNotesApp from '~/notes';
 import ZenMode from '~/zen_mode';
+import initAwardsApp from '~/emoji/awards_app';
 
 initNotesApp();
 initEpicApp();
@@ -14,15 +14,7 @@ if (gon.features.relatedEpicsWidget) {
 }
 
 requestIdleCallback(() => {
-  const awardEmojiEl = document.getElementById('js-vue-awards-block');
-
   new ShortcutsEpic(); // eslint-disable-line no-new
-  if (awardEmojiEl) {
-    import('~/emoji/awards_app')
-      .then((m) => m.default(awardEmojiEl))
-      .catch(() => {});
-  } else {
-    loadAwardsHandler();
-  }
+  initAwardsApp(document.getElementById('js-vue-awards-block'));
   new ZenMode(); // eslint-disable-line no-new
 });

ee/app/controllers/groups/epics_controller.rb

@@ -17,7 +17,6 @@ class Groups::EpicsController < Groups::ApplicationController
   after_action :log_epic_show, only: :show
 
   before_action do
-    push_frontend_feature_flag(:improved_emoji_picker, @group, type: :development, default_enabled: :yaml)
     push_frontend_feature_flag(:related_epics_widget, @group, type: :development, default_enabled: :yaml)
   end
 

ee/app/helpers/epics_helper.rb

@@ -21,8 +21,6 @@ module EpicsHelper
   end
 
   def award_emoji_epics_api_path(epic)
-    if Feature.enabled?(:improved_emoji_picker, epic.group, default_enabled: :yaml)
-      api_v4_groups_epics_award_emoji_path(id: epic.group.id, epic_iid: epic.iid)
-    end
+    api_v4_groups_epics_award_emoji_path(id: epic.group.id, epic_iid: epic.iid)
   end
 end

lib/gitlab/gon_helper.rb

@@ -53,7 +53,6 @@ module Gitlab
       # made globally available to the frontend
       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)
       push_frontend_feature_flag(:new_header_search, default_enabled: :yaml)
       push_frontend_feature_flag(:bootstrap_confirmation_modals, default_enabled: :yaml)
       push_frontend_feature_flag(:sandboxed_mermaid, default_enabled: :yaml)

locale/gitlab.pot

@@ -34269,9 +34269,6 @@ msgstr ""
 msgid "Set what should be replicated by this secondary site."
 msgstr ""
 
-msgid "SetStatusModal|Add status emoji"
-msgstr ""
-
 msgid "SetStatusModal|An indicator appears next to your name and avatar"
 msgstr ""
 

spec/features/profiles/user_edit_profile_spec.rb

@@ -8,8 +8,6 @@ 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
@@ -169,10 +167,9 @@ RSpec.describe 'User edit profile' do
 
   context 'user status', :js do
     def select_emoji(emoji_name, is_modal = false)
-      emoji_menu_class = is_modal ? '.js-modal-status-emoji-menu' : '.js-status-emoji-menu'
-      toggle_button = find('.js-toggle-emoji-menu')
+      toggle_button = find('.emoji-menu-toggle-button')
       toggle_button.click
-      emoji_button = find(%Q{#{emoji_menu_class} .js-emoji-btn gl-emoji[data-name="#{emoji_name}"]})
+      emoji_button = find("gl-emoji[data-name=\"#{emoji_name}\"]")
       emoji_button.click
     end
 
@@ -207,7 +204,7 @@ RSpec.describe 'User edit profile' do
       end
 
       it 'adds message and emoji to user status' do
-        emoji = 'tanabata_tree'
+        emoji = '8ball'
         message = 'Playing outside'
         select_emoji(emoji)
         fill_in 'js-status-message-field', with: message
@@ -356,7 +353,7 @@ RSpec.describe 'User edit profile' do
       end
 
       it 'adds emoji to user status' do
-        emoji = 'biohazard'
+        emoji = '8ball'
         open_user_status_modal
         select_emoji(emoji, true)
         set_user_status_in_modal
@@ -387,18 +384,18 @@ RSpec.describe 'User edit profile' do
 
       it 'opens the emoji modal again after closing it' do
         open_user_status_modal
-        select_emoji('biohazard', true)
+        select_emoji('8ball', true)
 
-        find('.js-toggle-emoji-menu').click
+        find('.emoji-menu-toggle-button').click
 
-        expect(page).to have_selector('.emoji-menu')
+        expect(page).to have_selector('.emoji-picker-emoji')
       end
 
       it 'does not update the awards panel emoji' do
         project.add_maintainer(user)
         visit(project_issue_path(project, issue))
 
-        emoji = 'biohazard'
+        emoji = '8ball'
         open_user_status_modal
         select_emoji(emoji, true)
 
@@ -420,7 +417,7 @@ RSpec.describe 'User edit profile' do
       end
 
       it 'adds message and emoji to user status' do
-        emoji = 'tanabata_tree'
+        emoji = '8ball'
         message = 'Playing outside'
         open_user_status_modal
         select_emoji(emoji, true)
@@ -495,9 +492,7 @@ RSpec.describe 'User edit profile' do
         open_user_status_modal
         find('.js-status-message-field').native.send_keys(message)
 
-        within('.js-toggle-emoji-menu') do
-          expect(page).to have_emoji('speech_balloon')
-        end
+        expect(page).to have_emoji('speech_balloon')
       end
 
       context 'note header' do

spec/frontend/notes/components/note_actions_spec.js

@@ -87,8 +87,7 @@ describe('noteActions', () => {
     });
 
     it('should render emoji link', () => {
-      expect(wrapper.find('.js-add-award').exists()).toBe(true);
-      expect(wrapper.find('.js-add-award').attributes('data-position')).toBe('right');
+      expect(wrapper.find('[data-testid="note-emoji-button"]').exists()).toBe(true);
     });
 
     describe('actions dropdown', () => {

spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js

@@ -26,7 +26,7 @@ describe('SetStatusModalWrapper', () => {
     defaultEmoji,
   };
 
-  const createComponent = (props = {}, improvedEmojiPicker = false) => {
+  const createComponent = (props = {}) => {
     return shallowMount(SetStatusModalWrapper, {
       propsData: {
         ...defaultProps,
@@ -35,19 +35,15 @@ describe('SetStatusModalWrapper', () => {
       mocks: {
         $toast,
       },
-      provide: {
-        glFeatures: { improvedEmojiPicker },
-      },
     });
   };
 
   const findModal = () => wrapper.find(GlModal);
   const findFormField = (field) => wrapper.find(`[name="user[status][${field}]"]`);
   const findClearStatusButton = () => wrapper.find('.js-clear-user-status-button');
-  const findNoEmojiPlaceholder = () => wrapper.find('.js-no-emoji-placeholder');
-  const findToggleEmojiButton = () => wrapper.find('.js-toggle-emoji-menu');
   const findAvailabilityCheckbox = () => wrapper.find(GlFormCheckbox);
   const findClearStatusAtMessage = () => wrapper.find('[data-testid="clear-status-at-message"]');
+  const getEmojiPicker = () => wrapper.findComponent(EmojiPicker);
 
   const initModal = async ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
     const modal = findModal();
@@ -95,12 +91,6 @@ describe('SetStatusModalWrapper', () => {
       expect(findClearStatusButton().isVisible()).toBe(true);
     });
 
-    it('clicking the toggle emoji button displays the emoji list', () => {
-      expect(wrapper.vm.showEmojiMenu).not.toHaveBeenCalled();
-      findToggleEmojiButton().trigger('click');
-      expect(wrapper.vm.showEmojiMenu).toHaveBeenCalled();
-    });
-
     it('displays the clear status at dropdown', () => {
       expect(wrapper.find('[data-testid="clear-status-at-dropdown"]').exists()).toBe(true);
     });
@@ -108,16 +98,6 @@ describe('SetStatusModalWrapper', () => {
     it('does not display the clear status at message', () => {
       expect(findClearStatusAtMessage().exists()).toBe(false);
     });
-  });
-
-  describe('improvedEmojiPicker is true', () => {
-    const getEmojiPicker = () => wrapper.findComponent(EmojiPicker);
-
-    beforeEach(async () => {
-      await initEmojiMock();
-      wrapper = createComponent({}, true);
-      return initModal();
-    });
 
     it('renders emoji picker dropdown with custom positioning', () => {
       expect(getEmojiPicker().props()).toMatchObject({
@@ -147,10 +127,6 @@ describe('SetStatusModalWrapper', () => {
     it('hides the clear status button', () => {
       expect(findClearStatusButton().isVisible()).toBe(false);
     });
-
-    it('shows the placeholder emoji', () => {
-      expect(findNoEmojiPlaceholder().isVisible()).toBe(true);
-    });
   });
 
   describe('with no currentEmoji set', () => {
@@ -163,22 +139,6 @@ describe('SetStatusModalWrapper', () => {
     it('does not set the hidden status emoji field', () => {
       expect(findFormField('emoji').element.value).toBe('');
     });
-
-    it('hides the placeholder emoji', () => {
-      expect(findNoEmojiPlaceholder().isVisible()).toBe(false);
-    });
-
-    describe('with no currentMessage set', () => {
-      beforeEach(async () => {
-        await initEmojiMock();
-        wrapper = createComponent({ currentEmoji: '', currentMessage: '' });
-        return initModal();
-      });
-
-      it('shows the placeholder emoji', () => {
-        expect(findNoEmojiPlaceholder().isVisible()).toBe(true);
-      });
-    });
   });
 
   describe('with currentClearStatusAfter set', () => {

spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap

@@ -218,65 +218,88 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
   <div
     class="award-menu-holder gl-my-2"
   >
-    <button
-      aria-label="Add reaction"
-      class="btn add-reaction-button js-add-award btn-default btn-md gl-button js-test-add-button-class"
+    <div
+      class="emoji-picker"
+      data-testid="emoji-picker"
       title="Add reaction"
-      type="button"
     >
-      <!---->
-       
-      <!---->
-        
-      <span
-        class="gl-button-text"
+      <div
+        boundary="scrollParent"
+        class="dropdown b-dropdown gl-new-dropdown btn-group"
+        id="__BVID__13"
+        lazy=""
+        menu-class="dropdown-extended-height"
+        no-flip=""
       >
-        <span
-          class="reaction-control-icon reaction-control-icon-neutral"
+        <!---->
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="btn dropdown-toggle btn-default btn-md add-reaction-button btn-icon gl-relative! gl-button gl-dropdown-toggle btn-default-secondary"
+          id="__BVID__13__BV_toggle_"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="slight-smile-icon"
-            role="img"
+          <span
+            class="gl-sr-only"
           >
-            <use
-              href="#slight-smile"
-            />
-          </svg>
-        </span>
-         
-        <span
-          class="reaction-control-icon reaction-control-icon-positive"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="smiley-icon"
-            role="img"
+            Add reaction
+          </span>
+           
+          <span
+            class="reaction-control-icon reaction-control-icon-neutral"
           >
-            <use
-              href="#smiley"
-            />
-          </svg>
-        </span>
-         
-        <span
-          class="reaction-control-icon reaction-control-icon-super-positive"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="smile-icon"
-            role="img"
+            <svg
+              aria-hidden="true"
+              class="gl-icon s16"
+              data-testid="slight-smile-icon"
+              role="img"
+            >
+              <use
+                href="#slight-smile"
+              />
+            </svg>
+          </span>
+           
+          <span
+            class="reaction-control-icon reaction-control-icon-positive"
           >
-            <use
-              href="#smile"
-            />
-          </svg>
-        </span>
-      </span>
-    </button>
+            <svg
+              aria-hidden="true"
+              class="gl-icon s16"
+              data-testid="smiley-icon"
+              role="img"
+            >
+              <use
+                href="#smiley"
+              />
+            </svg>
+          </span>
+           
+          <span
+            class="reaction-control-icon reaction-control-icon-super-positive"
+          >
+            <svg
+              aria-hidden="true"
+              class="gl-icon s16"
+              data-testid="smile-icon"
+              role="img"
+            >
+              <use
+                href="#smile"
+              />
+            </svg>
+          </span>
+        </button>
+        <ul
+          aria-labelledby="__BVID__13__BV_toggle_"
+          class="dropdown-menu dropdown-extended-height dropdown-menu-right"
+          role="menu"
+          tabindex="-1"
+        >
+          <!---->
+        </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;

spec/frontend/vue_shared/components/awards_list_spec.js

@@ -76,7 +76,7 @@ describe('vue_shared/components/awards_list', () => {
         count: Number(x.find('.js-counter').text()),
       };
     });
-  const findAddAwardButton = () => wrapper.find('.js-add-award');
+  const findAddAwardButton = () => wrapper.find('[data-testid="emoji-picker"]');
 
   describe('default', () => {
     beforeEach(() => {
@@ -151,7 +151,6 @@ describe('vue_shared/components/awards_list', () => {
       const btn = findAddAwardButton();
 
       expect(btn.exists()).toBe(true);
-      expect(btn.classes(TEST_ADD_BUTTON_CLASS)).toBe(true);
     });
   });