Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(JsonViewer): handle case sensitive search #1966

Merged
merged 1 commit into from
Feb 18, 2025
+41 −13
Merged

fix(JsonViewer): handle case sensitive search #1966

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Loading status checks…
fix(JsonViewer): handle case sensitive search
@Raubzeug
Raubzeug committed Feb 18, 2025
commit 53ac6e4cc2fefa68f1b5642eb4dcc1588f98be37
28 changes: 25 additions & 3 deletions src/components/JsonViewer/JsonViewer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
26 changes: 16 additions & 10 deletions src/components/JsonViewer/components/Filter.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>

Unchanged files with check annotations Beta

View file
config-overrides.js
});
if (env === 'production') {
config.output.path = path.resolve(__dirname, 'build/');

Check warning on line 35 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
}
config.plugins.push(
new MonacoWebpackPlugin({
// By default jest does not transform anything in node_modules
// So this override excludes node_modules except @gravity-ui
// see https://github.com/timarney/react-app-rewired/issues/241
config.transformIgnorePatterns = ['node_modules/(?!(@gravity-ui)/)'];

Check warning on line 61 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
// Add .github directory to roots
config.roots = ['<rootDir>/src', '<rootDir>/.github'];

Check warning on line 64 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
// Update testMatch to include .github directory
config.testMatch = [

Check warning on line 67 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
'<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
'<rootDir>/.github/**/*.{spec,test}.{js,jsx,ts,tsx}',
View file
src/components/ComponentsProvider/registry.ts
type RegistryEntity<T = any> = T;

Check warning on line 1 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
type RegistryEntities = Record<string, RegistryEntity>;
export class Registry<Entities extends RegistryEntities = {}> {
type?: Entities;
private entities: any = {};

Check warning on line 7 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
set<Id extends keyof Entities>(id: Id, entity: Entities[Id]) {
this.entities[id] = entity;
}
type ComponentType<T> =
T extends React.ComponentType<any>

Check warning on line 27 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
? React.ComponentType<React.ComponentPropsWithoutRef<T>>
: never;
View file
src/components/Illustration/Illustration.tsx
className?: string;
}
type IllustrationStore = Record<string, Record<string, () => Promise<{default: any}>>>;

Check warning on line 12 in src/components/Illustration/Illustration.tsx

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
const store: IllustrationStore = {
light: {
srcGetter()
.then((svg) => setSrc(svg.default))
.catch((e) => {
console.error(e);

Check warning on line 39 in src/components/Illustration/Illustration.tsx

GitHub Actions / Verify Files 

Unexpected console statement
setSrc('');
});
}
View file
src/components/InfoViewer/utils.ts
defaultValueFormatter?: (value: Shape[keyof Shape]) => React.ReactNode;
}
export function createInfoFormatter<Shape extends Record<string, any>>({

Check warning on line 35 in src/components/InfoViewer/utils.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
values: valueFormatters,
labels: labelMap,
defaultValueFormatter,