Show deployment count

Update the deployments history tab title to show the count.

Changelog: changed

app/assets/javascripts/environments/environment_details/index.vue

 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import environmentClusterAgentQuery from '~/environments/graphql/queries/environment_cluster_agent.query.graphql';
@@ -12,6 +12,7 @@ export default {
     GlLoadingIcon,
     GlTabs,
     GlTab,
+    GlBadge,
     DeploymentHistory,
     KubernetesOverview,
   },
@@ -113,11 +114,14 @@ export default {
       />
     </gl-tab>
 
-    <gl-tab
-      :title="$options.i18n.deploymentHistory"
-      :query-param-value="$options.params.deployments"
-      :title-link-class="linkClass(1)"
-    >
+    <gl-tab :query-param-value="$options.params.deployments" :title-link-class="linkClass(1)">
+      <template #title>
+        {{ $options.i18n.deploymentHistory }}
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{
+          environment.deploymentsDisplayCount
+        }}</gl-badge>
+      </template>
+
       <deployment-history
         :project-full-path="projectFullPath"
         :environment-name="environmentName"

app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql

@@ -3,6 +3,7 @@ query getEnvironmentClusterAgent($projectFullPath: ID!, $environmentName: String
     id
     environment(name: $environmentName) {
       id
+      deploymentsDisplayCount
       fluxResourcePath
       kubernetesNamespace
       clusterAgent {

app/presenters/environment_presenter.rb

@@ -11,7 +11,7 @@ def path
   end
 
   def deployments_display_count
-    count = deployments.limit(MAX_DEPLOYMENTS_COUNT).count
+    count = all_deployments.limit(MAX_DEPLOYMENTS_COUNT).count
     count >= MAX_DEPLOYMENTS_COUNT ? MAX_DISPLAY_COUNT : count.to_s
   end
 end

spec/frontend/environments/environment_details/index_spec.js

-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -33,6 +33,7 @@ describe('~/environments/environment_details/index.vue', () => {
             clusterAgent,
             kubernetesNamespace,
             fluxResourcePath: fluxResourcePathMock,
+            deploymentsDisplayCount: 3,
           },
         },
       },
@@ -59,6 +60,7 @@ describe('~/environments/environment_details/index.vue', () => {
   const findTabByIndex = (index) => findAllTabs().at(index);
   const findDeploymentHistory = () => wrapper.findComponent(DeploymentsHistory);
   const findKubernetesOverview = () => wrapper.findComponent(KubernetesOverview);
+  const findTabBadge = () => wrapper.findComponent(GlBadge);
 
   describe('loading state', () => {
     beforeEach(() => {
@@ -134,7 +136,11 @@ describe('~/environments/environment_details/index.vue', () => {
     });
 
     it('renders correct title', () => {
-      expect(findTabByIndex(1).attributes('title')).toBe('Deployment history');
+      expect(findTabByIndex(1).text()).toContain('Deployment history');
+    });
+
+    it('renders a badge with the correct number of deployments', () => {
+      expect(findTabBadge().text()).toBe('3');
     });
 
     it('renders correct query param value', () => {

spec/presenters/environment_presenter_spec.rb

@@ -12,7 +12,7 @@
 
     before do
       stub_const("#{described_class}::MAX_DEPLOYMENTS_COUNT", 5)
-      allow(environment).to receive_message_chain(:deployments,
+      allow(environment).to receive_message_chain(:all_deployments,
         :limit).with(described_class::MAX_DEPLOYMENTS_COUNT).and_return(deployments_list)
     end