1 files changed, 26 insertions, 14 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
index 9725e882d5e..05a1ceface3 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
@@ -3,16 +3,16 @@ import {
   GlAlert,
   GlDropdown,
   GlDropdownItem,
-  GlDropdownSectionHeader,
+  GlSearchBoxByType,
   GlLoadingIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__ } from '~/locale';
 
 export const i18n = {
-  artifacts: __('Artifacts'),
-  artifactSectionHeader: __('Download artifacts'),
+  downloadArtifacts: __('Download artifacts'),
   artifactsFetchErrorMessage: s__('Pipelines|Could not load artifacts.'),
   emptyArtifactsMessage: __('No artifacts found'),
 };
@@ -26,7 +26,7 @@ export default {
     GlAlert,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownSectionHeader,
+    GlSearchBoxByType,
     GlLoadingIcon,
   },
   inject: {
@@ -48,8 +48,16 @@ export default {
       artifacts: [],
       hasError: false,
       isLoading: false,
+      searchQuery: '',
     };
   },
+  computed: {
+    filteredArtifacts() {
+      return this.searchQuery.length > 0
+        ? fuzzaldrinPlus.filter(this.artifacts, this.searchQuery, { key: 'name' })
+        : this.artifacts;
+    },
+  },
   methods: {
     fetchArtifacts() {
       this.isLoading = true;
@@ -70,27 +78,27 @@ export default {
           this.isLoading = false;
         });
     },
+    handleDropdownShown() {
+      this.$refs.searchInput.focusInput();
+    },
   },
 };
 </script>
 <template>
   <gl-dropdown
     v-gl-tooltip
-    :title="$options.i18n.artifacts"
-    :text="$options.i18n.artifacts"
-    :aria-label="$options.i18n.artifacts"
-    icon="ellipsis_v"
+    :title="$options.i18n.downloadArtifacts"
+    :text="$options.i18n.downloadArtifacts"
+    :aria-label="$options.i18n.downloadArtifacts"
+    :header-text="$options.i18n.downloadArtifacts"
+    icon="download"
     data-testid="pipeline-multi-actions-dropdown"
     right
     lazy
     text-sr-only
-    no-caret
     @show.once="fetchArtifacts"
+    @shown="handleDropdownShown"
   >
-    <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>
@@ -101,8 +109,12 @@ export default {
       {{ $options.i18n.emptyArtifactsMessage }}
     </gl-dropdown-item>
 
+    <template #header>
+      <gl-search-box-by-type v-if="artifacts.length" ref="searchInput" v-model.trim="searchQuery" />
+    </template>
+
     <gl-dropdown-item
-      v-for="(artifact, i) in artifacts"
+      v-for="(artifact, i) in filteredArtifacts"
       :key="i"
       :href="artifact.path"
       rel="nofollow"