feat(Configs): add info about full config

src/components/ClipboardButton/ClipboardButton.tsx

@@ -0,0 +1,31 @@
+import type {ButtonSize, ButtonView} from '@gravity-ui/uikit';
+import {ClipboardButton as ClipboardButtonUikit} from '@gravity-ui/uikit';
+
+import i18n from './i18n';
+
+export interface ClipboardButtonProps {
+    copyText?: string;
+    withLabel?: boolean | string;
+    size?: ButtonSize;
+    view?: ButtonView;
+    className?: string;
+}
+
+export function ClipboardButton({
+    size,
+    className,
+    copyText,
+    withLabel,
+    view,
+}: ClipboardButtonProps) {
+    if (!copyText) {
+        return null;
+    }
+    const label = withLabel === false ? null : withLabel || i18n('copy');
+
+    return (
+        <ClipboardButtonUikit view={view} size={size || 'xs'} className={className} text={copyText}>
+            {label}
+        </ClipboardButtonUikit>
+    );
+}

src/components/SyntaxHighlighter/i18n/index.ts → src/components/ClipboardButton/i18n/index.ts

@@ -2,6 +2,6 @@ import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
 
-const COMPONENT = 'ydb-syntax-highlighter';
+const COMPONENT = 'ydb-clipboard-button';
 
 export default registerKeysets(COMPONENT, {en});

src/components/FixedHeightQuery/FixedHeightQuery.tsx

@@ -55,7 +55,7 @@ export const FixedHeightQuery = ({
                               withLabel: false,
                               size: 'xs',
                           }
-                        : false
+                        : undefined
                 }
             />
         </div>

src/components/JsonViewer/JsonViewer.scss

@@ -4,15 +4,15 @@
     --data-table-row-height: 20px;
     --toolbar-background-color: var(--g-color-base-background);
 
-    width: max-content;
+    width: 100%;
 
     &__toolbar {
         position: sticky;
         z-index: 2;
-        top: 0;
+        top: var(--ydb-json-viewer-toolbar-top, 0);
         left: 0;
 
-        padding-bottom: var(--g-spacing-2);
+        padding-bottom: var(--g-spacing-5);
 
         background-color: var(--toolbar-background-color);
     }
@@ -45,8 +45,6 @@
         align-content: center;
 
         text-wrap: nowrap;
-
-        color: var(--g-color-text-secondary);
     }
 
     &__key {
@@ -74,6 +72,8 @@
     }
 
     &__filter {
+        --g-button-height: 24px;
+        --g-button-border-radius: 4px;
         width: 300px;
     }
 
@@ -103,10 +103,6 @@
         @include mixins.body-2-typography();
     }
 
-    &__extra-tools {
-        margin-left: 1ex;
-    }
-
     .data-table__head {
         display: none;
     }

src/components/JsonViewer/JsonViewer.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
+import {ChevronsCollapseVertical, ChevronsExpandVertical} from '@gravity-ui/icons';
 import type * as DT100 from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
 
 import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
 import {useSetting} from '../../utils/hooks';
+import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
+import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
 
 import {Cell} from './components/Cell';
 import {Filter} from './components/Filter';
@@ -22,9 +25,6 @@ import type {
 } from './unipika/flattenUnipika';
 import {unipika} from './unipika/unipika';
 
-import ArrowDownToLineIcon from '@gravity-ui/icons/svgs/arrow-down-to-line.svg';
-import ArrowUpFromLineIcon from '@gravity-ui/icons/svgs/arrow-up-from-line.svg';
-
 import './JsonViewer.scss';
 
 interface JsonViewerCommonProps {
@@ -35,6 +35,7 @@ interface JsonViewerCommonProps {
     collapsedInitially?: boolean;
     maxValueWidth?: number;
     toolbarClassName?: string;
+    withClipboardButton?: Omit<ClipboardButtonProps, 'size' | 'view'>;
 }
 
 interface JsonViewerProps extends JsonViewerCommonProps {
@@ -118,6 +119,7 @@ function JsonViewerComponent({
     collapsedInitially,
     maxValueWidth = 100,
     toolbarClassName,
+    withClipboardButton,
 }: JsonViewerComponentProps) {
     const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
         CASE_SENSITIVE_JSON_SEARCH,
@@ -300,19 +302,12 @@ function JsonViewerComponent({
 
     const renderToolbar = () => {
         return (
-            <Flex gap={2} wrap="nowrap" className={block('toolbar', toolbarClassName)}>
-                <Flex gap={1} wrap="nowrap">
-                    <ActionTooltip title={i18n('action_expand-all')}>
-                        <Button onClick={onExpandAll} view="flat-secondary">
-                            <Icon data={ArrowDownToLineIcon} />
-                        </Button>
-                    </ActionTooltip>
-                    <ActionTooltip title={i18n('action_collapse-all')}>
-                        <Button onClick={onCollapseAll} view="flat-secondary">
-                            <Icon data={ArrowUpFromLineIcon} />
-                        </Button>
-                    </ActionTooltip>
-                </Flex>
+            <Flex
+                gap={2}
+                wrap="nowrap"
+                className={block('toolbar', toolbarClassName)}
+                justifyContent="space-between"
+            >
                 {search && (
                     <Filter
                         onUpdate={onFilterChange}
@@ -327,7 +322,22 @@ function JsonViewerComponent({
                         onUpdateCaseSensitive={handleUpdateCaseSensitive}
                     />
                 )}
-                <span className={block('extra-tools')}>{extraTools}</span>
+                <Flex gap={2} wrap="nowrap">
+                    <ActionTooltip title={i18n('action_expand-all')} placement="top-start">
+                        <Button onClick={onExpandAll}>
+                            <Icon data={ChevronsExpandVertical} />
+                        </Button>
+                    </ActionTooltip>
+                    <ActionTooltip title={i18n('action_collapse-all')} placement="top-start">
+                        <Button onClick={onCollapseAll}>
+                            <Icon data={ChevronsCollapseVertical} />
+                        </Button>
+                    </ActionTooltip>
+                    {withClipboardButton && (
+                        <ClipboardButton {...withClipboardButton} size="m" view="normal" />
+                    )}
+                    {extraTools}
+                </Flex>
             </Flex>
         );
     };

src/components/JsonViewer/components/Filter.tsx

@@ -38,7 +38,7 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
     const count = matchedRows.length;
     const matchPosition = count ? 1 + (matchIndex % count) : 0;
     return (
-        <React.Fragment>
+        <Flex gap={2} wrap="nowrap">
             <TextInput
                 ref={ref}
                 className={block('filter')}
@@ -69,28 +69,32 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
                 }
             />
             <Flex gap={1} wrap="nowrap">
-                <Button
-                    className={block('match-btn')}
-                    view="flat-secondary"
-                    title={i18n('action_next')}
-                    onClick={onNextMatch}
-                    disabled={!count}
-                >
-                    <Icon data={ChevronDownIcon} />
-                </Button>
-                <Button
-                    className={block('match-btn')}
-                    view="flat-secondary"
-                    title={i18n('action_back')}
-                    onClick={onPrevMatch}
-                    disabled={!count}
-                >
-                    <Icon data={ChevronUpIcon} />
-                </Button>
+                <ActionTooltip title={i18n('action_next')} placement="top-start">
+                    <Button
+                        className={block('match-btn')}
+                        view="flat-secondary"
+                        onClick={onNextMatch}
+                        disabled={!count}
+                    >
+                        <Icon data={ChevronDownIcon} />
+                    </Button>
+                </ActionTooltip>
+                <ActionTooltip title={i18n('action_back')} placement="top-start">
+                    <Button
+                        className={block('match-btn')}
+                        view="flat-secondary"
+                        onClick={onPrevMatch}
+                        disabled={!count}
+                    >
+                        <Icon data={ChevronUpIcon} />
+                    </Button>
+                </ActionTooltip>
             </Flex>
-            <span className={block('match-counter')} title={i18n('description_matched-rows')}>
-                {matchPosition} / {count || 0}
-            </span>
-        </React.Fragment>
+            {value && (
+                <span className={block('match-counter')} title={i18n('description_matched-rows')}>
+                    {matchPosition} / {count || 0}
+                </span>
+            )}
+        </Flex>
     );
 });

src/components/JsonViewer/unipika/unipika.ts

@@ -16,6 +16,9 @@ export const defaultUnipikaSettings = {
 };
 
 export function unipikaConvert(value: unknown) {
+    if (!value) {
+        return value;
+    }
     let result;
     try {
         result = unipika.converters.yson(value, defaultUnipikaSettings);

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss

@@ -4,7 +4,7 @@
     position: relative;
     z-index: 0;
 
-    height: 100%;
+    height: var(--ydb-syntax-highlighter-height, 100%);
 
     &__sticky-container {
         z-index: 1;

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import type {ButtonSize} from '@gravity-ui/uikit';
-import {ClipboardButton} from '@gravity-ui/uikit';
 import {nanoid} from '@reduxjs/toolkit';
 import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
 
-import i18n from './i18n';
+import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
+import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
+
 import {b} from './shared';
 import {useSyntaxHighlighterStyle} from './themes';
 import type {Language} from './types';
@@ -24,16 +24,11 @@ async function registerLanguage(lang: Language) {
     }
 }
 
-interface ClipboardButtonOptions {
+export interface WithClipboardButtonProp extends ClipboardButtonProps {
     alwaysVisible?: boolean;
-    copyText?: string;
-    withLabel?: boolean;
-    size?: ButtonSize;
 }
 
-export type WithClipboardButtonProp = ClipboardButtonOptions | boolean;
-
-type YDBSyntaxHighlighterProps = {
+export type YDBSyntaxHighlighterProps = {
     text: string;
     language: Language;
     className?: string;
@@ -60,37 +55,28 @@ export function YDBSyntaxHighlighter({
         registerLangAndUpdateKey();
     }, [language]);
 
-    const clipboardButtonProps =
-        typeof withClipboardButton === 'object' ? withClipboardButton : undefined;
-
     const renderCopyButton = () => {
-        if (withClipboardButton) {
-            return (
-                <div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
-                    <ClipboardButton
-                        view="flat-secondary"
-                        size={clipboardButtonProps?.size || 'xs'}
-                        className={b('copy', {
-                            visible: clipboardButtonProps?.alwaysVisible,
-                        })}
-                        text={clipboardButtonProps?.copyText || text}
-                    >
-                        {clipboardButtonProps?.withLabel === false ? null : i18n('copy')}
-                    </ClipboardButton>
-                </div>
-            );
+        if (!withClipboardButton) {
+            return null;
         }
-
-        return null;
+        const {alwaysVisible, copyText, ...rest} = withClipboardButton;
+        return (
+            <div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
+                <ClipboardButton
+                    {...rest}
+                    copyText={copyText || text}
+                    className={b('copy', {
+                        visible: alwaysVisible,
+                    })}
+                    view="flat-secondary"
+                />
+            </div>
+        );
     };
 
     let paddingStyles = {};
 
-    if (
-        withClipboardButton &&
-        typeof withClipboardButton === 'object' &&
-        withClipboardButton.alwaysVisible
-    ) {
+    if (withClipboardButton?.alwaysVisible) {
         if (withClipboardButton.withLabel) {
             paddingStyles = {paddingRight: 80};
         } else {

src/components/SyntaxHighlighter/types.ts

@@ -7,4 +7,5 @@ export type Language =
     | 'javascript'
     | 'php'
     | 'python'
-    | 'yql';
+    | 'yql'
+    | 'yaml';