[8.x] [Fleet] Improve reusable integration policies flow in package p…

…olicies UI (#193532) (#194787) # Backport This will backport the following commits from `main` to `8.x`: - [[Fleet] Improve reusable integration policies flow in package policies UI (#193532)](#193532)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cristina Amico <[email protected]>
elastic · Oct 3, 2024 · a805375 · a805375
1 parent 39bfe8a
commit a805375
Show file tree

Hide file tree

Showing 7 changed files with 388 additions and 116 deletions.
diff --git a/...tions/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx b/...tions/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx
@@ -7,85 +7,194 @@
 
 import React from 'react';
 
-import { act } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 
 import { createIntegrationsTestRendererMock } from '../../../../../../../../mock';
 import type { AgentPolicy } from '../../../../../../types';
+import { useAuthz, useMultipleAgentPolicies } from '../../../../../../hooks';
 
 import { PackagePolicyAgentsCell } from './package_policy_agents_cell';
 
+jest.mock('../../../../../../hooks', () => ({
+  ...jest.requireActual('../../../../../../hooks'),
+  useAuthz: jest.fn(),
+  useMultipleAgentPolicies: jest.fn(),
+  useConfirmForceInstall: jest.fn(),
+}));
+
+const useMultipleAgentPoliciesMock = useMultipleAgentPolicies as jest.MockedFunction<
+  typeof useMultipleAgentPolicies
+>;
 function renderCell({
-  agentCount = 0,
-  agentPolicy = {} as AgentPolicy,
+  agentPolicies = [] as AgentPolicy[],
   onAddAgent = () => {},
   hasHelpPopover = false,
-  canAddAgents = true,
 }) {
   const renderer = createIntegrationsTestRendererMock();
 
   return renderer.render(
     <PackagePolicyAgentsCell
-      agentCount={agentCount}
-      agentPolicy={agentPolicy}
+      agentPolicies={agentPolicies}
       onAddAgent={onAddAgent}
-      canAddAgents={canAddAgents}
       hasHelpPopover={hasHelpPopover}
     />
   );
 }
 
 describe('PackagePolicyAgentsCell', () => {
-  test('it should display add agent if count is 0', async () => {
-    const utils = renderCell({ agentCount: 0 });
-    await act(async () => {
-      expect(utils.queryByText('Add agent')).toBeInTheDocument();
-    });
+  beforeEach(() => {
+    jest.mocked(useAuthz).mockReturnValue({
+      fleet: {
+        addAgents: true,
+        addFleetServers: true,
+      },
+    } as any);
   });
 
-  test('it should not display add agent if policy is managed', async () => {
-    const utils = renderCell({
-      agentCount: 0,
-      agentPolicy: {
-        is_managed: true,
-      } as AgentPolicy,
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('when multiple agent policies is disabled', () => {
+    beforeEach(() => {
+      useMultipleAgentPoliciesMock.mockReturnValue({ canUseMultipleAgentPolicies: false });
     });
-    await act(async () => {
-      expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+
+    test('it should display add agent button if count is 0', async () => {
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+          } as AgentPolicy,
+        ],
+      });
+      utils.debug();
+      await act(async () => {
+        expect(utils.queryByText('Add agent')).toBeInTheDocument();
+      });
     });
-  });
 
-  test('it should display only count if count > 0', async () => {
-    const utils = renderCell({ agentCount: 9999 });
-    await act(async () => {
-      expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
-      expect(utils.queryByText('9999')).toBeInTheDocument();
+    test('it should display only count if count > 0', async () => {
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+            agents: 999,
+          } as AgentPolicy,
+        ],
+      });
+      await act(async () => {
+        expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+        expect(utils.queryByText('999')).toBeInTheDocument();
+      });
     });
-  });
 
-  test('it should display help popover if count is 0 and hasHelpPopover=true', async () => {
-    const utils = renderCell({ agentCount: 0, hasHelpPopover: true });
-    await act(async () => {
-      expect(utils.queryByText('9999')).not.toBeInTheDocument();
-      expect(utils.queryByText('Add agent')).toBeInTheDocument();
-      expect(
-        utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
-      ).toBeInTheDocument();
+    test('it should not display help popover if count is > 0 and hasHelpPopover=true', async () => {
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+            agents: 999,
+          } as AgentPolicy,
+        ],
+        hasHelpPopover: true,
+      });
+      await act(async () => {
+        expect(utils.queryByText('999')).toBeInTheDocument();
+        expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+        expect(
+          utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
+        ).not.toBeInTheDocument();
+      });
     });
-  });
-  test('it should not display help popover if count is > 0 and hasHelpPopover=true', async () => {
-    const utils = renderCell({ agentCount: 9999, hasHelpPopover: true });
-    await act(async () => {
-      expect(utils.queryByText('9999')).toBeInTheDocument();
-      expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
-      expect(
-        utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
-      ).not.toBeInTheDocument();
+
+    test('it should display help popover if count = 0 and hasHelpPopover=true', async () => {
+      const utils = renderCell({
+        hasHelpPopover: true,
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+          } as AgentPolicy,
+        ],
+      });
+      await act(async () => {
+        expect(utils.queryByText('9999')).not.toBeInTheDocument();
+        expect(utils.queryByText('Add agent')).toBeInTheDocument();
+        expect(
+          utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
+        ).toBeInTheDocument();
+      });
+    });
+
+    test('it should not display add agent button if policy is managed', async () => {
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+            agents: 999,
+            is_managed: true,
+          } as AgentPolicy,
+        ],
+      });
+      utils.debug();
+      await act(async () => {
+        expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+        expect(utils.queryByTestId('LinkedAgentCountLink')).toBeInTheDocument();
+        expect(utils.queryByText('999')).toBeInTheDocument();
+      });
+    });
+
+    test('Add agent button should be disabled if canAddAgents is false', async () => {
+      jest.mocked(useAuthz).mockReturnValue({
+        fleet: {
+          addAgents: false,
+        },
+      } as any);
+
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+          } as AgentPolicy,
+        ],
+      });
+      await act(async () => {
+        expect(utils.container.querySelector('[data-test-subj="addAgentButton"]')).toBeDisabled();
+      });
     });
   });
-  test('it should be disabled if canAddAgents is false', async () => {
-    const utils = renderCell({ agentCount: 0, canAddAgents: false });
-    await act(async () => {
-      expect(utils.container.querySelector('[data-test-subj="addAgentButton"]')).toBeDisabled();
+
+  describe('when multiple agent policies is enabled', () => {
+    beforeEach(() => {
+      useMultipleAgentPoliciesMock.mockReturnValue({ canUseMultipleAgentPolicies: true });
+    });
+
+    test('it should display agent count sum and popover if agent count > 0', async () => {
+      jest.mocked(useAuthz).mockReturnValue({
+        fleet: {
+          addAgents: false,
+        },
+      } as any);
+
+      const utils = renderCell({
+        agentPolicies: [
+          {
+            name: 'test Policy 1',
+            agents: 100,
+          } as AgentPolicy,
+          {
+            name: 'test Policy 2',
+            agents: 200,
+          } as AgentPolicy,
+        ],
+      });
+      await act(async () => {
+        expect(utils.queryByText('300')).toBeInTheDocument();
+        expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+        const button = utils.getByTestId('agentsCountsButton');
+        fireEvent.click(button);
+        expect(utils.queryByTestId('agentCountsPopover')).toBeInTheDocument();
+      });
     });
   });
 });