@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import {ChevronsDown, ChevronsUp} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import {SearchWithButtons} from '../../../components';
-import i18n from '../i18n';
-
-import './QueryStatisticsToolbar.scss';
-
-const block = cn('qp-query-statistics-toolbar');
-
-export type QueryStatisticsToolbarProps = {
-    search: string;
-    hasGroups: boolean;
-    onSearchUpdate: (value: string) => void;
-    onExpandAll: () => void;
-    onCollapseAll: () => void;
-};
-
-export function QueryStatisticsToolbar({
-    search,
-    hasGroups,
-    onSearchUpdate,
-    onExpandAll,
-    onCollapseAll,
-}: QueryStatisticsToolbarProps) {
-    const buttons = [
-        <Button
-            key="expand"
-            size="m"
-            aria-label={i18n('action_expand-all')}
-            title={i18n('action_expand-all')}
-            disabled={!hasGroups}
-            onClick={onExpandAll}
-        >
-            <Icon data={ChevronsDown} size={16} />
-        </Button>,
-        <Button
-            key="collapse"
-            size="m"
-            aria-label={i18n('action_collapse-all')}
-            title={i18n('action_collapse-all')}
-            disabled={!hasGroups}
-            onClick={onCollapseAll}
-        >
-            <Icon data={ChevronsUp} size={16} />
-        </Button>,
-    ];
-
-    return (
-        <SearchWithButtons
-            value={search}
-            placeholder={i18n('field_search')}
-            hasClear
-            onUpdate={onSearchUpdate}
-            endButtons={buttons}
-            className={block()}
-        />
-    );
-}

package/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import type {QueryStatisticsItem} from '../../../types/queryStatistics';
-import {QueryStatistics} from '../QueryStatistics';
-
-const data: QueryStatisticsItem[] = [
-    {
-        id: 'input',
-        name: 'Input',
-        children: [
-            {
-                id: 'input.rows',
-                name: 'Rows',
-                description: 'Number of rows read from the input',
-                values: {min: 0, max: 1600, sum: 4200, count: 4, last: 1400},
-            },
-            {
-                id: 'input.weight',
-                name: 'Data weight',
-                unit: 'bytes',
-                values: {min: 1024, max: 1048576, avg: 120000.25, sum: 2097152, count: 4},
-            },
-        ],
-    },
-];
-
-const largeData: QueryStatisticsItem[] = Array.from({length: 12}, (_group, groupIndex) => ({
-    id: `group-${groupIndex}`,
-    name: `Group ${groupIndex + 1} with a deliberately long name for horizontal scrolling`,
-    children: Array.from({length: 25}, (_metric, metricIndex) => ({
-        id: `group-${groupIndex}.metric-${metricIndex}`,
-        name: `Metric ${metricIndex + 1}`,
-        values: {
-            min: metricIndex,
-            max: metricIndex * 10,
-            sum: metricIndex * 100,
-            count: metricIndex + 1,
-            last: metricIndex * 5,
-        },
-    })),
-}));
-
-const meta: Meta<typeof QueryStatistics> = {
-    title: 'Modules/QueryStatistics',
-    component: QueryStatistics,
-    tags: ['autodocs'],
-    args: {data},
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryStatistics>;
-
-export const Default: Story = {};
-
-export const ConfiguredColumns: Story = {
-    args: {
-        visibleColumns: ['last', 'avg', 'count'],
-        columnConfig: {last: {title: 'Latest value', width: '20%'}},
-        extraColumns: [{id: 'unit', title: 'Unit', render: ({item}) => item.unit ?? '—'}],
-    },
-};
-
-export const VirtualAndFixed: Story = {
-    args: {data: largeData, virtual: true, fixedHeader: true},
-    render: (args) => (
-        <div style={{height: 360, maxWidth: 1100, overflow: 'auto'}}>
-            <QueryStatistics {...args} />
-        </div>
-    ),
-};

package/src/modules/RowsList/RowsList.scss

@@ -1,5 +0,0 @@
-.qp-rows-list {
-  .g-list__item_selected:hover {
-    background-color: var(--g-color-base-selection-hover);
-  }
-}

package/src/modules/RowsList/RowsList.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListItem,
-    QueryListRow,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListRowVariant,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {EmptyContent, LazyList} from '../../components';
-import {prepareRowData} from './helpers/prepareRowData';
-import {SEARCH_ROW_HEIGHT} from '../../constants/row';
-import './RowsList.scss';
-
-const block = cn('qp-rows-list');
-
-export type RowsListProps<T extends QueryListRow> = {
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    rowVariant?: QueryListRowVariant;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
-    showFiltersHint?: boolean;
-    className?: string;
-    onItemClick?: (item: QueryListItem<T>, index: number) => void;
-};
-
-export const RowsList = <T extends QueryListRow>({
-    items,
-    selectedRowId,
-    rowVariant = 'default',
-    visibleFields,
-    editing,
-    comparison,
-    getRowActions,
-    renderRow,
-    showFiltersHint,
-    className,
-    onItemClick,
-}: RowsListProps<T>) => {
-    const getItemHeight = (item: QueryListItem<T>) =>
-        rowVariant === 'search' && !('header' in item) ? SEARCH_ROW_HEIGHT : item.height;
-    const selectedItemIndex =
-        selectedRowId === undefined
-            ? undefined
-            : items.findIndex((item) => !('header' in item) && item.id === selectedRowId);
-
-    const handleItemClick = (item: QueryListItem<T>, index: number) => {
-        if ('header' in item || !comparison?.enabled) {
-            onItemClick?.(item, index);
-            return;
-        }
-
-        const selected = comparison.comparedRowIds.includes(item.id);
-        comparison.onChange(item, !selected);
-    };
-
-    if (!items.length) {
-        return (
-            <EmptyContent
-                variant={showFiltersHint ? 'nothing-found' : 'no-files'}
-                className={className}
-            />
-        );
-    }
-
-    return (
-        <LazyList<QueryListItem<T>>
-            className={block(null, className)}
-            items={items}
-            itemHeight={getItemHeight}
-            renderItem={(item, isActive, index) =>
-                renderRow(
-                    prepareRowData({
-                        item,
-                        isActive,
-                        index,
-                        variant: rowVariant,
-                        visibleFields,
-                        editing,
-                        comparison,
-                        getRowActions,
-                    }),
-                )
-            }
-            selectedItemIndex={selectedItemIndex}
-            onItemClick={handleItemClick}
-        />
-    );
-};

package/src/modules/RowsList/helpers/prepareRowData.ts

@@ -1,61 +0,0 @@
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListItem,
-    QueryListRow,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListRowVariant,
-    QueryListVisibleFieldsConfig,
-} from '../../../types/queryList';
-
-type Props<T extends QueryListRow> = {
-    item: QueryListItem<T>;
-    isActive: boolean;
-    index: number;
-    variant: QueryListRowVariant;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-};
-
-export const prepareRowData = <T extends QueryListRow>({
-    item,
-    isActive,
-    index,
-    variant,
-    visibleFields,
-    editing,
-    comparison,
-    getRowActions,
-}: Props<T>): QueryListRowRenderData<T> => {
-    const isRow = !('header' in item);
-    const actions = isRow && getRowActions ? getRowActions(item) : undefined;
-    const editingData =
-        isRow && editing
-            ? {
-                  enabled: editing.rowId === item.id,
-                  onSubmit: editing.onSubmit,
-                  onCancel: editing.onCancel,
-              }
-            : undefined;
-    const comparisonData =
-        isRow && comparison && comparison.enabled
-            ? {
-                  enabled: true,
-                  checked: comparison.comparedRowIds.includes(item.id),
-              }
-            : undefined;
-
-    return {
-        item,
-        index,
-        isActive,
-        variant,
-        visibleFields,
-        actions,
-        editing: editingData,
-        comparison: comparisonData,
-    };
-};

package/src/modules/RowsList/index.ts

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

package/src/modules/SavedQueryRow/SavedQueryRow.scss

@@ -1,20 +0,0 @@
-.qp-saved-query-row {
-  height: 100%;
-
-  &_compared {
-    background-color: var(--g-color-base-utility-light);
-  }
-
-  &__content {
-    min-width: 0;
-  }
-
-  &__header {
-    height: 20px;
-    min-width: 0;
-  }
-
-  &__metadata {
-    min-width: 0;
-  }
-}

package/src/modules/SavedQueryRow/SavedQueryRow.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {Avatar, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {EditableRowTitle, RowActionsMenu, RowLink} from '../../components';
-import {formatDateCanonical} from '../../helpers/time';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import './SavedQueryRow.scss';
-
-const block = cn('qp-saved-query-row');
-
-export type SavedQueryRowProps<T extends SavedQuery = SavedQuery> = {
-    item: T;
-    renderAuthor?: (item: T) => React.ReactNode;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-export const SavedQueryRow = <T extends SavedQuery>({
-    item,
-    actions,
-    isActive,
-    comparison,
-    editing,
-    visibleFields,
-    renderAuthor,
-}: SavedQueryRowProps<T>) => {
-    const {author, engine, href, savedAt} = item;
-    const isEditing = Boolean(editing?.enabled);
-    const isComparisonMode = Boolean(comparison?.enabled);
-    const isChecked = Boolean(comparison?.checked);
-    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
-    const isFieldVisible = (field: string) =>
-        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
-    const authorContent =
-        renderAuthor?.(item) ??
-        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
-
-    return (
-        <RowLink
-            href={href}
-            disabled={isEditing || isComparisonMode}
-            className={block({compared: isChecked})}
-        >
-            <Flex direction="column" gap={1} className={block('content')}>
-                <Flex justifyContent="space-between" className={block('header')}>
-                    <EditableRowTitle item={item} editing={editing} />
-                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
-                </Flex>
-                <Flex gap={2} alignItems="center" className={block('metadata')}>
-                    {isFieldVisible('savedAt') && savedAt && (
-                        <Text color="complementary">{formatDateCanonical(savedAt)}</Text>
-                    )}
-                    {isFieldVisible('engine') && engine && (
-                        <Text color="complementary">{engine}</Text>
-                    )}
-                    {isFieldVisible('author') && authorContent}
-                </Flex>
-            </Flex>
-        </RowLink>
-    );
-};

package/src/modules/SavedQueryRow/index.ts

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

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.scss

@@ -1,15 +0,0 @@
-.qp-saved-query-search-row {
-  &__header {
-    min-width: 0;
-    width: 100%;
-  }
-
-  &__title {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__fixed-metadata {
-    flex-shrink: 0;
-  }
-}

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import {Avatar, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {MonacoLanguage, SearchRowLayout} from '../../components';
-import {formatDateCanonical} from '../../helpers/time';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import './SavedQuerySearchRow.scss';
-
-const block = cn('qp-saved-query-search-row');
-
-export type SavedQuerySearchRowProps<T extends SavedQuery = SavedQuery> = {
-    item: T;
-    renderAuthor?: (item: T) => React.ReactNode;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-export const SavedQuerySearchRow = <T extends SavedQuery>({
-    item,
-    comparison,
-    editing,
-    visibleFields,
-    renderAuthor,
-}: SavedQuerySearchRowProps<T>) => {
-    const {author, engine, href, query, savedAt} = item;
-    const authorContent =
-        renderAuthor?.(item) ??
-        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
-    const isFieldVisible = (field: string) =>
-        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
-
-    return (
-        <SearchRowLayout
-            query={query}
-            language={MonacoLanguage.YQL}
-            href={href}
-            disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
-            className={block()}
-            header={
-                <Flex gap={2} alignItems="center" className={block('header')}>
-                    <Text variant="subheader-1" ellipsis className={block('title')}>
-                        {item.title}
-                    </Text>
-                    {isFieldVisible('savedAt') && savedAt && (
-                        <Text color="complementary" className={block('fixed-metadata')}>
-                            {formatDateCanonical(savedAt)}
-                        </Text>
-                    )}
-                    {isFieldVisible('engine') && engine && (
-                        <Text color="complementary" className={block('fixed-metadata')}>
-                            {engine}
-                        </Text>
-                    )}
-                    {isFieldVisible('author') && authorContent}
-                </Flex>
-            }
-        />
-    );
-};

package/src/modules/SavedQuerySearchRow/index.ts

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

package/src/modules/TutorialRow/TutorialRow.scss

@@ -1,9 +0,0 @@
-.qp-tutorial-row {
-  height: 100%;
-  display: flex;
-  align-items: center;
-
-  &__content {
-    overflow: hidden;
-  }
-}

package/src/modules/TutorialRow/TutorialRow.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {TutorialRow} from './TutorialRow';
-import {TutorialHistoryRow} from '../../types/tutorial';
-
-const makeRow = (overrides: Partial<TutorialHistoryRow>): TutorialHistoryRow => ({
-    id: 1,
-    title: 'Getting started with YQL',
-    height: 28,
-    ...overrides,
-});
-
-const meta: Meta<typeof TutorialRow> = {
-    title: 'Modules/TutorialRow',
-    component: TutorialRow,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    args: {
-        item: makeRow({}),
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 380}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof TutorialRow>;
-
-/** Default tutorial row */
-export const Default: Story = {};
-
-/** Row with a link */
-export const WithHref: Story = {
-    args: {
-        item: makeRow({href: '#'}),
-    },
-};

package/src/modules/TutorialRow/TutorialRow.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {TutorialHistoryRow} from '../../types/tutorial';
-import {RowLink} from '../../components';
-import cn from 'bem-cn-lite';
-import './TutorialRow.scss';
-
-const block = cn('qp-tutorial-row');
-
-export type TutorialRowProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
-    item: T;
-};
-
-export const TutorialRow = <T extends TutorialHistoryRow>({item}: TutorialRowProps<T>) => {
-    const {href, id, title} = item;
-
-    return (
-        <RowLink href={href} className={block()}>
-            <Flex gap={1} alignItems="center" className={block('content')}>
-                <Text color="secondary">{id}.</Text>
-                <Text ellipsis>{title}</Text>
-            </Flex>
-        </RowLink>
-    );
-};

package/src/modules/TutorialRow/index.ts

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

package/src/modules/TutorialSearchRow/TutorialSearchRow.scss

@@ -1,5 +0,0 @@
-.qp-tutorial-search-row {
-  &__header {
-    overflow: hidden;
-  }
-}

package/src/modules/TutorialSearchRow/TutorialSearchRow.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {TutorialSearchRow} from './TutorialSearchRow';
-import {TutorialHistoryRow} from '../../types/tutorial';
-
-const QUERY = `use test;
-
-SELECT
-    "test_session" AS session_id,
-    "test_task" AS task_id,
-    SUBSTRING("test", 1, 1) AS truncated_char`;
-
-const makeRow = (overrides: Partial<TutorialHistoryRow>): TutorialHistoryRow => ({
-    id: 1,
-    title: 'Getting started with YQL',
-    query: QUERY,
-    height: 110,
-    ...overrides,
-});
-
-const meta: Meta<typeof TutorialSearchRow> = {
-    title: 'Modules/TutorialSearchRow',
-    component: TutorialSearchRow,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    args: {
-        item: makeRow({}),
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 420}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof TutorialSearchRow>;
-
-/** Default tutorial search row */
-export const Default: Story = {};

package/src/modules/TutorialSearchRow/TutorialSearchRow.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {TutorialHistoryRow} from '../../types/tutorial';
-import {MonacoLanguage, SearchRowLayout} from '../../components';
-import './TutorialSearchRow.scss';
-import cn from 'bem-cn-lite';
-
-const block = cn('qp-tutorial-search-row');
-
-export type TutorialSearchRowProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
-    item: T;
-};
-
-export const TutorialSearchRow = <T extends TutorialHistoryRow>({
-    item,
-}: TutorialSearchRowProps<T>) => {
-    const {href, id, title, query} = item;
-
-    return (
-        <SearchRowLayout
-            query={query}
-            language={MonacoLanguage.YQL}
-            href={href}
-            className={block()}
-            header={
-                <Flex gap={2} alignItems="center" className={block('header')}>
-                    <Text color="secondary">{id}.</Text>
-                    <Text ellipsis>{title}</Text>
-                </Flex>
-            }
-        />
-    );
-};

package/src/modules/TutorialSearchRow/index.ts

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