Resolve "View labels when editing labels in sidebar and board sidebar"

app/assets/javascripts/issuable_context.js

@@ -30,10 +30,10 @@ export default class IssuableContext {
         const $selectbox = $block.find('.selectbox');
         if ($selectbox.is(':visible')) {
           $selectbox.hide();
-          $block.find('.value').show();
+          $block.find('.value:not(.dont-hide)').show();
         } else {
           $selectbox.show();
-          $block.find('.value').hide();
+          $block.find('.value:not(.dont-hide)').hide();
         }
 
         if ($selectbox.is(':visible')) {

app/assets/stylesheets/framework/sidebar.scss

@@ -16,7 +16,7 @@
 .nav-header-btn {
   padding: 10px $gl-sidebar-padding;
   color: inherit;
-  transition-duration: .3s;
+  transition-duration: 0.3s;
   position: absolute;
   top: 0;
   cursor: pointer;
@@ -137,6 +137,12 @@
   }
 }
 
+.issuable-sidebar .labels {
+  .value.dont-hide ~ .selectbox {
+    padding-top: $gl-padding-8;
+  }
+}
+
 .pikaday-container {
   .pika-single {
     margin-top: 2px;
@@ -151,4 +157,3 @@
 .sidebar-collapsed-icon .sidebar-collapsed-value {
   font-size: 12px;
 }
-

app/views/shared/boards/components/sidebar/_labels.html.haml

@@ -4,7 +4,7 @@
     - if can_admin_issue?
       = icon("spinner spin", class: "block-loading")
       = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right"
-  .value.issuable-show-labels
+  .value.issuable-show-labels.dont-hide
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
       None
     %a{ href: "#",

app/views/shared/issuable/_sidebar.html.haml

@@ -96,7 +96,7 @@
             = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
             - if can_edit_issuable
               = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right'
-          .value.issuable-show-labels.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
+          .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
             - if selected_labels.any?
               - selected_labels.each do |label|
                 = link_to_label(label, subject: issuable.project, type: issuable.to_ability_name)

changelogs/unreleased/34262-show-current-labels-when-editing.yml

@@ -0,0 +1,5 @@
+---
+title: Keep current labels visible when editing them in the sidebar
+merge_request:
+author:
+type: changed

spec/features/boards/sidebar_spec.rb

@@ -237,6 +237,22 @@ describe 'Issue Boards', :js do
   end
 
   context 'labels' do
+    it 'shows current labels when editing' do
+      click_card(card)
+
+      page.within('.labels') do
+        click_link 'Edit'
+
+        wait_for_requests
+
+        page.within('.value') do
+          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_content(development.title)
+          expect(page).to have_content(stretch.title)
+        end
+      end
+    end
+
     it 'adds a single label' do
       click_card(card)
 
@@ -296,7 +312,9 @@ describe 'Issue Boards', :js do
 
         wait_for_requests
 
+        within('.dropdown-menu-labels') do
           click_link stretch.title
+        end
 
         wait_for_requests
 

spec/features/issues/issue_sidebar_spec.rb

@@ -5,9 +5,9 @@ feature 'Issue Sidebar' do
 
   let(:group) { create(:group, :nested) }
   let(:project) { create(:project, :public, namespace: group) }
-  let(:issue) { create(:issue, project: project) }
   let!(:user) { create(:user)}
   let!(:label) { create(:label, project: project, title: 'bug') }
+  let(:issue) { create(:labeled_issue, project: project, labels: [label]) }
   let!(:xss_label) { create(:label, project: project, title: '<script>alert("xss");</script>') }
 
   before do
@@ -112,11 +112,18 @@ feature 'Issue Sidebar' do
 
     context 'editing issue labels', :js do
       before do
+        issue.update_attributes(labels: [label])
         page.within('.block.labels') do
           find('.edit-link').click
         end
       end
 
+      it 'shows the current set of labels' do
+        page.within('.issuable-show-labels') do
+          expect(page).to have_content label.title
+        end
+      end
+
       it 'shows option to create a project label' do
         page.within('.block.labels') do
           expect(page).to have_content 'Create project'