[Defend Workflows]Changes to policy settings are not persistent until a refresh (#164403)

szwarckonrad · szwarckonrad · commit 46dd2d0fc87d · 2023-08-23T10:51:14.000Z
Closes elastic/security-team#7386 Dispatch an action that will update the stored policy upon successful saving of Policy Settings. This should occur only when no 'routeState' is being set, as in such a scenario, a page change triggers a refetch on its own. Even though redux was removed from Policy Settings in #161511 , the policy object that feeds the view is being fetched as a result of onUrlChange action and stored in the redux store. This should be addressed in the future. https://github.com/elastic/kibana/assets/29123534/cf008d0e-804a-49f9-a2f7-9bb7d1162b28 (cherry picked from commit 5eca861)
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_layout/policy_settings_layout.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_layout/policy_settings_layout.tsx
@@ -7,6 +7,7 @@
 
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
@@ -42,6 +43,7 @@ export const PolicySettingsLayout = memo<PolicySettingsLayoutProps>(({ policy: _
     },
   } = useKibana();
   const toasts = useToasts();
+  const dispatch = useDispatch();
   const { state: locationRouteState } = useLocation<PolicyDetailsRouteState>();
   const { canWritePolicyManagement } = useUserPrivileges().endpointPrivileges;
   const { isLoading: isUpdating, mutateAsync: sendPolicyUpdate } = useUpdateEndpointPolicy();
@@ -89,7 +91,7 @@ export const PolicySettingsLayout = memo<PolicySettingsLayoutProps>(({ policy: _
 
     update.inputs[0].config.policy.value = policySettings;
     sendPolicyUpdate({ policy: update })
-      .then(() => {
+      .then(({ item: policyItem }) => {
         toasts.addSuccess({
           'data-test-subj': 'policyDetailsSuccessMessage',
           title: i18n.translate(
@@ -109,6 +111,14 @@ export const PolicySettingsLayout = memo<PolicySettingsLayoutProps>(({ policy: _
 
         if (routeState && routeState.onSaveNavigateTo) {
           navigateToApp(...routeState.onSaveNavigateTo);
+        } else {
+          // Since the 'policyItem' is stored in a store and fetched as a result of an action on urlChange, we still need to dispatch an action even though Redux was removed from this component.
+          dispatch({
+            type: 'serverReturnedPolicyDetailsData',
+            payload: {
+              policyItem,
+            },
+          });
         }
       })
       .catch((err) => {
@@ -123,6 +133,7 @@ export const PolicySettingsLayout = memo<PolicySettingsLayoutProps>(({ policy: _
 
     handleSaveCancel();
   }, [
+    dispatch,
     handleSaveCancel,
     navigateToApp,
     policy,
