1 files changed, 59 insertions, 12 deletions

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 4a5a03fb598..822c5a68093 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
@@ -1,13 +1,23 @@
 <script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 import StatusIcon from './mr_widget_status_icon.vue';
 import Actions from './action_buttons.vue';
 
 export default {
   components: {
+    GlButton,
     StatusIcon,
     Actions,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
     isLoading: {
       type: Boolean,
       required: false,
@@ -24,30 +34,67 @@ export default {
       default: () => [],
     },
   },
+  i18n: {
+    expandDetailsTooltip: __('Expand merge details'),
+    collapseDetailsTooltip: __('Collapse merge details'),
+  },
+  computed: {
+    wrapperClasses() {
+      if (this.status === 'merged') return 'gl-bg-blue-50';
+      if (this.status === 'closed') return 'gl-bg-red-50';
+      return null;
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="mr-widget-body media">
+  <div class="mr-widget-body media" :class="wrapperClasses" v-on="$listeners">
     <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">
         <status-icon :status="status" />
       </slot>
-      <div
-        :class="{ 'gl-display-flex': actions.length, 'gl-md-display-flex': !actions.length }"
-        class="media-body"
-      >
-        <slot></slot>
+      <div class="gl-display-flex gl-w-full">
+        <div
+          :class="{ 'gl-display-flex': actions.length, 'gl-md-display-flex': !actions.length }"
+          class="media-body"
+        >
+          <slot></slot>
+          <div
+            :class="{ 'gl-flex-direction-column-reverse': !actions.length }"
+            class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+          >
+            <slot name="actions">
+              <actions v-if="actions.length" :tertiary-buttons="actions" />
+            </slot>
+          </div>
+        </div>
         <div
-          :class="{ 'gl-flex-direction-column-reverse': !actions.length }"
-          class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto gl-mt-1"
+          class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1"
         >
-          <slot name="actions">
-            <actions v-if="actions.length" :tertiary-buttons="actions" />
-          </slot>
+          <gl-button
+            v-gl-tooltip
+            :title="
+              mr.mergeDetailsCollapsed
+                ? $options.i18n.expandDetailsTooltip
+                : $options.i18n.collapseDetailsTooltip
+            "
+            :icon="mr.mergeDetailsCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
+            category="tertiary"
+            size="small"
+            class="gl-vertical-align-top"
+            @click="() => mr.toggleMergeDetails()"
+          />
         </div>
       </div>
     </template>