1 files changed, 29 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index ae1d9368008..36f291e995c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -39,9 +39,6 @@ export default {
     ariaLabel() {
       return this.isCollapsed ? __('Expand') : __('Collapse');
     },
-    isButtonDisabled() {
-      return this.isLoading || this.hasError;
-    },
   },
   methods: {
     toggleCollapsed() {
@@ -53,25 +50,35 @@ export default {
 <template>
   <div>
     <div class="mr-widget-extension d-flex align-items-center pl-3">
-      <gl-button
-        class="btn-blank btn s32 square append-right-default"
-        :aria-label="ariaLabel"
-        :disabled="isButtonDisabled"
-        @click="toggleCollapsed"
-      >
-        <gl-loading-icon v-if="isLoading" />
-        <icon v-else :name="arrowIconName" class="js-icon" />
-      </gl-button>
-      <gl-button
-        variant="link"
-        class="js-title"
-        :disabled="isButtonDisabled"
-        :class="{ 'border-0': isButtonDisabled }"
-        @click="toggleCollapsed"
-      >
-        <template v-if="isCollapsed">{{ title }}</template>
-        <template v-else>{{ __('Collapse') }}</template>
-      </gl-button>
+      <div v-if="hasError" class="ci-widget media">
+        <div class="media-body">
+          <span class="gl-font-size-small mr-widget-margin-left gl-line-height-24 js-error-state">{{
+            title
+          }}</span>
+        </div>
+      </div>
+
+      <template v-else>
+        <gl-button
+          class="btn-blank btn s32 square append-right-default"
+          :aria-label="ariaLabel"
+          :disabled="isLoading"
+          @click="toggleCollapsed"
+        >
+          <gl-loading-icon v-if="isLoading" />
+          <icon v-else :name="arrowIconName" class="js-icon" />
+        </gl-button>
+        <gl-button
+          variant="link"
+          class="js-title"
+          :disabled="isLoading"
+          :class="{ 'border-0': isLoading }"
+          @click="toggleCollapsed"
+        >
+          <template v-if="isCollapsed">{{ title }}</template>
+          <template v-else>{{ __('Collapse') }}</template>
+        </gl-button>
+      </template>
     </div>
 
     <div v-if="!isCollapsed" class="border-top js-slot-container">