From 179291dfd2606bb4e8727f429a0492d206d8e028 Mon Sep 17 00:00:00 2001
From: Zacqary Adam Xeper <Zacqary@users.noreply.github.com>
Date: Mon, 24 May 2021 17:29:27 -0500
Subject: [PATCH] [Fleet] Fix incomplete agent count message on policy tab
 (#100497)

---
 .../fleet/components/linked_agent_count.tsx   | 22 +++++++++++++++----
 .../agent_policy/details_page/index.tsx       |  1 +
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx
index e42917700284ee9..dddb1f6531afd04 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { memo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import type { EuiLinkAnchorProps } from '@elastic/eui';
 import { EuiLink } from '@elastic/eui';
 
@@ -16,9 +17,22 @@ import { AGENT_SAVED_OBJECT_TYPE } from '../constants';
  * Displays the provided `count` number as a link to the Agents list if it is greater than zero
  */
 export const LinkedAgentCount = memo<
-  Omit<EuiLinkAnchorProps, 'href'> & { count: number; agentPolicyId: string }
->(({ count, agentPolicyId, ...otherEuiLinkProps }) => {
+  Omit<EuiLinkAnchorProps, 'href'> & {
+    count: number;
+    agentPolicyId: string;
+    showAgentText?: boolean;
+  }
+>(({ count, agentPolicyId, showAgentText, ...otherEuiLinkProps }) => {
   const { getHref } = useLink();
+  const displayValue = showAgentText ? (
+    <FormattedMessage
+      id="xpack.fleet.agentPolicy.linkedAgentCountText"
+      defaultMessage="{count, plural, one {# agent} other {# agents}}"
+      values={{ count }}
+    />
+  ) : (
+    count
+  );
   return count > 0 ? (
     <EuiLink
       {...otherEuiLinkProps}
@@ -26,14 +40,14 @@ export const LinkedAgentCount = memo<
         kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
       })}
     >
-      {count}
+      {displayValue}
     </EuiLink>
   ) : (
     <span
       data-test-subj={otherEuiLinkProps['data-test-subj']}
       className={otherEuiLinkProps.className}
     >
-      {count}
+      {displayValue}
     </span>
   );
 });
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx
index 65cf62a279a223e..e96ef8322401375 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx
@@ -173,6 +173,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
                 <LinkedAgentCount
                   count={(agentStatus && agentStatus.total) || 0}
                   agentPolicyId={(agentPolicy && agentPolicy.id) || ''}
+                  showAgentText
                 />
               ),
             },