[Fleet] Improve reusable integration policies flow in package policie…

…s UI (#193532) Closes #186357 ## Summary Improve package policies list table support for reusable agent policies. This PR tweaks some parts of this UI: - The agent count is now an aggregation of the total agents on all the shared agent policies. Clicking on this count opens up a new pop up that shows the number of agents for each policy and allows the agent to navigate either to those agents or all of them. The list shows only the top 5 policies by agent count. ![Screenshot 2024-09-30 at 15 45 16](https://github.com/user-attachments/assets/d56b53fd-ce6b-48cf-bc5b-0b5a1f0a7cca) ![Screenshot 2024-09-30 at 14 56 21](https://github.com/user-attachments/assets/831dd34c-d44d-446f-bbb7-0ee146b671e8) - When clicking on "add agent", either from the actions or from the button, we now show the agent policy selector as first step of the flyout, so the user can choose which policy wants to enroll agents to. Currently instead the policy is preselected ![Screenshot 2024-10-01 at 11 06 39](https://github.com/user-attachments/assets/aaba7f0f-21c9-4232-87db-62a4226764df) ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Oct 3, 2024 · 9bc761a · 9bc761a
1 parent 28aeb68
commit 9bc761a
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();
+      });
     });
   });
 });