Prevent labels dropdown from closing incorrectly

Prevents labels dropdown from closing when any actionable
item within the dropdown is clicked.

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue

@@ -58,13 +58,13 @@ export default {
 </script>
 
 <template>
-  <div class="labels-select-contents-create">
+  <div class="labels-select-contents-create js-labels-create">
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <gl-button
         :aria-label="__('Go back')"
         variant="link"
         size="sm"
-        class="dropdown-header-button p-0"
+        class="js-btn-back dropdown-header-button p-0"
         @click="toggleDropdownContentsCreateView"
       >
         <gl-icon name="arrow-left" />
@@ -116,7 +116,7 @@ export default {
         <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
-      <gl-button class="pull-right" @click="toggleDropdownContentsCreateView">
+      <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
         {{ __('Cancel') }}
       </gl-button>
     </div>

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue

@@ -117,7 +117,7 @@ export default {
 </script>
 
 <template>
-  <div class="labels-select-contents-list" @keydown="handleKeyDown">
+  <div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
     <gl-loading-icon
       v-if="labelsFetchInProgress"
       class="labels-fetch-loading position-absolute d-flex align-items-center w-100 h-100"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

 <script>
+import $ from 'jquery';
 import Vue from 'vue';
 import Vuex, { mapState, mapActions } from 'vuex';
 import { __ } from '~/locale';
@@ -149,9 +150,16 @@ export default {
      * the dropdown while dropdown is visible.
      */
     handleDocumentClick({ target }) {
+      // This approach of element detection is needed
+      // as the dropdown wrapper is not using `GlDropdown` as
+      // it will also require us to use `BDropdownForm`
+      // which is yet to be implemented in GitLab UI.
       if (
         this.showDropdownButton &&
         this.showDropdownContents &&
+        !$(target).parents('.js-btn-back').length &&
+        !$(target).parents('.js-labels-list').length &&
+        !target?.classList.contains('js-btn-cancel-create') &&
         !target?.classList.contains('js-sidebar-dropdown-toggle') &&
         !this.$refs.dropdownButtonCollapsed?.$el.contains(target) &&
         !this.$refs.dropdownContents?.$el.contains(target)

ee/spec/features/epics/epic_show_spec.rb

@@ -3,15 +3,17 @@
 require 'spec_helper'
 
 describe 'Epic show', :js do
-  let(:user) { create(:user, name: 'Rick Sanchez', username: 'rick.sanchez') }
-  let(:group) { create(:group, :public) }
-  let(:public_project) { create(:project, :public, group: group) }
-  let(:label) { create(:group_label, group: group, title: 'bug') }
-  let(:public_issue) { create(:issue, project: public_project) }
-  let(:note_text) { 'Contemnit enim disserendi elegantiam.' }
-  let(:epic_title) { 'Sample epic' }
-
-  let(:markdown) do
+  let_it_be(:user) { create(:user, name: 'Rick Sanchez', username: 'rick.sanchez') }
+  let_it_be(:group) { create(:group, :public) }
+  let_it_be(:public_project) { create(:project, :public, group: group) }
+  let_it_be(:label1) { create(:group_label, group: group, title: 'bug') }
+  let_it_be(:label2) { create(:group_label, group: group, title: 'enhancement') }
+  let_it_be(:label3) { create(:group_label, group: group, title: 'documentation') }
+  let_it_be(:public_issue) { create(:issue, project: public_project) }
+  let_it_be(:note_text) { 'Contemnit enim disserendi elegantiam.' }
+  let_it_be(:epic_title) { 'Sample epic' }
+
+  let_it_be(:markdown) do
     <<-MARKDOWN.strip_heredoc
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nos commodius agimus.
@@ -20,11 +22,11 @@ describe 'Epic show', :js do
     MARKDOWN
   end
 
-  let(:epic) { create(:epic, group: group, title: epic_title, description: markdown, author: user) }
-  let!(:not_child) { create(:epic, group: group, title: 'not child epic', description: markdown, author: user, start_date: 50.days.ago, end_date: 10.days.ago) }
-  let!(:child_epic_a) { create(:epic, group: group, title: 'Child epic A', description: markdown, parent: epic, start_date: 50.days.ago, end_date: 10.days.ago) }
-  let!(:child_epic_b) { create(:epic, group: group, title: 'Child epic B', description: markdown, parent: epic, start_date: 100.days.ago, end_date: 20.days.ago) }
-  let!(:child_issue_a) { create(:epic_issue, epic: epic, issue: public_issue, relative_position: 1) }
+  let_it_be(:epic) { create(:epic, group: group, title: epic_title, description: markdown, author: user) }
+  let_it_be(:not_child) { create(:epic, group: group, title: 'not child epic', description: markdown, author: user, start_date: 50.days.ago, end_date: 10.days.ago) }
+  let_it_be(:child_epic_a) { create(:epic, group: group, title: 'Child epic A', description: markdown, parent: epic, start_date: 50.days.ago, end_date: 10.days.ago) }
+  let_it_be(:child_epic_b) { create(:epic, group: group, title: 'Child epic B', description: markdown, parent: epic, start_date: 100.days.ago, end_date: 20.days.ago) }
+  let_it_be(:child_issue_a) { create(:epic_issue, epic: epic, issue: public_issue, relative_position: 1) }
 
   before do
     group.add_developer(user)
@@ -118,7 +120,7 @@ describe 'Epic show', :js do
     it 'shows epic status, date and author in header' do
       page.within('.epic-page-container .detail-page-header-body') do
         expect(find('.issuable-status-box > span')).to have_content('Open')
-        expect(find('.issuable-meta')).to have_content('Opened just now by')
+        expect(find('.issuable-meta')).to have_content('Opened')
         expect(find('.issuable-meta .js-user-avatar-link-username')).to have_content('Rick Sanchez')
       end
     end
@@ -136,4 +138,88 @@ describe 'Epic show', :js do
       end
     end
   end
+
+  describe 'Epic sidebar' do
+    describe 'Labels select' do
+      it 'opens dropdown when `Edit` is clicked' do
+        page.within('aside.right-sidebar') do
+          find('.js-sidebar-dropdown-toggle').click
+        end
+
+        wait_for_requests
+
+        expect(page).to have_css('.js-labels-block .js-labels-list')
+      end
+
+      context 'when dropdown is open' do
+        before do
+          page.within('aside.right-sidebar') do
+            find('.js-sidebar-dropdown-toggle').click
+          end
+          wait_for_requests
+        end
+
+        it 'shows labels within the label dropdown' do
+          page.within('.js-labels-list .dropdown-content') do
+            expect(page).to have_selector('li', count: 3)
+          end
+        end
+
+        it 'shows checkmark next to label when label is clicked' do
+          page.within('.js-labels-list .dropdown-content') do
+            find('li', text: label1.title).click
+
+            expect(find('li', text: label1.title)).to have_selector('.gl-icon', visible: true)
+          end
+        end
+
+        it 'shows label create view when `Create group label` is clicked' do
+          page.within('.js-labels-block') do
+            find('button', text: 'Create group label').click
+
+            expect(page).to have_selector('.js-labels-create')
+          end
+        end
+
+        it 'creates new label using create view' do
+          page.within('.js-labels-block') do
+            find('button', text: 'Create group label').click
+
+            find('.dropdown-input .gl-form-input').set('Test label')
+            find('.suggest-colors-dropdown a', match: :first).click
+            find('.dropdown-actions button', text: 'Create').click
+
+            wait_for_requests
+          end
+
+          page.within('.js-labels-list .dropdown-content') do
+            expect(page).to have_selector('li', count: 4)
+            expect(page).to have_content('Test label')
+          end
+        end
+
+        it 'shows labels list view when `Cancel` button is clicked from create view' do
+          page.within('.js-labels-block') do
+            find('button', text: 'Create group label').click
+
+            find('.js-btn-cancel-create').click
+            wait_for_requests
+
+            expect(page).to have_selector('.js-labels-list')
+          end
+        end
+
+        it 'shows labels list view when back button is clicked from create view' do
+          page.within('.js-labels-block') do
+            find('button', text: 'Create group label').click
+
+            find('.js-btn-back').click
+            wait_for_requests
+
+            expect(page).to have_selector('.js-labels-list')
+          end
+        end
+      end
+    end
+  end
 end