1 files changed, 31 insertions, 33 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
index b32a8c78c93..e5da3d346ae 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
@@ -1,17 +1,15 @@
 <script>
 import {
   GlButton,
-  GlIcon,
   GlTooltipDirective,
   GlDisclosureDropdown,
   GlDisclosureDropdownItem,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { __, s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
 import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import addAwardEmojiMutation from '../../graphql/notes/work_item_note_add_award_emoji.mutation.graphql';
+import { getMutation, optimisticAwardUpdate } from '../../notes/award_utils';
 
 export default {
   name: 'WorkItemNoteActions',
@@ -25,19 +23,26 @@ export default {
     reportAbuseText: __('Report abuse to administrator'),
   },
   components: {
+    EmojiPicker: () => import('~/emoji/components/picker.vue'),
     GlButton,
-    GlIcon,
     GlDisclosureDropdown,
     GlDisclosureDropdownItem,
     ReplyButton,
-    EmojiPicker: () => import('~/emoji/components/picker.vue'),
     UserAccessRoleBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagsMixin()],
+  inject: ['fullPath'],
   props: {
+    workItemIid: {
+      type: String,
+      required: true,
+    },
+    note: {
+      type: Object,
+      required: true,
+    },
     showReply: {
       type: Boolean,
       required: true,
@@ -126,24 +131,29 @@ export default {
 
   methods: {
     async setAwardEmoji(name) {
+      const { mutation, mutationName, errorMessage } = getMutation({ note: this.note, name });
+
       try {
-        const {
-          data: {
-            awardEmojiAdd: { errors = [] },
-          },
-        } = await this.$apollo.mutate({
-          mutation: addAwardEmojiMutation,
+        await this.$apollo.mutate({
+          mutation,
           variables: {
-            awardableId: this.noteId,
+            awardableId: this.note.id,
             name,
           },
+          optimisticResponse: {
+            [mutationName]: {
+              errors: [],
+            },
+          },
+          update: optimisticAwardUpdate({
+            note: this.note,
+            name,
+            fullPath: this.fullPath,
+            workItemIid: this.workItemIid,
+          }),
         });
-
-        if (errors.length > 0) {
-          throw new Error(errors[0].message);
-        }
       } catch (error) {
-        this.$emit('error', s__('WorkItem|Failed to award emoji'));
+        this.$emit('error', errorMessage);
         Sentry.captureException(error);
       }
     },
@@ -185,23 +195,11 @@ export default {
       {{ __('Contributor') }}
     </user-access-role-badge>
     <emoji-picker
-      v-if="showAwardEmoji && glFeatures.workItemsMvc2"
+      v-if="showAwardEmoji"
       toggle-class="note-action-button note-emoji-button btn-icon btn-default-tertiary"
       data-testid="note-emoji-button"
       @click="setAwardEmoji"
-    >
-      <template #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"
-        />
-      </template>
-    </emoji-picker>
+    />
     <reply-button v-if="showReply" ref="replyButton" @startReplying="$emit('startReplying')" />
     <gl-button
       v-if="showEdit"