fix(webui): Respect case sensitivity setting in search queries (fixes #1060); refactor Zustand usages. (#1063)

Co-authored-by: Marco <[email protected]>

Author: davemarco

components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx

@@ -1,4 +1,6 @@
 import {
+    ChangeEvent,
+    useCallback,
     useEffect,
     useRef,
     useState,
@@ -21,16 +23,22 @@ import {
  * @return
  */
 const QueryInput = () => {
-    const {
-        queryString,
-        queryIsCaseSensitive,
-        updateQueryString,
-        updateQueryIsCaseSensitive,
-        searchUiState,
-    } = useSearchStore();
+    const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive);
+    const queryString = useSearchStore((state) => state.queryString);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
     const [pseudoProgress, setPseudoProgress] = useState<Nullable<number>>(null);
     const intervalIdRef = useRef<number>(0);
 
+    const handleCaseSensitiveChange = useCallback((newValue: boolean) => {
+        const {updateQueryIsCaseSensitive} = useSearchStore.getState();
+        updateQueryIsCaseSensitive(newValue);
+    }, []);
+
+    const handleChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
+        const {updateQueryString} = useSearchStore.getState();
+        updateQueryString(ev.target.value);
+    }, []);
+
     useEffect(() => {
         if (searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING) {
             if (0 !== intervalIdRef.current) {
@@ -70,12 +78,8 @@ const QueryInput = () => {
                 searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                 searchUiState === SEARCH_UI_STATE.QUERYING
             }
-            onCaseSensitiveChange={(newValue) => {
-                updateQueryIsCaseSensitive(newValue);
-            }}
-            onChange={(e) => {
-                updateQueryString(e.target.value);
-            }}/>
+            onCaseSensitiveChange={handleCaseSensitiveChange}
+            onChange={handleChange}/>
     );
 };
 

components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx

@@ -19,25 +19,29 @@ import styles from "./index.module.css";
  * @return
  */
 const SubmitButton = () => {
-    const {searchUiState, timeRange, queryString, updateTimelineConfig} = useSearchStore();
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const queryString = useSearchStore((state) => state.queryString);
+    const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive);
+    const timeRange = useSearchStore((state) => state.timeRange);
 
     /**
      * Submits search query.
      */
     const handleSubmitButtonClick = useCallback(() => {
         // Update timeline to match range picker selection.
         const newTimelineConfig = computeTimelineConfig(timeRange);
+        const {updateTimelineConfig} = useSearchStore.getState();
         updateTimelineConfig(newTimelineConfig);
 
         handleQuerySubmit({
-            ignoreCase: false,
+            ignoreCase: false === queryIsCaseSensitive,
             queryString: queryString,
             timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(),
             timestampBegin: timeRange[0].valueOf(),
             timestampEnd: timeRange[1].valueOf(),
         });
     }, [queryString,
-        updateTimelineConfig,
+        queryIsCaseSensitive,
         timeRange]);
 
     const isQueryStringEmpty = queryString === SEARCH_STATE_DEFAULT.queryString;

components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx

@@ -1,4 +1,7 @@
-import {useEffect} from "react";
+import {
+    useCallback,
+    useEffect,
+} from "react";
 
 import {Card} from "antd";
 import {Dayjs} from "dayjs";
@@ -19,32 +22,18 @@ import {computeTimelineConfig} from "./utils";
  * @return
  */
 const SearchResultsTimeline = () => {
-    const {
-        queryString,
-        updateTimeRange,
-        updateTimeRangeOption,
-        timelineConfig,
-        searchUiState,
-        updateTimelineConfig,
-        updateNumSearchResultsTimeline,
-    } = useSearchStore();
+    const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive);
+    const queryString = useSearchStore((state) => state.queryString);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const timelineConfig = useSearchStore((state) => state.timelineConfig);
 
     const aggregationResults = useAggregationResults();
 
-    useEffect(() => {
-        const numSearchResultsTimeline = aggregationResults?.reduce(
-            (acc, curr) => acc + curr.count,
-            0
-        ) ?? 0;
-
-        updateNumSearchResultsTimeline(numSearchResultsTimeline);
-    }, [
-        aggregationResults,
-        updateNumSearchResultsTimeline,
-    ]);
-
-    const handleTimelineZoom = (newTimeRange: [Dayjs, Dayjs]) => {
+    const handleTimelineZoom = useCallback((newTimeRange: [Dayjs, Dayjs]) => {
         const newTimelineConfig: TimelineConfig = computeTimelineConfig(newTimeRange);
+        const {
+            updateTimeRange, updateTimeRangeOption, updateTimelineConfig,
+        } = useSearchStore.getState();
 
         // Update range picker selection to match zoomed range.
         updateTimeRange(newTimeRange);
@@ -57,13 +46,31 @@ const SearchResultsTimeline = () => {
         }
 
         handleQuerySubmit({
-            ignoreCase: false,
+            ignoreCase: false === queryIsCaseSensitive,
             queryString: queryString,
             timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(),
             timestampBegin: newTimeRange[0].valueOf(),
             timestampEnd: newTimeRange[1].valueOf(),
         });
-    };
+    }, [
+        queryIsCaseSensitive,
+        queryString,
+    ]);
+
+    useEffect(() => {
+        const numSearchResultsTimeline = aggregationResults?.reduce(
+            (acc, curr) => acc + curr.count,
+            0
+        ) ?? 0;
+
+        const {
+            updateNumSearchResultsTimeline,
+        } = useSearchStore.getState();
+
+        updateNumSearchResultsTimeline(numSearchResultsTimeline);
+    }, [
+        aggregationResults,
+    ]);
 
     return (
         <Card>