Add latest changes from gitlab-org/gitlab@master

3 files changed, 16 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index bf24c152baa..e8cc9b2eb2a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -318,19 +318,23 @@ export default {
       @mouseup="onRowMouseUp"
     >
       <div
+        :class="{ 'gl-h-full': isLoadingSummary }"
         class="media-body gl-display-flex gl-flex-direction-row! gl-w-full"
         data-testid="widget-extension-top-level"
       >
-        <div class="gl-flex-grow-1" data-testid="widget-extension-top-level-summary">
+        <div
+          class="gl-flex-grow-1 gl-display-flex gl-align-items-center"
+          data-testid="widget-extension-top-level-summary"
+        >
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <template v-else-if="hasFetchError">{{ widgetErrorText }}</template>
-          <div v-else>
+          <template v-else>
             <span v-safe-html="hydratedSummary.subject"></span>
             <template v-if="hydratedSummary.meta">
               <br />
               <span v-safe-html="hydratedSummary.meta" class="gl-font-sm"></span>
             </template>
-          </div>
+          </template>
         </div>
         <actions
           :widget="$options.label || $options.name"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
index 38b99dae264..e5688091cc7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
@@ -1,6 +1,6 @@
 <script>
 import { s__ } from '~/locale';
-import StatusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 import { DETAILED_MERGE_STATUS } from '../../constants';
 
 export default {
@@ -12,7 +12,7 @@ export default {
     externalStatusChecksFailed: s__('mrWidget|Merge blocked: all status checks must pass.'),
   },
   components: {
-    StatusIcon,
+    StateContainer,
   },
   props: {
     mr: {
@@ -37,10 +37,11 @@ export default {
 </script>
 
 <template>
-  <div class="mr-widget-body media gl-flex-wrap">
-    <status-icon status="failed" />
-    <p class="media-body gl-m-0! gl-font-weight-bold gl-text-black-normal!">
+  <state-container :mr="mr" status="failed">
+    <span
+      class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
+    >
       {{ failedText }}
-    </p>
-  </div>
+    </span>
+  </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 074758e33b2..9f3748599dc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -26,7 +26,7 @@ export default {
 <template>
   <state-container :mr="mr" status="failed">
     <span
-      class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body! gl-align-self-start"
+      class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
     >
       {{ s__('mrWidget|Merge blocked: all threads must be resolved.') }}
     </span>