feat(JSONTree): allow case insensitive search

Author: Raubzeug

src/components/JSONTreeWithSearch/JSONTreeWithSearch.scss

@@ -0,0 +1,20 @@
+@use '../../styles/mixins.scss';
+
+.ydb-json-tree-with-search {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+    &__tree {
+        @include mixins.json-tree-styles();
+    }
+    &__case {
+        position: absolute;
+        top: 0;
+        left: 308px;
+    }
+
+    .json-inspector__search {
+        height: 26px;
+    }
+}

src/components/JSONTreeWithSearch/JSONTreeWithSearch.tsx

@@ -0,0 +1,56 @@
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
+import JSONTree from 'react-json-inspector';
+
+import {cn} from '../../utils/cn';
+import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+
+import i18n from './i18n';
+
+import FontCaseIcon from '@gravity-ui/icons/svgs/font-case.svg';
+
+import './JSONTreeWithSearch.scss';
+import 'react-json-inspector/json-inspector.css';
+
+const b = cn('ydb-json-tree-with-search');
+
+interface JSONTreeWithSearchProps extends React.ComponentProps<typeof JSONTree> {
+    treeClassName?: string;
+}
+
+export function JSONTreeWithSearch({treeClassName, ...rest}: JSONTreeWithSearchProps) {
+    const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
+        CASE_SENSITIVE_JSON_SEARCH,
+        false,
+    );
+    return (
+        <div className={b()}>
+            <JSONTree
+                className={b('tree', treeClassName)}
+                filterOptions={{
+                    ignoreCase: !caseSensitiveSearch,
+                }}
+                searchOptions={{
+                    debounceTime: 300,
+                }}
+                {...rest}
+            />
+            <ActionTooltip
+                title={
+                    caseSensitiveSearch
+                        ? i18n('context_case-sensitive-search')
+                        : i18n('context_case-sensitive-search-disabled')
+                }
+            >
+                <Button
+                    view="outlined"
+                    className={b('case')}
+                    onClick={() => setCaseSensitiveSearch(!caseSensitiveSearch)}
+                    selected={caseSensitiveSearch}
+                >
+                    <Icon data={FontCaseIcon} />
+                </Button>
+            </ActionTooltip>
+        </div>
+    );
+}

src/components/JSONTreeWithSearch/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "context_case-sensitive-search": "Case sensitive search enadled",
+  "context_case-sensitive-search-disabled": "Case sensitive search disabled"
+}

src/components/JSONTreeWithSearch/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-json-tree-with-search';
+
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/Diagnostics/Describe/Describe.scss

@@ -15,16 +15,8 @@
         padding: 0 20px 20px 0;
     }
 
-    &__tree {
-        @include mixins.json-tree-styles();
-    }
-
     &__copy {
         position: absolute;
-        left: 308px;
-    }
-
-    .json-inspector__search {
-        height: 26px;
+        left: 340px;
     }
 }

src/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -1,8 +1,8 @@
 import {ClipboardButton} from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
 import {shallowEqual} from 'react-redux';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
+import {JSONTreeWithSearch} from '../../../../components/JSONTreeWithSearch/JSONTreeWithSearch';
 import {Loader} from '../../../../components/Loader';
 import {
     selectSchemaMergedChildrenPaths,
@@ -14,7 +14,6 @@ import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks'
 import {isEntityWithMergedImplementation} from '../../utils/schema';
 
 import './Describe.scss';
-import 'react-json-inspector/json-inspector.css';
 
 const b = cn('ydb-describe');
 
@@ -72,16 +71,12 @@ const Describe = ({path, database, type}: IDescribeProps) => {
             {error ? <ResponseError error={error} /> : null}
             {preparedDescribeData ? (
                 <div className={b('result')}>
-                    <JSONTree
+                    <JSONTreeWithSearch
                         data={preparedDescribeData}
-                        className={b('tree')}
                         onClick={({path}) => {
                             const newValue = !(expandMap.get(path) || false);
                             expandMap.set(path, newValue);
                         }}
-                        searchOptions={{
-                            debounceTime: 300,
-                        }}
                         isExpanded={(keypath) => {
                             return expandMap.get(keypath) || false;
                         }}

src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss

@@ -1,12 +1,9 @@
-@use '../../../../../../styles/mixins.scss';
-
 .ydb-query-json-viewer {
     &__inspector {
         overflow-y: auto;
 
         width: 100%;
         height: 100%;
         padding: 15px 10px;
-        @include mixins.json-tree-styles();
     }
 }

src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx

@@ -1,9 +1,7 @@
-import JSONTree from 'react-json-inspector';
-
+import {JSONTreeWithSearch} from '../../../../../../components/JSONTreeWithSearch/JSONTreeWithSearch';
 import {cn} from '../../../../../../utils/cn';
 
 import './QueryJSONViewer.scss';
-import 'react-json-inspector/json-inspector.css';
 
 const b = cn('ydb-query-json-viewer');
 
@@ -13,13 +11,8 @@ interface QueryJSONViewerProps {
 
 export function QueryJSONViewer({data}: QueryJSONViewerProps) {
     return (
-        <JSONTree
-            data={data}
-            isExpanded={() => true}
-            className={b('inspector')}
-            searchOptions={{
-                debounceTime: 300,
-            }}
-        />
+        <div className={b('inspector')}>
+            <JSONTreeWithSearch data={data} isExpanded={() => true} />
+        </div>
     );
 }

src/services/settings.ts

@@ -4,6 +4,7 @@ import {
     AUTOCOMPLETE_ON_ENTER,
     AUTO_REFRESH_INTERVAL,
     BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
+    CASE_SENSITIVE_JSON_SEARCH,
     ENABLE_AUTOCOMPLETE,
     ENABLE_NETWORK_TABLE_KEY,
     INVERTED_DISKS_KEY,
@@ -46,6 +47,7 @@ export const DEFAULT_USER_SETTINGS = {
     [AUTOCOMPLETE_ON_ENTER]: true,
     [IS_HOTKEYS_HELP_HIDDEN_KEY]: false,
     [AUTO_REFRESH_INTERVAL]: 0,
+    [CASE_SENSITIVE_JSON_SEARCH]: false,
     [SHOW_DOMAIN_DATABASE_KEY]: false,
     [LAST_QUERY_EXECUTION_SETTINGS_KEY]: undefined,
     [QUERY_SETTINGS_BANNER_LAST_CLOSED_KEY]: undefined,

src/utils/constants.ts

@@ -93,6 +93,8 @@ export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
 export const BINARY_DATA_IN_PLAIN_TEXT_DISPLAY = 'binaryDataInPlainTextDisplay';
 export const AUTO_REFRESH_INTERVAL = 'auto-refresh-interval';
 
+export const CASE_SENSITIVE_JSON_SEARCH = 'caseSensitiveJsonSearch';
+
 export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
 export const DEFAULT_SIZE_TENANT_SUMMARY_KEY = 'default-size-tenant-summary-pane';
 export const DEFAULT_SIZE_TENANT_KEY = 'default-size-tenant-pane';