From 08728c22db1621254310e3b0493fceed5dd7aa22 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 25 Sep 2023 15:53:56 +0100
Subject: [PATCH] Added custom emoji settings page

Creates the controller and route for the custom emoji settings page.
---
 .../custom_emoji/components/app.vue           |  2 +-
 .../javascripts/emoji/awards_app/index.js     |  5 +-
 .../javascripts/emoji/components/picker.vue   | 13 +++-
 app/assets/javascripts/mr_notes/init_notes.js |  1 +
 app/assets/javascripts/notes/index.js         |  1 +
 .../pages/groups/custom_emoji/index.js        |  3 +
 app/assets/stylesheets/framework/emojis.scss  |  3 +-
 .../groups/custom_emoji_controller.rb         | 12 ++++
 app/helpers/groups_helper.rb                  |  8 +++
 app/views/award_emoji/_awards_block.html.haml |  3 +-
 app/views/groups/custom_emoji/index.html.haml |  8 +++
 .../issues/_details_content.html.haml         |  2 +-
 .../projects/issues/_discussion.html.haml     |  3 +-
 .../projects/issues/_emoji_block.html.haml    |  3 +-
 .../merge_requests/_awards_block.html.haml    |  2 +-
 .../projects/merge_requests/_page.html.haml   |  3 +-
 app/views/projects/snippets/show.html.haml    |  2 +-
 config/routes/group.rb                        |  2 +
 .../views/groups/epics/_discussion.html.haml  |  3 +-
 ee/app/views/groups/epics/show.html.haml      |  2 +-
 locale/gitlab.pot                             |  5 +-
 .../user_creates_custom_emoji_spec.rb         | 59 +++++++++++++++++++
 spec/helpers/groups_helper_spec.rb            | 40 +++++++++++++
 .../groups/custom_emoji_controller_spec.rb    | 27 +++++++++
 24 files changed, 198 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/javascripts/pages/groups/custom_emoji/index.js
 create mode 100644 app/controllers/groups/custom_emoji_controller.rb
 create mode 100644 app/views/groups/custom_emoji/index.html.haml
 create mode 100644 spec/features/merge_request/user_creates_custom_emoji_spec.rb
 create mode 100644 spec/requests/groups/custom_emoji_controller_spec.rb

diff --git a/app/assets/javascripts/custom_emoji/components/app.vue b/app/assets/javascripts/custom_emoji/components/app.vue
index 405a296397fe15..00b904fbea49bc 100644
--- a/app/assets/javascripts/custom_emoji/components/app.vue
+++ b/app/assets/javascripts/custom_emoji/components/app.vue
@@ -8,7 +8,7 @@ export default {};
       <h4 class="gl-mt-0">
         {{ __('Custom emoji') }}
       </h4>
-      <p>{{ __('Custom emoji will be available to use in every project in group.') }}</p>
+      <p>{{ __('Custom emoji will be available to use in every project in the group.') }}</p>
       <router-view />
     </div>
   </div>
diff --git a/app/assets/javascripts/emoji/awards_app/index.js b/app/assets/javascripts/emoji/awards_app/index.js
index f3d72c2dba5f24..8559f982bf4212 100644
--- a/app/assets/javascripts/emoji/awards_app/index.js
+++ b/app/assets/javascripts/emoji/awards_app/index.js
@@ -9,7 +9,7 @@ export default (el) => {
   if (!el) return null;
 
   const {
-    dataset: { path },
+    dataset: { path, newCustomEmojiPath },
   } = el;
   const canAwardEmoji = parseBoolean(el.dataset.canAwardEmoji);
 
@@ -17,6 +17,9 @@ export default (el) => {
     el,
     name: 'AwardsListRoot',
     store: createstore(),
+    provide: {
+      newCustomEmojiPath,
+    },
     computed: {
       ...mapState(['currentUserId', 'canAwardEmoji', 'awards']),
     },
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index fcc54f17466fb0..238f0d81b2212e 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
+import { GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { findLastIndex } from 'lodash';
 import VirtualList from 'vue-virtual-scroll-list';
 import { CATEGORY_NAMES, getEmojiCategoryMap, state } from '~/emoji';
@@ -13,11 +13,17 @@ export default {
   components: {
     GlIcon,
     GlDropdown,
+    GlDropdownItem,
     GlSearchBoxByType,
     VirtualList,
     Category,
     EmojiList,
   },
+  inject: {
+    newCustomEmojiPath: {
+      default: '',
+    },
+  },
   props: {
     toggleClass: {
       type: [Array, String, Object],
@@ -167,6 +173,11 @@ export default {
           </virtual-list>
         </template>
       </emoji-list>
+      <template v-if="newCustomEmojiPath" #footer>
+        <gl-dropdown-item :href="newCustomEmojiPath">
+          {{ __('Create new emoji') }}
+        </gl-dropdown-item>
+      </template>
     </gl-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index 04167518d3f348..265e2a2f8805fe 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -44,6 +44,7 @@ export default () => {
       reportAbusePath: notesDataset.reportAbusePath,
       newCommentTemplatePath: notesDataset.newCommentTemplatePath,
       mrFilter: true,
+      newCustomEmojiPath: notesDataset.newCustomEmojiPath,
     },
     data() {
       const noteableData = JSON.parse(notesDataset.noteableData);
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 724b47bf44bcfe..f9fbe6659ee65e 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -62,6 +62,7 @@ export default ({ editorAiActions = [] } = {}) => {
       newCommentTemplatePath: notesDataset.newCommentTemplatePath,
       resourceGlobalId: convertToGraphQLId(noteableData.noteableType, noteableData.id),
       editorAiActions: editorAiActions.map((factory) => factory(noteableData)),
+      newCustomEmojiPath: notesDataset.newCustomEmojiPath,
     },
     data() {
       return {
diff --git a/app/assets/javascripts/pages/groups/custom_emoji/index.js b/app/assets/javascripts/pages/groups/custom_emoji/index.js
new file mode 100644
index 00000000000000..dd02a6f5348d26
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/custom_emoji/index.js
@@ -0,0 +1,3 @@
+import { initCustomEmojis } from '~/custom_emoji/custom_emoji_bundle';
+
+requestIdleCallback(initCustomEmojis);
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 9b22e4cebb2bef..d3986f31d5227c 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -63,6 +63,7 @@ gl-emoji {
   border-bottom-color: $blue-500;
 }
 
-.emoji-picker .gl-dropdown-inner > :last-child {
+.emoji-picker .gl-dropdown-contents > :last-child {
   padding-bottom: 0;
+  overflow-y: hidden;
 }
diff --git a/app/controllers/groups/custom_emoji_controller.rb b/app/controllers/groups/custom_emoji_controller.rb
new file mode 100644
index 00000000000000..f202c9febbac94
--- /dev/null
+++ b/app/controllers/groups/custom_emoji_controller.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Groups
+  class CustomEmojiController < Groups::ApplicationController
+    feature_category :code_review_workflow
+    urgency :low
+
+    before_action do
+      render_404 unless Feature.enabled?(:custom_emoji)
+    end
+  end
+end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index e552b01f7ba807..de15d6cabc001f 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -197,6 +197,14 @@ def enabled_git_access_protocol_options_for_group
     end
   end
 
+  def new_custom_emoji_path(group)
+    return unless Feature.enabled?(:custom_emoji)
+    return unless group
+    return unless can?(current_user, :create_custom_emoji, group)
+
+    new_group_custom_emoji_path(group)
+  end
+
   private
 
   def group_title_link(group, hidable: false, show_avatar: false, for_dropdown: false)
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 5062599c261377..254f05e3bccec2 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 - if api_awards_path
   .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-pt-3
-    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s } }
+    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s, new_custom_emoji_path: new_custom_emoji_path } }
     = yield
 - else
   - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
diff --git a/app/views/groups/custom_emoji/index.html.haml b/app/views/groups/custom_emoji/index.html.haml
new file mode 100644
index 00000000000000..d8c28ac8959345
--- /dev/null
+++ b/app/views/groups/custom_emoji/index.html.haml
@@ -0,0 +1,8 @@
+- page_title _('Custom emoji')
+
+#js-custom-emojis-root.row.gl-mt-5{ data: { base_path: group_custom_emoji_index_path(@group), group_path: @group.full_path } }
+  .col-12
+    %h4.gl-mt-0
+      = page_title
+    %p= _('Custom emoji will be available to use in every project in the group.')
+    = gl_loading_icon(size: 'lg')
diff --git a/app/views/projects/issues/_details_content.html.haml b/app/views/projects/issues/_details_content.html.haml
index 51ffb68f4e51f9..881e6863040cf9 100644
--- a/app/views/projects/issues/_details_content.html.haml
+++ b/app/views/projects/issues/_details_content.html.haml
@@ -16,7 +16,7 @@
       = edited_time_ago_with_tooltip(issuable, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
     .js-issue-widgets
-      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path
+      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
   .js-issue-widgets
     = render 'projects/issues/sentry_stack_trace', issuable: issuable
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index c6e5102889a8b4..5cb7fa8816e0bc 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -13,4 +13,5 @@
     current_user_data: UserSerializer.new.represent(current_user, {only_path: true}, CurrentUserEntity).to_json,
     can_add_timeline_events: "#{can?(current_user, :admin_incident_management_timeline_event, @issue)}",
     report_abuse_path: add_category_abuse_reports_path,
-    new_comment_template_path: profile_comment_templates_path } }
+    new_comment_template_path: profile_comment_templates_path,
+    new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
diff --git a/app/views/projects/issues/_emoji_block.html.haml b/app/views/projects/issues/_emoji_block.html.haml
index 7eb3c0f5c9f843..f9eee9ec99ea73 100644
--- a/app/views/projects/issues/_emoji_block.html.haml
+++ b/app/views/projects/issues/_emoji_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 .emoji-block.emoji-block-sticky
   .row.gl-m-0.gl-justify-content-space-between
     .js-noteable-awards
-      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path
+      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path
     .new-branch-col.gl-font-size-0.gl-my-2
       = render 'new_branch' if show_new_branch_button?
diff --git a/app/views/projects/merge_requests/_awards_block.html.haml b/app/views/projects/merge_requests/_awards_block.html.haml
index c1952793e7211b..f657f683a6d6f3 100644
--- a/app/views/projects/merge_requests/_awards_block.html.haml
+++ b/app/views/projects/merge_requests/_awards_block.html.haml
@@ -1,2 +1,2 @@
 .emoji-block.emoji-list-container.js-noteable-awards
-  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request)
+  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request), new_custom_emoji_path: new_custom_emoji_path(@project.group)
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index dfb18b5202170f..f99396e4155d6d 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -83,7 +83,8 @@
                 current_user_data: @current_user_data,
                 is_locked: @merge_request.discussion_locked.to_s,
                 report_abuse_path: add_category_abuse_reports_path,
-                new_comment_template_path: profile_comment_templates_path } }
+                new_comment_template_path: profile_comment_templates_path,
+                new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
           - if moved_mr_sidebar_enabled?
             = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 58e86ebffa0a2f..7ff798d732409f 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -6,6 +6,6 @@
 #js-snippet-view{ data: { 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
 
 .gl-px-0.gl-py-2
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet), new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
 #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/config/routes/group.rb b/config/routes/group.rb
index 87e885e59a20e0..6cad7f9093b525 100644
--- a/config/routes/group.rb
+++ b/config/routes/group.rb
@@ -78,6 +78,8 @@
       post :toggle_subscription, on: :member
     end
 
+    resources :custom_emoji, only: [:index, :new], action: :index
+
     resources :packages, only: [:index, :show]
 
     resources :milestones, constraints: { id: %r{[^/]+} } do
diff --git a/ee/app/views/groups/epics/_discussion.html.haml b/ee/app/views/groups/epics/_discussion.html.haml
index 07f769ba9b8d06..22869e64fbaa40 100644
--- a/ee/app/views/groups/epics/_discussion.html.haml
+++ b/ee/app/views/groups/epics/_discussion.html.haml
@@ -8,4 +8,5 @@
     current_user_data: UserSerializer.new.represent(current_user, { only_path: true }, CurrentUserEntity).to_json,
     noteable_type: 'Epic',
     report_abuse_path: add_category_abuse_reports_path,
-    new_comment_template_path: profile_comment_templates_path } }
+    new_comment_template_path: profile_comment_templates_path,
+    new_custom_emoji_path: new_custom_emoji_path(@group) } }
diff --git a/ee/app/views/groups/epics/show.html.haml b/ee/app/views/groups/epics/show.html.haml
index e0889d08999639..d3b3a7bfdc62ae 100644
--- a/ee/app/views/groups/epics/show.html.haml
+++ b/ee/app/views/groups/epics/show.html.haml
@@ -40,7 +40,7 @@
     'data-container-element-selector' => ".#{containerClass}" }
 
   .gl-display-flex.justify-content-between.emoji-list-container.js-noteable-awards
-    = render 'award_emoji/awards_block', awardable: @epic, inline: true, api_awards_path: award_emoji_epics_api_path(@epic)
+    = render 'award_emoji/awards_block', awardable: @epic, inline: true, api_awards_path: award_emoji_epics_api_path(@epic), new_custom_emoji_path: new_custom_emoji_path(@group)
   %div{ id: treeElementID, class: ['tab-pane', 'show', 'active'] }
     .row
       %section.col-md-12
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5d568647f4dbf3..18343f46e79040 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13897,6 +13897,9 @@ msgstr ""
 msgid "Create new directory"
 msgstr ""
 
+msgid "Create new emoji"
+msgstr ""
+
 msgid "Create new file"
 msgstr ""
 
@@ -14407,7 +14410,7 @@ msgstr ""
 msgid "Custom emoji"
 msgstr ""
 
-msgid "Custom emoji will be available to use in every project in group."
+msgid "Custom emoji will be available to use in every project in the group."
 msgstr ""
 
 msgid "Custom hostname (for private commit emails)"
diff --git a/spec/features/merge_request/user_creates_custom_emoji_spec.rb b/spec/features/merge_request/user_creates_custom_emoji_spec.rb
new file mode 100644
index 00000000000000..35593836dab8bd
--- /dev/null
+++ b/spec/features/merge_request/user_creates_custom_emoji_spec.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Merge request > User creates custom emoji', :js, feature_category: :code_review_workflow do
+  let_it_be(:group) { create(:group) }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :public, :repository, namespace: group) }
+  let_it_be(:merge_request) { create(:merge_request, source_project: project, author: user) }
+
+  context 'with user who has permissions' do
+    before_all do
+      group.add_owner(user)
+    end
+
+    before do
+      sign_in(user)
+
+      visit project_merge_request_path(project, merge_request)
+      wait_for_requests
+    end
+
+    it 'shows link to create custom emoji' do
+      first('.add-reaction-button').click
+
+      wait_for_requests
+
+      click_link 'Create new emoji'
+
+      wait_for_requests
+
+      find_by_testid("custom-emoji-name-input").set 'parrot'
+      find_by_testid("custom-emoji-url-input").set 'https://example.com'
+
+      click_button 'Save'
+
+      wait_for_requests
+
+      expect(page).to have_content(':parrot:')
+    end
+  end
+
+  context 'with user who does not have permissions' do
+    before do
+      sign_in(user)
+
+      visit project_merge_request_path(project, merge_request)
+      wait_for_requests
+    end
+
+    it 'shows link to create custom emoji' do
+      first('.add-reaction-button').click
+
+      wait_for_requests
+
+      expect(page).not_to have_link('Create new emoji')
+    end
+  end
+end
diff --git a/spec/helpers/groups_helper_spec.rb b/spec/helpers/groups_helper_spec.rb
index 1b5f23a5e8eb31..2cdb934eb0a6a4 100644
--- a/spec/helpers/groups_helper_spec.rb
+++ b/spec/helpers/groups_helper_spec.rb
@@ -555,4 +555,44 @@
       it { is_expected.to contain_exactly([_("Only HTTP(S)"), "http"]) }
     end
   end
+
+  describe '#new_custom_emoji_path' do
+    subject { helper.new_custom_emoji_path(group) }
+
+    let_it_be(:group) { create(:group) }
+
+    context 'with feature flag disabled' do
+      before do
+        stub_feature_flags(custom_emoji: false)
+      end
+
+      it { is_expected.to eq(nil) }
+    end
+
+    context 'with feature flag enabled' do
+      context 'with nil group' do
+        let(:group) { nil }
+
+        it { is_expected.to eq(nil) }
+      end
+
+      context 'with current_user who has no permissions' do
+        before do
+          allow(helper).to receive(:current_user).and_return(create(:user))
+        end
+
+        it { is_expected.to eq(nil) }
+      end
+
+      context 'with current_user who has permissions' do
+        before do
+          user = create(:user)
+          group.add_owner(user)
+          allow(helper).to receive(:current_user).and_return(user)
+        end
+
+        it { is_expected.to eq(new_group_custom_emoji_path(group)) }
+      end
+    end
+  end
 end
diff --git a/spec/requests/groups/custom_emoji_controller_spec.rb b/spec/requests/groups/custom_emoji_controller_spec.rb
new file mode 100644
index 00000000000000..d12cd8e42ac6f1
--- /dev/null
+++ b/spec/requests/groups/custom_emoji_controller_spec.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::CustomEmojiController, feature_category: :code_review_workflow do
+  let_it_be(:group) { create(:group) }
+
+  describe 'GET #index' do
+    context 'with custom_emoji feature flag disabled' do
+      before do
+        stub_feature_flags(custom_emoji: false)
+
+        get group_custom_emoji_index_url(group)
+      end
+
+      it { expect(response).to have_gitlab_http_status(:not_found) }
+    end
+
+    context 'with custom_emoji feature flag enabled' do
+      before do
+        get group_custom_emoji_index_url(group)
+      end
+
+      it { expect(response).to have_gitlab_http_status(:ok) }
+    end
+  end
+end
-- 
GitLab