fix: review

Author: Raubzeug

src/components/JSONTreeWithSearch/JSONTreeWithSearch.scss renamed to src/components/JSONTree/JSONTree.scss

@@ -1,6 +1,6 @@
 @use '../../styles/mixins.scss';
 
-.ydb-json-tree-with-search {
+.ydb-json-tree {
     position: relative;
 
     width: 100%;

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> {
+    treeClassName?: string;
+}
+
+export function JSONTree({treeClassName, search = true, ...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,
+                }}
+                search={search}
+                {...rest}
+            />
+            {search && (
+                <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 renamed to src/components/JSONTree/i18n/en.json

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

src/components/JSONTreeWithSearch/i18n/index.ts renamed to src/components/JSONTree/i18n/index.ts

@@ -2,7 +2,7 @@ import {ClipboardButton} from '@gravity-ui/uikit';
 import {shallowEqual} from 'react-redux';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
-import {JSONTreeWithSearch} from '../../../../components/JSONTreeWithSearch/JSONTreeWithSearch';
+import {JSONTree} from '../../../../components/JSONTree/JSONTree';
 import {Loader} from '../../../../components/Loader';
 import {
     selectSchemaMergedChildrenPaths,
@@ -71,7 +71,7 @@ const Describe = ({path, database, type}: IDescribeProps) => {
             {error ? <ResponseError error={error} /> : null}
             {preparedDescribeData ? (
                 <div className={b('result')}>
-                    <JSONTreeWithSearch
+                    <JSONTree
                         data={preparedDescribeData}
                         onClick={({path}) => {
                             const newValue = !(expandMap.get(path) || false);

src/components/JSONTreeWithSearch/JSONTreeWithSearch.tsx

@@ -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/Describe/Describe.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/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss

@@ -1,4 +1,4 @@
-import {JSONTreeWithSearch} from '../../../../../../components/JSONTreeWithSearch/JSONTreeWithSearch';
+import {JSONTree} from '../../../../../../components/JSONTree/JSONTree';
 import {cn} from '../../../../../../utils/cn';
 
 import './QueryJSONViewer.scss';
@@ -12,7 +12,7 @@ interface QueryJSONViewerProps {
 export function QueryJSONViewer({data}: QueryJSONViewerProps) {
     return (
         <div className={b('inspector')}>
-            <JSONTreeWithSearch data={data} isExpanded={() => true} />
+            <JSONTree data={data} isExpanded={() => true} />
         </div>
     );
 }