Merge branch 'gitlab-ui-integration-1435-drawer-fix-close-btn-alignment' into 'master'

Upgrade @gitlab/ui to v31.0.1

See merge request gitlab-org/gitlab!65587

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/snippets/components/embed_dropdown.vue

@@ -60,7 +60,7 @@ export default {
         class="gl-dropdown-text-py-0 gl-dropdown-text-block"
         data-testid="input"
       >
-        <gl-form-input-group :value="value" readonly select-on-click :aria-label="name">
+        <gl-form-input-group :value="value" readonly select-on-click :label="name">
           <template #append>
             <gl-button
               v-gl-tooltip.hover

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
+        class="gl-mt-5"
         data-testid="edit-button"
         category="primary"
         variant="info"
         :href="editPolicyPath"
         >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
       >
-        </div>
-      </div>
     </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,

package.json

@@ -59,7 +59,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.202.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "30.2.1",
+    "@gitlab/ui": "31.0.1",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.3-2",
     "@rails/ujs": "6.1.3-2",

yarn.lock

@@ -908,15 +908,15 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@30.2.1":
-  version "30.2.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-30.2.1.tgz#be582413712cd2372ff01279e47579f5785591d4"
-  integrity sha512-Pv2w5ZSR7+G5zcaRjvf8KPs7wQRBqAXXNvKOw2pg/aZsRoK+JfN1neNmfeaqO6K/k1TJyiP6inDXAvhU8SqmOg==
+"@gitlab/ui@31.0.1":
+  version "31.0.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-31.0.1.tgz#55c481f2e2fa777ff34237a8229f39553428d107"
+  integrity sha512-Sw7Hm9VZ4ZE6knZNkd9L7vs1DGmeTFC1d0xzDytOKBw+1kK1+CpCLae2ehT+Kkkwho9GLwUFtHDdATEDLbFaBg==
   dependencies:
     "@babel/standalone" "^7.0.0"
     bootstrap-vue "2.18.1"
     copy-to-clipboard "^3.0.8"
-    dompurify "^2.2.9"
+    dompurify "^2.3.0"
     echarts "^4.9.0"
     highlight.js "^10.6.0"
     js-beautify "^1.8.8"
@@ -4524,7 +4524,7 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
-dompurify@^2.2.9, dompurify@^2.3.0:
+dompurify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.0.tgz#07bb39515e491588e5756b1d3e8375b5964814e2"
   integrity sha512-VV5C6Kr53YVHGOBKO/F86OYX6/iLTw2yVSI721gKetxpHCK/V5TaLEf9ODjRgl1KLSWRMY6cUhAbv/c+IUnwQw==