Load MR widget artifacts on mount

Fetch the list of downloadable artifacts for the widget
when the dropdown is mounted instead of when shown
Move loading indicator into the dropdown button
Hide the dropdown altogether if there are no artifacts
Adjust MR pipeline widget spec to expect extra request

Changelog: changed

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue

@@ -4,7 +4,6 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownSectionHeader,
-  GlLoadingIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
@@ -27,7 +26,6 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlDropdownSectionHeader,
-    GlLoadingIcon,
   },
   inject: {
     artifactsEndpoint: {
@@ -50,6 +48,14 @@ export default {
       isLoading: false,
     };
   },
+  computed: {
+    shouldShowDropdown() {
+      return this.isLoading || this.hasError || this.artifacts?.length;
+    },
+  },
+  mounted() {
+    this.fetchArtifacts();
+  },
   methods: {
     fetchArtifacts() {
       this.isLoading = true;
@@ -75,16 +81,17 @@ export default {
 </script>
 <template>
   <gl-dropdown
+    v-if="shouldShowDropdown"
     v-gl-tooltip
     class="build-artifacts js-pipeline-dropdown-download"
     :title="$options.i18n.artifacts"
     :text="$options.i18n.artifacts"
     :aria-label="$options.i18n.artifacts"
+    :loading="isLoading"
     icon="download"
     right
     lazy
     text-sr-only
-    @show.once="fetchArtifacts"
   >
     <gl-dropdown-section-header>{{
       $options.i18n.artifactSectionHeader
@@ -94,12 +101,6 @@ export default {
       {{ $options.i18n.artifactsFetchErrorMessage }}
     </gl-alert>
 
-    <gl-loading-icon v-else-if="isLoading" size="sm" />
-
-    <gl-alert v-else-if="!artifacts.length" variant="info" :dismissible="false">
-      {{ $options.i18n.noArtifacts }}
-    </gl-alert>
-
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"
       :key="i"

spec/frontend/pipelines/pipelines_artifacts_spec.js

-import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -47,7 +47,6 @@ describe('Pipelines Artifacts dropdown', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findFirstGlDropdownItem = () => wrapper.find(GlDropdownItem);
   const findAllGlDropdownItems = () => wrapper.find(GlDropdown).findAll(GlDropdownItem);
 
@@ -60,17 +59,19 @@ describe('Pipelines Artifacts dropdown', () => {
     wrapper = null;
   });
 
-  it('should render the dropdown', () => {
-    createComponent();
+  describe('when artifacts are loading', () => {
+    it('should render the dropdown with loading status', () => {
+      createComponent({ mockData: { isLoading: true } });
 
-    expect(findDropdown().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(true);
+      expect(findDropdown().attributes('loading')).toBe('true');
+    });
   });
 
-  it('should fetch artifacts on dropdown click', async () => {
+  it('should fetch artifacts on mount', async () => {
     const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
     mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
     createComponent();
-    findDropdown().vm.$emit('show');
     await waitForPromises();
 
     expect(mockAxios.history.get).toHaveLength(1);
@@ -95,7 +96,6 @@ describe('Pipelines Artifacts dropdown', () => {
       const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
       mockAxios.onGet(endpoint).replyOnce(500);
       createComponent();
-      findDropdown().vm.$emit('show');
       await waitForPromises();
 
       const error = findAlert();
@@ -105,20 +105,10 @@ describe('Pipelines Artifacts dropdown', () => {
   });
 
   describe('with no artifacts received', () => {
-    it('should render empty alert message', () => {
+    it('should not render the dropdown', () => {
       createComponent({ mockData: { artifacts: [] } });
 
-      const emptyAlert = findAlert();
-      expect(emptyAlert.exists()).toBe(true);
-      expect(emptyAlert.text()).toBe(i18n.noArtifacts);
-    });
-  });
-
-  describe('when artifacts are loading', () => {
-    it('should show loading icon', () => {
-      createComponent({ mockData: { isLoading: true } });
-
-      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(false);
     });
   });
 });

spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
@@ -39,6 +41,8 @@ describe('MRWidgetPipeline', () => {
   const findMonitoringPipelineMessage = () => wrapper.findByTestId('monitoring-pipeline-message');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
+  const mockArtifactsRequest = () => new MockAdapter(axios).onGet().reply(200, []);
+
   const createWrapper = (props = {}, mountFn = shallowMount) => {
     wrapper = extendedWrapper(
       mountFn(PipelineComponent, {
@@ -71,6 +75,8 @@ describe('MRWidgetPipeline', () => {
 
   describe('with a pipeline', () => {
     beforeEach(() => {
+      mockArtifactsRequest();
+
       createWrapper(
         {
           pipelineCoverageDelta: mockData.pipelineCoverageDelta,