Fix title, value spacing of various sidebar blocks

Spacing between title and value of sidebar blocks
is inconsistent.

This commit changes most of the sidebar blocks on
Issues and MRs to be consistent.

gitlab-utility classes are used to achieve the
same result as the `.title` class.

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61650
EE: true

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

@@ -45,7 +45,7 @@ export default {
 };
 </script>
 <template>
-  <div class="title hide-collapsed">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ assigneeTitle }}
     <gl-loading-icon v-if="loading" inline class="align-bottom" />
     <a

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -48,17 +48,15 @@ export default {
     <collapsed-assignee-list :users="sortedAssigness" :issuable-type="issuableType" />
 
     <div data-testid="expanded-assignee" class="value hide-collapsed">
-      <template v-if="hasNoUsers">
-        <span class="assign-yourself no-value">
-          {{ __('None') }}
-          <template v-if="editable">
-            -
-            <button type="button" class="btn-link" @click="assignSelf">
-              {{ __('assign yourself') }}
-            </button>
-          </template>
-        </span>
-      </template>
+      <span v-if="hasNoUsers" class="no-value" data-testid="no-value">
+        {{ __('None') }}
+        <template v-if="editable">
+          -
+          <button type="button" class="btn-link" data-testid="assign-yourself" @click="assignSelf">
+            {{ __('assign yourself') }}
+          </button>
+        </template>
+      </span>
 
       <uncollapsed-assignee-list v-else :users="sortedAssigness" :issuable-type="issuableType" />
     </div>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -149,7 +149,6 @@ export default {
       :users="exposeAvailabilityStatus(store.assignees)"
       :editable="store.editable"
       :issuable-type="issuableType"
-      class="value"
       @assign-self="assignSelf"
     />
   </div>

app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue

@@ -86,7 +86,7 @@ export default {
       <gl-icon :name="lockStatus.icon" class="sidebar-item-icon is-active" />
     </div>
 
-    <div class="title hide-collapsed">
+    <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <a
         v-if="isEditable"

app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <template>
-  <div class="title hide-collapsed">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ reviewerTitle }}
     <gl-loading-icon v-if="loading" inline class="align-bottom" />
     <a

app/assets/javascripts/sidebar/components/reviewers/reviewers.vue

@@ -59,7 +59,7 @@ export default {
 
     <div class="value hide-collapsed">
       <template v-if="hasNoUsers">
-        <span class="assign-yourself no-value">
+        <span class="no-value">
           {{ __('None') }}
         </span>
       </template>

app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue

@@ -103,7 +103,6 @@ export default {
       :users="store.reviewers"
       :editable="store.editable"
       :issuable-type="issuableType"
-      class="value"
       @request-review="requestReview"
     />
   </div>

app/assets/javascripts/sidebar/components/sidebar_editable_item.vue

@@ -109,8 +109,13 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center" @click.self="collapse">
-      <span class="hide-collapsed" data-testid="title" @click="collapse">{{ title }}</span>
+    <div
+      class="gl-display-flex gl-align-items-center gl-line-height-20 gl-mb-2 gl-text-gray-900"
+      @click.self="collapse"
+    >
+      <span class="hide-collapsed" data-testid="title" @click="collapse">
+        {{ title }}
+      </span>
       <slot name="title-extra"></slot>
       <gl-loading-icon v-if="loading || initialLoading" inline class="gl-ml-2 hide-collapsed" />
       <gl-loading-icon
@@ -135,7 +140,7 @@ export default {
       </gl-button>
     </div>
     <template v-if="!initialLoading">
-      <div v-show="!edit" data-testid="collapsed-content">
+      <div v-show="!edit" data-testid="collapsed-content" class="gl-line-height-14">
         <slot name="collapsed">{{ __('None') }}</slot>
       </div>
       <div v-show="edit" data-testid="expanded-content" :class="{ 'gl-mt-3': !isClassicSidebar }">

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="timeTrackingComparisonPane">
+  <div class="gl-mt-2" data-testid="timeTrackingComparisonPane">
     <div
       v-gl-tooltip
       data-testid="compareMeter"

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -141,7 +141,7 @@ export default {
       :time-spent-human-readable="humanTimeSpent"
       :time-estimate-human-readable="humanTimeEstimate"
     />
-    <div class="title hide-collapsed gl-mb-3">
+    <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
       {{ __('Time tracking') }}
       <div
         v-if="!showHelpState"
@@ -160,7 +160,7 @@ export default {
         <gl-icon name="close" />
       </div>
     </div>
-    <div class="time-tracking-content hide-collapsed">
+    <div class="hide-collapsed">
       <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane">
         <span class="gl-font-weight-bold">{{ $options.i18n.estimatedOnlyText }} </span
         >{{ humanTimeEstimate }}
@@ -186,9 +186,9 @@ export default {
           v-gl-modal="'time-tracking-report'"
           data-testid="reportLink"
           href="#"
-          class="btn-link"
-          >{{ __('Time tracking report') }}</gl-link
         >
+          {{ __('Time tracking report') }}
+        </gl-link>
         <gl-modal
           modal-id="time-tracking-report"
           :title="__('Time tracking report')"

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -206,6 +206,7 @@ function mountConfidentialComponent() {
     },
     provide: {
       canUpdate: initialData.is_editable,
+      isClassicSidebar: true,
     },
 
     render: (createElement) =>

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

@@ -23,17 +23,18 @@ export default {
 </script>
 
 <template>
-  <div class="title hide-collapsed gl-mb-3">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" inline />
       <gl-button
         variant="link"
-        class="gl-text-gray-800! float-right js-sidebar-dropdown-toggle"
+        class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
-        >{{ __('Edit') }}</gl-button
       >
+        {{ __('Edit') }}
+      </gl-button>
     </template>
   </div>
 </template>

app/assets/stylesheets/pages/issuable.scss

@@ -267,11 +267,6 @@
 
     .value {
       line-height: 1;
-
-      .assign-yourself {
-        margin-top: 10px;
-        display: block;
-      }
     }
 
     .issuable-sidebar {
@@ -288,10 +283,6 @@
       }
     }
 
-    .assign-yourself .btn-link {
-      padding-left: 0;
-    }
-
     .light {
       font-weight: $gl-font-weight-normal;
     }

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

@@ -43,7 +43,7 @@
                 = milestone[:title]
               - else
                 = _('None')
-          .title.hide-collapsed
+          .hide-collapsed.gl-line-height-20.gl-mb-2.gl-text-gray-900{ data: { testid: "milestone_title" } }
             = _('Milestone')
             = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
             - if can_edit_issuable

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -153,7 +153,9 @@ export default {
     </div>
 
     <div class="hide-collapsed">
-      <p class="title gl-display-flex justify-content-between">
+      <div
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-line-height-20 gl-mb-2 gl-text-gray-900"
+      >
         <span data-testid="statusTitle">{{ s__('Sidebar|Health status') }}</span>
         <span
           v-if="isEditable"
@@ -172,7 +174,7 @@ export default {
             {{ __('Edit') }}
           </gl-button>
         </span>
-      </p>
+      </div>
 
       <div
         data-testid="dropdownWrapper"

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -152,7 +152,7 @@ export default {
         }}<template v-if="weight > $options.maxDisplayWeight">&hellip;</template>
       </span>
     </div>
-    <div class="title hide-collapsed">
+    <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
       {{ s__('Sidebar|Weight') }}
       <gl-loading-icon v-if="fetching || loading" :inline="true" class="js-weight-loading-icon" />
       <a

spec/features/issues/issue_sidebar_spec.rb

@@ -266,7 +266,7 @@ RSpec.describe 'Issue Sidebar' do
         let_it_be(:milestone3) { create(:milestone, project: project, title: 'Milestone-3', due_date: 10.days.from_now) }
 
         before do
-          page.within('.block.milestone > .title') do
+          page.within('[data-testid="milestone_title"]') do
             click_on 'Edit'
           end
         end

spec/features/issues/user_edits_issue_spec.rb

@@ -187,7 +187,8 @@ RSpec.describe "Issues > User edits issue", :js do
 
                 click_link 'Edit'
                 click_link 'Unassigned'
-                first('.title').click
+
+                close_dropdown_menu_if_visible
 
                 expect(page).to have_content 'None - assign yourself'
               end
@@ -227,7 +228,7 @@ RSpec.describe "Issues > User edits issue", :js do
 
                 close_dropdown_menu_if_visible
 
-                page.within '.value .assign-yourself' do
+                page.within '[data-testid="no-value"]' do
                   expect(page).to have_content "None"
                 end
               end

spec/frontend/sidebar/assignees_spec.js

@@ -19,7 +19,7 @@ describe('Assignee component', () => {
     });
   };
 
-  const findComponentTextNoUsers = () => wrapper.find('.assign-yourself');
+  const findComponentTextNoUsers = () => wrapper.find('[data-testid="no-value"]');
   const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
 
   afterEach(() => {
@@ -64,7 +64,7 @@ describe('Assignee component', () => {
       });
 
       jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find('.assign-yourself .btn-link').trigger('click');
+      wrapper.find('[data-testid="assign-yourself"]').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('assign-self')).toBeTruthy();