feat(JSONTree): allow case insensitive search (#1735)

Author: Raubzeug

src/components/JSONTree/JSONTree.scss

@@ -0,0 +1,20 @@
+@use '../../styles/mixins.scss';
+
+.ydb-json-tree {
+    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/JSONTree/JSONTree.tsx

@@ -0,0 +1,61 @@
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
+import JSONTreeBase 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 './JSONTree.scss';
+import 'react-json-inspector/json-inspector.css';
+
+const b = cn('ydb-json-tree');
+
+const DEBAUNCE_TIME = 300;
+
+interface JSONTreeProps extends React.ComponentProps<typeof JSONTreeBase> {
+    search?: false;
+    treeClassName?: string;
+}
+
+export function JSONTree({treeClassName, search, ...rest}: JSONTreeProps) {
+    const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
+        CASE_SENSITIVE_JSON_SEARCH,
+        false,
+    );
+    return (
+        <div className={b()}>
+            <JSONTreeBase
+                className={b('tree', treeClassName)}
+                filterOptions={{
+                    ignoreCase: !caseSensitiveSearch,
+                }}
+                searchOptions={{
+                    debounceTime: DEBAUNCE_TIME,
+                }}
+                {...rest}
+            />
+            {search !== false && (
+                <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/JSONTree/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/JSONTree/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-json-tree';
+
+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 {JSONTree} from '../../../../components/JSONTree/JSONTree';
 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');
 
@@ -74,14 +73,10 @@ const Describe = ({path, database, type}: IDescribeProps) => {
                 <div className={b('result')}>
                     <JSONTree
                         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/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss

@@ -23,8 +23,6 @@
     }
 
     &__inspector {
-        @include mixins.json-tree-styles();
-
         :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before {
             content: '';
         }

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import _omit from 'lodash/omit';
-import JSONTree from 'react-json-inspector';
 import {TreeView} from 'ydb-ui-components';
 
+import {JSONTree} from '../../../../../../components/JSONTree/JSONTree';
 import type {IssuesTree} from '../../../../../../store/reducers/healthcheckInfo/types';
 import {hcStatusToColorFlag} from '../../../../../../store/reducers/healthcheckInfo/utils';
 import {cn} from '../../../../../../utils/cn';
@@ -32,7 +32,7 @@ const IssueTree = ({issueTree}: IssuesViewerProps) => {
                     data={info}
                     search={false}
                     isExpanded={() => true}
-                    className={b('inspector')}
+                    treeClassName={b('inspector')}
                 />
             </div>
         );

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 {JSONTree} from '../../../../../../components/JSONTree/JSONTree';
 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')}>
+            <JSONTree data={data} isExpanded={() => true} />
+        </div>
     );
 }