fix(JsonViewer): handle case sensitive search (#1966)

Author: Raubzeug

src/components/JsonViewer/JsonViewer.tsx

@@ -96,7 +96,10 @@ export function JsonViewer({
     extraTools,
     collapsedInitially,
 }: JsonViewerProps) {
-    const [caseSensitiveSearch] = useSetting(CASE_SENSITIVE_JSON_SEARCH, false);
+    const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
+        CASE_SENSITIVE_JSON_SEARCH,
+        false,
+    );
 
     const [collapsedState, setCollapsedState] = React.useState<CollapsedState>(() => {
         if (collapsedInitially) {
@@ -155,13 +158,16 @@ export function JsonViewer({
     };
 
     const updateState = (
-        changedState: Partial<Pick<State, 'collapsedState' | 'filter' | 'matchIndex'>>,
+        changedState: Partial<Pick<State, 'collapsedState' | 'filter' | 'matchIndex'>> & {
+            caseSensitive?: boolean;
+        },
         cb?: () => void,
     ) => {
         const {
             collapsedState: newCollapsedState,
             matchIndex: newMatchIndex,
             filter: newFilter,
+            caseSensitive: newCaseSensitive,
         } = changedState;
 
         if (newCollapsedState !== undefined) {
@@ -173,7 +179,15 @@ export function JsonViewer({
         if (newFilter !== undefined) {
             setFilter(newFilter);
         }
-        setState(calculateState(value, newCollapsedState ?? collapsedState, newFilter ?? filter));
+        const caseSensitive = newCaseSensitive ?? caseSensitiveSearch;
+        setState(
+            calculateState(
+                value,
+                newCollapsedState ?? collapsedState,
+                newFilter ?? filter,
+                caseSensitive,
+            ),
+        );
 
         cb?.();
     };
@@ -254,6 +268,12 @@ export function JsonViewer({
         }
     };
 
+    const handleUpdateCaseSensitive = () => {
+        const newCaseSensitive = !caseSensitiveSearch;
+        setCaseSensitiveSearch(newCaseSensitive);
+        updateState({caseSensitive: newCaseSensitive});
+    };
+
     const renderToolbar = () => {
         return (
             <Flex gap={2} wrap="nowrap" className={block('toolbar')}>
@@ -279,6 +299,8 @@ export function JsonViewer({
                         onKeyDown={onEnterKeyDown}
                         onNextMatch={onNextMatch}
                         onPrevMatch={onPrevMatch}
+                        caseSensitive={caseSensitiveSearch}
+                        onUpdateCaseSensitive={handleUpdateCaseSensitive}
                     />
                 )}
                 <span className={block('extra-tools')}>{extraTools}</span>

src/components/JsonViewer/components/Filter.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import {ActionTooltip, Button, Flex, Icon, TextInput} from '@gravity-ui/uikit';
 
-import {CASE_SENSITIVE_JSON_SEARCH} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
 import {block} from '../constants';
 import i18n from '../i18n';
 
@@ -19,16 +17,24 @@ interface FilterProps {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onNextMatch?: (_event: unknown, diff?: number) => void;
     onPrevMatch?: (_event: unknown, diff?: number) => void;
+    caseSensitive?: boolean;
+    onUpdateCaseSensitive: VoidFunction;
 }
 
 export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function Filter(
-    {matchIndex, matchedRows, value, onUpdate, onKeyDown, onNextMatch, onPrevMatch},
+    {
+        matchIndex,
+        matchedRows,
+        value,
+        onUpdate,
+        onKeyDown,
+        onNextMatch,
+        onPrevMatch,
+        caseSensitive,
+        onUpdateCaseSensitive,
+    },
     ref,
 ) {
-    const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
-        CASE_SENSITIVE_JSON_SEARCH,
-        false,
-    );
     const count = matchedRows.length;
     const matchPosition = count ? 1 + (matchIndex % count) : 0;
     return (
@@ -47,15 +53,15 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
                 endContent={
                     <ActionTooltip
                         title={
-                            caseSensitiveSearch
+                            caseSensitive
                                 ? i18n('context_case-sensitive-search')
                                 : i18n('context_case-sensitive-search-disabled')
                         }
                     >
                         <Button
                             view="flat-secondary"
-                            onClick={() => setCaseSensitiveSearch(!caseSensitiveSearch)}
-                            selected={caseSensitiveSearch}
+                            onClick={onUpdateCaseSensitive}
+                            selected={caseSensitive}
                         >
                             <Icon data={FontCaseIcon} />
                         </Button>