Add latest changes from gitlab-org/gitlab@15-10-stable-eev15.10.0-rc42

2 files changed, 19 insertions, 15 deletions

diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
index 149049247fb..c3f87699d58 100644
--- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
@@ -65,10 +65,10 @@ export default {
 
 <template>
   <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
-    <div class="card card-slim gl-mt-5 gl-mb-0">
-      <div class="card-header gl-bg-gray-10">
+    <div class="card card-slim gl-mt-5 gl-mb-0 gl-bg-gray-10">
+      <div class="card-header gl-px-5 gl-py-4 gl-bg-white">
         <div
-          class="card-title gl-relative gl-display-flex gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
+          class="card-title gl-relative gl-display-flex gl-flex-wrap gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
         >
           <gl-link
             class="anchor gl-absolute gl-text-decoration-none"
@@ -79,19 +79,29 @@ export default {
             {{ __('Related merge requests') }}
           </h3>
           <template v-if="totalCount">
-            <gl-icon name="merge-request" class="gl-ml-5 gl-mr-2 gl-text-gray-500" />
-            <span data-testid="count">{{ totalCount }}</span>
+            <gl-icon name="merge-request" class="gl-ml-3 gl-mr-2 gl-text-gray-500" />
+            <span data-testid="count" class="gl-text-gray-500">{{ totalCount }}</span>
           </template>
+          <p
+            v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
+            class="gl-font-sm gl-font-weight-normal gl-flex-basis-full gl-mb-0 gl-text-gray-500"
+          >
+            {{ closingMergeRequestsText }}
+          </p>
         </div>
       </div>
       <gl-loading-icon
         v-if="isFetchingMergeRequests"
         size="sm"
         label="Fetching related merge requests"
-        class="gl-py-3"
+        class="gl-py-4"
       />
-      <ul v-else class="content-list related-items-list">
-        <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-p-0!">
+      <ul v-else class="content-list related-items-list gl-px-4! gl-py-3!">
+        <li
+          v-for="mr in mergeRequests"
+          :key="mr.id"
+          class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
+        >
           <related-issuable-item
             :id-key="mr.id"
             :display-reference="mr.reference"
@@ -110,11 +120,5 @@ export default {
         </li>
       </ul>
     </div>
-    <div
-      v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
-      class="issue-closed-by-widget second-block gl-mt-3"
-    >
-      {{ closingMergeRequestsText }}
-    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/issues/related_merge_requests/store/actions.js b/app/assets/javascripts/issues/related_merge_requests/store/actions.js
index 4c81f1d9bc1..ad5b61424dc 100644
--- a/app/assets/javascripts/issues/related_merge_requests/store/actions.js
+++ b/app/assets/javascripts/issues/related_merge_requests/store/actions.js
@@ -1,4 +1,4 @@
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';