@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/components/AttachmentListPlaceholder/index.ts

@@ -0,0 +1,2 @@
+export {AttachmentListPlaceholder} from './AttachmentListPlaceholder';
+export type {AttachmentListPlaceholderProps} from './AttachmentListPlaceholder';

package/src/components/DataTable/DataTable.scss

@@ -1,35 +1,27 @@
 .qp-data-table {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-  &__empty {
-    flex: 1;
-  }
+    &__empty {
+        flex: 1;
+    }
 
-  &__tr_empty {
-    .qp-data-table__td_empty {
-      border-bottom: 1px solid var(--g-color-line-generic);
+    &__tr_empty {
+        .qp-data-table__td_empty {
+            border-bottom: 1px solid var(--g-color-line-generic);
+        }
     }
-  }
 
-  &__content_empty {
-    display: flex;
+    &__content_empty {
+        display: flex;
 
-    &.qp-data-table__content_align_right {
-      justify-content: flex-end;
-    }
+        &.qp-data-table__content_align_right {
+            justify-content: flex-end;
+        }
 
-    &.qp-data-table__content_align_center {
-      justify-content: center;
+        &.qp-data-table__content_align_center {
+            justify-content: center;
+        }
     }
-  }
-
-  &__no-data-placeholder {
-    width: 100%;
-    max-width: 120px;
-    height: var(--g-text-body-1-line-height);
-    border-radius: 4px;
-    background-color: var(--g-color-base-generic);
-  }
 }

package/src/components/DataTable/DataTable.tsx

@@ -3,6 +3,7 @@ import BaseDataTable, {
     DataTableProps as BaseDataTableProps,
     Column,
 } from '@gravity-ui/react-data-table';
+import {Skeleton} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 
 import {EmptyContent, EmptyContentVariant} from '../EmptyContent';
@@ -22,11 +23,22 @@ export type DataTableProps<T> = {
     emptyVariant?: EmptyContentVariant;
 } & Omit<BaseDataTableProps<T>, 'theme'>;
 
-function renderEmptyCell(key: string, align?: Column<unknown>['align']) {
+function getSkeletonWidth(rowIndex: number, columnIndex: number) {
+    const widths = [72, 120, 180, 96];
+
+    return widths[(rowIndex + columnIndex) % widths.length];
+}
+
+function renderEmptyCell(
+    key: string,
+    rowIndex: number,
+    columnIndex: number,
+    align?: Column<unknown>['align'],
+) {
     return (
         <td key={key} className={block('td', {empty: true})}>
             <div className={block('content', {empty: true, align})}>
-                <div className={block('no-data-placeholder')} />
+                <Skeleton variant="text" width={getSkeletonWidth(rowIndex, columnIndex)} />
             </div>
         </td>
     );
@@ -35,8 +47,15 @@ function renderEmptyCell(key: string, align?: Column<unknown>['align']) {
 function renderLoadingSkeleton<T>(columns: Array<Column<T>>, displayIndices: boolean) {
     return Array.from({length: SKELETON_ROWS_COUNT}, (_, index) => (
         <tr key={index} className={block('tr', {empty: true})}>
-            {displayIndices && renderEmptyCell('__index')}
-            {columns.map((column) => renderEmptyCell(column.name, column.align))}
+            {displayIndices && renderEmptyCell('__index', index, 0)}
+            {columns.map((column, columnIndex) =>
+                renderEmptyCell(
+                    column.name,
+                    index,
+                    columnIndex + Number(displayIndices),
+                    column.align,
+                ),
+            )}
         </tr>
     ));
 }

package/src/{modules/HistoryRow/HistoryRowTitle.tsx → components/EditableRowTitle/EditableRowTitle.tsx}

@@ -1,19 +1,21 @@
-import React, {KeyboardEvent, useState} from 'react';
-import {QueryHistoryEditingRenderData, QueryHistoryRow} from '../../types/history';
+import React, {KeyboardEvent, useEffect, useState} from 'react';
 import {Text, TextInput} from '@gravity-ui/uikit';
-import './HistoryRow.scss';
+import {QueryListEditingRenderData, QueryListRow} from '../../types/queryList';
 
-export type Props<T extends QueryHistoryRow> = {
+export type EditableRowTitleProps<T extends QueryListRow = QueryListRow> = {
     item: T;
-    editing?: QueryHistoryEditingRenderData<T>;
+    editing?: QueryListEditingRenderData<T>;
 };
 
-export const HistoryRowTitle = <T extends QueryHistoryRow>({item, editing}: Props<T>) => {
+export const EditableRowTitle = <T extends QueryListRow>({
+    item,
+    editing,
+}: EditableRowTitleProps<T>) => {
     const [title, setTitle] = useState(item.title);
     const isEditing = Boolean(editing?.enabled);
     const isTitleEmpty = !title.trim();
 
-    React.useEffect(() => {
+    useEffect(() => {
         setTitle(item.title);
     }, [item.id, item.title]);
 
@@ -61,9 +63,5 @@ export const HistoryRowTitle = <T extends QueryHistoryRow>({item, editing}: Prop
         );
     }
 
-    return (
-        <Text variant="subheader-1" ellipsis>
-            {item.title}
-        </Text>
-    );
+    return <Text ellipsis>{item.title}</Text>;
 };

package/src/components/EditableRowTitle/index.ts

@@ -0,0 +1,2 @@
+export {EditableRowTitle} from './EditableRowTitle';
+export type {EditableRowTitleProps} from './EditableRowTitle';

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);
+    }
+}