[Fleet] change UX of edit integration policy agent policies (#190583)

## Summary Closes #186629 Changed UX of edit integration policy page to update agent policies. To verify: - Add integration or create new agent policy with system integration - Edit the integration policy - Verify that the UI allows adding new agent policy with making changes to existing agent policies <img width="1509" alt="image" src="https://github.com/user-attachments/assets/71ae926c-4b13-4d58-b199-3d17b0649e24"> <img width="978" alt="image" src="https://github.com/user-attachments/assets/835b2d82-27ab-4361-98ca-dac401609bde"> ### Checklist Delete any items that are not applicable to this PR. - [x] 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) - [x] [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
elastic · Aug 29, 2024 · dc7290b · dc7290b
1 parent f22bc8d
commit dc7290b
Show file tree

Hide file tree

Showing 10 changed files with 419 additions and 71 deletions.
diff --git a/x-pack/plugins/fleet/cypress/tasks/integrations.ts b/x-pack/plugins/fleet/cypress/tasks/integrations.ts
@@ -25,16 +25,8 @@ export const addIntegration = ({ useExistingPolicy } = { useExistingPolicy: fals
     cy.getBySel(EXISTING_HOSTS_TAB).click();
     cy.wait('@agentStatus');
   } else {
-    // speeding up creating with unchecking system and agent integration
+    // speeding up creating with unchecking system integration
     cy.getBySel(AGENT_POLICY_SYSTEM_MONITORING_CHECKBOX).uncheck({ force: true });
-    cy.get('.euiAccordion__button').click();
-
-    cy.get('*[id^="logs_"]').uncheck({
-      force: true,
-    });
-    cy.get('*[id^="metrics_"]').uncheck({
-      force: true,
-    });
   }
   cy.getBySel(CREATE_PACKAGE_POLICY_SAVE_BTN).should('be.enabled').click();
 

diff --git a/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx b/...t/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
@@ -6,29 +6,15 @@
  */
 
 import React from 'react';
-import {
-  EuiAccordion,
-  EuiDescribedFormGroup,
-  EuiForm,
-  EuiHorizontalRule,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiDescribedFormGroup, EuiForm } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import styled from 'styled-components';
 
 import type { NewAgentPolicy, AgentPolicy } from '../../../types';
 
-import { AgentPolicyAdvancedOptionsContent } from './agent_policy_advanced_fields';
 import { AgentPolicyGeneralFields } from './agent_policy_general_fields';
 import { AgentPolicyFormSystemMonitoringCheckbox } from './agent_policy_system_monitoring_field';
 import type { ValidationResults } from './agent_policy_validation';
 
-const StyledEuiAccordion = styled(EuiAccordion)`
-  .ingest-active-button {
-    color: ${(props) => props.theme.eui.euiColorPrimary};
-  }
-`;
-
 interface Props {
   agentPolicy: Partial<NewAgentPolicy | AgentPolicy>;
   updateAgentPolicy: (u: Partial<NewAgentPolicy | AgentPolicy>) => void;
@@ -80,27 +66,6 @@ export const AgentPolicyIntegrationForm: React.FunctionComponent<Props> = ({
           updateSysMonitoring={updateSysMonitoring}
         />
       </EuiDescribedFormGroup>
-      <>
-        <EuiHorizontalRule />
-        <EuiSpacer size="xs" />
-        <StyledEuiAccordion
-          id="advancedOptions"
-          buttonContent={
-            <FormattedMessage
-              id="xpack.fleet.agentPolicyForm.advancedOptionsToggleLabel"
-              defaultMessage="Advanced options"
-            />
-          }
-          buttonClassName="ingest-active-button"
-        >
-          <EuiSpacer size="l" />
-          <AgentPolicyAdvancedOptionsContent
-            agentPolicy={agentPolicy}
-            updateAgentPolicy={updateAgentPolicy}
-            validation={validation}
-          />
-        </StyledEuiAccordion>
-      </>
     </EuiForm>
   );
 };
diff --git a/...ions/agent_policy/create_package_policy_page/components/steps/components/use_policies.tsx b/...ions/agent_policy/create_package_policy_page/components/steps/components/use_policies.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { SO_SEARCH_LIMIT } from '../../../../../../../../../common';
+import { useGetAgentPolicies } from '../../../../../../../../hooks';
+
+export const useAllNonManagedAgentPolicies = () => {
+  const { data: agentPoliciesData, error: err } = useGetAgentPolicies({
+    page: 1,
+    perPage: SO_SEARCH_LIMIT,
+    sortField: 'name',
+    sortOrder: 'asc',
+    full: false, // package_policies will always be empty
+    noAgentCount: true, // agentPolicy.agents will always be 0,
+    kuery: 'ingest-agent-policies.is_managed:false',
+  });
+  if (err) {
+    // eslint-disable-next-line no-console
+    console.debug('Could not retrieve agent policies');
+  }
+  return agentPoliciesData?.items || [];
+};
diff --git a/...tions/agent_policy/create_package_policy_page/components/steps/step_select_hosts.test.tsx b/...tions/agent_policy/create_package_policy_page/components/steps/step_select_hosts.test.tsx
@@ -15,6 +15,14 @@ import { useGetAgentPolicies } from '../../../../../hooks';
 import type { AgentPolicy, PackageInfo } from '../../../../../types';
 
 import { StepSelectHosts } from './step_select_hosts';
+import { useAllNonManagedAgentPolicies } from './components/use_policies';
+
+jest.mock('./components/use_policies', () => {
+  return {
+    ...jest.requireActual('./components/use_policies'),
+    useAllNonManagedAgentPolicies: jest.fn(),
+  };
+});
 
 jest.mock('../../../../../hooks', () => {
   return {
@@ -121,6 +129,9 @@ describe('StepSelectHosts', () => {
         items: [{ id: '1', name: 'Agent policy 1', namespace: 'default' }],
       },
     });
+    (useAllNonManagedAgentPolicies as jest.MockedFunction<any>).mockReturnValue([
+      { id: '1', name: 'Agent policy 1', namespace: 'default' },
+    ]);
 
     render();
 
@@ -140,6 +151,9 @@ describe('StepSelectHosts', () => {
         items: [{ id: '1', name: 'Agent policy 1', namespace: 'default' }],
       },
     });
+    (useAllNonManagedAgentPolicies as jest.MockedFunction<any>).mockReturnValue([
+      { id: '1', name: 'Agent policy 1', namespace: 'default' },
+    ]);
 
     render();
 
@@ -164,6 +178,10 @@ describe('StepSelectHosts', () => {
         ],
       },
     });
+    (useAllNonManagedAgentPolicies as jest.MockedFunction<any>).mockReturnValue([
+      { id: '1', name: 'Agent policy 1', namespace: 'default' },
+      { id: '2', name: 'Agent policy 2', namespace: 'default' },
+    ]);
 
     render();
 

diff --git a/...t/sections/agent_policy/create_package_policy_page/components/steps/step_select_hosts.tsx b/...t/sections/agent_policy/create_package_policy_page/components/steps/step_select_hosts.tsx
@@ -5,20 +5,20 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import type { EuiTabbedContentTab } from '@elastic/eui';
 import { EuiTabbedContent } from '@elastic/eui';
 import styled from 'styled-components';
 
-import { useGetAgentPolicies } from '../../../../../hooks';
 import type { AgentPolicy, NewAgentPolicy, PackageInfo } from '../../../../../types';
-import { AgentPolicyIntegrationForm } from '../../../components';
-import { SO_SEARCH_LIMIT } from '../../../../../constants';
 import type { ValidationResults } from '../../../components/agent_policy_validation';
 
 import { incrementPolicyName } from '../../../../../services';
 
+import { AgentPolicyIntegrationForm } from '../../../components';
+
 import { StepSelectAgentPolicy } from './step_select_agent_policy';
+import { useAllNonManagedAgentPolicies } from './components/use_policies';
 
 export enum SelectedPolicyTab {
   NEW = 'new',
@@ -60,23 +60,7 @@ export const StepSelectHosts: React.FunctionComponent<Props> = ({
   selectedAgentPolicyIds,
   initialSelectedTabIndex,
 }) => {
-  let existingAgentPolicies: AgentPolicy[] = [];
-  const { data: agentPoliciesData, error: err } = useGetAgentPolicies({
-    page: 1,
-    perPage: SO_SEARCH_LIMIT,
-    sortField: 'name',
-    sortOrder: 'asc',
-    full: false, // package_policies will always be empty
-    noAgentCount: true, // agentPolicy.agents will always be 0
-  });
-  if (err) {
-    // eslint-disable-next-line no-console
-    console.debug('Could not retrieve agent policies');
-  }
-  existingAgentPolicies = useMemo(
-    () => agentPoliciesData?.items.filter((policy) => !policy.is_managed) || [],
-    [agentPoliciesData?.items]
-  );
+  const existingAgentPolicies: AgentPolicy[] = useAllNonManagedAgentPolicies();
 
   useEffect(() => {
     if (existingAgentPolicies.length > 0) {

diff --git a/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx b/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx
@@ -28,6 +28,20 @@ import {
   useConfig,
 } from '../../../../hooks';
 
+jest.mock('../components/steps/components/use_policies', () => {
+  return {
+    ...jest.requireActual('../components/steps/components/use_policies'),
+    useAllNonManagedAgentPolicies: jest.fn().mockReturnValue([
+      {
+        id: 'agent-policy-1',
+        name: 'Agent policy 1',
+        namespace: 'default',
+        unprivileged_agents: 1,
+      },
+    ]),
+  };
+});
+
 jest.mock('../../../../hooks', () => {
   return {
     ...jest.requireActual('../../../../hooks'),
@@ -126,6 +140,8 @@ jest.mock('react-router-dom', () => ({
 
 import { AGENTLESS_POLICY_ID } from '../../../../../../../common/constants';
 
+import { useAllNonManagedAgentPolicies } from '../components/steps/components/use_policies';
+
 import { CreatePackagePolicySinglePage } from '.';
 import { SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ } from './components/setup_technology_selector';
 
@@ -702,6 +718,9 @@ describe('When on the package policy create page', () => {
           isLoading: false,
           resendRequest: jest.fn(),
         });
+        (useAllNonManagedAgentPolicies as jest.MockedFunction<any>).mockReturnValue([
+          { id: AGENTLESS_POLICY_ID, name: 'Agentless CSPM', namespace: 'default' },
+        ]);
 
         await act(async () => {
           render();