1 files changed, 29 insertions, 23 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 55c71e299be..b13460b4c68 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
@@ -1,14 +1,19 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlIcon,
-    GlLink,
+    GlDropdown,
+    GlDropdownItem,
+    GlSprintf,
+  },
+  translations: {
+    artifacts: __('Artifacts'),
+    downloadArtifact: __('Download %{name} artifact'),
   },
   props: {
     artifacts: {
@@ -19,24 +24,25 @@ export default {
 };
 </script>
 <template>
-  <div class="btn-group" role="group">
-    <button
-      v-gl-tooltip
-      type="button"
-      class="dropdown-toggle build-artifacts btn btn-default js-pipeline-dropdown-download"
-      :title="__('Artifacts')"
-      data-toggle="dropdown"
-      :aria-label="__('Artifacts')"
+  <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"
+    icon="download"
+    text-sr-only
+  >
+    <gl-dropdown-item
+      v-for="(artifact, i) in artifacts"
+      :key="i"
+      :href="artifact.path"
+      rel="nofollow"
+      download
     >
-      <gl-icon name="download" />
-      <gl-icon name="chevron-down" />
-    </button>
-    <ul class="dropdown-menu dropdown-menu-right">
-      <li v-for="(artifact, i) in artifacts" :key="i">
-        <gl-link :href="artifact.path" rel="nofollow" download
-          >Download {{ artifact.name }} artifact</gl-link
-        >
-      </li>
-    </ul>
-  </div>
+      <gl-sprintf :message="$options.translations.downloadArtifact">
+        <template #name>{{ artifact.name }}</template>
+      </gl-sprintf>
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>