Build pipeline mutli action dropdown

Make the component, test the component
and then use the component.

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

+<script>
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    artifacts: __('Artifacts'),
+    downloadArtifact: __('Download %{name} artifact'),
+    artifactSectionHeader: __('Download artifacts'),
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownSectionHeader,
+    GlSprintf,
+  },
+  props: {
+    artifacts: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</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
+  >
+    <gl-dropdown-section-header>{{
+      $options.i18n.artifactSectionHeader
+    }}</gl-dropdown-section-header>
+
+    <gl-dropdown-item
+      v-for="(artifact, i) in artifacts"
+      :key="i"
+      :href="artifact.path"
+      rel="nofollow"
+      download
+      data-testid="artifact-item"
+    >
+      <gl-sprintf :message="$options.i18n.downloadArtifact">
+        <template #name>{{ artifact.name }}</template>
+      </gl-sprintf>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>

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

@@ -2,7 +2,7 @@
 import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../../event_hub';
-import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
+import PipelineMultiActions from './pipeline_multi_actions.vue';
 import PipelinesManualActions from './pipelines_manual_actions.vue';
 
 export default {
@@ -16,8 +16,8 @@ export default {
   },
   components: {
     GlButton,
+    PipelineMultiActions,
     PipelinesManualActions,
-    PipelinesArtifactsComponent,
   },
   props: {
     pipeline: {
@@ -80,11 +80,6 @@ export default {
     <div class="btn-group">
       <pipelines-manual-actions v-if="actions.length > 0" :actions="actions" />
 
-      <pipelines-artifacts-component
-        v-if="pipeline.details.artifacts.length"
-        :artifacts="pipeline.details.artifacts"
-      />
-
       <gl-button
         v-if="pipeline.flags.retryable"
         v-gl-tooltip.hover
@@ -114,6 +109,11 @@ export default {
         class="js-pipelines-cancel-button"
         @click="handleCancelClick"
       />
+
+      <pipeline-multi-actions
+        v-if="pipeline.details.artifacts.length"
+        :artifacts="pipeline.details.artifacts"
+      />
     </div>
   </div>
 </template>

changelogs/unreleased/pb-move-artifacts-to-ellipsis-dropdown.yml

+---
+title: Change artifacts download button to a vertical ellipsis menu
+merge_request: 59667
+author:
+type: changed

spec/features/projects/pipelines/pipelines_spec.rb

@@ -457,20 +457,20 @@ RSpec.describe 'Pipelines', :js do
             visit_project_pipelines
           end
 
-          it 'has artifacts' do
-            expect(page).to have_selector('.build-artifacts')
+          it 'has artifacts dropdown' do
+            expect(page).to have_selector('[data-testid="pipeline-multi-actions-dropdown"]')
           end
 
           it 'has artifacts download dropdown' do
-            find('.js-pipeline-dropdown-download').click
+            find('[data-testid="pipeline-multi-actions-dropdown"]').click
 
             expect(page).to have_link(with_artifacts.file_type)
           end
 
           it 'has download attribute on download links' do
-            find('.js-pipeline-dropdown-download').click
+            find('[data-testid="pipeline-multi-actions-dropdown"]').click
             expect(page).to have_selector('a', text: 'Download')
-            page.all('.build-artifacts a', text: 'Download').each do |link|
+            page.all('[data-testid="artifact-item"]', text: 'Download').each do |link|
               expect(link[:download]).to eq ''
             end
           end
@@ -488,7 +488,7 @@ RSpec.describe 'Pipelines', :js do
             visit_project_pipelines
           end
 
-          it { expect(page).not_to have_selector('.build-artifacts') }
+          it { expect(page).not_to have_selector('[data-testid="artifact-item"]') }
         end
 
         context 'without artifacts' do
@@ -503,7 +503,7 @@ RSpec.describe 'Pipelines', :js do
             visit_project_pipelines
           end
 
-          it { expect(page).not_to have_selector('.build-artifacts') }
+          it { expect(page).not_to have_selector('[data-testid="artifact-item"]') }
         end
 
         context 'with trace artifact' do
@@ -514,7 +514,7 @@ RSpec.describe 'Pipelines', :js do
           end
 
           it 'does not show trace artifact as artifacts' do
-            expect(page).not_to have_selector('.build-artifacts')
+            expect(page).not_to have_selector('[data-testid="artifact-item"]')
           end
         end
       end

spec/frontend/pipelines/pipeline_multi_actions_spec.js

+import { GlDropdown, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import PipelineMultiActions from '~/pipelines/components/pipelines_list/pipeline_multi_actions.vue';
+
+describe('Pipeline Multi Actions Dropdown', () => {
+  let wrapper;
+
+  const artifactItemTestId = 'artifact-item';
+
+  const defaultProps = {
+    artifacts: [
+      {
+        name: 'job my-artifact',
+        path: '/download/path',
+      },
+      {
+        name: 'job-2 my-artifact-2',
+        path: '/download/path-two',
+      },
+    ],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = extendedWrapper(
+      shallowMount(PipelineMultiActions, {
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+        stubs: {
+          GlSprintf,
+        },
+      }),
+    );
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllArtifactItems = () => wrapper.findAllByTestId(artifactItemTestId);
+  const findFirstArtifactItem = () => wrapper.findByTestId(artifactItemTestId);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render the dropdown', () => {
+    expect(findDropdown().exists()).toBe(true);
+  });
+
+  describe('Artifacts', () => {
+    it('should render all the provided artifacts', () => {
+      expect(findAllArtifactItems()).toHaveLength(defaultProps.artifacts.length);
+    });
+
+    it('should render the correct artifact name and path', () => {
+      expect(findFirstArtifactItem().attributes('href')).toBe(defaultProps.artifacts[0].path);
+
+      expect(findFirstArtifactItem().text()).toBe(
+        `Download ${defaultProps.artifacts[0].name} artifact`,
+      );
+    });
+  });
+});