diff --git a/src/components/JSONTree/JSONTree.scss b/src/components/JSONTree/JSONTree.scss new file mode 100644 index 0000000000..67f4595d4e --- /dev/null +++ b/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; + } +} diff --git a/src/components/JSONTree/JSONTree.tsx b/src/components/JSONTree/JSONTree.tsx new file mode 100644 index 0000000000..dc91f62029 --- /dev/null +++ b/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 { + search?: false; + treeClassName?: string; +} + +export function JSONTree({treeClassName, search, ...rest}: JSONTreeProps) { + const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting( + CASE_SENSITIVE_JSON_SEARCH, + false, + ); + return ( +
+ + {search !== false && ( + + + + )} +
+ ); +} diff --git a/src/components/JSONTree/i18n/en.json b/src/components/JSONTree/i18n/en.json new file mode 100644 index 0000000000..bff2f2ae88 --- /dev/null +++ b/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" +} diff --git a/src/components/JSONTree/i18n/index.ts b/src/components/JSONTree/i18n/index.ts new file mode 100644 index 0000000000..c475ebffc7 --- /dev/null +++ b/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}); diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.scss b/src/containers/Tenant/Diagnostics/Describe/Describe.scss index b8d8a57c0f..b56265cdc5 100644 --- a/src/containers/Tenant/Diagnostics/Describe/Describe.scss +++ b/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; } } diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx b/src/containers/Tenant/Diagnostics/Describe/Describe.tsx index b5bd408767..048fde4a5a 100644 --- a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx +++ b/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) => {
{ const newValue = !(expandMap.get(path) || false); expandMap.set(path, newValue); }} - searchOptions={{ - debounceTime: 300, - }} isExpanded={(keypath) => { return expandMap.get(keypath) || false; }} diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss index 91e4a98d85..2abe05bd65 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss +++ b/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: ''; } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx index 99152ce47f..b97a35e28c 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx +++ b/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')} />
); diff --git a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss b/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss index b668d3ba1b..c3bf594eda 100644 --- a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss +++ b/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss @@ -1,5 +1,3 @@ -@use '../../../../../../styles/mixins.scss'; - .ydb-query-json-viewer { &__inspector { overflow-y: auto; @@ -7,6 +5,5 @@ width: 100%; height: 100%; padding: 15px 10px; - @include mixins.json-tree-styles(); } } diff --git a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx b/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx index 393ca7657e..12bf8f29e3 100644 --- a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx +++ b/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 ( - true} - className={b('inspector')} - searchOptions={{ - debounceTime: 300, - }} - /> +
+ true} /> +
); } diff --git a/src/services/settings.ts b/src/services/settings.ts index fcdf6b0ec2..5485ed177f 100644 --- a/src/services/settings.ts +++ b/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, diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 6deaa75d4b..5bfacc13f6 100644 --- a/src/utils/constants.ts +++ b/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';