Add latest changes from gitlab-org/gitlab@master

4 files changed, 20 insertions, 12 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 aa5ab87597f..300e2a672cb 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
@@ -13,6 +13,7 @@ import Poll from '~/lib/utils/poll';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
 import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
 import Actions from '../action_buttons.vue';
+import StateContainer from '../state_container.vue';
 import StatusIcon from './status_icon.vue';
 import ChildContent from './child_content.vue';
 import { createTelemetryHub } from './telemetry';
@@ -36,6 +37,7 @@ export default {
     ChildContent,
     DynamicScroller,
     DynamicScrollerItem,
+    StateContainer,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -312,18 +314,15 @@ export default {
     data-testid="widget-extension"
     data-qa-selector="mr_widget_extension"
   >
-    <div
+    <state-container
+      :mr="mr"
+      :status="statusIconName"
+      :is-loading="isLoadingSummary"
       :class="{ 'gl-cursor-pointer': isCollapsible }"
-      class="media gl-p-5"
+      class="gl-p-5"
       @mousedown="onRowMouseDown"
       @mouseup="onRowMouseUp"
     >
-      <status-icon
-        :level="1"
-        :name="$options.label || $options.name"
-        :is-loading="isLoadingSummary"
-        :icon-name="statusIconName"
-      />
       <div
         class="media-body gl-display-flex gl-flex-direction-row! gl-align-self-center"
         data-testid="widget-extension-top-level"
@@ -362,7 +361,7 @@ export default {
           />
         </div>
       </div>
-    </div>
+    </state-container>
     <div
       v-if="!isCollapsed"
       class="mr-widget-grouped-section gl-relative"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
index 7f2049904fd..52c9f047b76 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -62,7 +62,9 @@ export default {
       <strong v-else v-safe-html="generateText(data.header)"></strong>
     </div>
     <div class="gl-display-flex">
-      <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
+      <div v-if="data.icon" class="report-block-child-icon gl-display-flex">
+        <status-icon :icon-name="data.icon.name" :size="12" class="gl-m-auto" />
+      </div>
       <div class="gl-w-full">
         <div class="gl-display-flex gl-flex-nowrap">
           <div class="gl-flex-wrap gl-display-flex gl-w-full">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
index 2bba8d2dc82..03728e2831b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
@@ -44,7 +44,14 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <div v-if="isLoading" class="gl-w-full mr-conflict-loader">
-      <slot name="loading"></slot>
+      <slot name="loading">
+        <div class="gl-display-flex">
+          <status-icon status="loading" />
+          <div class="media-body">
+            <slot></slot>
+          </div>
+        </div>
+      </slot>
     </div>
     <template v-else>
       <slot name="icon">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_section.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_section.vue
index 42fd02f978b..61e3744b5dc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_section.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_section.vue
@@ -11,7 +11,7 @@ export default {
       type: String,
       default: '',
       required: false,
-      validator: (value) => value === '' || Object.keys(EXTENSION_ICONS).indexOf(value) > -1,
+      validator: (value) => value === '' || Object.keys(EXTENSION_ICONS).includes(value),
     },
     widgetName: {
       type: String,