[Security Solution][Endpoint] Un-skip Policy Details FTR test suite and fix bug in Policy Details page when saving changes (#115662) (#116643)

* unskip test suite
* Fix functional tests and some refactoring
* Refactor Policy Details test and centralize getting of Agent Policy combined input for endpoint
* Change approach for checking policy data in fleet pages
* Change Policy Settings displayed in Fleet to a) show a loader while retrieving settings and b) show loading errors if any
* Close any visible toasts before clicking on the save button

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useEffect, useState, useMemo } from 'react';
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiCallOut, EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useDispatch } from 'react-redux';
@@ -23,7 +23,11 @@ import { getPolicyDetailPath, getPolicyTrustedAppsPath } from '../../../../commo
 import { PolicyDetailsForm } from '../policy_details_form';
 import { AppAction } from '../../../../../common/store/actions';
 import { usePolicyDetailsSelector } from '../policy_hooks';
-import { policyDetailsForUpdate } from '../../store/policy_details/selectors';
+import {
+  apiError,
+  policyDetails,
+  policyDetailsForUpdate,
+} from '../../store/policy_details/selectors';
 import { FleetTrustedAppsCard } from './endpoint_package_custom_extension/components/fleet_trusted_apps_card';
 import { LinkWithIcon } from './endpoint_package_custom_extension/components/link_with_icon';
 /**
@@ -48,6 +52,8 @@ const WrappedPolicyDetailsForm = memo<{
 }>(({ policyId, onChange }) => {
   const dispatch = useDispatch<(a: AppAction) => void>();
   const updatedPolicy = usePolicyDetailsSelector(policyDetailsForUpdate);
+  const endpointPolicyDetails = usePolicyDetailsSelector(policyDetails);
+  const endpointDetailsLoadingError = usePolicyDetailsSelector(apiError);
   const { getAppUrl } = useAppUrl();
   const [, setLastUpdatedPolicy] = useState(updatedPolicy);
   // TODO: Remove this and related code when removing FF
@@ -185,7 +191,25 @@ const WrappedPolicyDetailsForm = memo<{
               </h5>
             </EuiText>
             <EuiSpacer size="s" />
-            <PolicyDetailsForm />
+            {endpointDetailsLoadingError ? (
+              <EuiCallOut
+                title={
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.policyDetails.loadError"
+                    defaultMessage="Failed to load endpoint policy settings"
+                  />
+                }
+                iconType="alert"
+                color="warning"
+                data-test-subj="endpiontPolicySettingsLoadingError"
+              >
+                {endpointDetailsLoadingError.message}
+              </EuiCallOut>
+            ) : !endpointPolicyDetails ? (
+              <EuiLoadingSpinner size="l" className="essentialAnimation" />
+            ) : (
+              <PolicyDetailsForm />
+            )}
           </div>
         </>
       ) : (

x-pack/test/security_solution_endpoint/page_objects/policy_page.ts

@@ -5,11 +5,13 @@
  * 2.0.
  */
 
+import expect from '@kbn/expect';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const pageObjects = getPageObjects(['common', 'header']);
   const testSubjects = getService('testSubjects');
+  const retryService = getService('retry');
 
   return {
     /**
@@ -49,6 +51,34 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
       return await testSubjects.find('advancedPolicyButton');
     },
 
+    async isAdvancedSettingsExpanded() {
+      return await testSubjects.exists('advancedPolicyPanel');
+    },
+
+    /**
+     * shows the advanced settings section and scrolls it into view
+     */
+    async showAdvancedSettingsSection() {
+      if (!(await this.isAdvancedSettingsExpanded())) {
+        const expandButton = await this.findAdvancedPolicyButton();
+        await expandButton.click();
+      }
+
+      await testSubjects.existOrFail('advancedPolicyPanel');
+      await testSubjects.scrollIntoView('advancedPolicyPanel');
+    },
+
+    /**
+     * Hides the advanced settings section
+     */
+    async hideAdvancedSettingsSection() {
+      if (await this.isAdvancedSettingsExpanded()) {
+        const expandButton = await this.findAdvancedPolicyButton();
+        await expandButton.click();
+      }
+      await testSubjects.missingOrFail('advancedPolicyPanel');
+    },
+
     /**
      * Finds and returns the linux connection_delay Advanced Policy field
      */
@@ -69,7 +99,17 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
      */
     async confirmAndSave() {
       await this.ensureIsOnDetailsPage();
-      await (await this.findSaveButton()).click();
+
+      const saveButton = await this.findSaveButton();
+
+      // Sometimes, data retrieval errors may have been encountered by other security solution processes
+      // (ex. index fields search here: `x-pack/plugins/security_solution/public/common/containers/source/index.tsx:181`)
+      // which are displayed using one or more Toast messages. This in turn prevents the user from
+      // actually clicking the Save button. Because those errors are not associated with Policy details,
+      // we'll first check that all toasts are cleared
+      await pageObjects.common.clearAllToasts();
+
+      await saveButton.click();
       await testSubjects.existOrFail('policyDetailsConfirmModal');
       await pageObjects.common.clickConfirmOnModal();
     },
@@ -93,5 +133,19 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
     async findPackagePolicyEndpointCustomConfiguration(onEditPage: boolean = false) {
       return await testSubjects.find(`endpointPackagePolicy_${onEditPage ? 'edit' : 'create'}`);
     },
+
+    /**
+     * Waits for a Checkbox/Radiobutton to have its `isSelected()` value match the provided expected value
+     * @param selector
+     * @param expectedSelectedValue
+     */
+    async waitForCheckboxSelectionChange(
+      selector: string,
+      expectedSelectedValue: boolean
+    ): Promise<void> {
+      await retryService.try(async () => {
+        expect(await testSubjects.isSelected(selector)).to.be(expectedSelectedValue);
+      });
+    },
   };
 }