Lazy load artifacts dropdown on pipeline list page

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

 <script>
 import {
+  GlAlert,
   GlDropdown,
   GlDropdownItem,
   GlDropdownSectionHeader,
+  GlLoadingIcon,
   GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { __ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import { __, s__ } from '~/locale';
+
+export const i18n = {
+  artifacts: __('Artifacts'),
+  downloadArtifact: __('Download %{name} artifact'),
+  artifactSectionHeader: __('Download artifacts'),
+  artifactsFetchErrorMessage: s__('Pipelines|Could not load artifacts.'),
+};
 
 export default {
-  i18n: {
-    artifacts: __('Artifacts'),
-    downloadArtifact: __('Download %{name} artifact'),
-    artifactSectionHeader: __('Download artifacts'),
-  },
+  i18n,
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: {
+    GlAlert,
     GlDropdown,
     GlDropdownItem,
     GlDropdownSectionHeader,
+    GlLoadingIcon,
     GlSprintf,
   },
+  inject: {
+    artifactsEndpoint: {
+      default: '',
+    },
+    artifactsEndpointPlaceholder: {
+      default: '',
+    },
+  },
   props: {
-    artifacts: {
-      type: Array,
+    pipelineId: {
+      type: Number,
       required: true,
     },
   },
+  data() {
+    return {
+      artifacts: [],
+      hasError: false,
+      isLoading: false,
+    };
+  },
+  methods: {
+    fetchArtifacts() {
+      this.isLoading = true;
+      // Replace the placeholder with the ID of the pipeline we are viewing
+      const endpoint = this.artifactsEndpoint.replace(
+        this.artifactsEndpointPlaceholder,
+        this.pipelineId,
+      );
+      return axios
+        .get(endpoint)
+        .then(({ data }) => {
+          this.artifacts = data.artifacts;
+        })
+        .catch(() => {
+          this.hasError = true;
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
 };
 </script>
 <template>
@@ -43,11 +87,18 @@ export default {
     lazy
     text-sr-only
     no-caret
+    @show.once="fetchArtifacts"
   >
     <gl-dropdown-section-header>{{
       $options.i18n.artifactSectionHeader
     }}</gl-dropdown-section-header>
 
+    <gl-alert v-if="hasError" variant="danger" :dismissible="false">
+      {{ $options.i18n.artifactsFetchErrorMessage }}
+    </gl-alert>
+
+    <gl-loading-icon v-if="isLoading" />
+
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"
       :key="i"

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

@@ -54,6 +54,11 @@ export default {
     isCancelling() {
       return this.cancelingPipeline === this.pipeline.id;
     },
+    showArtifacts() {
+      return (
+        this.pipeline.details.artifacts?.length || this.pipeline.details.has_downloadable_artifacts
+      );
+    },
   },
   watch: {
     pipeline() {
@@ -110,10 +115,7 @@ export default {
         @click="handleCancelClick"
       />
 
-      <pipeline-multi-actions
-        v-if="pipeline.details.artifacts.length"
-        :artifacts="pipeline.details.artifacts"
-      />
+      <pipeline-multi-actions v-if="showArtifacts" :pipeline-id="pipeline.id" />
     </div>
   </div>
 </template>

app/assets/javascripts/pipelines/pipelines_index.js

@@ -22,6 +22,8 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
 
   const {
     endpoint,
+    artifactsEndpoint,
+    artifactsEndpointPlaceholder,
     pipelineScheduleUrl,
     emptyStateSvgPath,
     errorStateSvgPath,
@@ -41,6 +43,8 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     el,
     provide: {
       addCiYmlPath,
+      artifactsEndpoint,
+      artifactsEndpointPlaceholder,
       suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
     },
     data() {

app/views/projects/pipelines/index.html.haml

 - page_title _('Pipelines')
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
+- artifacts_endpoint_placeholder = ':pipeline_artifacts_id'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
 #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
   project_id: @project.id,
   params: params.to_json,
+  "artifacts-endpoint" => downloadable_artifacts_project_pipeline_path(@project, artifacts_endpoint_placeholder, format: :json),
+  "artifacts-endpoint-placeholder" => artifacts_endpoint_placeholder,
   "pipeline-schedule-url" => pipeline_schedules_path(@project),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),

changelogs/unreleased/sh-lazy-load-pipeline-artifacts.yml

+---
+title: Lazy load artifacts on pipelines list page
+merge_request: 60058
+author:
+type: added

locale/gitlab.pot

@@ -23641,6 +23641,9 @@ msgstr ""
 msgid "Pipelines|Copy trigger token"
 msgstr ""
 
+msgid "Pipelines|Could not load artifacts."
+msgstr ""
+
 msgid "Pipelines|Could not load merged YAML content"
 msgstr ""
 

spec/frontend/pipelines/pipeline_multi_actions_spec.js

-import { GlDropdown, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import PipelineMultiActions from '~/pipelines/components/pipelines_list/pipeline_multi_actions.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import axios from '~/lib/utils/axios_utils';
+import PipelineMultiActions, {
+  i18n,
+} from '~/pipelines/components/pipelines_list/pipeline_multi_actions.vue';
 
 describe('Pipeline Multi Actions Dropdown', () => {
   let wrapper;
+  let mockAxios;
 
+  const artifacts = [
+    {
+      name: 'job my-artifact',
+      path: '/download/path',
+    },
+    {
+      name: 'job-2 my-artifact-2',
+      path: '/download/path-two',
+    },
+  ];
   const artifactItemTestId = 'artifact-item';
+  const artifactsEndpointPlaceholder = ':pipeline_artifacts_id';
+  const artifactsEndpoint = `endpoint/${artifactsEndpointPlaceholder}/artifacts.json`;
+  const pipelineId = 108;
 
-  const defaultProps = {
-    artifacts: [
-      {
-        name: 'job my-artifact',
-        path: '/download/path',
-      },
-      {
-        name: 'job-2 my-artifact-2',
-        path: '/download/path-two',
-      },
-    ],
-  };
-
-  const createComponent = (props = defaultProps) => {
+  const createComponent = ({ mockData = {} } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(PipelineMultiActions, {
+        provide: {
+          artifactsEndpoint,
+          artifactsEndpointPlaceholder,
+        },
         propsData: {
-          ...defaultProps,
-          ...props,
+          pipelineId,
+        },
+        data() {
+          return {
+            ...mockData,
+          };
         },
         stubs: {
           GlSprintf,
@@ -35,33 +49,64 @@ describe('Pipeline Multi Actions Dropdown', () => {
     );
   };
 
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findAllArtifactItems = () => wrapper.findAllByTestId(artifactItemTestId);
   const findFirstArtifactItem = () => wrapper.findByTestId(artifactItemTestId);
 
   beforeEach(() => {
-    createComponent();
+    mockAxios = new MockAdapter(axios);
   });
 
   afterEach(() => {
+    mockAxios.restore();
+
     wrapper.destroy();
   });
 
   it('should render the dropdown', () => {
+    createComponent();
+
     expect(findDropdown().exists()).toBe(true);
   });
 
   describe('Artifacts', () => {
+    it('should fetch artifacts on dropdown click', 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);
+      expect(wrapper.vm.artifacts).toEqual(artifacts);
+    });
+
     it('should render all the provided artifacts', () => {
-      expect(findAllArtifactItems()).toHaveLength(defaultProps.artifacts.length);
+      createComponent({ mockData: { artifacts } });
+
+      expect(findAllArtifactItems()).toHaveLength(artifacts.length);
     });
 
     it('should render the correct artifact name and path', () => {
-      expect(findFirstArtifactItem().attributes('href')).toBe(defaultProps.artifacts[0].path);
+      createComponent({ mockData: { artifacts } });
+
+      expect(findFirstArtifactItem().attributes('href')).toBe(artifacts[0].path);
+      expect(findFirstArtifactItem().text()).toBe(`Download ${artifacts[0].name} artifact`);
+    });
+
+    describe('with a failing request', () => {
+      it('should render an error message', async () => {
+        const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
+        mockAxios.onGet(endpoint).replyOnce(500);
+        createComponent();
+        findDropdown().vm.$emit('show');
+        await waitForPromises();
 
-      expect(findFirstArtifactItem().text()).toBe(
-        `Download ${defaultProps.artifacts[0].name} artifact`,
-      );
+        const error = findAlert();
+        expect(error.exists()).toBe(true);
+        expect(error.text()).toBe(i18n.artifactsFetchErrorMessage);
+      });
     });
   });
 });