diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue | 40 |
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" |