Merge branch '4187-add-reply-edit-shortcuts-in-epic' into 'master'

Add `l`, `r` and `e` keyboard shortcuts support in Epic

Closes #4187

See merge request gitlab-org/gitlab-ee!8203

ee/app/assets/javascripts/behaviors/shortcuts/shortcuts_epic.js

+import $ from 'jquery';
+import Mousetrap from 'mousetrap';
+import Cookies from 'js-cookie';
+import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
+
+export default class ShortcutsEpic extends ShortcutsIssuable {
+  constructor() {
+    super();
+
+    const $issuableSidebar = $('.js-issuable-update');
+
+    Mousetrap.bind('l', () =>
+      ShortcutsEpic.openSidebarDropdown($issuableSidebar.find('.js-labels-block')),
+    );
+    Mousetrap.bind('r', ShortcutsIssuable.replyWithSelectedText);
+    Mousetrap.bind('e', ShortcutsIssuable.editIssue);
+  }
+
+  static openSidebarDropdown($block) {
+    if (Cookies.get('collapsed_gutter') === 'true') {
+      document.dispatchEvent(new Event('toggleSidebarRevealLabelsDropdown'));
+    } else {
+      $block.find('.js-sidebar-dropdown-toggle').trigger('click');
+    }
+  }
+}

ee/app/assets/javascripts/epics/epic_show/sidebar_context.js

 import $ from 'jquery';
-import Mousetrap from 'mousetrap';
 import Cookies from 'js-cookie';
 import bp from '~/breakpoints';
 
@@ -7,10 +6,6 @@ export default class SidebarContext {
   constructor() {
     const $issuableSidebar = $('.js-issuable-update');
 
-    Mousetrap.bind('l', () =>
-      SidebarContext.openSidebarDropdown($issuableSidebar.find('.js-labels-block')),
-    );
-
     $issuableSidebar
       .off('click', '.js-sidebar-dropdown-toggle')
       .on('click', '.js-sidebar-dropdown-toggle', function onClickEdit(e) {
@@ -46,8 +41,4 @@ export default class SidebarContext {
       }
     });
   }
-
-  static openSidebarDropdown($block) {
-    $block.find('.js-sidebar-dropdown-toggle').trigger('click');
-  }
 }

ee/app/assets/javascripts/epics/sidebar/components/sidebar_app.vue

@@ -226,9 +226,17 @@ export default {
   },
   mounted() {
     eventHub.$on('toggleSidebar', this.toggleSidebar);
+    document.addEventListener(
+      'toggleSidebarRevealLabelsDropdown',
+      this.toggleSidebarRevealLabelsDropdown,
+    );
   },
   beforeDestroy() {
     eventHub.$off('toggleSidebar', this.toggleSidebar);
+    document.removeEventListener(
+      'toggleSidebarRevealLabelsDropdown',
+      this.toggleSidebarRevealLabelsDropdown,
+    );
   },
   methods: {
     getDateValidity(startDate, endDate) {

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

 import ZenMode from '~/zen_mode';
 import initEpicShow from 'ee/epics/epic_show/epic_show_bundle';
+import ShortcutsEpic from 'ee/behaviors/shortcuts/shortcuts_epic';
 import '~/notes/index';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
   initEpicShow();
+  new ShortcutsEpic(); // eslint-disable-line no-new
 });

ee/changelogs/unreleased/4187-add-reply-edit-shortcuts-in-epic.yml

+---
+title: Add 'l', 'r' and 'e' keyboard shortcuts support in Epic
+merge_request: 8203
+author:
+type: added

ee/spec/features/epics/shortcuts_epic_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Epic shortcuts', :js do
+  let(:user) { create(:user) }
+  let(:group) { create(:group, :public) }
+  let(:label) { create(:group_label, group: group, title: 'bug') }
+  let(:note_text) { 'I got this!' }
+
+  let(:markdown) do
+    <<-MARKDOWN.strip_heredoc
+    This is a task list:
+
+    - [ ] Incomplete entry 1
+    MARKDOWN
+  end
+
+  let(:epic) { create(:epic, group: group, title: 'make tea', description: markdown) }
+
+  before do
+    group.add_developer(user)
+    stub_licensed_features(epics: true)
+    sign_in(user)
+
+    visit group_epic_path(group, epic)
+  end
+
+  describe 'pressing "l"' do
+    it "opens labels dropdown for editing" do
+      find('body').native.send_key('l')
+
+      expect(find('.js-labels-block')).to have_selector('.dropdown-menu-labels.show')
+    end
+  end
+
+  describe 'pressing "r"' do
+    before do
+      create(:note, noteable: epic, note: note_text)
+      visit group_epic_path(group, epic)
+      wait_for_requests
+    end
+
+    it "quotes the selected text" do
+      select_element('.note-text')
+      find('body').native.send_key('r')
+
+      expect(find('.js-main-target-form .js-vue-comment-form').value).to include(note_text)
+    end
+  end
+
+  describe 'pressing "e"' do
+    it "starts editing mode for epic" do
+      find('body').native.send_key('e')
+
+      expect(find('.detail-page-description')).to have_selector('form input#issuable-title')
+      expect(find('.detail-page-description')).to have_selector('form textarea#issue-description')
+    end
+  end
+end