Merge branch '55893-artifacts-download' into 'master'

Fixes dropdowns not working in Pipelines pages

Closes #55893 and #56071

See merge request gitlab-org/gitlab-ce!25043

2 files changed, 19 insertions, 16 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 0152e2fbe04..a250e3236f5 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -59,17 +59,19 @@ export default {
 </script>
 <template>
   <div class="btn-group">
-    <gl-button
+    <button
       v-gl-tooltip
+      type="button"
       :disabled="isLoading"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
-      title="Manual job"
+      :title="__('Manual job')"
       data-toggle="dropdown"
-      aria-label="Manual job"
+      :aria-label="__('Manual job')"
     >
-      <icon name="play" class="icon-play" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
+      <icon name="play" class="icon-play" />
+      <i class="fa fa-caret-down" aria-hidden="true"></i>
       <gl-loading-icon v-if="isLoading" />
-    </gl-button>
+    </button>
 
     <ul class="dropdown-menu dropdown-menu-right">
       <li v-for="action in actions" :key="action.path">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 908b10afee6..2ab0ad4d013 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
@@ -9,7 +9,6 @@ export default {
   components: {
     Icon,
     GlLink,
-    GlButton,
   },
   props: {
     artifacts: {
@@ -21,20 +20,22 @@ export default {
 </script>
 <template>
   <div class="btn-group" role="group">
-    <gl-button
+    <button
       v-gl-tooltip
-      class="dropdown-toggle build-artifacts js-pipeline-dropdown-download"
-      title="Artifacts"
+      type="button"
+      class="dropdown-toggle build-artifacts btn btn-default js-pipeline-dropdown-download"
+      :title="__('Artifacts')"
       data-toggle="dropdown"
-      aria-label="Artifacts"
+      :aria-label="__('Artifacts')"
     >
-      <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
-    </gl-button>
+      <icon name="download" />
+      <i class="fa fa-caret-down" aria-hidden="true"></i>
+    </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 }} artifacts
-        </gl-link>
+        <gl-link :href="artifact.path" rel="nofollow" download
+          >Download {{ artifact.name }} artifacts</gl-link
+        >
       </li>
     </ul>
   </div>