fix: review

Author: Raubzeug

src/components/JsonViewer/JsonViewer.tsx

@@ -198,17 +198,12 @@ export function JsonViewer({
                     data={data}
                     theme={'yson'}
                     settings={normalizedTableSettings}
-                    rowClassName={rowClassName}
+                    rowClassName={() => block('row')}
                 />
             </div>
         );
     };
 
-    const rowClassName = ({key}: UnipikaFlattenTreeItem) => {
-        const k = key?.$decoded_value ?? '';
-        return block('row', {key: asModifier(k)});
-    };
-
     const onExpandAll = () => {
         updateState({collapsedState: {}}, () => {
             onNextMatch(null, 0);
@@ -331,7 +326,3 @@ export function JsonViewer({
         </div>
     );
 }
-
-function asModifier(path = '') {
-    return path.replace(/[^-\w\d]/g, '_');
-}

src/components/JsonViewer/components/Cell.tsx

@@ -73,7 +73,7 @@ export function Cell(props: CellProps) {
             )}
             {collapsed && depth === undefined && <span className={'unipika'}>...</span>}
             {close && <OpenClose type={close} settings={settings} close />}
-            {hasDelimiter && <SlaveText text={','} />}
+            {hasDelimiter && <AdditionalText text={','} />}
         </div>
     );
 }
@@ -90,7 +90,7 @@ function Key(props: KeyProps) {
     return text ? (
         <React.Fragment>
             {text}
-            <SlaveText text={': '} />
+            <AdditionalText text={': '} />
         </React.Fragment>
     ) : null;
 }
@@ -117,7 +117,8 @@ function renderValueWithFilter(props: ValueProps, className: string) {
 function renderStringWithFilter(props: ValueProps, className: string, maxWidth = Infinity) {
     const {text, settings = defaultUnipikaSettings, matched = [], filter, showFullText} = props;
     const tmp = unipika.format(text, {...settings, asHTML: false});
-    const visible = tmp.substr(1, Math.min(tmp.length - 2, maxWidth));
+    const length = tmp.length;
+    const visible = tmp.substring(1, Math.min(length - 1, maxWidth + 1));
     const truncated = visible.length < tmp.length - 2;
     let hasHiddenMatch = false;
     if (truncated) {
@@ -178,17 +179,17 @@ function renderWithFilter(props: KeyProps, className: string) {
     return res ? res : null;
 }
 
-function SlaveText({text}: {text: string}) {
-    return <span className={''}>{text}</span>;
+function AdditionalText({text}: {text: string}) {
+    return <span>{text}</span>;
 }
 
 function OpenClose(props: {type: BlockType; close?: boolean; settings?: UnipikaSettings}) {
     const {type, close} = props;
     switch (type) {
         case 'array':
-            return <SlaveText text={close ? ']' : '['} />;
+            return <AdditionalText text={close ? ']' : '['} />;
         case 'object':
-            return <SlaveText text={close ? '}' : '{'} />;
+            return <AdditionalText text={close ? '}' : '{'} />;
     }
 }
 

src/components/JsonViewer/components/Filter.tsx

@@ -66,7 +66,7 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
                 <Button
                     className={block('match-btn')}
                     view="flat-secondary"
-                    title="Next"
+                    title={i18n('action_next')}
                     onClick={onNextMatch}
                     disabled={!count}
                 >
@@ -75,14 +75,14 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
                 <Button
                     className={block('match-btn')}
                     view="flat-secondary"
-                    title="Back"
+                    title={i18n('action_back')}
                     onClick={onPrevMatch}
                     disabled={!count}
                 >
                     <Icon data={ChevronUpIcon} />
                 </Button>
             </Flex>
-            <span className={block('match-counter')} title={'Matched rows'}>
+            <span className={block('match-counter')} title={i18n('description_matched-rows')}>
                 {matchPosition} / {count || 0}
             </span>
         </React.Fragment>

src/components/JsonViewer/components/FullValueDialog.tsx

@@ -1,6 +1,7 @@
 import {Dialog, Flex} from '@gravity-ui/uikit';
 
 import {block} from '../constants';
+import i18n from '../i18n';
 import {getHightLightedClassName} from '../utils';
 
 import {MultiHighlightedText} from './HighlightedText';
@@ -15,7 +16,7 @@ interface FullValueDialogProps {
 export function FullValueDialog({onClose, text, starts, length}: FullValueDialogProps) {
     return (
         <Dialog open={true} onClose={onClose}>
-            <Dialog.Header caption={'Full value'} />
+            <Dialog.Header caption={i18n('description_full-value')} />
             <Dialog.Divider />
             <Dialog.Body>
                 <Flex direction="column" gap={2} width="70vw" maxHeight="80vh">

src/components/JsonViewer/components/HighlightedText.tsx

@@ -14,10 +14,10 @@ interface Props {
 export default function HighlightedText({className, text, start, length, hasComa}: Props) {
     const comma = hasComa ? <React.Fragment>,&nbsp;</React.Fragment> : null;
 
-    if (length! > 0 && start! >= 0 && start! < text.length) {
-        const begin = text.substr(0, start);
-        const highlighted = text.substr(start!, length);
-        const end = text.substr(start! + length!);
+    if (length && typeof start === 'number' && start >= 0 && start < text.length) {
+        const begin = text.substring(0, start);
+        const highlighted = text.substring(start, start + length);
+        const end = text.substring(start + length);
 
         return (
             <React.Fragment>

src/components/JsonViewer/i18n/en.json

@@ -1,7 +1,11 @@
 {
   "action_collapse-all": "Collapse all",
   "action_expand-all": "Expand all",
+  "action_next": "Next",
+  "action_back": "Back",
   "description_search": "Search...",
+  "description_matched-rows": "Matched rows",
+  "description_full-value": "Full value",
   "context_case-sensitive-search": "Case sensitive search enadled",
   "context_case-sensitive-search-disabled": "Case sensitive search disabled",
   "context_items-count": [

src/components/JsonViewer/unipika/flattenUnipika.ts

@@ -181,7 +181,10 @@ function pushPath(path: string, ctx: FlatContext) {
 function popPath(ctx: FlatContext) {
     const last = ctx.path.pop();
     if (last !== undefined) {
-        ctx.collapsedPath = ctx.collapsedPath.substr(0, ctx.collapsedPath.length - last.length - 1);
+        ctx.collapsedPath = ctx.collapsedPath.substring(
+            0,
+            ctx.collapsedPath.length - last.length - 1,
+        );
     }
 }