diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue | 50 |
1 files changed, 27 insertions, 23 deletions
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue index 26791e4284d..0a25dc5bea5 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue @@ -1,56 +1,56 @@ <script> -import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlBadge, GlTab, GlTabs, GlLoadingIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; export default { components: { GlBadge, GlTab, GlTabs, + GlLoadingIcon, }, inject: { - jobCounts: { - default: {}, - }, jobStatuses: { default: {}, }, }, + props: { + allJobsCount: { + type: Number, + required: true, + }, + loading: { + type: Boolean, + required: true, + }, + }, computed: { tabs() { return [ { - text: __('All'), - count: this.jobCounts.all, + text: s__('Jobs|All'), + count: this.allJobsCount, scope: null, testId: 'jobs-all-tab', + showBadge: true, }, { - text: __('Pending'), - count: this.jobCounts.pending, - scope: this.jobStatuses.pending, - testId: 'jobs-pending-tab', - }, - { - text: __('Running'), - count: this.jobCounts.running, - scope: this.jobStatuses.running, - testId: 'jobs-running-tab', - }, - { - text: __('Finished'), - count: this.jobCounts.finished, + text: s__('Jobs|Finished'), scope: [this.jobStatuses.success, this.jobStatuses.failed, this.jobStatuses.canceled], testId: 'jobs-finished-tab', + showBadge: false, }, ]; }, + showLoadingIcon() { + return this.loading && !this.allJobsCount; + }, }, }; </script> <template> - <gl-tabs content-class="gl-pb-0"> + <gl-tabs content-class="gl-py-0"> <gl-tab v-for="tab in tabs" :key="tab.text" @@ -59,7 +59,11 @@ export default { > <template #title> <span>{{ tab.text }}</span> - <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge> + <gl-loading-icon v-if="showLoadingIcon && tab.showBadge" class="gl-ml-2" /> + + <gl-badge v-else-if="tab.showBadge" size="sm" class="gl-tab-counter-badge"> + {{ tab.count }} + </gl-badge> </template> </gl-tab> </gl-tabs> |