@gravity-ui/querieskit 1.1.0 → 1.3.0

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

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

@@ -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}
+        />
+    );
+};

package/src/widgets/SavedQueries/SavedQueryRowContent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {HistoryGroupHeader} from '../../components';
+import {SavedQueryRow, SavedQuerySearchRow} from '../../modules';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+
+type Props<T extends SavedQuery> = QueryListRowRenderData<T> & {
+    renderAuthor?: (item: T) => React.ReactNode;
+};
+
+export const SavedQueryRowContent = <T extends SavedQuery>({
+    item,
+    variant,
+    renderAuthor,
+    ...data
+}: Props<T>) => {
+    if ('header' in item) {
+        return <HistoryGroupHeader title={item.header} />;
+    }
+
+    return variant === 'search' ? (
+        <SavedQuerySearchRow {...data} item={item} renderAuthor={renderAuthor} />
+    ) : (
+        <SavedQueryRow {...data} item={item} renderAuthor={renderAuthor} />
+    );
+};

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

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

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

@@ -0,0 +1,3 @@
+{
+    "title_saved": "Saved"
+}

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

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

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

@@ -0,0 +1,3 @@
+{
+    "title_saved": "Сохранённые"
+}

package/src/widgets/SavedQueries/index.ts

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

package/src/widgets/TutorialsHistory/TutorialRowContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {QueryHistoryRowRenderData} from '../../types/history';
+import {QueryListRowRenderData} from '../../types/queryList';
 import {TutorialHistoryRow} from '../../types/tutorial';
 import {HistoryGroupHeader} from '../../components';
 import {TutorialRow, TutorialSearchRow} from '../../modules';
@@ -7,7 +7,7 @@ import {TutorialRow, TutorialSearchRow} from '../../modules';
 export const TutorialRowContent = <T extends TutorialHistoryRow>({
     item,
     variant,
-}: QueryHistoryRowRenderData<T>) => {
+}: QueryListRowRenderData<T>) => {
     if ('header' in item) {
         return <HistoryGroupHeader title={item.header} />;
     }

package/src/widgets/TutorialsHistory/TutorialsHistory.stories.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 import {TutorialsHistory} from './TutorialsHistory';
-import {QueryHistoryFilterConfig, QueryHistoryItem} from '../../types/history';
+import {QueryListFilterConfig, QueryListItem} from '../../types/queryList';
 import {TutorialHistoryRow} from '../../types/tutorial';
 import {action} from 'storybook/actions';
 
@@ -12,7 +12,7 @@ SELECT
     "test_task" AS task_id,
     SUBSTRING("test", 1, 1) AS truncated_char`;
 
-const filterFields: QueryHistoryFilterConfig['fields'] = [
+const filterFields: QueryListFilterConfig['fields'] = [
     {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
     {id: 'range', type: 'rangeDatePicker', title: 'Period'},
     {
@@ -30,7 +30,7 @@ const filterFields: QueryHistoryFilterConfig['fields'] = [
 const logFilterApply = action('onFilterApply');
 const logFilterReset = action('onFilterReset');
 
-const BASE_ITEMS: QueryHistoryItem<TutorialHistoryRow>[] = [
+const BASE_ITEMS: QueryListItem<TutorialHistoryRow>[] = [
     {
         id: 1,
         title: 'Getting started with YQL',

package/src/widgets/TutorialsHistory/TutorialsHistory.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 import {HistoryHeader, HistoryLayout, RowsList} from '../../modules';
 import i18n from './i18n';
-import {
-    QueryHistoryFilterConfig,
-    QueryHistoryItem,
-    QueryHistorySearchConfig,
-} from '../../types/history';
+import {QueryListFilterConfig, QueryListItem, QueryListSearchConfig} from '../../types/queryList';
 import {TutorialHistoryRow} from '../../types/tutorial';
 import {getListKey} from '../../helpers/getListKey';
 import {TutorialRowContent} from './TutorialRowContent';
@@ -16,11 +12,11 @@ export type TutorialsHistoryProps<T extends TutorialHistoryRow = TutorialHistory
     className?: string;
     title?: string;
     logo?: React.ReactNode;
-    search: QueryHistorySearchConfig;
-    filter?: QueryHistoryFilterConfig;
-    items: QueryHistoryItem<T>[];
+    search: QueryListSearchConfig;
+    filter?: QueryListFilterConfig;
+    items: QueryListItem<T>[];
     selectedRowId?: T['id'];
-    onListItemClick?: (item: QueryHistoryItem<T>) => void;
+    onListItemClick?: (item: QueryListItem<T>) => void;
 };
 
 const block = cn('qp-tutorials-history');

package/src/widgets/index.ts

@@ -1,8 +1,12 @@
 export {QueriesHistory} from './QueriesHistory';
 export type {QueriesHistoryProps} from './QueriesHistory';
+export {SavedQueries} from './SavedQueries';
+export type {SavedQueriesProps} from './SavedQueries';
 export {DashboardCharts} from './DashboardCharts';
 export {TutorialsHistory} from './TutorialsHistory';
 export type {TutorialsHistoryProps} from './TutorialsHistory';
+export {QueryResults} from './QueryResults';
+export type {QueryResultsProps} from './QueryResults';
 export {
     QueriesNavigation,
     createTableDetailConfig,

package/build/cjs/modules/HistoryList/HistoryList.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { QueryHistoryComparisonConfig, QueryHistoryEditingConfig, QueryHistoryItem, QueryHistoryRow, QueryHistoryRowAction, QueryHistoryRowRenderData, QueryHistoryRowVariant, QueryHistoryVisibleFieldsConfig } from '../../types/history';
-export type HistoryListProps<T extends QueryHistoryRow> = {
-    selectedRowId?: T['id'];
-    items: QueryHistoryItem<T>[];
-    rowVariant?: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
-    renderRowItem?: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
-    showFiltersHint?: boolean;
-    className?: string;
-    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
-};
-export declare const HistoryList: <T extends QueryHistoryRow>({ renderRowItem, ...props }: HistoryListProps<T>) => React.JSX.Element;

package/build/cjs/modules/HistoryList/HistoryList.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HistoryList = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _RowsList = require("../RowsList");
-var _HistoryRowContent = require("./HistoryRowContent");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _excluded = ["renderRowItem"];
-var HistoryList = exports.HistoryList = function HistoryList(_ref) {
-  var renderRowItem = _ref.renderRowItem,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowsList.RowsList, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    renderRow: function renderRow(data) {
-      return renderRowItem ? renderRowItem(data) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_HistoryRowContent.HistoryRowContent, (0, _objectSpread2.default)({}, data));
-    }
-  }));
-};
-// #sourceMappingURL=HistoryList.js.map

package/build/cjs/modules/HistoryList/HistoryList.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RowsList","_HistoryRowContent","_jsxRuntime","e","__esModule","default","HistoryList","exports","_ref","renderRowItem","props","_objectWithoutProperties","_excluded","_jsx","RowsList","_objectSpread","renderRow","data","HistoryRowContent"],"sources":["HistoryList.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    QueryHistoryComparisonConfig,\n    QueryHistoryEditingConfig,\n    QueryHistoryItem,\n    QueryHistoryRow,\n    QueryHistoryRowAction,\n    QueryHistoryRowRenderData,\n    QueryHistoryRowVariant,\n    QueryHistoryVisibleFieldsConfig,\n} from '../../types/history';\nimport {RowsList} from '../RowsList';\nimport {HistoryRowContent} from './HistoryRowContent';\n\nexport type HistoryListProps<T extends QueryHistoryRow> = {\n    selectedRowId?: T['id'];\n    items: QueryHistoryItem<T>[];\n    rowVariant?: QueryHistoryRowVariant;\n    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;\n    editing?: QueryHistoryEditingConfig<T>;\n    comparison?: QueryHistoryComparisonConfig<T>;\n    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];\n    renderRowItem?: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;\n    showFiltersHint?: boolean;\n    className?: string;\n    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;\n};\n\nexport const HistoryList = <T extends QueryHistoryRow>({\n    renderRowItem,\n    ...props\n}: HistoryListProps<T>) => {\n    return (\n        <RowsList\n            {...props}\n            renderRow={(data) =>\n                renderRowItem ? renderRowItem(data) : <HistoryRowContent {...data} />\n            }\n        />\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAWA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAAsD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;;AAgB/C,IAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAAE,IAAA,EAGG;EAAA,IAFvBC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACVC,KAAK,OAAAC,iCAAA,EAAAH,IAAA,EAAAI,SAAA;EAER,oBACI,IAAAC,eAAA,EAACC,kBAAQ,MAAAC,sBAAA,MAAAA,sBAAA,MACDL,KAAK;IACTM,SAAS,EAAE,SAAXA,SAASA,CAAGC,IAAI;MAAA,OACZR,aAAa,GAAGA,aAAa,CAACQ,IAAI,CAAC,gBAAG,IAAAJ,eAAA,EAACK,oCAAiB,MAAAH,sBAAA,MAAKE,IAAI,CAAG,CAAC;IAAA;EACxE,EACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/build/cjs/modules/HistoryList/HistoryList.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HistoryList } from './HistoryList';
-declare const meta: Meta<typeof HistoryList>;
-export default meta;
-type Story = StoryObj<typeof HistoryList>;
-/** Basic list with groups and all statuses */
-export declare const Default: Story;
-/** Empty list */
-export declare const Empty: Story;
-/** With row actions (visible on hover) */
-export declare const WithActions: Story;
-export declare const WithComparison: Story;
-export declare const WithSelectedRow: Story;
-export declare const WithEditing: Story;