Migrate drawer titles to title slot

GlDrawer now exposes a `title` slot to be used solely for rendering a
title while additional actions should be rendered in the existing
`header` slot. This lets us align the close button properly.

Changelog: fixed

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -87,7 +87,7 @@ export default {
       class="boards-sidebar gl-absolute"
       @close="handleClose"
     >
-      <template #header>
+      <template #title>
         <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ __('Issue details') }}</h2>
       </template>
       <template #default>

app/assets/javascripts/boards/components/board_settings_sidebar.vue

@@ -95,7 +95,7 @@ export default {
       :open="isSidebarOpen"
       @close="unsetActiveId"
     >
-      <template #header>{{ $options.listSettingsText }}</template>
+      <template #title>{{ $options.listSettingsText }}</template>
       <template v-if="isSidebarOpen">
         <div v-if="boardListType === ListType.label">
           <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>

app/assets/javascripts/static_site_editor/components/edit_drawer.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 <template>
   <gl-drawer class="gl-pt-8" :open="isOpen" @close="$emit('close')">
-    <template #header>{{ __('Page settings') }}</template>
+    <template #title>{{ __('Page settings') }}</template>
     <front-matter-controls :settings="settings" @updateSettings="$emit('updateSettings', $event)" />
   </gl-drawer>
 </template>

app/assets/javascripts/whats_new/components/app.vue

@@ -68,7 +68,7 @@ export default {
       :open="open"
       @close="closeDrawer"
     >
-      <template #header>
+      <template #title>
         <h4 class="page-title gl-my-2">{{ __("What's new") }}</h4>
       </template>
       <template v-if="features.length">

ee/app/assets/javascripts/boards/components/epic_board_content_sidebar.vue

@@ -54,9 +54,12 @@ export default {
       :open="isSidebarOpen"
       @close="handleClose"
     >
+      <template #title>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ __('Epic details') }}</h2>
+      </template>
       <template #header>
-        <h2 class="gl-mt-0 gl-mb-3 gl-font-size-h2 gl-line-height-24">{{ __('Epic details') }}</h2>
         <sidebar-todo-widget
+          class="gl-mt-3"
           :issuable-id="activeBoardItem.fullId"
           :issuable-iid="activeBoardItem.iid"
           :full-path="fullPath"

ee/app/assets/javascripts/compliance_dashboard/components/drawer.vue

@@ -50,7 +50,7 @@ export default {
     :z-index="$options.Z_INDEX"
     @close="$emit('close')"
   >
-    <template #header>
+    <template #title>
       <h4 data-testid="dashboard-drawer-title">{{ mergeRequest.title }}</h4>
     </template>
     <template v-if="showDrawer" #default>

ee/app/assets/javascripts/requirements/components/requirement_form.vue

@@ -233,7 +233,7 @@ export default {
     class="requirement-form-drawer"
     @close="handleDrawerClose"
   >
-    <template #header>
+    <template #title>
       <h4 v-if="isCreate" class="gl-m-0">{{ __('New Requirement') }}</h4>
       <div v-else class="gl-display-flex gl-align-items-center">
         <strong class="gl-text-gray-500">{{ reference }}</strong>

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_drawer.vue

@@ -141,9 +141,11 @@ export default {
     :open="isAlertDrawerOpen"
     @close="$emit('deselect-alert')"
   >
+    <template #title>
+      <h5 class="gl-my-0">{{ selectedAlert.title }}</h5>
+    </template>
     <template #header>
-      <h5 class="gl-mt-2 gl-mb-5">{{ selectedAlert.title }}</h5>
-      <div>
+      <div class="gl-mt-5">
         <gl-link v-if="hasIssue" :href="alertIssuePath" data-testid="issue-link">
           {{ issueText }}
         </gl-link>

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/policy_drawer.vue

@@ -57,19 +57,18 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
+    <template v-if="policy" #title>
+      <h3 class="gl-my-0">{{ policy.name }}</h3>
+    </template>
     <template v-if="policy" #header>
-      <div>
-        <h3 class="gl-mb-5 gl-mt-0">{{ policy.name }}</h3>
-        <div>
-          <gl-button
-            data-testid="edit-button"
-            category="primary"
-            variant="info"
-            :href="editPolicyPath"
-            >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
-          >
-        </div>
-      </div>
+      <gl-button
+        class="gl-mt-5"
+        data-testid="edit-button"
+        category="primary"
+        variant="info"
+        :href="editPolicyPath"
+        >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
+      >
     </template>
     <div v-if="policy">
       <component :is="policyComponent" v-if="policyComponent" :value="policy.yaml" />

ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap

@@ -9,6 +9,7 @@ exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
   >
     Issue details
   </h2>
+    
   <boardsidebartitle-stub />
    
   <sidebarassigneeswidget-stub

ee/spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -59,7 +59,12 @@ describe('ee/BoardContentSidebar', () => {
       store,
       stubs: {
         GlDrawer: stubComponent(GlDrawer, {
-          template: '<div><slot name="header"></slot><slot></slot></div>',
+          template: `
+            <div>
+              <slot name="title"></slot>
+              <slot name="header"></slot>
+              <slot></slot>
+            </div>`,
         }),
         BoardEditableItem: true,
         BoardSidebarTitle: true,