@gravity-ui/querieskit 1.0.4 → 1.2.0

package/src/widgets/QueriesNavigation/QueriesNavigation.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {ClustersList, NavigationDetail, NavigationHeader, NavigationItemsList} from '../../modules';
+import {EmptyContent, SearchWithButtons} from '../../components';
+import {
+    NavigationCluster,
+    NavigationDetailConfig,
+    NavigationDetailPanelConfig,
+    NavigationHeaderConfig,
+    NavigationItem,
+    NavigationListStateConfig,
+    NavigationLocation,
+    NavigationSearchConfig,
+    NavigationSortConfig,
+    RenderNavigationCluster,
+    RenderNavigationItem,
+} from '../../types/navigation';
+import {createEmptyDetailConfig} from './helpers/createEmptyDetailConfig';
+import i18n from './i18n';
+import cn from 'bem-cn-lite';
+import './QueriesNavigation.scss';
+
+const block = cn('qp-queries-navigation');
+
+export type QueriesNavigationProps<
+    TItem extends NavigationItem = NavigationItem,
+    TCluster extends NavigationCluster = NavigationCluster,
+> = {
+    location: NavigationLocation;
+    onUpdate: (location: NavigationLocation) => void;
+    clusters?: TCluster[];
+    items?: TItem[];
+    header?: NavigationHeaderConfig;
+    search?: NavigationSearchConfig;
+    sort?: NavigationSortConfig;
+    listState?: NavigationListStateConfig;
+    detail?: NavigationDetailPanelConfig<TItem>;
+    renderClusterItem?: RenderNavigationCluster<TCluster>;
+    renderNavigationItem?: RenderNavigationItem<TItem>;
+    onClusterClick?: (cluster: TCluster) => void;
+    onItemClick?: (item: TItem) => void;
+    className?: string;
+};
+
+type NavigationBody<TItem extends NavigationItem> =
+    | {type: 'loading'}
+    | {type: 'details'; item: TItem; config: NavigationDetailConfig}
+    | {type: 'clusters'}
+    | {type: 'items'};
+
+export const QueriesNavigation = <
+    TItem extends NavigationItem = NavigationItem,
+    TCluster extends NavigationCluster = NavigationCluster,
+>({
+    location,
+    onUpdate,
+    clusters = [],
+    items = [],
+    header,
+    search,
+    sort,
+    listState,
+    detail,
+    renderClusterItem,
+    renderNavigationItem,
+    onClusterClick,
+    onItemClick,
+    className,
+}: QueriesNavigationProps<TItem, TCluster>) => {
+    const {loading, error, hasMore, onLoadMore} = listState ?? {};
+    const {actions, onLoadSuggestions} = header ?? {};
+    const {value: searchValue, onUpdate: onSearchUpdate} = search ?? {};
+    const {value: sortValue, onUpdate: onSortUpdate} = sort ?? {};
+    const {
+        openedItem,
+        onItemOpen,
+        onClose: onDetailClose,
+        resolve: resolveDetail,
+        search: detailSearch,
+        onSearchUpdate: onDetailSearchUpdate,
+        activeTab: detailActiveTab,
+        onTabUpdate: onDetailTabUpdate,
+        actions: detailActions,
+    } = detail ?? {};
+
+    const resolvedDetailActions = detailActions ?? actions;
+
+    const resolvedErrorContent = error ? (
+        <Text color="danger" className={block('error')}>
+            {error === true ? i18n('alert_load-error') : error}
+        </Text>
+    ) : null;
+
+    const openedConfig = openedItem
+        ? (resolveDetail?.(openedItem) ?? createEmptyDetailConfig(openedItem))
+        : undefined;
+
+    const body: NavigationBody<TItem> = (() => {
+        if (loading) {
+            return {type: 'loading'};
+        }
+        if (openedItem && openedConfig) {
+            return {type: 'details', item: openedItem, config: openedConfig};
+        }
+        if (!location.cluster) {
+            return {type: 'clusters'};
+        }
+        return {type: 'items'};
+    })();
+
+    const handleNavigate = (next: NavigationLocation) => {
+        onDetailClose?.();
+        onUpdate(next);
+    };
+
+    const handleClusterClick = (cluster: TCluster) => {
+        handleNavigate({cluster: cluster.id, path: undefined});
+        onClusterClick?.(cluster);
+    };
+
+    const handleItemClick = (item: TItem) => {
+        if (item.hasChildren) {
+            handleNavigate({cluster: location.cluster, path: item.path});
+        } else {
+            onItemOpen?.(item);
+        }
+        onItemClick?.(item);
+    };
+
+    if (body.type === 'details') {
+        return (
+            <NavigationDetail
+                key={body.item.path}
+                config={body.config}
+                location={{cluster: location.cluster, path: body.item.path}}
+                actions={resolvedDetailActions}
+                onUpdate={handleNavigate}
+                onLoadSuggestions={onLoadSuggestions}
+                search={detailSearch}
+                onSearchUpdate={onDetailSearchUpdate}
+                activeTab={detailActiveTab}
+                onTabUpdate={onDetailTabUpdate}
+                className={block(null, className)}
+            />
+        );
+    }
+
+    return (
+        <Flex direction="column" gap={1} className={block(null, className)}>
+            <NavigationHeader
+                location={location}
+                actions={actions}
+                onUpdate={handleNavigate}
+                onLoadSuggestions={onLoadSuggestions}
+            />
+            <SearchWithButtons
+                placeholder={i18n('field_search-placeholder')}
+                value={searchValue}
+                onUpdate={onSearchUpdate}
+            />
+            {body.type === 'clusters' || (body.type === 'loading' && !location.cluster) ? (
+                <ClustersList<TCluster>
+                    items={clusters}
+                    loading={loading}
+                    error={resolvedErrorContent}
+                    hasMore={hasMore}
+                    onLoadMore={onLoadMore}
+                    emptyContent={
+                        <EmptyContent variant={searchValue ? 'nothing-found' : 'no-clusters'} />
+                    }
+                    renderRowItem={renderClusterItem}
+                    onItemClick={handleClusterClick}
+                />
+            ) : (
+                <NavigationItemsList<TItem>
+                    items={items}
+                    path={location.path}
+                    search={searchValue}
+                    sort={sortValue}
+                    onSortUpdate={onSortUpdate}
+                    titleLabel={i18n('title_name')}
+                    loading={loading}
+                    error={resolvedErrorContent}
+                    hasMore={hasMore}
+                    onLoadMore={onLoadMore}
+                    emptyContent={
+                        <EmptyContent variant={searchValue ? 'nothing-found' : 'no-files'} />
+                    }
+                    renderRowItem={renderNavigationItem}
+                    onItemClick={handleItemClick}
+                />
+            )}
+        </Flex>
+    );
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type {NavigationDetailConfig, NavigationItem} from '../../../types/navigation';
+import {EmptyContent} from '../../../components';
+
+export const createEmptyDetailConfig = (_item: NavigationItem): NavigationDetailConfig => ({
+    tabs: [],
+    emptyContent: <EmptyContent variant="no-files" />,
+});

package/src/widgets/QueriesNavigation/helpers/createNavigationDetailResolver.ts

@@ -0,0 +1,28 @@
+import type {
+    NavigationDetailConfigFactory,
+    NavigationItem,
+    NavigationItemKind,
+    ResolveNavigationDetail,
+} from '../../../types/navigation';
+import {createTableDetailConfig} from './createTableDetailConfig';
+
+const defaultDetailRegistry: Partial<Record<NavigationItemKind, NavigationDetailConfigFactory>> = {
+    table: createTableDetailConfig(),
+};
+
+export const createNavigationDetailResolver = <T extends NavigationItem = NavigationItem>(
+    registry?: Partial<Record<NavigationItemKind, NavigationDetailConfigFactory<T>>>,
+    fallback?: NavigationDetailConfigFactory<T>,
+): ResolveNavigationDetail<T> => {
+    const merged = {
+        ...(defaultDetailRegistry as Partial<
+            Record<NavigationItemKind, NavigationDetailConfigFactory<T>>
+        >),
+        ...registry,
+    };
+
+    return (item) => {
+        const factory = (item.kind && merged[item.kind]) ?? fallback;
+        return factory?.(item);
+    };
+};

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

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

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

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

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

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

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

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

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

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

package/src/widgets/SavedQueries/SavedQueries.stories.tsx

@@ -0,0 +1,192 @@
+import React, {useMemo, useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Text} from '@gravity-ui/uikit';
+import {action} from 'storybook/actions';
+import {
+    QueryListFieldKey,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+import {SavedQueries} from './SavedQueries';
+
+const QUERY = `SELECT
+    session_id,
+    COUNT(*) AS sessions_count
+FROM visits
+GROUP BY session_id;`;
+
+const BASE_ITEMS: QueryListItem<SavedQuery>[] = [
+    {
+        id: 1,
+        title: 'New Query',
+        savedAt: '2026-04-29T12:00:00.000Z',
+        engine: 'SQL',
+        author: 'Anna Petrova',
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 2,
+        title: 'Daily conversion report',
+        savedAt: '2026-04-29T11:00:00.000Z',
+        engine: 'YQL',
+        author: 'Pavel Sidorov',
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 3,
+        title: 'Product funnel',
+        savedAt: '2026-04-28T09:00:00.000Z',
+        engine: 'SQL',
+        author: 'Maria Volkova',
+        query: 'SELECT 1;',
+        height: 52,
+    },
+];
+
+const filterFields: QueryListFilterConfig['fields'] = [
+    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
+    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
+    {
+        id: 'engine',
+        type: 'checkboxGroup',
+        title: 'Engine',
+        initialValue: [],
+        items: [
+            {id: 'yql', title: 'YQL'},
+            {id: 'sql', title: 'SQL'},
+        ],
+    },
+];
+
+const fields: QueryListVisibleFieldsConfig<SavedQuery>['fields'] = [
+    {id: 'savedAt', title: 'Saved date'},
+    {id: 'engine', title: 'Engine'},
+    {id: 'author', title: 'Author'},
+];
+
+const meta: Meta<typeof SavedQueries> = {
+    title: 'Widgets/SavedQueries',
+    component: SavedQueries,
+    tags: ['autodocs'],
+    parameters: {layout: 'padded'},
+};
+
+export default meta;
+type Story = StoryObj<typeof SavedQueries>;
+
+const SavedQueriesStory = () => {
+    const [items, setItems] = useState(BASE_ITEMS);
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+    const [visibleFields, setVisibleFields] = useState<QueryListFieldKey<SavedQuery>[]>([
+        'savedAt',
+        'engine',
+        'author',
+    ]);
+    const [comparedRowIds, setComparedRowIds] = useState<number[]>([]);
+    const [editingRowId, setEditingRowId] = useState<number>();
+
+    const filteredItems = useMemo(() => {
+        if (!search.value) return items;
+
+        const value = search.value.toLowerCase();
+        return items.filter((item) => {
+            if ('header' in item) return false;
+
+            return search.fullSearch
+                ? item.title.toLowerCase().includes(value) ||
+                      item.query?.toLowerCase().includes(value)
+                : item.title.toLowerCase().includes(value);
+        });
+    }, [items, search]);
+
+    const updateTitle = (item: SavedQuery, title: string) => {
+        setItems((currentItems) =>
+            currentItems.map((currentItem) =>
+                'id' in currentItem && currentItem.id === item.id
+                    ? {...currentItem, title}
+                    : currentItem,
+            ),
+        );
+        setEditingRowId(undefined);
+    };
+
+    return (
+        <div style={{width: 360, height: 560}}>
+            <SavedQueries
+                items={filteredItems}
+                search={{...search, hasClear: true, onUpdate: setSearch}}
+                filter={{
+                    fields: filterFields,
+                    onApply: action('onFilterApply'),
+                    onReset: action('onFilterReset'),
+                }}
+                visibleFields={{value: visibleFields, fields, onChange: setVisibleFields}}
+                editing={{
+                    rowId: editingRowId,
+                    onSubmit: updateTitle,
+                    onCancel: () => setEditingRowId(undefined),
+                }}
+                comparison={{
+                    enabled: Boolean(comparedRowIds.length),
+                    comparedRowIds,
+                    onChange: (item, selected) => {
+                        setComparedRowIds((currentIds) =>
+                            selected
+                                ? [...currentIds.filter((id) => id !== item.id).slice(-1), item.id]
+                                : currentIds.filter((id) => id !== item.id),
+                        );
+                    },
+                    onCancel: () => setComparedRowIds([]),
+                    onCompare: () => action('onCompare')(comparedRowIds),
+                }}
+                getRowActions={(item) => [
+                    {text: 'Copy to', onClick: () => action('onCopyTo')(item)},
+                    {text: 'Show operations', onClick: () => action('onShowOperations')(item)},
+                    {text: 'Edit', onClick: () => setEditingRowId(item.id)},
+                    {
+                        text: 'Compare with baseline',
+                        onClick: () => setComparedRowIds([item.id]),
+                    },
+                    {text: 'Delete', theme: 'danger', onClick: () => action('onDelete')(item)},
+                ]}
+            />
+        </div>
+    );
+};
+
+type ExtendedSavedQuery = SavedQuery & {team: string};
+
+const CustomAuthorStory = () => {
+    const items: QueryListItem<ExtendedSavedQuery>[] = BASE_ITEMS.map((item) =>
+        'header' in item ? item : {...item, team: 'Analytics'},
+    );
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    return (
+        <div style={{width: 360, height: 280}}>
+            <SavedQueries
+                items={items}
+                search={{...search, hasClear: true, onUpdate: setSearch}}
+                renderAuthor={(item) => <Text color="complementary">{item.team}</Text>}
+            />
+        </div>
+    );
+};
+
+const EmptyStory = () => {
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    return (
+        <div style={{width: 360, height: 280}}>
+            <SavedQueries items={[]} search={{...search, hasClear: true, onUpdate: setSearch}} />
+        </div>
+    );
+};
+
+export const Default: Story = {render: () => <SavedQueriesStory />};
+export const CustomAuthor: Story = {render: () => <CustomAuthorStory />};
+export const Empty: Story = {render: () => <EmptyStory />};

package/src/widgets/SavedQueries/SavedQueries.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import {QueriesList} from '../../modules';
+import {
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListSearchConfig,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+import i18n from './i18n';
+import {SavedQueryRowContent} from './SavedQueryRowContent';
+import './SavedQueries.scss';
+
+export type SavedQueriesProps<T extends SavedQuery = SavedQuery> = {
+    className?: string;
+    title?: string;
+    logo?: React.ReactNode;
+    search: QueryListSearchConfig;
+    filter?: QueryListFilterConfig;
+    items: QueryListItem<T>[];
+    selectedRowId?: T['id'];
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    renderAuthor?: (item: T) => React.ReactNode;
+    renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    onListItemClick?: (item: QueryListItem<T>) => void;
+};
+
+const block = cn('qp-saved-queries');
+
+export const SavedQueries = <T extends SavedQuery>({
+    title,
+    logo,
+    search,
+    filter,
+    items,
+    selectedRowId,
+    editing,
+    comparison,
+    visibleFields,
+    renderAuthor,
+    renderRowItem,
+    getRowActions,
+    onListItemClick,
+    className,
+}: SavedQueriesProps<T>) => {
+    return (
+        <QueriesList
+            className={block(null, className)}
+            title={title || i18n('title_saved')}
+            logo={logo}
+            search={search}
+            filter={filter}
+            items={items}
+            selectedRowId={selectedRowId}
+            visibleFields={visibleFields}
+            editing={editing}
+            comparison={comparison}
+            getRowActions={getRowActions}
+            renderRow={(data) =>
+                renderRowItem ? (
+                    renderRowItem(data)
+                ) : (
+                    <SavedQueryRowContent {...data} renderAuthor={renderAuthor} />
+                )
+            }
+            onListItemClick={onListItemClick}
+        />
+    );
+};