[SECURITY_SOLUTION][ENDPOINT] Fix Endpoint Hosts crashing periodically when switching between policy responses from linux and windows (#73809)

* Fix use of hooks in policy response
* Additional fixes to use of `useMemo`
* Added error boundary to management pages

x-pack/plugins/security_solution/public/management/components/management_page_view.tsx

@@ -5,10 +5,15 @@
  */
 
 import React, { memo } from 'react';
+import { EuiErrorBoundary } from '@elastic/eui';
 import { PageView, PageViewProps } from '../../common/components/endpoint/page_view';
 
 export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) => {
-  return <PageView {...options} />;
+  return (
+    <EuiErrorBoundary>
+      <PageView {...options} />
+    </EuiErrorBoundary>
+  );
 });
 
 ManagementPageView.displayName = 'ManagementPageView';

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx

@@ -140,20 +140,16 @@ export const PolicyResponse = memo(
     responseActions: Immutable<HostPolicyResponseAppliedAction[]>;
     responseAttentionCount: Map<string, number>;
   }) => {
+    const generateId = useMemo(() => htmlIdGenerator(), []);
+
     return (
       <>
         {Object.entries(responseConfig).map(([key, val]) => {
           const attentionCount = responseAttentionCount.get(key);
           return (
             <PolicyResponseConfigAccordion
-              id={
-                /* eslint-disable-next-line react-hooks/rules-of-hooks */
-                useMemo(() => htmlIdGenerator()(), [])
-              }
-              key={
-                /* eslint-disable-next-line react-hooks/rules-of-hooks */
-                useMemo(() => htmlIdGenerator()(), [])
-              }
+              id={generateId(`id_${key}`)}
+              key={generateId(`key_${key}`)}
               data-test-subj="hostDetailsPolicyResponseConfigAccordion"
               buttonContent={
                 <EuiText size="s">

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/events/checkbox.tsx

@@ -27,6 +27,7 @@ export const EventsCheckbox = React.memo(function ({
   const policyDetailsConfig = usePolicyDetailsSelector(policyConfig);
   const selected = getter(policyDetailsConfig);
   const dispatch = useDispatch<(action: PolicyDetailsAction) => void>();
+  const checkboxId = useMemo(() => htmlIdGenerator()(), []);
 
   const handleCheckboxChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -42,7 +43,7 @@ export const EventsCheckbox = React.memo(function ({
 
   return (
     <EuiCheckbox
-      id={useMemo(() => htmlIdGenerator()(), [])}
+      id={checkboxId}
       label={name}
       checked={selected}
       onChange={handleCheckboxChange}

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx

@@ -41,6 +41,7 @@ const protection = 'malware';
 const ProtectionRadio = React.memo(({ id, label }: { id: ProtectionModes; label: string }) => {
   const policyDetailsConfig = usePolicyDetailsSelector(policyConfig);
   const dispatch = useDispatch();
+  const radioButtonId = useMemo(() => htmlIdGenerator()(), []);
   // currently just taking windows.malware, but both windows.malware and mac.malware should be the same value
   const selected = policyDetailsConfig && policyDetailsConfig.windows.malware.mode;
 
@@ -66,7 +67,7 @@ const ProtectionRadio = React.memo(({ id, label }: { id: ProtectionModes; label:
     <EuiRadio
       className="policyDetailsProtectionRadio"
       label={label}
-      id={useMemo(() => htmlIdGenerator()(), [])}
+      id={radioButtonId}
       checked={selected === id}
       onChange={handleRadioChange}
       disabled={selected === ProtectionModes.off}

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

@@ -377,6 +377,22 @@ export const PolicyList = React.memo(() => {
     [services.application, handleDeleteOnClick, formatUrl, search]
   );
 
+  const bodyContent = useMemo(() => {
+    return policyItems && policyItems.length > 0 ? (
+      <EuiBasicTable
+        items={[...policyItems]}
+        columns={columns}
+        loading={loading}
+        pagination={paginationSetup}
+        onChange={handleTableChange}
+        data-test-subj="policyTable"
+        hasActions={false}
+      />
+    ) : (
+      <PolicyEmptyState loading={loading} onActionClick={handleCreatePolicyClick} />
+    );
+  }, [policyItems, loading, columns, handleCreatePolicyClick, handleTableChange, paginationSetup]);
+
   return (
     <>
       {showDelete && (
@@ -449,32 +465,7 @@ export const PolicyList = React.memo(() => {
             <EuiHorizontalRule margin="xs" />
           </>
         )}
-        {useMemo(() => {
-          return (
-            <>
-              {policyItems && policyItems.length > 0 ? (
-                <EuiBasicTable
-                  items={[...policyItems]}
-                  columns={columns}
-                  loading={loading}
-                  pagination={paginationSetup}
-                  onChange={handleTableChange}
-                  data-test-subj="policyTable"
-                  hasActions={false}
-                />
-              ) : (
-                <PolicyEmptyState loading={loading} onActionClick={handleCreatePolicyClick} />
-              )}
-            </>
-          );
-        }, [
-          policyItems,
-          loading,
-          columns,
-          handleCreatePolicyClick,
-          handleTableChange,
-          paginationSetup,
-        ])}
+        {bodyContent}
         <SpyRoute pageName={SecurityPageName.administration} />
       </ManagementPageView>
     </>