@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/widgets/QueriesNavigation/helpers/createTableDetailConfig.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-    NavigationMeta,
-    NavigationPreview,
-    NavigationSchema,
-    NavigationView,
-} from '../../../modules';
-import type {
-    NavigationDetailConfig,
-    NavigationDetailConfigFactory,
-    NavigationItem,
-    NavigationMetaConfig,
-    NavigationMetaItem,
-    NavigationPreviewConfig,
-    NavigationPreviewRow,
-    NavigationSchemaColumn,
-    NavigationSchemaConfig,
-    NavigationViewConfig,
-} from '../../../types/navigation';
-import i18n from '../i18n';
-
-export type NavigationSchemaResolver<
-    TItem extends NavigationItem = NavigationItem,
-    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
-> = (item: TItem) => NavigationSchemaConfig<TColumn> | undefined;
-
-export type NavigationPreviewResolver<
-    TItem extends NavigationItem = NavigationItem,
-    TRow extends NavigationPreviewRow = NavigationPreviewRow,
-> = (item: TItem) => NavigationPreviewConfig<TRow> | undefined;
-
-export type NavigationMetaResolver<
-    TItem extends NavigationItem = NavigationItem,
-    TMetaItem extends NavigationMetaItem = NavigationMetaItem,
-> = (item: TItem) => NavigationMetaConfig<TMetaItem> | undefined;
-
-export type NavigationMetaRenderer<TMetaItem extends NavigationMetaItem = NavigationMetaItem> = (
-    data: NavigationMetaConfig<TMetaItem>,
-) => React.ReactNode;
-
-export type NavigationViewResolver<
-    TItem extends NavigationItem = NavigationItem,
-    TRow extends NavigationPreviewRow = NavigationPreviewRow,
-> = (item: TItem) => NavigationViewConfig<TRow> | undefined;
-
-export type CreateTableDetailConfigOptions<
-    TItem extends NavigationItem = NavigationItem,
-    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
-    TRow extends NavigationPreviewRow = NavigationPreviewRow,
-    TMetaItem extends NavigationMetaItem = NavigationMetaItem,
-> = {
-    resolveSchema?: NavigationSchemaResolver<TItem, TColumn>;
-    resolvePreview?: NavigationPreviewResolver<TItem, TRow>;
-    resolveMeta?: NavigationMetaResolver<TItem, TMetaItem>;
-    renderMeta?: NavigationMetaRenderer<TMetaItem>;
-    resolveView?: NavigationViewResolver<TItem, TRow>;
-};
-
-export const createTableDetailConfig = <
-    TItem extends NavigationItem = NavigationItem,
-    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
-    TRow extends NavigationPreviewRow = NavigationPreviewRow,
-    TMetaItem extends NavigationMetaItem = NavigationMetaItem,
->(
-    options?: CreateTableDetailConfigOptions<TItem, TColumn, TRow, TMetaItem>,
-): NavigationDetailConfigFactory<TItem> => {
-    const {resolveSchema, resolvePreview, resolveMeta, renderMeta, resolveView} = options ?? {};
-
-    return (item): NavigationDetailConfig => ({
-        tabs: [
-            {
-                id: 'schema',
-                title: i18n('tab_schema'),
-                renderContent: ({search, onSearchUpdate, searchPlaceholder}) => {
-                    const schema = resolveSchema?.(item);
-                    return (
-                        <NavigationSchema<TColumn>
-                            data={schema ?? {columns: []}}
-                            search={search}
-                            onSearchUpdate={onSearchUpdate}
-                            searchPlaceholder={searchPlaceholder}
-                        />
-                    );
-                },
-            },
-            {
-                id: 'preview',
-                title: i18n('tab_preview'),
-                renderContent: ({search, onSearchUpdate, searchPlaceholder}) => {
-                    const preview = resolvePreview?.(item);
-                    return (
-                        <NavigationPreview<TRow>
-                            data={preview ?? {columns: [], rows: []}}
-                            search={search}
-                            onSearchUpdate={onSearchUpdate}
-                            searchPlaceholder={searchPlaceholder}
-                        />
-                    );
-                },
-            },
-            {
-                id: 'meta',
-                title: i18n('tab_meta'),
-                renderContent: () => {
-                    const meta = resolveMeta?.(item);
-                    return (
-                        <NavigationMeta<TMetaItem>
-                            data={meta ?? {groups: []}}
-                            view={renderMeta ? {render: renderMeta} : undefined}
-                        />
-                    );
-                },
-            },
-            {
-                id: 'view',
-                title: i18n('tab_view'),
-                renderContent: () => {
-                    const view = resolveView?.(item);
-                    return <NavigationView<TRow> data={view ?? {sections: []}} />;
-                },
-            },
-        ],
-        defaultTab: 'schema',
-        hasSearch: false,
-        searchPlaceholder: i18n('field_detail-search-placeholder'),
-    });
-};

package/src/widgets/QueriesNavigation/i18n/dicts.ts

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

package/src/widgets/QueriesNavigation/i18n/en.json

@@ -1,10 +0,0 @@
-{
-    "title_name": "Title",
-    "alert_load-error": "Failed to load data",
-    "field_search-placeholder": "Search",
-    "tab_schema": "Schema",
-    "tab_preview": "Preview",
-    "tab_meta": "Meta",
-    "tab_view": "View",
-    "field_detail-search-placeholder": "Search"
-}

package/src/widgets/QueriesNavigation/i18n/index.ts

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

package/src/widgets/QueriesNavigation/i18n/ru.json

@@ -1,10 +0,0 @@
-{
-    "title_name": "Название",
-    "alert_load-error": "Не удалось загрузить данные",
-    "field_search-placeholder": "Поиск",
-    "tab_schema": "Схема",
-    "tab_preview": "Превью",
-    "tab_meta": "Мета",
-    "tab_view": "Просмотр",
-    "field_detail-search-placeholder": "Поиск"
-}

package/src/widgets/QueriesNavigation/index.ts

@@ -1,13 +0,0 @@
-export {QueriesNavigation} from './QueriesNavigation';
-export type {QueriesNavigationProps} from './QueriesNavigation';
-export {createTableDetailConfig} from './helpers/createTableDetailConfig';
-export type {
-    CreateTableDetailConfigOptions,
-    NavigationMetaRenderer,
-    NavigationMetaResolver,
-    NavigationPreviewResolver,
-    NavigationSchemaResolver,
-    NavigationViewResolver,
-} from './helpers/createTableDetailConfig';
-export {createEmptyDetailConfig} from './helpers/createEmptyDetailConfig';
-export {createNavigationDetailResolver} from './helpers/createNavigationDetailResolver';

package/src/widgets/QueryResults/QueryResults.scss

@@ -1,25 +0,0 @@
-.qp-query-results {
-    min-width: 0;
-
-    &__toolbar {
-        min-width: 0;
-    }
-
-    &__views,
-    &__rows-info,
-    &__actions {
-        flex-shrink: 0;
-    }
-
-    &__toolbar-content {
-        min-width: 0;
-    }
-
-    &__actions {
-        margin-left: auto;
-    }
-
-    &__content {
-        min-width: 0;
-    }
-}

package/src/widgets/QueryResults/QueryResults.stories.tsx

@@ -1,155 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {
-    ArrowDownToLine,
-    ArrowUpFromLine,
-    ArrowUpRightFromSquare,
-    DatabaseArrowRight,
-    Gear,
-    LayoutColumns,
-} from '@gravity-ui/icons';
-import {Button, Flex, Icon, Link} from '@gravity-ui/uikit';
-import {action} from 'storybook/actions';
-import {QueryResults} from './QueryResults';
-import type {QueryResultColumn, QueryResultsView} from '../../types/queryResults';
-
-type Row = {
-    age: number;
-    ip: string;
-    last_url: string;
-    last_visit_time: number;
-    name: unknown;
-    region: number;
-    user_agent: string;
-};
-
-const columns: Array<QueryResultColumn<Row>> = [
-    {name: 'age', header: 'age', type: ['DataType', 'Int32'], width: 70},
-    {name: 'ip', header: 'ip', type: ['DataType', 'String'], width: 180},
-    {name: 'last_url', header: 'last_url', type: ['DataType', 'Utf8'], width: 420},
-    {
-        name: 'last_visit_time',
-        header: 'last_visit_time',
-        type: ['DataType', 'Timestamp'],
-        width: 160,
-    },
-    {name: 'name', header: 'name', type: ['OptionalType', ['DataType', 'Utf8']], width: 160},
-    {name: 'region', header: 'region', type: ['DataType', 'Uint32'], width: 100},
-    {name: 'user_agent', header: 'user_agent', type: ['DataType', 'String'], width: 360},
-];
-
-const rows: Row[] = [
-    {
-        age: 15,
-        ip: '95.106.17.32',
-        last_url:
-            'http://avia-talk.ru/otzyvy-o-aviakompaniyax-rossii/otzyvy-aviakompaniya-s7-sibir/comments2',
-        last_visit_time: 1447027200,
-        name: ['Anya'],
-        region: 213,
-        user_agent: 'Mozilla/5.0',
-    },
-    {
-        age: 25,
-        ip: '88.78.248.151',
-        last_url:
-            'http://www.arrivo.ru/statii/sovety/kak-puteshestvovat-s-peresadkami-vazhney-sovety.html',
-        last_visit_time: 1447113600,
-        name: ['Petr'],
-        region: 225,
-        user_agent:
-            'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648)',
-    },
-    {
-        age: 17,
-        ip: '93.94.183.63',
-        last_url: 'http://www.avia77.ru/advices/change%20of%20plane/',
-        last_visit_time: 1447160400,
-        name: ['Masha'],
-        region: 1,
-        user_agent: 'Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.17',
-    },
-];
-
-const meta: Meta<typeof QueryResults> = {
-    title: 'Widgets/QueryResults',
-    component: QueryResults,
-    tags: ['autodocs'],
-    parameters: {layout: 'padded'},
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryResults<Row>>;
-
-export const Default: Story = {
-    args: {
-        columns,
-        rows,
-        totalRows: 6,
-        toolbarContent: (
-            <Flex gap={2} alignItems="center">
-                <Link href="#">markov: `tmp/yql/mbobelyuk/result`</Link>
-                <Button view="flat-secondary" size="s" onClick={action('insert')}>
-                    <Icon data={DatabaseArrowRight} size={16} />
-                    Insert
-                </Button>
-                <Button view="flat-secondary" size="s" onClick={action('go-to-yt')}>
-                    Go to YT
-                    <Icon data={ArrowUpRightFromSquare} size={16} />
-                </Button>
-            </Flex>
-        ),
-        actions: (
-            <Flex gap={1} alignItems="center">
-                <Button view="flat-secondary" size="s" onClick={action('export')}>
-                    <Icon data={ArrowUpFromLine} size={16} />
-                    Export
-                </Button>
-                <Button view="flat-secondary" size="s" onClick={action('download')}>
-                    <Icon data={ArrowDownToLine} size={16} />
-                    Download
-                </Button>
-                <Button
-                    view="flat-secondary"
-                    size="s"
-                    aria-label="Configure columns"
-                    onClick={action('configure-columns')}
-                >
-                    <Icon data={LayoutColumns} size={16} />
-                </Button>
-                <Button
-                    view="flat-secondary"
-                    size="s"
-                    aria-label="Settings"
-                    onClick={action('settings')}
-                >
-                    <Icon data={Gear} size={16} />
-                </Button>
-            </Flex>
-        ),
-    },
-};
-
-const ControlledViewStory = () => {
-    const [view, setView] = useState<QueryResultsView>('schema');
-
-    return <QueryResults columns={columns} rows={rows} view={view} onViewChange={setView} />;
-};
-
-export const ControlledView: Story = {render: () => <ControlledViewStory />};
-
-export const Loading: Story = {args: {columns, rows: [], loading: true}};
-
-export const Error: Story = {
-    args: {columns, rows: [], errorContent: 'Failed to load query results'},
-};
-
-export const CustomSchema: Story = {
-    args: {
-        columns,
-        rows,
-        renderSchema: ({columns: schemaColumns}) => (
-            <div>{`The result contains ${schemaColumns.length} columns.`}</div>
-        ),
-    },
-};

package/src/widgets/QueryResults/QueryResults.tsx

@@ -1,121 +0,0 @@
-import React, {useCallback, useState} from 'react';
-import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {QueryResultsTable} from '../../components';
-import type {
-    QueryResultColumn,
-    QueryResultFormatterSettings,
-    QueryResultsSchemaRenderContext,
-    QueryResultsView,
-} from '../../types/queryResults';
-import {QueryResultsSchema} from './internal/QueryResultsSchema';
-import i18n from './i18n';
-
-import './QueryResults.scss';
-
-const block = cn('qp-query-results');
-
-export type QueryResultsProps<TRow extends Record<string, unknown>> = {
-    columns: Array<QueryResultColumn<TRow>>;
-    /** Values use the YQL wire representation consumed by @gravity-ui/unipika. */
-    rows: TRow[];
-    totalRows?: number;
-    loading?: boolean;
-    errorContent?: React.ReactNode;
-    rowKey?: (row: TRow, index: number) => string | number;
-    formatterSettings?: QueryResultFormatterSettings;
-    maxVisibleLines?: number;
-    title?: React.ReactNode;
-    toolbarContent?: React.ReactNode;
-    actions?: React.ReactNode;
-    view?: QueryResultsView;
-    defaultView?: QueryResultsView;
-    onViewChange?: (view: QueryResultsView) => void;
-    renderSchema?: (context: QueryResultsSchemaRenderContext<TRow>) => React.ReactNode;
-    className?: string;
-};
-
-export function QueryResults<TRow extends Record<string, unknown>>({
-    columns,
-    rows,
-    totalRows = rows.length,
-    loading,
-    errorContent,
-    rowKey,
-    formatterSettings,
-    maxVisibleLines,
-    title,
-    toolbarContent,
-    actions,
-    view: controlledView,
-    defaultView = 'result',
-    onViewChange,
-    renderSchema,
-    className,
-}: QueryResultsProps<TRow>) {
-    const [uncontrolledView, setUncontrolledView] = useState<QueryResultsView>(defaultView);
-    const view = controlledView ?? uncontrolledView;
-
-    const handleViewChange = useCallback(
-        (nextView: string) => {
-            const next = nextView as QueryResultsView;
-            if (controlledView === undefined) {
-                setUncontrolledView(next);
-            }
-            onViewChange?.(next);
-        },
-        [controlledView, onViewChange],
-    );
-
-    const schema = renderSchema?.({columns});
-    let content: React.ReactNode;
-
-    if (errorContent) {
-        content = <Text color="danger">{errorContent}</Text>;
-    } else if (view === 'schema') {
-        content = schema ?? <QueryResultsSchema columns={columns} loading={loading} />;
-    } else {
-        content = (
-            <QueryResultsTable
-                columns={columns}
-                rows={rows}
-                loading={loading}
-                rowKey={rowKey}
-                formatterSettings={formatterSettings}
-                maxVisibleLines={maxVisibleLines}
-            />
-        );
-    }
-
-    return (
-        <Flex direction="column" gap={2} className={block(null, className)}>
-            {title && <Text variant="subheader-1">{title}</Text>}
-            <Flex gap={2} alignItems="center" className={block('toolbar')}>
-                <SegmentedRadioGroup
-                    value={view}
-                    onUpdate={handleViewChange}
-                    width="auto"
-                    size="s"
-                    className={block('views')}
-                >
-                    <SegmentedRadioGroup.Option value="result">
-                        {i18n('tab_result')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value="schema">
-                        {i18n('tab_schema')}
-                    </SegmentedRadioGroup.Option>
-                </SegmentedRadioGroup>
-                <Text color="secondary" className={block('rows-info')}>
-                    {i18n('context_rows-info', {
-                        count: totalRows,
-                        visible: rows.length,
-                        total: totalRows,
-                    })}
-                </Text>
-                {toolbarContent && <div className={block('toolbar-content')}>{toolbarContent}</div>}
-                {actions && <div className={block('actions')}>{actions}</div>}
-            </Flex>
-            <div className={block('content')}>{content}</div>
-        </Flex>
-    );
-}

package/src/widgets/QueryResults/i18n/dicts.ts

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

package/src/widgets/QueryResults/i18n/en.json

@@ -1,10 +0,0 @@
-{
-  "tab_result": "Full result",
-  "tab_schema": "Schema",
-  "field_name": "Name",
-  "field_type": "Type",
-  "context_rows-info": {
-    "one": "{{visible}} of {{total}} row",
-    "other": "{{visible}} of {{total}} rows"
-  }
-}

package/src/widgets/QueryResults/i18n/index.ts

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

package/src/widgets/QueryResults/i18n/ru.json

@@ -1,12 +0,0 @@
-{
-  "tab_result": "Результат",
-  "tab_schema": "Схема",
-  "field_name": "Название",
-  "field_type": "Тип",
-  "context_rows-info": {
-    "one": "{{visible}} из {{total}} строки",
-    "few": "{{visible}} из {{total}} строк",
-    "many": "{{visible}} из {{total}} строк",
-    "other": "{{visible}} из {{total}} строки"
-  }
-}

package/src/widgets/QueryResults/index.ts

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

package/src/widgets/QueryResults/internal/QueryResultsSchema.tsx

@@ -1,41 +0,0 @@
-import React, {useMemo} from 'react';
-import type {Column} from '@gravity-ui/react-data-table';
-import {DataTable, formatQueryResultType} from '../../../components';
-import type {QueryResultColumn} from '../../../types/queryResults';
-import i18n from '../i18n';
-
-export type QueryResultsSchemaProps<TRow extends Record<string, unknown>> = {
-    columns: Array<QueryResultColumn<TRow>>;
-    loading?: boolean;
-};
-
-export function QueryResultsSchema<TRow extends Record<string, unknown>>({
-    columns,
-    loading,
-}: QueryResultsSchemaProps<TRow>) {
-    const tableColumns = useMemo<Array<Column<QueryResultColumn<TRow>>>>(
-        () => [
-            {
-                name: 'name',
-                header: i18n('field_name'),
-                render: ({row}) => row.header ?? row.name,
-            },
-            {
-                name: 'type',
-                header: i18n('field_type'),
-                render: ({row}) => <code>{formatQueryResultType(row.type)}</code>,
-            },
-        ],
-        [],
-    );
-
-    return (
-        <DataTable<QueryResultColumn<TRow>>
-            columns={tableColumns}
-            data={columns}
-            loading={loading}
-            loaded={!loading}
-            settings={{displayIndices: false, sortable: false, stripedRows: true}}
-        />
-    );
-}

package/src/widgets/SavedQueries/SavedQueries.scss

@@ -1,3 +0,0 @@
-.qp-saved-queries {
-  height: 100%;
-}