1 files changed, 37 insertions, 20 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 f7d6f7b4345..dd899701de0 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,6 +1,6 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { STATUS_CLOSED, STATUS_MERGED } from '~/issues/constants';
 import StatusIcon from './mr_widget_status_icon.vue';
 import Actions from './action_buttons.vue';
 
@@ -13,7 +13,30 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: {
+    expandDetailsTooltip: {
+      default: '',
+    },
+    collapseDetailsTooltip: {
+      default: '',
+    },
+  },
   props: {
+    isCollapsible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    collapseOnDesktop: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     mr: {
       type: Object,
       required: false,
@@ -35,14 +58,10 @@ 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';
+      if (this.status === STATUS_MERGED) return 'gl-bg-blue-50';
+      if (this.status === STATUS_CLOSED) return 'gl-bg-red-50';
       return null;
     },
     hasActionsSlot() {
@@ -54,15 +73,15 @@ export default {
 
 <template>
   <div
-    class="mr-widget-body media gl-display-flex gl-align-items-center"
+    class="mr-widget-body media gl-display-flex gl-align-items-center gl-pl-5 gl-pr-4 gl-py-4"
     :class="wrapperClasses"
     v-on="$listeners"
   >
-    <div v-if="isLoading" class="gl-w-full mr-conflict-loader">
+    <div v-if="isLoading" class="gl-w-full mr-state-loader">
       <slot name="loading">
         <div class="gl-display-flex">
           <status-icon status="loading" />
-          <div class="media-body">
+          <div class="media-body gl-display-flex gl-align-items-center">
             <slot></slot>
           </div>
         </div>
@@ -78,7 +97,7 @@ export default {
             'gl-display-flex gl-align-items-center': actions.length,
             'gl-md-display-flex gl-align-items-center gl-flex-wrap gl-gap-3': !actions.length,
           }"
-          class="media-body gl-line-height-24"
+          class="media-body gl-line-height-normal"
         >
           <slot></slot>
           <div
@@ -94,21 +113,19 @@ export default {
           </div>
         </div>
         <div
-          v-if="mr"
-          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"
+          v-if="isCollapsible"
+          :class="{ 'gl-md-display-none': !collapseOnDesktop }"
+          class="gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6"
         >
           <gl-button
             v-gl-tooltip
-            :title="
-              mr.mergeDetailsCollapsed
-                ? $options.i18n.expandDetailsTooltip
-                : $options.i18n.collapseDetailsTooltip
-            "
-            :icon="mr.mergeDetailsCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
+            :title="collapsed ? expandDetailsTooltip : collapseDetailsTooltip"
+            :icon="collapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
             category="tertiary"
             size="small"
             class="gl-vertical-align-top"
-            @click="() => mr.toggleMergeDetails()"
+            data-testid="widget-toggle"
+            @click="() => $emit('toggle')"
           />
         </div>
       </div>