Fix bug found by integration test and improve code

elastic · Oct 3, 2022 · bcbebc1 · bcbebc1
1 parent 05fbdbf
commit bcbebc1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/...k/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.tsx b/...k/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.tsx
@@ -43,7 +43,7 @@ import { useUiSetting$ } from '../../lib/kibana';
 import { defaultAlertsFilters } from '../events_viewer/external_alerts_filter';
 
 import {
-  useInitialUrlParamValue,
+  useGetInitialUrlParamValue,
   useReplaceUrlParams,
 } from '../../utils/global_query_string/helpers';
 
@@ -83,35 +83,14 @@ const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> =
     () => getDefaultControlColumn(ACTION_BUTTON_COUNT),
     [ACTION_BUTTON_COUNT]
   );
-  const replaceUrlParams = useReplaceUrlParams();
 
-  const { decodedParam: showExternalAlertsInitialUrlState } =
-    useInitialUrlParamValue<boolean>(EXTERNAL_ALERTS_URL_PARAM);
+  const showExternalAlertsInitialUrlState = useExternalAlertsInitialUrlState();
 
   const [showExternalAlerts, setShowExternalAlerts] = useState(
     showExternalAlertsInitialUrlState ?? false
   );
 
-  useEffect(() => {
-    replaceUrlParams([
-      {
-        key: EXTERNAL_ALERTS_URL_PARAM,
-        value: showExternalAlerts ? 'true' : null,
-      },
-    ]);
-  }, [showExternalAlerts, replaceUrlParams]);
-
-  useEffect(() => {
-    // Only called on component unmount
-    return () => {
-      replaceUrlParams([
-        {
-          key: EXTERNAL_ALERTS_URL_PARAM,
-          value: null,
-        },
-      ]);
-    };
-  }, [replaceUrlParams]);
+  useSyncExternalAlertsUrlState(showExternalAlerts);
 
   const toggleExternalAlerts = useCallback(() => setShowExternalAlerts((s) => !s), []);
   const getHistogramSubtitle = useMemo(
@@ -213,3 +192,43 @@ EventsQueryTabBodyComponent.displayName = 'EventsQueryTabBodyComponent';
 export const EventsQueryTabBody = React.memo(EventsQueryTabBodyComponent);
 
 EventsQueryTabBody.displayName = 'EventsQueryTabBody';
+
+const useExternalAlertsInitialUrlState = () => {
+  const replaceUrlParams = useReplaceUrlParams();
+
+  const getInitialUrlParamValue = useGetInitialUrlParamValue<boolean>(EXTERNAL_ALERTS_URL_PARAM);
+
+  const { decodedParam: showExternalAlertsInitialUrlState } = useMemo(
+    () => getInitialUrlParamValue(),
+    [getInitialUrlParamValue]
+  );
+
+  useEffect(() => {
+    // Only called on component unmount
+    return () => {
+      replaceUrlParams([
+        {
+          key: EXTERNAL_ALERTS_URL_PARAM,
+          value: null,
+        },
+      ]);
+    };
+  }, [replaceUrlParams]);
+
+  return showExternalAlertsInitialUrlState;
+};
+
+/**
+ * Update URL state when showExternalAlerts value changes
+ */
+const useSyncExternalAlertsUrlState = (showExternalAlerts: boolean) => {
+  const replaceUrlParams = useReplaceUrlParams();
+  useEffect(() => {
+    replaceUrlParams([
+      {
+        key: EXTERNAL_ALERTS_URL_PARAM,
+        value: showExternalAlerts ? 'true' : null,
+      },
+    ]);
+  }, [showExternalAlerts, replaceUrlParams]);
+};
diff --git a/x-pack/plugins/security_solution/public/common/utils/global_query_string/helpers.ts b/x-pack/plugins/security_solution/public/common/utils/global_query_string/helpers.ts
@@ -10,7 +10,7 @@ import type { ParsedQuery } from 'query-string';
 import { parse, stringify } from 'query-string';
 import { url } from '@kbn/kibana-utils-plugin/public';
 import { useHistory } from 'react-router-dom';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { SecurityPageName } from '../../../app/types';
 
 export const isDetectionsPages = (pageName: string) =>
@@ -51,10 +51,10 @@ export const getParamFromQueryString = (
  * It doesn't update when the URL changes.
  *
  */
-export const useInitialUrlParamValue = <State>(urlParamKey: string) => {
+export const useGetInitialUrlParamValue = <State>(urlParamKey: string) => {
   // window.location.search provides the most updated representation of the url search.
   // It also guarantees that we don't overwrite URL param managed outside react-router.
-  const result = useMemo(() => {
+  const getInitialUrlParamValue = useCallback(() => {
     const param = getParamFromQueryString(
       getQueryStringFromLocation(window.location.search),
       urlParamKey
@@ -65,7 +65,7 @@ export const useInitialUrlParamValue = <State>(urlParamKey: string) => {
     return { param, decodedParam };
   }, [urlParamKey]);
 
-  return result;
+  return getInitialUrlParamValue;
 };
 
 export const encodeQueryString = (urlParams: ParsedQuery<string>): string =>

diff --git a/x-pack/plugins/security_solution/public/common/utils/global_query_string/index.ts b/x-pack/plugins/security_solution/public/common/utils/global_query_string/index.ts
@@ -12,7 +12,7 @@ import usePrevious from 'react-use/lib/usePrevious';
 import {
   encodeQueryString,
   encodeRisonUrlState,
-  useInitialUrlParamValue,
+  useGetInitialUrlParamValue,
   useReplaceUrlParams,
 } from './helpers';
 import { useShallowEqualSelector } from '../../hooks/use_selector';
@@ -37,10 +37,12 @@ export const useInitializeUrlParam = <State>(
   onInitialize: (state: State | null) => void
 ) => {
   const dispatch = useDispatch();
-  const { param: initialValue, decodedParam: decodedInitialValue } =
-    useInitialUrlParamValue<State>(urlParamKey);
+
+  const getInitialUrlParamValue = useGetInitialUrlParamValue<State>(urlParamKey);
 
   useEffect(() => {
+    const { param: initialValue, decodedParam: decodedInitialValue } = getInitialUrlParamValue();
+
     dispatch(
       globalUrlParamActions.registerUrlParam({
         key: urlParamKey,