@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/components/ErrorTree/ErrorTree.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Text} from '@gravity-ui/uikit';
+import {action} from 'storybook/actions';
+
+import type {ErrorTreeItem} from '../../types/errorTree';
+import {ErrorTree} from './ErrorTree';
+
+const root: ErrorTreeItem = {
+    id: 'root',
+    severity: 'error',
+    message: 'Missing value for parameter: $h',
+    code: 2,
+    attributes: {severity: 'Error', queryId: '7d1d'},
+    children: [
+        {
+            id: 'nested-error',
+            severity: 'error',
+            message: 'Missing value for parameter: $h',
+            code: 2,
+            position: {row: 1, column: 0},
+            attributes: {severity: 'Error'},
+            children: [
+                {
+                    id: 'intermediate-1',
+                    severity: 'warning',
+                    message: 'Intermediate parser message',
+                    children: [
+                        {
+                            id: 'intermediate-2',
+                            severity: 'warning',
+                            message: 'Intermediate optimizer message',
+                            children: [
+                                {
+                                    id: 'terminal-error',
+                                    severity: 'error',
+                                    message:
+                                        'At function: RemovePrefixMembers, At function: OrderedSqlProject',
+                                    code: 2,
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: 'warning',
+            severity: 'warning',
+            message: 'Query can be optimized further',
+            code: 0,
+            children: [
+                {
+                    id: 'info',
+                    severity: 'info',
+                    message: 'Consider adding a filter before the join',
+                    position: {row: 47, column: 6},
+                },
+            ],
+        },
+    ],
+};
+
+const meta: Meta<typeof ErrorTree> = {
+    title: 'Components/ErrorTree',
+    component: ErrorTree,
+    tags: ['autodocs'],
+    parameters: {layout: 'padded'},
+    args: {
+        root,
+        onPositionClick: action('onPositionClick'),
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof ErrorTree>;
+
+export const Default: Story = {};
+
+export const CustomAttributes: Story = {
+    args: {
+        renderAttributes: (attributes) => (
+            <Text variant="body-2">{String(attributes.severity)}</Text>
+        ),
+    },
+};
+
+export const Narrow: Story = {
+    render: (args) => (
+        <div style={{width: 420}}>
+            <ErrorTree {...args} />
+        </div>
+    ),
+};

package/src/components/ErrorTree/ErrorTree.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import type {ErrorTreeProps} from '../../types/errorTree';
+import {ErrorTreeNode} from './internal/ErrorTreeNode';
+
+const block = cn('qp-error-tree');
+
+export function ErrorTree({
+    root,
+    className,
+    defaultExpanded = true,
+    defaultInfoExpanded = false,
+    renderAttributes,
+    onPositionClick,
+}: ErrorTreeProps) {
+    return (
+        <div className={block(null, className)}>
+            <ErrorTreeNode
+                item={root}
+                level={0}
+                defaultNodeExpanded={defaultExpanded}
+                defaultExpanded={defaultExpanded}
+                defaultInfoExpanded={defaultInfoExpanded}
+                renderAttributes={renderAttributes}
+                onPositionClick={onPositionClick}
+            />
+        </div>
+    );
+}

package/src/components/ErrorTree/helpers/formatAttributes.ts

@@ -0,0 +1,9 @@
+import type {ErrorTreeItem} from '../../../types/errorTree';
+
+export function formatAttributes(attributes: ErrorTreeItem['attributes']) {
+    try {
+        return JSON.stringify(attributes, null, 2);
+    } catch {
+        return null;
+    }
+}

package/src/components/ErrorTree/helpers/getIntermediateChain.ts

@@ -0,0 +1,21 @@
+import type {ErrorTreeItem} from '../../../types/errorTree';
+
+export type IntermediateChain = {
+    hiddenItems: ErrorTreeItem[];
+    terminalItem: ErrorTreeItem;
+};
+
+export function getIntermediateChain(item: ErrorTreeItem): IntermediateChain {
+    const items = [item];
+    let current = item;
+
+    while (current.children?.length === 1) {
+        current = current.children[0];
+        items.push(current);
+    }
+
+    return {
+        hiddenItems: items.slice(0, -1),
+        terminalItem: items[items.length - 1],
+    };
+}

package/src/components/ErrorTree/i18n/dicts.ts

@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};

package/src/components/ErrorTree/i18n/en.json

@@ -0,0 +1,11 @@
+{
+  "field_attributes": "Attributes",
+  "field_code": "Code",
+  "action_show-all": "Show all",
+  "action_show-parent": "Show parent",
+  "context_intermediate-messages": {
+    "one": "{{count}} intermediate message",
+    "other": "{{count}} intermediate messages"
+  },
+  "context_attributes-unavailable": "Attributes cannot be displayed"
+}

package/src/components/ErrorTree/i18n/index.ts

@@ -0,0 +1,5 @@
+import {addI18Keysets} from '../../../i18n';
+
+import dicts from './dicts';
+
+export default addI18Keysets('qp:error-tree', dicts);

package/src/components/ErrorTree/i18n/ru.json

@@ -0,0 +1,13 @@
+{
+  "field_attributes": "Атрибуты",
+  "field_code": "Код",
+  "action_show-all": "Показать все",
+  "action_show-parent": "Показать родителя",
+  "context_intermediate-messages": {
+    "one": "{{count}} промежуточное сообщение",
+    "few": "{{count}} промежуточных сообщения",
+    "many": "{{count}} промежуточных сообщений",
+    "other": "{{count}} промежуточного сообщения"
+  },
+  "context_attributes-unavailable": "Не удалось показать атрибуты"
+}

package/src/components/ErrorTree/index.ts

@@ -0,0 +1 @@
+export {ErrorTree} from './ErrorTree';

package/src/components/ErrorTree/internal/ErrorTreeChildren.scss

@@ -0,0 +1,5 @@
+.qp-error-tree {
+    &__children {
+        padding-inline-start: var(--g-spacing-7);
+    }
+}

package/src/components/ErrorTree/internal/ErrorTreeChildren.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
+import {IntermediateMessages} from './IntermediateMessages';
+
+import './ErrorTreeChildren.scss';
+
+type ErrorTreeChildrenProps = Pick<
+    ErrorTreeProps,
+    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
+> & {
+    className?: string;
+    items: ErrorTreeItem[];
+    level: number;
+};
+
+export function ErrorTreeChildren({className, items, ...props}: ErrorTreeChildrenProps) {
+    return (
+        <div className={className}>
+            {items.map((item) => (
+                <IntermediateMessages key={item.id} item={item} {...props} />
+            ))}
+        </div>
+    );
+}

package/src/components/ErrorTree/internal/ErrorTreeNode.scss

@@ -0,0 +1,95 @@
+.qp-error-tree {
+    &__node {
+        margin-block-end: var(--g-spacing-2);
+    }
+
+    &__summary,
+    &__line {
+        min-inline-size: 0;
+    }
+
+    &__expand-button {
+        flex: 0 0 auto;
+    }
+
+    &__expand-placeholder {
+        flex: 0 0 28px;
+    }
+
+    &__line {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        padding-block: 2px;
+    }
+
+    &__severity-icon {
+        flex: 0 0 auto;
+
+        &_error {
+            color: var(--g-color-text-danger);
+        }
+
+        &_warning {
+            color: var(--g-color-text-warning);
+        }
+
+        &_info {
+            color: var(--g-color-text-info);
+        }
+    }
+
+    &__attributes-button,
+    &__show-parent {
+        flex: 0 0 auto;
+    }
+
+    &__position {
+        flex: 0 0 auto;
+        padding-block: 4px;
+        color: var(--g-color-text-secondary);
+        font-family: var(--g-font-family-monospace);
+    }
+
+    &__message,
+    &__message-button {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        overflow: hidden;
+        padding-block: 4px;
+        color: var(--g-color-text-primary);
+        font-family: var(--g-font-family-monospace);
+        font-size: var(--g-text-code-2-font-size);
+        line-height: var(--g-text-code-2-line-height);
+        text-align: start;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__message-button {
+        justify-content: flex-start;
+    }
+
+    &__code {
+        flex: 0 0 auto;
+        padding-block: 4px;
+        color: var(--g-color-text-complementary);
+    }
+
+    &__attributes {
+        margin-block-start: var(--g-spacing-1);
+        margin-inline-start: 28px;
+        overflow: auto;
+    }
+
+    &__attributes-content {
+        margin: 0;
+        padding: var(--g-spacing-2);
+        border-radius: var(--g-border-radius-s);
+        background: var(--g-color-base-generic-ultralight);
+        color: var(--g-color-text-primary);
+        font-family: var(--g-font-family-monospace);
+        font-size: var(--g-text-code-2-font-size);
+        line-height: var(--g-text-code-2-line-height);
+        white-space: pre-wrap;
+    }
+}

package/src/components/ErrorTree/internal/ErrorTreeNode.tsx

@@ -0,0 +1,178 @@
+import React, {useState} from 'react';
+import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg';
+import ChevronUpIcon from '@gravity-ui/icons/svgs/chevron-up.svg';
+import CircleInfoIcon from '@gravity-ui/icons/svgs/circle-info.svg';
+import SquareExclamationIcon from '@gravity-ui/icons/svgs/square-exclamation.svg';
+import TriangleExclamationIcon from '@gravity-ui/icons/svgs/triangle-exclamation.svg';
+import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
+import {Button, Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
+import {formatAttributes} from '../helpers/formatAttributes';
+import i18n from '../i18n';
+import {ErrorTreeChildren} from './ErrorTreeChildren';
+
+import './ErrorTreeNode.scss';
+
+const block = cn('qp-error-tree');
+
+const SEVERITY_ICONS = {
+    error: TriangleExclamationIcon,
+    warning: SquareExclamationIcon,
+    info: CircleInfoIcon,
+};
+
+type ErrorTreeNodeProps = Pick<
+    ErrorTreeProps,
+    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
+> & {
+    className?: string;
+    item: ErrorTreeItem;
+    level: number;
+    defaultNodeExpanded: boolean;
+    renderChildren?: (className: string) => React.ReactNode;
+    onShowParent?: () => void;
+};
+
+export function ErrorTreeNode({
+    className,
+    item,
+    level,
+    defaultExpanded = true,
+    defaultInfoExpanded = false,
+    defaultNodeExpanded,
+    renderAttributes,
+    onPositionClick,
+    renderChildren,
+    onShowParent,
+}: ErrorTreeNodeProps) {
+    const [attributesExpanded, setAttributesExpanded] = useState(false);
+    const children = item.children ?? [];
+    const hasChildren = children.length > 0;
+    const hasAttributes = item.attributes !== undefined;
+    const position = item.position;
+    const hasCode = item.code !== undefined;
+    const formattedAttributes = hasAttributes ? formatAttributes(item.attributes) : null;
+
+    let attributesContent: React.ReactNode = null;
+
+    if (hasAttributes) {
+        if (renderAttributes) {
+            attributesContent = renderAttributes(item.attributes as Record<string, unknown>, item);
+        } else if (formattedAttributes === null) {
+            attributesContent = (
+                <Text color="secondary">{i18n('context_attributes-unavailable')}</Text>
+            );
+        } else {
+            attributesContent = (
+                <pre className={block('attributes-content')}>{formattedAttributes}</pre>
+            );
+        }
+    }
+
+    const line = (
+        <Flex alignItems="center" gap={2} className={block('line')}>
+            {onShowParent && (
+                <Button
+                    view="flat-secondary"
+                    size="s"
+                    title={i18n('action_show-parent')}
+                    aria-label={i18n('action_show-parent')}
+                    className={block('show-parent')}
+                    onClick={onShowParent}
+                >
+                    <Icon data={ArrowUpIcon} size={16} />
+                </Button>
+            )}
+            <Icon
+                data={SEVERITY_ICONS[item.severity]}
+                size={16}
+                className={block('severity-icon', {[item.severity]: true})}
+            />
+            {hasAttributes && (
+                <Button
+                    view="flat-secondary"
+                    size="s"
+                    className={block('attributes-button')}
+                    onClick={() => setAttributesExpanded((expanded) => !expanded)}
+                >
+                    {i18n('field_attributes')}
+                    <Icon data={attributesExpanded ? ChevronUpIcon : ChevronDownIcon} size={16} />
+                </Button>
+            )}
+            {position && (
+                <span className={block('position')}>{`${position.row}:${position.column}`}</span>
+            )}
+            {position && onPositionClick ? (
+                <Button
+                    view="flat-secondary"
+                    size="s"
+                    className={block('message-button')}
+                    title={item.message}
+                    onClick={() => onPositionClick(item, position)}
+                >
+                    {item.message}
+                </Button>
+            ) : (
+                <span className={block('message')} title={item.message}>
+                    {item.message}
+                </span>
+            )}
+            {hasCode && (
+                <span className={block('code')}>{`${i18n('field_code')}: ${item.code}`}</span>
+            )}
+        </Flex>
+    );
+
+    const details = (
+        <>
+            {attributesExpanded && <div className={block('attributes')}>{attributesContent}</div>}
+            {hasChildren && (
+                <>
+                    {renderChildren ? (
+                        renderChildren(block('children'))
+                    ) : (
+                        <ErrorTreeChildren
+                            className={block('children')}
+                            items={children}
+                            level={level + 1}
+                            defaultExpanded={defaultExpanded}
+                            defaultInfoExpanded={defaultInfoExpanded}
+                            renderAttributes={renderAttributes}
+                            onPositionClick={onPositionClick}
+                        />
+                    )}
+                </>
+            )}
+        </>
+    );
+
+    if (!hasChildren) {
+        return (
+            <div className={block('node', className)}>
+                <Flex alignItems="center" gap={1} className={block('summary')}>
+                    <span className={block('expand-placeholder')} />
+                    {line}
+                </Flex>
+                {attributesExpanded && (
+                    <div className={block('attributes')}>{attributesContent}</div>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <Disclosure defaultExpanded={defaultNodeExpanded} className={block('node', className)}>
+            <Disclosure.Summary>
+                {(_props, defaultButton) => (
+                    <Flex alignItems="center" gap={1} className={block('summary')}>
+                        <span className={block('expand-button')}>{defaultButton}</span>
+                        {line}
+                    </Flex>
+                )}
+            </Disclosure.Summary>
+            <Disclosure.Details>{details}</Disclosure.Details>
+        </Disclosure>
+    );
+}

package/src/components/ErrorTree/internal/IntermediateMessages.scss

@@ -0,0 +1,13 @@
+.qp-error-tree {
+    &__intermediate {
+        margin-block-end: var(--g-spacing-2);
+    }
+
+    &__intermediate-summary {
+        min-inline-size: 0;
+    }
+
+    &__intermediate-details {
+        padding-inline-start: var(--g-spacing-7);
+    }
+}

package/src/components/ErrorTree/internal/IntermediateMessages.tsx

@@ -0,0 +1,127 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import {Button, Disclosure, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
+import {getIntermediateChain} from '../helpers/getIntermediateChain';
+import i18n from '../i18n';
+import {ErrorTreeNode} from './ErrorTreeNode';
+
+import './IntermediateMessages.scss';
+
+const block = cn('qp-error-tree');
+
+type IntermediateMessagesProps = Pick<
+    ErrorTreeProps,
+    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
+> & {
+    item: ErrorTreeItem;
+    level: number;
+};
+
+export function IntermediateMessages({
+    item,
+    level,
+    defaultExpanded = true,
+    defaultInfoExpanded = false,
+    renderAttributes,
+    onPositionClick,
+}: IntermediateMessagesProps) {
+    const {hiddenItems, terminalItem} = useMemo(() => getIntermediateChain(item), [item]);
+    const nodeDefaultExpanded =
+        terminalItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
+    const [revealedParents, setRevealedParents] = useState(0);
+    const [expanded, setExpanded] = useState(nodeDefaultExpanded);
+    const [showAllVersion, setShowAllVersion] = useState(0);
+    const isCompact = hiddenItems.length > 1;
+
+    const renderChain = useCallback(
+        (itemIndex: number, className?: string): React.ReactNode => {
+            const currentItem =
+                itemIndex < hiddenItems.length ? hiddenItems[itemIndex] : terminalItem;
+            const hasHiddenParent = itemIndex > 0;
+            const hasNextItem = itemIndex < hiddenItems.length;
+            const currentDefaultExpanded =
+                currentItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
+
+            return (
+                <ErrorTreeNode
+                    key={`${currentItem.id}-${showAllVersion}`}
+                    className={className}
+                    item={currentItem}
+                    level={level + itemIndex}
+                    defaultNodeExpanded={showAllVersion > 0 || currentDefaultExpanded}
+                    defaultExpanded={defaultExpanded}
+                    defaultInfoExpanded={defaultInfoExpanded}
+                    renderAttributes={renderAttributes}
+                    onPositionClick={onPositionClick}
+                    onShowParent={
+                        hasHiddenParent ? () => setRevealedParents((value) => value + 1) : undefined
+                    }
+                    renderChildren={
+                        hasNextItem
+                            ? (childClassName) => renderChain(itemIndex + 1, childClassName)
+                            : undefined
+                    }
+                />
+            );
+        },
+        [
+            defaultExpanded,
+            defaultInfoExpanded,
+            hiddenItems,
+            level,
+            onPositionClick,
+            renderAttributes,
+            showAllVersion,
+            terminalItem,
+        ],
+    );
+
+    if (!isCompact) {
+        return (
+            <ErrorTreeNode
+                item={item}
+                level={level}
+                defaultNodeExpanded={
+                    item.severity === 'info' ? defaultInfoExpanded : defaultExpanded
+                }
+                defaultExpanded={defaultExpanded}
+                defaultInfoExpanded={defaultInfoExpanded}
+                renderAttributes={renderAttributes}
+                onPositionClick={onPositionClick}
+            />
+        );
+    }
+
+    const firstVisibleItemIndex = Math.max(hiddenItems.length - revealedParents, 0);
+
+    return (
+        <Disclosure expanded={expanded} onUpdate={setExpanded} className={block('intermediate')}>
+            <Disclosure.Summary>
+                {(_props, defaultButton) => (
+                    <Flex alignItems="center" gap={2} className={block('intermediate-summary')}>
+                        {defaultButton}
+                        <Text color="secondary">
+                            {i18n('context_intermediate-messages', {count: hiddenItems.length})}
+                        </Text>
+                        <Button
+                            view="flat-secondary"
+                            size="s"
+                            onClick={() => {
+                                setExpanded(true);
+                                setRevealedParents(hiddenItems.length);
+                                setShowAllVersion((version) => version + 1);
+                            }}
+                        >
+                            {i18n('action_show-all')}
+                        </Button>
+                    </Flex>
+                )}
+            </Disclosure.Summary>
+            <Disclosure.Details>
+                {renderChain(firstVisibleItemIndex, block('intermediate-details'))}
+            </Disclosure.Details>
+        </Disclosure>
+    );
+}

package/src/components/Icons/LogoCPlusPlus.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const LogoCPlusPlus = () => {
+    return (
+        <svg
+            width="15"
+            height="13"
+            viewBox="0 0 15 13"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5.40812 7.43123V4.93123C5.40812 4.51702 5.74391 4.18123 6.15812 4.18123C6.57234 4.18123 6.90812 4.51702 6.90812 4.93123V7.43123C6.90812 7.84545 6.57234 8.18123 6.15812 8.18123C5.74391 8.18123 5.40812 7.84545 5.40812 7.43123Z"
+                fill="black"
+            />
+            <path
+                d="M4.90812 5.43123H7.40812C7.82234 5.43123 8.15812 5.76702 8.15812 6.18123C8.15812 6.59545 7.82234 6.93123 7.40812 6.93123H4.90812C4.49391 6.93123 4.15812 6.59545 4.15812 6.18123C4.15812 5.76702 4.49391 5.43123 4.90812 5.43123Z"
+                fill="black"
+            />
+            <path
+                d="M11.0146 8.18123V4.18123C11.0146 3.76702 11.3504 3.43123 11.7646 3.43123C12.1788 3.43123 12.5146 3.76702 12.5146 4.18123V8.18123C12.5146 8.59545 12.1788 8.93123 11.7646 8.93123C11.3504 8.93123 11.0146 8.59545 11.0146 8.18123Z"
+                fill="black"
+            />
+            <path
+                d="M9.76458 5.43123L13.7646 5.43123C14.1788 5.43123 14.5146 5.76702 14.5146 6.18123C14.5146 6.59545 14.1788 6.93123 13.7646 6.93123L9.76458 6.93123C9.35036 6.93123 9.01458 6.59545 9.01458 6.18123C9.01458 5.76702 9.35036 5.43123 9.76458 5.43123Z"
+                fill="black"
+            />
+            <path
+                d="M9.09349 2.44504C8.38789 1.91768 7.54953 1.59693 6.67212 1.51861C5.79464 1.44033 4.91236 1.60751 4.12448 2.00167C3.33664 2.39583 2.67372 3.00143 2.21021 3.75057C1.74675 4.49969 1.50109 5.36305 1.50001 6.24394C1.49894 7.12491 1.74267 7.98906 2.20437 8.73935C2.66606 9.4896 3.32736 10.0969 4.11423 10.4929C4.90112 10.889 5.78281 11.0585 6.66046 10.9823C7.53807 10.9062 8.37721 10.5872 9.08412 10.0616C9.41651 9.81441 9.88663 9.88339 10.1338 10.2158C10.3809 10.5482 10.3115 11.018 9.9792 11.2652C9.04903 11.9568 7.9447 12.376 6.7899 12.4762C5.63512 12.5764 4.47526 12.3534 3.4399 11.8323C2.40454 11.3112 1.53425 10.5126 0.92677 9.52547C0.319272 8.53824 -0.00140641 7.40122 4.63663e-06 6.24205C0.00144048 5.08294 0.324902 3.94699 0.934769 2.96129C1.54467 1.97554 2.41702 1.17894 3.45369 0.660306C4.49033 0.141726 5.65084 -0.0782676 6.80537 0.0247355C7.95989 0.127767 9.06304 0.549624 9.99149 1.24355C10.3233 1.49152 10.3912 1.96151 10.1432 2.29329C9.89526 2.62508 9.42527 2.69302 9.09349 2.44504Z"
+                fill="black"
+            />
+        </svg>
+    );
+};