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

100% Statements 13/13
100% Branches 2/2
100% Functions 6/6
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117  5x               5x 5x   5x                                                                   139x             2x 2x   2x       2x     1x     1x     2x           457x                                                                                  
<script>
import {
  GlAlert,
  GlDropdown,
  GlDropdownItem,
  GlDropdownSectionHeader,
  GlLoadingIcon,
  GlTooltipDirective,
} from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { __, s__ } from '~/locale';
 
export const i18n = {
  artifacts: __('Artifacts'),
  artifactSectionHeader: __('Download artifacts'),
  artifactsFetchErrorMessage: s__('Pipelines|Could not load artifacts.'),
  emptyArtifactsMessage: __('No artifacts found'),
};
 
export default {
  i18n,
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  components: {
    GlAlert,
    GlDropdown,
    GlDropdownItem,
    GlDropdownSectionHeader,
    GlLoadingIcon,
  },
  inject: {
    artifactsEndpoint: {
      default: '',
    },
    artifactsEndpointPlaceholder: {
      default: '',
    },
  },
  props: {
    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>
  <gl-dropdown
    v-gl-tooltip
    :title="$options.i18n.artifacts"
    :text="$options.i18n.artifacts"
    :aria-label="$options.i18n.artifacts"
    icon="ellipsis_v"
    data-testid="pipeline-multi-actions-dropdown"
    right
    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-else-if="isLoading" size="sm" />
 
    <gl-dropdown-item v-else-if="!artifacts.length" data-testid="artifacts-empty-message">
      {{ $options.i18n.emptyArtifactsMessage }}
    </gl-dropdown-item>
 
    <gl-dropdown-item
      v-for="(artifact, i) in artifacts"
      :key="i"
      :href="artifact.path"
      rel="nofollow"
      download
      class="gl-word-break-word"
      data-testid="artifact-item"
    >
      {{ artifact.name }}
    </gl-dropdown-item>
  </gl-dropdown>
</template>