feat(MLAB-746): add configurable collapse indicators

Author: imgeorgius

src/ReactUnipika/ReactUnipika.tsx

@@ -21,6 +21,7 @@ export interface ReactUnipikaProps {
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
+    useIconsForCollapse?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -43,6 +44,7 @@ export function ReactUnipika({
     customLayout,
     toolbarStickyTop = 0,
     renderToolbar,
+    useIconsForCollapse = false, // Default to false for backward compatibility with tests
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -95,6 +97,7 @@ export function ReactUnipika({
                     customLayout={customLayout}
                     toolbarStickyTop={toolbarStickyTop}
                     renderToolbar={renderToolbar}
+                    useIconsForCollapse={useIconsForCollapse}
                 />
             ) : (
                 <pre

src/StructuredYson/Cell.tsx

@@ -4,7 +4,7 @@ import {Button, Icon} from '@gravity-ui/uikit';
 // @ts-ignore
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import {ArrowUpRightFromSquare, ChevronUp, ChevronRight} from '@gravity-ui/icons';
 
 import {UnipikaSettings} from './types';
 import {BlockType, SearchInfo, UnipikaFlattenTreeItem} from '../utils/flattenUnipika';
@@ -28,6 +28,7 @@ export interface CellProps {
     filter?: string;
     index: number;
     showFullText: (index: number) => void;
+    useIconsForCollapse?: boolean;
 }
 
 export const JSON_VALUE_KEY = {
@@ -69,6 +70,7 @@ export function Cell(props: CellProps) {
         filter,
         showFullText,
         index,
+        useIconsForCollapse,
     } = props;
 
     const handleToggleCollapse = React.useCallback(() => {
@@ -90,6 +92,7 @@ export function Cell(props: CellProps) {
                     collapsed={collapsed}
                     path={path}
                     onToggle={handleToggleCollapse}
+                    useIconsForCollapse={useIconsForCollapse}
                 />
             )}
             <Key
@@ -287,14 +290,19 @@ interface ToggleCollapseProps {
     collapsed?: boolean;
     path?: UnipikaFlattenTreeItem['path'];
     onToggle: () => void;
+    useIconsForCollapse?: boolean;
 }
 
 function ToggleCollapseButton(props: ToggleCollapseProps) {
-    const {collapsed, onToggle, path} = props;
+    const {collapsed, onToggle, path, useIconsForCollapse} = props;
     return (
         <span title={path} className={block('collapse')}>
             <Button onClick={onToggle} view="flat-secondary" size={'s'}>
-                <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
+                {useIconsForCollapse ? (
+                    <Icon className={'unipika'} data={collapsed ? ChevronRight : ChevronUp} />
+                ) : (
+                    <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
+                )}
             </Button>
         </span>
     );

src/StructuredYson/StructuredYson.tsx

@@ -40,6 +40,7 @@ interface Props {
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
+    useIconsForCollapse?: boolean;
 }
 
 interface State {
@@ -156,6 +157,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
             settings,
             filter,
         } = this.state;
+        const {useIconsForCollapse} = this.props;
 
         return (
             <Table
@@ -167,6 +169,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
                 onToggleCollapse={this.onTogglePathCollapse}
                 onShowFullText={this.onShowFullText}
                 scrollToRef={this.tableRef}
+                useIconsForCollapse={useIconsForCollapse}
             />
         );
     }

src/StructuredYson/Table.tsx

@@ -19,6 +19,7 @@ export interface TableProps {
     onToggleCollapse: (path: string) => void;
     onShowFullText: (index: number) => void;
     scrollToRef: React.RefObject<null | {scrollToIndex(index: number): void}>;
+    useIconsForCollapse?: boolean;
 }
 
 export const Table: React.FC<TableProps> = ({
@@ -30,6 +31,7 @@ export const Table: React.FC<TableProps> = ({
     onToggleCollapse,
     onShowFullText,
     scrollToRef,
+    useIconsForCollapse,
 }) => {
     const renderCell: ColumnDef<UnipikaFlattenTreeItem>['cell'] = ({row}) => {
         const {original, index} = row;
@@ -43,6 +45,7 @@ export const Table: React.FC<TableProps> = ({
                 filter={filter}
                 showFullText={onShowFullText}
                 index={index}
+                useIconsForCollapse={useIconsForCollapse}
             />
         );
     };