From a73da057ba37bb14ced3aba14281cfff2621272f Mon Sep 17 00:00:00 2001
From: Paul Tavares <paul.tavares@elastic.co>
Date: Tue, 22 Dec 2020 09:26:28 -0500
Subject: [PATCH] refactor integration details Policies list to use
 LinkedAgentCount component

---
 .../fleet/components/linked_agent_count.tsx   | 35 ++++++++++---------
 .../screens/detail/package_policies_panel.tsx | 30 ++++------------
 2 files changed, 25 insertions(+), 40 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 133015a28056b..114faed2a1851 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
@@ -5,26 +5,27 @@
  */
 
 import React, { memo } from 'react';
-import { EuiLink } from '@elastic/eui';
+import { EuiLink, EuiLinkAnchorProps } from '@elastic/eui';
 import { useLink } from '../hooks';
 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<{ count: number; agentPolicyId: string }>(
-  ({ count, agentPolicyId }) => {
-    const { getHref } = useLink();
-    return count > 0 ? (
-      <EuiLink
-        href={getHref('fleet_agent_list', {
-          kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
-        })}
-      >
-        {count}
-      </EuiLink>
-    ) : (
-      <>count</>
-    );
-  }
-);
+export const LinkedAgentCount = memo<
+  Omit<EuiLinkAnchorProps, 'href'> & { count: number; agentPolicyId: string }
+>(({ count, agentPolicyId, ...otherEuiLinkProps }) => {
+  const { getHref } = useLink();
+  return count > 0 ? (
+    <EuiLink
+      {...otherEuiLinkProps}
+      href={getHref('fleet_agent_list', {
+        kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
+      })}
+    >
+      {count}
+    </EuiLink>
+  ) : (
+    <>{count}</>
+  );
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/package_policies_panel.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/package_policies_panel.tsx
index 4d8cb5a16034f..90e0bac96bbed 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/package_policies_panel.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/package_policies_panel.tsx
@@ -17,10 +17,7 @@ import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react';
 import { useGetPackageInstallStatus } from '../../hooks';
 import { InstallStatus } from '../../../../types';
 import { useLink } from '../../../../hooks';
-import {
-  AGENT_SAVED_OBJECT_TYPE,
-  PACKAGE_POLICY_SAVED_OBJECT_TYPE,
-} from '../../../../../../../common/constants';
+import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../../../common/constants';
 import { useUrlPagination } from '../../../../hooks';
 import {
   PackagePolicyAndAgentPolicy,
@@ -28,6 +25,7 @@ import {
 } from './use_package_policies_with_agent_policy';
 import { LinkAndRevision, LinkAndRevisionProps } from '../../../../components';
 import { Persona } from './persona';
+import { LinkedAgentCount } from '../../../../components/linked_agent_count';
 
 const IntegrationDetailsLink = memo<{
   packagePolicy: PackagePolicyAndAgentPolicy['packagePolicy'];
@@ -66,22 +64,6 @@ const AgentPolicyDetailLink = memo<{
   );
 });
 
-const PolicyAgentListLink = memo<{ agentPolicyId: string; children: ReactNode }>(
-  ({ agentPolicyId, children }) => {
-    const { getHref } = useLink();
-    return (
-      <EuiLink
-        className="eui-textTruncate"
-        href={getHref('fleet_agent_list', {
-          kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id:%20${agentPolicyId}`,
-        })}
-      >
-        {children}
-      </EuiLink>
-    );
-  }
-);
-
 interface PackagePoliciesPanelProps {
   name: string;
   version: string;
@@ -156,9 +138,11 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
         width: '8ch',
         render({ packagePolicy, agentPolicy }: PackagePolicyAndAgentPolicy) {
           return (
-            <PolicyAgentListLink agentPolicyId={packagePolicy.policy_id}>
-              {agentPolicy?.agents ?? 0}
-            </PolicyAgentListLink>
+            <LinkedAgentCount
+              count={agentPolicy?.agents ?? 0}
+              agentPolicyId={packagePolicy.policy_id}
+              className="eui-textTruncate"
+            />
           );
         },
       },