@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/QueryResultsTable/QueryResultsTable.tsx

@@ -1,112 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-{
-  "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

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

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

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

package/src/components/QueryResultsTable/index.ts

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

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

@@ -1,63 +0,0 @@
-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/QueryStatusIcon/QueryStatusIcon.scss

@@ -1,17 +0,0 @@
-.qp-query-status-icon {
-  &_completed {
-    color: var(--g-color-text-positive-heavy);
-  }
-
-  &_failed {
-    color: var(--g-color-text-danger);
-  }
-
-  &_running {
-    color: var(--g-color-base-brand);
-  }
-
-  &_draft, &_aborted {
-    color: var(--g-color-text-secondary);
-  }
-}

package/src/components/QueryStatusIcon/QueryStatusIcon.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueryStatusIcon} from './QueryStatusIcon';
-
-const meta: Meta<typeof QueryStatusIcon> = {
-    title: 'Components/QueryStatusIcon',
-    component: QueryStatusIcon,
-    tags: ['autodocs'],
-    argTypes: {
-        status: {
-            control: 'select',
-            options: ['completed', 'failed', 'aborted', 'draft', 'running'],
-        },
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryStatusIcon>;
-
-export const Completed: Story = {
-    args: {status: 'completed'},
-};
-
-export const Failed: Story = {
-    args: {status: 'failed'},
-};
-
-export const Aborted: Story = {
-    args: {status: 'aborted'},
-};
-
-export const Draft: Story = {
-    args: {status: 'draft'},
-};
-
-export const Running: Story = {
-    args: {status: 'running'},
-};
-
-export const AllStatuses: Story = {
-    render: () => (
-        <div style={{display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap'}}>
-            <QueryStatusIcon status="completed" />
-            <QueryStatusIcon status="failed" />
-            <QueryStatusIcon status="aborted" />
-            <QueryStatusIcon status="draft" />
-            <QueryStatusIcon status="running" />
-        </div>
-    ),
-};

package/src/components/QueryStatusIcon/QueryStatusIcon.tsx

@@ -1,37 +0,0 @@
-import React, {FC} from 'react';
-import {Icon, IconData, Spin} from '@gravity-ui/uikit';
-import CircleCheckIcon from '@gravity-ui/icons/svgs/circle-check.svg';
-import CircleExclamationIcon from '@gravity-ui/icons/svgs/circle-exclamation.svg';
-import FileIcon from '@gravity-ui/icons/svgs/file.svg';
-import CircleStopIcon from '@gravity-ui/icons/svgs/circle-stop.svg';
-import CirclePlayIcon from '@gravity-ui/icons/svgs/circle-play.svg';
-import {QueryStatus} from '../../types/history';
-import cn from 'bem-cn-lite';
-import './QueryStatusIcon.scss';
-import {ProgressQueryStatuses} from '../../constants/query';
-
-type Props = {
-    status: QueryStatus;
-    className?: string;
-};
-
-const STATUS_ICONS: Record<QueryStatus, IconData> = {
-    completed: CircleCheckIcon,
-    failed: CircleExclamationIcon,
-    draft: FileIcon,
-    aborted: CircleStopIcon,
-    running: CirclePlayIcon,
-};
-
-const block = cn('qp-query-status-icon');
-
-export const QueryStatusIcon: FC<Props> = ({status, className}) => {
-    if (ProgressQueryStatuses.includes(status)) {
-        return <Spin size="xs" />;
-    }
-
-    const statusIcon = STATUS_ICONS[status];
-    if (!statusIcon) return <>{status}</>;
-
-    return <Icon data={statusIcon} size={16} className={block({[status]: true}, className)} />;
-};

package/src/components/QueryStatusIcon/index.ts

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

package/src/components/RowActionsMenu/RowActionsMenu.tsx

@@ -1,47 +0,0 @@
-import React, {MouseEvent, useMemo} from 'react';
-import {Button, DropdownMenu, DropdownMenuItem, Icon} from '@gravity-ui/uikit';
-import EllipsisIcon from '@gravity-ui/icons/svgs/ellipsis.svg';
-import {QueryListRow, QueryListRowAction} from '../../types/queryList';
-
-export type RowActionsMenuProps<T extends QueryListRow = QueryListRow> = {
-    item: T;
-    actions?: QueryListRowAction<T>[];
-};
-
-export const RowActionsMenu = <T extends QueryListRow>({item, actions}: RowActionsMenuProps<T>) => {
-    const items = useMemo(() => {
-        return actions?.map<DropdownMenuItem>(({icon, text, theme, hidden, disabled, onClick}) => {
-            return {
-                text,
-                theme,
-                hidden,
-                disabled,
-                iconStart: icon,
-                action: () => {
-                    onClick(item);
-                },
-            };
-        });
-    }, [actions, item]);
-
-    if (!actions?.length) return null;
-
-    const handleClick = (event: MouseEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-
-    return (
-        <div onClick={handleClick}>
-            <DropdownMenu
-                size="s"
-                renderSwitcher={(props) => (
-                    <Button {...props} size="xs">
-                        <Icon data={EllipsisIcon} size={12} />
-                    </Button>
-                )}
-                items={items}
-            />
-        </div>
-    );
-};

package/src/components/RowActionsMenu/index.ts

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

package/src/components/RowLink/RowLink.scss

@@ -1,8 +0,0 @@
-.qp-row-link {
-  width: 100%;
-  padding: 4px 16px;
-  box-sizing: border-box;
-  text-decoration: none;
-  color: var(--g-color-text-primary);
-  cursor: pointer;
-}

package/src/components/RowLink/RowLink.tsx

@@ -1,23 +0,0 @@
-import React, {FC, ReactNode} from 'react';
-import cn from 'bem-cn-lite';
-import './RowLink.scss';
-
-const block = cn('qp-row-link');
-
-export type RowLinkProps = {
-    href?: string;
-    disabled?: boolean;
-    className?: string;
-    children: ReactNode;
-};
-
-export const RowLink: FC<RowLinkProps> = ({href, disabled, className, children}) => {
-    const isLink = Boolean(href) && !disabled;
-    const Wrap = isLink ? 'a' : 'div';
-
-    return (
-        <Wrap href={isLink ? href : undefined} className={block(null, className)}>
-            {children}
-        </Wrap>
-    );
-};

package/src/components/RowLink/index.ts

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

package/src/components/SearchRowLayout/SearchRowLayout.scss

@@ -1,18 +0,0 @@
-$search-row-height: 110px;
-$search-row-vertical-padding: 4px;
-$search-row-header-height: 20px;
-$search-row-gap: 8px;
-
-.qp-search-row-layout {
-  height: $search-row-height;
-
-  &__content {
-    height: 100%;
-  }
-
-  &__monaco {
-    height: $search-row-height - 2 * $search-row-vertical-padding - $search-row-header-height -
-      $search-row-gap;
-    border: 1px solid var(--g-color-line-generic-accent);
-  }
-}

package/src/components/SearchRowLayout/SearchRowLayout.tsx

@@ -1,45 +0,0 @@
-import React, {FC, ReactNode} from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {MonacoEditor} from '../MonacoEditor';
-import {RowLink} from '../RowLink';
-import {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';
-import {MONACO_CONFIG} from './helpers/monacoConfig';
-import './SearchRowLayout.scss';
-
-const block = cn('qp-search-row-layout');
-
-export type SearchRowLayoutProps = {
-    header: ReactNode;
-    query?: string;
-    language: string;
-    href?: string;
-    disabled?: boolean;
-    className?: string;
-};
-
-export const SearchRowLayout: FC<SearchRowLayoutProps> = ({
-    header,
-    query,
-    language,
-    href,
-    disabled,
-    className,
-}) => {
-    return (
-        <RowLink href={href} disabled={disabled} className={block(null, className)}>
-            <Flex direction="column" gap={2} className={block('content')}>
-                <Flex gap={2} alignItems="center">
-                    {header}
-                </Flex>
-                <MonacoEditor
-                    value={fitQueryToVisibleLines(query)}
-                    language={language}
-                    readOnly
-                    monacoConfig={MONACO_CONFIG}
-                    className={block('monaco')}
-                />
-            </Flex>
-        </RowLink>
-    );
-};

package/src/components/SearchRowLayout/helpers/fitQueryToVisibleLines.ts

@@ -1,10 +0,0 @@
-const MONACO_VISIBLE_LINES = 4;
-
-export const fitQueryToVisibleLines = (query = '') => {
-    const lines = query.split(/\r\n|\r|\n/).slice(0, MONACO_VISIBLE_LINES);
-    while (lines.length < MONACO_VISIBLE_LINES) {
-        lines.push('');
-    }
-
-    return lines.join('\n');
-};

package/src/components/SearchRowLayout/helpers/monacoConfig.ts

@@ -1,25 +0,0 @@
-import type {MonacoEditorConfig} from '../../MonacoEditor';
-
-const MONACO_LINE_HEIGHT = 18;
-
-export const MONACO_CONFIG: MonacoEditorConfig = {
-    contextmenu: false,
-    fontSize: 12,
-    lineHeight: MONACO_LINE_HEIGHT,
-    renderWhitespace: 'boundary',
-    minimap: {
-        enabled: false,
-    },
-    wordWrap: 'off',
-    scrollBeyondLastLine: false,
-    overviewRulerLanes: 0,
-    lineNumbersMinChars: 2,
-    glyphMargin: false,
-    scrollbar: {
-        vertical: 'hidden',
-        verticalHasArrows: false,
-        horizontal: 'auto',
-        useShadows: false,
-        alwaysConsumeMouseWheel: false,
-    },
-};

package/src/components/SearchRowLayout/index.ts

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

package/src/components/SearchWithButtons/SearchWithButtons.scss

@@ -1,10 +0,0 @@
-.qp-search-with-buttons {
-  &__input {
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  &__inner-buttons {
-    margin-right: 4px;
-  }
-}