@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/components/Icons/index.ts

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

package/src/components/QueryResultsTable/QueryResultsTable.scss

@@ -0,0 +1,65 @@
+.qp-query-results-table {
+    --data-table-border-color: var(--g-color-line-generic);
+
+    min-width: 0;
+    overflow-x: auto;
+
+    .data-table__table-wrapper {
+        display: inline-block;
+        min-width: 100%;
+        vertical-align: top;
+    }
+
+    .data-table__th,
+    .data-table__td {
+        max-width: 700px;
+        vertical-align: top;
+    }
+
+    .data-table__td {
+        position: relative;
+        white-space: normal;
+    }
+
+    &__header {
+        display: inline-block;
+    }
+
+    &__cell {
+        display: block;
+        padding-right: var(--g-spacing-5);
+        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);
+        overflow-wrap: anywhere;
+
+        &:hover .qp-query-results-table__cell-actions,
+        &:focus-within .qp-query-results-table__cell-actions {
+            opacity: 1;
+        }
+
+        .unipika {
+            display: inline;
+        }
+    }
+
+    &__cell-actions {
+        position: absolute;
+        top: var(--g-spacing-1);
+        right: var(--g-spacing-1);
+        opacity: 0;
+    }
+
+    &__show-more {
+        display: block;
+        margin-top: var(--g-spacing-1);
+    }
+
+    &__format-error {
+        color: var(--g-color-text-danger);
+    }
+
+    &__error {
+        display: block;
+    }
+}

package/src/components/QueryResultsTable/QueryResultsTable.tsx

@@ -0,0 +1,112 @@
+import React, {useMemo} from 'react';
+import BaseDataTable, {type Column, type Settings} from '@gravity-ui/react-data-table';
+import {Text, Tooltip} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {DataTable} from '../DataTable';
+import type {EmptyContentVariant} from '../EmptyContent';
+import type {QueryResultColumn, QueryResultFormatterSettings} from '../../types/queryResults';
+import {formatQueryResultType, isQueryResultNumericType} from './helpers/formatQueryResultType';
+import {QueryResultCell} from './internal/QueryResultCell';
+
+import '@gravity-ui/unipika/dist/unipika.css';
+import './QueryResultsTable.scss';
+
+const block = cn('qp-query-results-table');
+const DEFAULT_MAX_VISIBLE_LINES = 5;
+
+export type QueryResultsTableProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    /** Values use the YQL wire representation consumed by @gravity-ui/unipika. */
+    rows: TRow[];
+    loading?: boolean;
+    loaded?: boolean;
+    errorContent?: React.ReactNode;
+    rowKey?: (row: TRow, index: number) => string | number;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines?: number;
+    emptyVariant?: EmptyContentVariant;
+    displayIndices?: boolean;
+    stripedRows?: boolean;
+    /** Set to false when the surrounding layout does not need a sticky header. */
+    stickyHead?: Settings['stickyHead'] | false;
+    className?: string;
+};
+
+export function QueryResultsTable<TRow extends Record<string, unknown>>({
+    columns,
+    rows,
+    loading,
+    loaded,
+    errorContent,
+    rowKey,
+    formatterSettings,
+    maxVisibleLines = DEFAULT_MAX_VISIBLE_LINES,
+    emptyVariant,
+    displayIndices = true,
+    stripedRows = true,
+    stickyHead = BaseDataTable.MOVING,
+    className,
+}: QueryResultsTableProps<TRow>) {
+    const resolvedStickyHead = stickyHead === false ? undefined : stickyHead;
+    const tableColumns = useMemo<Array<Column<TRow>>>(
+        () =>
+            columns.map((column) => {
+                const type = formatQueryResultType(column.type);
+                const align =
+                    column.align ??
+                    (isQueryResultNumericType(column.type) ? BaseDataTable.LEFT : undefined);
+
+                return {
+                    name: column.name,
+                    width: column.width,
+                    align,
+                    sortable: false,
+                    headerTitle: type,
+                    header: (
+                        <Tooltip content={type}>
+                            <span className={block('header')}>{column.header ?? column.name}</span>
+                        </Tooltip>
+                    ),
+                    render: ({row, index}) => (
+                        <QueryResultCell
+                            row={row}
+                            value={row[column.name]}
+                            index={index}
+                            column={column}
+                            formatterSettings={formatterSettings}
+                            maxVisibleLines={maxVisibleLines}
+                        />
+                    ),
+                };
+            }),
+        [columns, formatterSettings, maxVisibleLines],
+    );
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error', className)}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    return (
+        <div className={block(null, className)}>
+            <DataTable<TRow>
+                columns={tableColumns}
+                data={rows}
+                loading={loading}
+                loaded={loaded ?? !loading}
+                emptyVariant={emptyVariant}
+                rowKey={rowKey}
+                settings={{
+                    displayIndices,
+                    stripedRows,
+                    sortable: false,
+                    stickyHead: resolvedStickyHead,
+                    syncHeadOnResize: Boolean(resolvedStickyHead),
+                }}
+            />
+        </div>
+    );
+}

package/src/components/QueryResultsTable/helpers/formatQueryResultType.ts

@@ -0,0 +1,76 @@
+import type {QueryResultDataType} from '../../../types/queryResults';
+
+function isQueryResultDataType(value: unknown): value is QueryResultDataType {
+    return Array.isArray(value) && typeof value[0] === 'string';
+}
+
+function formatParameter(value: unknown): string {
+    if (Array.isArray(value)) {
+        if (isQueryResultDataType(value)) {
+            return formatQueryResultType(value);
+        }
+
+        return value.map(formatParameter).join(', ');
+    }
+
+    return String(value);
+}
+
+export function formatQueryResultType(type: QueryResultDataType): string {
+    const [name, ...params] = type;
+
+    switch (name) {
+        case 'DataType':
+            return [params[0], ...params.slice(1)].filter(Boolean).join(', ');
+        case 'OptionalType':
+            return `Optional<${formatParameter(params[0])}>`;
+        case 'TaggedType':
+            return `Tagged<${formatParameter(params[0])}, ${formatParameter(params[1])}>`;
+        case 'ListType':
+        case 'StreamType':
+            return `${name.replace('Type', '')}<${formatParameter(params[0])}>`;
+        case 'DictType':
+            return `Dict<${params.map(formatParameter).join(', ')}>`;
+        case 'TupleType':
+            return `Tuple<${formatParameter(params[0])}>`;
+        case 'StructType':
+            return `Struct<${Array.isArray(params[0]) ? params[0].map(formatParameter).join(', ') : ''}>`;
+        case 'VariantType':
+            return `Variant<${formatParameter(params[0])}>`;
+        case 'PgType':
+            return `Pg<${formatParameter(params[0])}>`;
+        default:
+            return params.length ? `${name}<${params.map(formatParameter).join(', ')}>` : name;
+    }
+}
+
+const NUMERIC_TYPES = new Set([
+    'Double',
+    'Float',
+    'Int64',
+    'Int32',
+    'Int16',
+    'Int8',
+    'Uint64',
+    'Uint32',
+    'Uint16',
+    'Uint8',
+]);
+
+export function isQueryResultNumericType(type: QueryResultDataType): boolean {
+    const [name, ...params] = type;
+
+    if (name === 'DataType') {
+        return typeof params[0] === 'string' && NUMERIC_TYPES.has(params[0]);
+    }
+
+    if (name === 'OptionalType') {
+        return isQueryResultDataType(params[0]) && isQueryResultNumericType(params[0]);
+    }
+
+    if (name === 'TaggedType') {
+        return isQueryResultDataType(params[1]) && isQueryResultNumericType(params[1]);
+    }
+
+    return false;
+}

package/src/components/QueryResultsTable/helpers/formatQueryResultValue.ts

@@ -0,0 +1,38 @@
+import unipika from '@gravity-ui/unipika';
+import type {QueryResultDataType, QueryResultFormatterSettings} from '../../../types/queryResults';
+
+const formatter = unipika();
+
+const DEFAULT_FORMATTER_SETTINGS: QueryResultFormatterSettings = {
+    escapeWhitespace: false,
+    decodeUTF8: false,
+    binaryAsHex: true,
+    escapeYQLStrings: true,
+    omitStructNull: true,
+};
+
+export type FormattedQueryResultValue =
+    {html: string; text: string; error: false} | {html: ''; text: ''; error: true};
+
+export function formatQueryResultValue(
+    value: unknown,
+    type: QueryResultDataType,
+    settings?: QueryResultFormatterSettings,
+): FormattedQueryResultValue {
+    const formatterSettings = {...DEFAULT_FORMATTER_SETTINGS, ...settings};
+    const input: [unknown, unknown] = [value, type];
+
+    try {
+        return {
+            html: formatter.formatFromYQL(input, {...formatterSettings, asHTML: true}),
+            text: formatter.formatFromYQL(input, {
+                ...formatterSettings,
+                asHTML: false,
+                maxStringSize: undefined,
+            }),
+            error: false,
+        };
+    } catch {
+        return {html: '', text: '', error: true};
+    }
+}

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

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

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

@@ -0,0 +1,5 @@
+{
+  "action_show-more": "Show more",
+  "action_show-less": "Show less",
+  "alert_format-value-error": "Unable to format value"
+}

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

@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:query-results-table', dicts);

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

@@ -0,0 +1,5 @@
+{
+  "action_show-more": "Показать больше",
+  "action_show-less": "Показать меньше",
+  "alert_format-value-error": "Не удалось отформатировать значение"
+}

package/src/components/QueryResultsTable/index.ts

@@ -0,0 +1,3 @@
+export {QueryResultsTable} from './QueryResultsTable';
+export type {QueryResultsTableProps} from './QueryResultsTable';
+export {formatQueryResultType} from './helpers/formatQueryResultType';

package/src/components/QueryResultsTable/internal/QueryResultCell.tsx

@@ -0,0 +1,63 @@
+import React, {useMemo, useState} from 'react';
+import {Button, ClipboardButton} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import type {QueryResultColumn, QueryResultFormatterSettings} from '../../../types/queryResults';
+import {formatQueryResultValue} from '../helpers/formatQueryResultValue';
+import i18n from '../i18n';
+
+const block = cn('qp-query-results-table');
+
+export type QueryResultCellProps<TRow extends Record<string, unknown>> = {
+    row: TRow;
+    value: unknown;
+    index: number;
+    column: QueryResultColumn<TRow>;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines: number;
+};
+
+export function QueryResultCell<TRow extends Record<string, unknown>>({
+    row,
+    value,
+    index,
+    column,
+    formatterSettings,
+    maxVisibleLines,
+}: QueryResultCellProps<TRow>) {
+    const [expanded, setExpanded] = useState(false);
+    const formatted = useMemo(
+        () => formatQueryResultValue(value, column.type, formatterSettings),
+        [column.type, formatterSettings, value],
+    );
+
+    if (column.render) {
+        return <>{column.render({row, value, index, column})}</>;
+    }
+
+    if (formatted.error) {
+        return <span className={block('format-error')}>{i18n('alert_format-value-error')}</span>;
+    }
+
+    const lines = formatted.html.split('\n');
+    const hasMore = lines.length > maxVisibleLines;
+    const html = expanded || !hasMore ? formatted.html : lines.slice(0, maxVisibleLines).join('\n');
+
+    return (
+        <span className={block('cell')}>
+            <span className="unipika" dangerouslySetInnerHTML={{__html: html}} />
+            <span className={block('cell-actions')}>
+                <ClipboardButton text={formatted.text} view="flat-secondary" size="s" />
+            </span>
+            {hasMore && (
+                <Button
+                    view="flat"
+                    size="s"
+                    className={block('show-more')}
+                    onClick={() => setExpanded((currentExpanded) => !currentExpanded)}
+                >
+                    {i18n(expanded ? 'action_show-less' : 'action_show-more')}
+                </Button>
+            )}
+        </span>
+    );
+}

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export {DataTable} from './DataTable';
 export type {DataTableProps, Column} from './DataTable';
+export {QueryResultsTable, formatQueryResultType} from './QueryResultsTable';
+export type {QueryResultsTableProps} from './QueryResultsTable';
 export {QueryStatusIcon} from './QueryStatusIcon';
 export {QueryDuration} from './QueryDuration';
 export {LazyList} from './LazyList';
@@ -55,6 +57,7 @@ export type {
 export * from './Dashboard';
 export {Chart} from './Chart';
 export type {ChartAction, ChartProps} from './Chart';
+export {ErrorTree} from './ErrorTree';
 export {
     MonacoLanguage,
     YT_DARK_HC_MONACO_THEME,
@@ -64,3 +67,5 @@ export {
     MONACO_THEME_BY_UI,
 } from './MonacoEditor';
 export type {MonacoThemeName} from './MonacoEditor';
+export * from './AttachmentList';
+export * from './AttachmentListPlaceholder';

package/src/helpers/createUuid.ts

@@ -0,0 +1,3 @@
+export const createUuid = () => {
+    return crypto.randomUUID().replace(/-/g, '');
+};

package/src/helpers/isObjectEqual.ts

@@ -0,0 +1,15 @@
+export const isObjectEqual = (obj1: Record<string, unknown>, obj2: Record<string, unknown>) => {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    const compareKeys = keys1.length > keys2.length ? keys1 : keys2;
+
+    for (const key of compareKeys) {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+
+        if (v1 !== v2) return false;
+    }
+
+    return true;
+};

package/src/helpers/useDebouncedValue.ts

@@ -0,0 +1,14 @@
+import {useEffect, useState} from 'react';
+
+/** Delays a changing value without duplicating timer lifecycle handling in consumers. */
+export function useDebouncedValue<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
+
+        return () => clearTimeout(timeoutId);
+    }, [delay, value]);
+
+    return debouncedValue;
+}

package/src/index.ts

@@ -7,3 +7,6 @@ export type {SavedQuery} from './types/savedQueries';
 export * from './types/tutorial';
 export * from './types/navigation';
 export * from './types/pathEditor';
+export * from './types/errorTree';
+export * from './types/queryStatistics';
+export * from './types/queryResults';

package/src/modules/Attachments/Attachments.scss

@@ -0,0 +1,10 @@
+.qp-attachments {
+    &__panel {
+        flex: 1;
+    }
+
+    &__tab .g-tab__title {
+        display: flex;
+        gap: var(--g-spacing-2)
+    }
+}

package/src/modules/Attachments/Attachments.stories.tsx

@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {fn} from 'storybook/test';
+import {Attachments} from './Attachments';
+
+type AttachmentsProps = React.ComponentProps<typeof Attachments>;
+type Attachment = NonNullable<AttachmentsProps['attachments']>[number];
+
+const attachments: Attachment[] = [
+    {id: 'readme', name: 'README.md'},
+    {id: 'query', name: 'daily-report.sql'},
+    {
+        id: 'documentation',
+        name: 'Query documentation',
+        link: 'https://example.com/docs/query',
+        token: 'documentation-token',
+    },
+];
+
+const deletedAttachments: Attachment[] = [
+    {id: 'archive', name: 'archive.csv'},
+    {
+        id: 'old-dashboard',
+        name: 'Old dashboard',
+        link: 'https://example.com/dashboards/old',
+        token: 'dashboard-token',
+    },
+];
+
+const tokens: NonNullable<AttachmentsProps['tokens']> = [
+    {value: 'documentation-token', title: 'Documentation token'},
+    {value: 'dashboard-token', title: 'Dashboard token'},
+];
+
+const meta = {
+    title: 'Modules/Attachments',
+    component: Attachments,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{height: 500, width: 322}}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        tokens,
+        onChange: fn(),
+    },
+} satisfies Meta<typeof Attachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Empty state with content configured through `placeholderProps`. */
+export const Default: Story = {
+    args: {
+        placeholderProps: {
+            title: 'No attachments',
+            description: 'Add files or links that should be available to the query.',
+            linkForDoc: '#attachments-help',
+            linkText: 'About attachments',
+        },
+    },
+};
+
+/** Initial files and links supplied through the uncontrolled `attachments` API. */
+export const WithAttachments: Story = {
+    args: {
+        attachments,
+    },
+};
+
+/** Current and deleted collections. Open the Deleted tab to restore an attachment. */
+export const WithDeletedAttachments: Story = {
+    args: {
+        attachments,
+        deletedAttachments,
+    },
+};
+
+const ControlledAttachments = (props: AttachmentsProps) => {
+    const [currentAttachments, setCurrentAttachments] = useState(props.attachments ?? []);
+    const [currentDeletedAttachments, setCurrentDeletedAttachments] = useState(
+        props.deletedAttachments ?? [],
+    );
+
+    return (
+        <Attachments
+            {...props}
+            attachments={currentAttachments}
+            deletedAttachments={currentDeletedAttachments}
+            onChange={(payload) => {
+                setCurrentAttachments(payload.attachments);
+                setCurrentDeletedAttachments(payload.deletedAttachments);
+                props.onChange?.(payload);
+            }}
+        />
+    );
+};
+
+/** Controlled usage: every edit, delete, restore, or addition is applied from `onChange`. */
+export const Controlled: Story = {
+    args: {
+        attachments,
+        deletedAttachments,
+    },
+    render: (args) => <ControlledAttachments {...args} />,
+};