Commit 4579d439 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'ph/addImprovedEmojiPickerToSetStatus' into 'master'

Adds the improved emoji picker to the set status modal

See merge request gitlab-org/gitlab!56370
parents 9fcb7398 b4666c87
......@@ -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
......
......@@ -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')"
......
......@@ -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.
......
......@@ -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
......
......@@ -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();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment