Add latest changes from gitlab-org/gitlab@master

5 files changed, 51 insertions, 26 deletions

diff --git a/app/assets/javascripts/jobs/components/table/graphql/cache_config.js b/app/assets/javascripts/jobs/components/table/graphql/cache_config.js
index 354245443ce..8bcd7ffd10f 100644
--- a/app/assets/javascripts/jobs/components/table/graphql/cache_config.js
+++ b/app/assets/javascripts/jobs/components/table/graphql/cache_config.js
@@ -32,6 +32,7 @@ export default {
                 nodes,
                 statuses,
                 pageInfo,
+                count: incoming.count,
               };
             }
 
@@ -45,6 +46,7 @@ export default {
           nodes,
           statuses,
           pageInfo,
+          count: incoming.count,
         };
       },
     },
diff --git a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
index 151e49af87e..f3ca958b3ca 100644
--- a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
+++ b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
@@ -3,6 +3,7 @@ query getJobs($fullPath: ID!, $after: String, $statuses: [CiJobStatus!]) {
     id
     __typename
     jobs(after: $after, first: 30, statuses: $statuses) {
+      count
       pageInfo {
         endCursor
         hasNextPage
diff --git a/app/assets/javascripts/jobs/components/table/index.js b/app/assets/javascripts/jobs/components/table/index.js
index 1b9c7cdcfdd..88da1169e01 100644
--- a/app/assets/javascripts/jobs/components/table/index.js
+++ b/app/assets/javascripts/jobs/components/table/index.js
@@ -27,7 +27,6 @@ export default (containerId = 'js-jobs-table') => {
 
   const {
     fullPath,
-    jobCounts,
     jobStatuses,
     pipelineEditorPath,
     emptyStateSvgPath,
@@ -42,7 +41,6 @@ export default (containerId = 'js-jobs-table') => {
       fullPath,
       pipelineEditorPath,
       jobStatuses: JSON.parse(jobStatuses),
-      jobCounts: JSON.parse(jobCounts),
       admin: parseBoolean(admin),
     },
     render(createElement) {
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
index b141dcf81dd..3ea50dfb7a3 100644
--- a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
+++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
@@ -43,10 +43,11 @@ export default {
         };
       },
       update(data) {
-        const { jobs: { nodes: list = [], pageInfo = {} } = {} } = data.project || {};
+        const { jobs: { nodes: list = [], pageInfo = {}, count } = {} } = data.project || {};
         return {
           list,
           pageInfo,
+          count,
         };
       },
       error() {
@@ -64,6 +65,7 @@ export default {
       scope: null,
       infiniteScrollingTriggered: false,
       filterSearchTriggered: false,
+      count: 0,
     };
   },
   computed: {
@@ -93,6 +95,20 @@ export default {
     showFilteredSearch() {
       return this.glFeatures?.jobsTableVueSearch && !this.scope;
     },
+    jobsCount() {
+      return this.jobs.count;
+    },
+  },
+  watch: {
+    // this watcher ensures that the count on the all tab
+    //  is not updated when switching to the finished tab
+    jobsCount(newCount, oldCount) {
+      if (this.scope) {
+        this.count = oldCount;
+      } else {
+        this.count = newCount;
+      }
+    },
   },
   mounted() {
     eventHub.$on('jobActionPerformed', this.handleJobAction);
@@ -161,7 +177,11 @@ export default {
       {{ $options.i18n.errorMsg }}
     </gl-alert>
 
-    <jobs-table-tabs @fetchJobsByStatus="fetchJobsByStatus" />
+    <jobs-table-tabs
+      :all-jobs-count="count"
+      :loading="loading"
+      @fetchJobsByStatus="fetchJobsByStatus"
+    />
 
     <jobs-filtered-search
       v-if="showFilteredSearch"
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 ad4651a7c9f..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,50 +1,50 @@
 <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>
@@ -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>