diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue | 14 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue | 40 |
2 files changed, 36 insertions, 18 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue index 64d4414eb94..439dc0eb253 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue @@ -32,9 +32,10 @@ export default { .map(({ name, logo, title }) => { return { name: title || name, + description: sprintf(this.$options.i18n.description, { name: title || name }), + isPng: logo.endsWith('png'), logo, link: mergeUrlParams({ template: name }, this.pipelineEditorPath), - description: sprintf(this.$options.i18n.description, { name: title || name }), }; }); @@ -48,6 +49,9 @@ export default { label: template, }); }, + logoStyle(template) { + return template.isPng ? { objectFit: 'contain' } : ''; + }, }, i18n: { description: s__( @@ -66,11 +70,13 @@ export default { > <div class="gl-display-flex gl-flex-direction-row gl-align-items-center"> <gl-avatar - :src="template.logo" - :size="48" + :alt="template.name" class="gl-mr-5 gl-bg-white dark-mode-override" + :class="{ 'gl-p-2': template.isPng }" + :style="logoStyle(template)" :shape="$options.AVATAR_SHAPE_OPTION_RECT" - :alt="template.name" + :size="48" + :src="template.logo" data-testid="template-logo" /> <div class="gl-flex-direction-row"> 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" |