1 files changed, 78 insertions, 11 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
index 9c3990f82df..147fff52101 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
@@ -1,40 +1,107 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import {
+  GlAlert,
+  GlDropdown,
+  GlDropdownItem,
+  GlLoadingIcon,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+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.'),
+  noArtifacts: s__('Pipelines|No artifacts available'),
+};
 
 export default {
+  i18n,
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: {
+    GlAlert,
     GlDropdown,
     GlDropdownItem,
+    GlLoadingIcon,
     GlSprintf,
   },
-  translations: {
-    artifacts: __('Artifacts'),
-    downloadArtifact: __('Download %{name} artifact'),
+  inject: {
+    artifactsEndpoint: {
+      default: '',
+    },
+    artifactsEndpointPlaceholder: {
+      default: '',
+    },
   },
   props: {
-    artifacts: {
-      type: Array,
+    pipelineId: {
+      type: Number,
       required: true,
     },
   },
+  data() {
+    return {
+      artifacts: [],
+      hasError: false,
+      isLoading: false,
+    };
+  },
+  computed: {
+    hasArtifacts() {
+      return Boolean(this.artifacts.length);
+    },
+  },
+  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>
   <gl-dropdown
     v-gl-tooltip
     class="build-artifacts js-pipeline-dropdown-download"
-    :title="$options.translations.artifacts"
-    :text="$options.translations.artifacts"
-    :aria-label="$options.translations.artifacts"
+    :title="$options.i18n.artifacts"
+    :text="$options.i18n.artifacts"
+    :aria-label="$options.i18n.artifacts"
     icon="download"
     right
     lazy
     text-sr-only
+    @show.once="fetchArtifacts"
   >
+    <gl-alert v-if="hasError" variant="danger" :dismissible="false">
+      {{ $options.i18n.artifactsFetchErrorMessage }}
+    </gl-alert>
+
+    <gl-loading-icon v-if="isLoading" />
+
+    <gl-alert v-else-if="!hasArtifacts" variant="info" :dismissible="false">
+      {{ $options.i18n.noArtifacts }}
+    </gl-alert>
+
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"
       :key="i"
@@ -42,7 +109,7 @@ export default {
       rel="nofollow"
       download
     >
-      <gl-sprintf :message="$options.translations.downloadArtifact">
+      <gl-sprintf :message="$options.i18n.downloadArtifact">
         <template #name>{{ artifact.name }}</template>
       </gl-sprintf>
     </gl-dropdown-item>