Merge branch '34007-artifacts-error-ui' into 'master'

Updates error state in artifacts list

Closes #34007

See merge request gitlab-org/gitlab!18569

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,10 +50,19 @@ export default {
 <template>
   <div>
     <div class="mr-widget-extension d-flex align-items-center pl-3">
+      <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="isButtonDisabled"
+          :disabled="isLoading"
           @click="toggleCollapsed"
         >
           <gl-loading-icon v-if="isLoading" />
@@ -65,13 +71,14 @@ export default {
         <gl-button
           variant="link"
           class="js-title"
-        :disabled="isButtonDisabled"
-        :class="{ 'border-0': isButtonDisabled }"
+          :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">

app/assets/stylesheets/framework/common.scss

@@ -560,3 +560,6 @@ img.emoji {
     }
   }
 }
+
+.gl-font-size-small { font-size: $gl-font-size-small; }
+.gl-line-height-24 { line-height: $gl-line-height-24; }

app/assets/stylesheets/framework/variables.scss

@@ -833,6 +833,7 @@ Merge Requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
+$mr-widget-margin-left: 40px;
 
 /*
 Compare Branches

app/assets/stylesheets/pages/merge_requests.scss

@@ -19,6 +19,8 @@
   border-top: 1px solid $border-color;
 }
 
+.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
+
 .media-section {
   @include media-breakpoint-down(md) {
     align-items: flex-start;

spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js

@@ -44,6 +44,7 @@ describe('Merge Requests Artifacts list app', () => {
 
   const findButtons = () => wrapper.findAll('button');
   const findTitle = () => wrapper.find('.js-title');
+  const findErrorMessage = () => wrapper.find('.js-error-state');
   const findTableRows = () => wrapper.findAll('tbody tr');
 
   describe('while loading', () => {
@@ -109,13 +110,12 @@ describe('Merge Requests Artifacts list app', () => {
     });
 
     it('renders the error state', () => {
-      expect(findTitle().text()).toBe('An error occurred while fetching the artifacts');
+      expect(findErrorMessage().text()).toBe('An error occurred while fetching the artifacts');
     });
 
-    it('renders disabled buttons', () => {
+    it('does not render buttons', () => {
       const buttons = findButtons();
-      expect(buttons.at(0).attributes('disabled')).toBe('disabled');
-      expect(buttons.at(1).attributes('disabled')).toBe('disabled');
+      expect(buttons.exists()).toBe(false);
     });
   });
 });

spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js

@@ -20,6 +20,7 @@ describe('Merge Request Collapsible Extension', () => {
   };
 
   const findTitle = () => wrapper.find('.js-title');
+  const findErrorMessage = () => wrapper.find('.js-error-state');
 
   afterEach(() => {
     wrapper.destroy();
@@ -87,19 +88,12 @@ describe('Merge Request Collapsible Extension', () => {
       mountComponent(Object.assign({}, data, { hasError: true }));
     });
 
-    it('renders the buttons disabled', () => {
-      expect(
-        wrapper
-          .findAll('button')
-          .at(0)
-          .attributes('disabled'),
-      ).toEqual('disabled');
-      expect(
-        wrapper
-          .findAll('button')
-          .at(1)
-          .attributes('disabled'),
-      ).toEqual('disabled');
+    it('does not render the buttons', () => {
+      expect(wrapper.findAll('button').exists()).toBe(false);
+    });
+
+    it('renders title message provided', () => {
+      expect(findErrorMessage().text()).toBe(data.title);
     });
   });
 });