feat: extend SavedQueries integration API

README.md

@@ -131,6 +131,44 @@ function HistoryPanel() {
 }
 ```
 
+### SavedQueries
+
+Saved queries with search, filters, editable titles, comparison, configurable metadata,
+custom author rendering, incremental loading, and custom links or rows.
+
+```tsx
+import {SavedQueries, type QueryListLinkRenderer} from '@gravity-ui/querieskit';
+
+const renderLink: QueryListLinkRenderer = ({href = '', ...props}) => (
+  <RouterLink {...props} to={href} />
+);
+
+<SavedQueries
+  items={savedQueries}
+  selectedRowId={selectedQueryId}
+  hasMore={hasNextPage}
+  loading={isLoading}
+  onLoadMore={loadNextPage}
+  renderLink={renderLink}
+  search={{value: search, onUpdate: updateSearch}}
+/>;
+```
+
+An empty list with `loading` shows the initial spinner; loading with existing items shows an
+inline loader after them. Appending a page preserves the list instance and scroll position.
+Keep `loading` controlled, including passing `false` between requests, to prevent repeated
+load requests. The application owns the initial request, data, filtering, and routing.
+
+`renderLink` applies to both regular and full-text search rows with an `href`. Without it,
+rows use regular `<a>` elements. Rows without an `href`, or with editing or comparison enabled,
+render without a link and do not call `renderLink`.
+
+`renderRowItem` receives the original item (including group headers), index, variant, activity,
+editing/comparison data, visible fields, actions, and `renderLink`. It replaces the standard row;
+the consumer renders group headers and applies links as needed. Returning `null` hides the row
+contents. `renderAuthor` customizes the author in standard rows and respects field visibility.
+Set `search.fullSearchAvailable` to `false` to disable full-text search and hide its toggle.
+
 ### TutorialsHistory
 
 Tutorial list with search, optional filters, selectable rows, incremental loading, and custom

package.json

@@ -150,7 +150,7 @@
     "@gravity-ui/charts": "^1.57.2",
     "@gravity-ui/dashkit": "^10.4.0",
     "@gravity-ui/date-components": "^3.4.2",
-    "@gravity-ui/graph": "1.11.3",
+    "@gravity-ui/graph": "1.12.1",
     "@gravity-ui/i18n": "^1.8.0",
     "@gravity-ui/illustrations": "^2.1.1",
     "@gravity-ui/react-data-table": "^2.2.1",

src/modules/SavedQueryRow/SavedQueryRow.tsx

@@ -24,6 +24,7 @@ export const SavedQueryRow = <T extends SavedQuery>({
     editing,
     visibleFields,
     renderAuthor,
+    renderLink,
 }: SavedQueryRowProps<T>) => {
     const {author, engine, href, savedAt} = item;
     const isEditing = Boolean(editing?.enabled);
@@ -39,6 +40,7 @@ export const SavedQueryRow = <T extends SavedQuery>({
     return (
         <RowLink
             href={href}
+            renderLink={renderLink}
             disabled={isEditing || isComparisonMode}
             className={block({compared: isChecked})}
         >

src/modules/SavedQuerySearchRow/SavedQuerySearchRow.tsx

@@ -21,6 +21,7 @@ export const SavedQuerySearchRow = <T extends SavedQuery>({
     editing,
     visibleFields,
     renderAuthor,
+    renderLink,
 }: SavedQuerySearchRowProps<T>) => {
     const {author, engine, href, query, savedAt} = item;
     const authorContent =
@@ -34,6 +35,7 @@ export const SavedQuerySearchRow = <T extends SavedQuery>({
             query={query}
             language={MonacoLanguage.YQL}
             href={href}
+            renderLink={renderLink}
             disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
             className={block()}
             header={

src/widgets/SavedQueries/SavedQueries.stories.tsx

@@ -1,15 +1,18 @@
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, 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,
+    QueryListLinkRenderer,
     QueryListVisibleFieldsConfig,
 } from '../../types/queryList';
 import {SavedQuery} from '../../types/savedQueries';
 import {SavedQueries} from './SavedQueries';
+import {HistoryGroupHeader} from '../../components/HistoryGroupHeader';
+import {RowLink} from '../../components/RowLink';
 
 const QUERY = `SELECT
     session_id,
@@ -190,3 +193,134 @@ const EmptyStory = () => {
 export const Default: Story = {render: () => <SavedQueriesStory />};
 export const CustomAuthor: Story = {render: () => <CustomAuthorStory />};
 export const Empty: Story = {render: () => <EmptyStory />};
+
+const LINK_ITEMS = BASE_ITEMS.map((item) =>
+    'header' in item ? item : {...item, href: `/saved-queries/${item.id}`},
+);
+
+const renderRouterLink: QueryListLinkRenderer = ({onClick, ...props}) => (
+    <a
+        {...props}
+        data-router-link
+        onClick={(event) => {
+            onClick?.(event);
+            if (
+                event.defaultPrevented ||
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey
+            )
+                return;
+            event.preventDefault();
+            action('routerNavigate')(props.href);
+        }}
+    />
+);
+
+const PAGINATION_ITEMS: QueryListItem<SavedQuery>[] = Array.from({length: 24}, (_, index) => ({
+    ...(BASE_ITEMS[0] as SavedQuery),
+    id: `saved-${index + 1}`,
+    title: `Saved report ${index + 1}`,
+    href: `/saved-queries/saved-${index + 1}`,
+}));
+
+const PaginatedStory = () => {
+    const [count, setCount] = useState(8);
+    const [loading, setLoading] = useState(false);
+    const timeout = useRef<number | undefined>(undefined);
+    useEffect(() => () => window.clearTimeout(timeout.current), []);
+    return (
+        <div style={{width: 360, height: 300}}>
+            <SavedQueries
+                items={PAGINATION_ITEMS.slice(0, count)}
+                selectedRowId="saved-2"
+                loading={loading}
+                hasMore={count < PAGINATION_ITEMS.length}
+                onLoadMore={() => {
+                    if (loading || count >= PAGINATION_ITEMS.length) return;
+                    action('onLoadMore')(count);
+                    setLoading(true);
+                    timeout.current = window.setTimeout(() => {
+                        setCount((current) => current + 8);
+                        setLoading(false);
+                    }, 700);
+                }}
+                renderLink={renderRouterLink}
+                search={{onUpdate: action('onSearchUpdate')}}
+            />
+        </div>
+    );
+};
+
+const RouterLinksStory = () => {
+    const [search, setSearch] = useState({value: 'SELECT', fullSearch: false});
+    return (
+        <div style={{width: 500, height: 500}}>
+            <SavedQueries
+                items={LINK_ITEMS}
+                renderLink={renderRouterLink}
+                search={{...search, hasClear: true, onUpdate: setSearch}}
+            />
+        </div>
+    );
+};
+
+const CustomRowRendererStory = () => {
+    const [search, setSearch] = useState({value: 'SELECT', fullSearch: false});
+    return (
+        <div style={{width: 500, height: 500}}>
+            <SavedQueries
+                items={[{header: 'Saved reports', height: 28}, ...LINK_ITEMS]}
+                renderLink={renderRouterLink}
+                renderRowItem={({item, variant, renderLink}) =>
+                    'header' in item ? (
+                        <HistoryGroupHeader title={item.header} />
+                    ) : (
+                        <RowLink href={item.href} renderLink={renderLink}>
+                            <Text>{item.title}</Text>
+                            {variant === 'search' && <pre>{item.query}</pre>}
+                        </RowLink>
+                    )
+                }
+                search={{...search, hasClear: true, onUpdate: setSearch}}
+            />
+        </div>
+    );
+};
+
+const FullSearchUnavailableStory = () => {
+    const [search, setSearch] = useState({value: 'report', fullSearch: true});
+    return (
+        <div style={{width: 360, height: 300}}>
+            <SavedQueries
+                items={LINK_ITEMS}
+                search={{
+                    ...search,
+                    fullSearchAvailable: false,
+                    hasClear: true,
+                    onUpdate: (data) => {
+                        action('onSearchUpdate')(data);
+                        setSearch(data);
+                    },
+                }}
+            />
+        </div>
+    );
+};
+
+export const InitialLoading: Story = {
+    args: {items: [], loading: true, search: {onUpdate: action('onSearchUpdate')}},
+    decorators: [
+        (StoryComponent) => (
+            <div style={{width: 360, height: 300}}>
+                <StoryComponent />
+            </div>
+        ),
+    ],
+};
+export const Paginated: Story = {render: () => <PaginatedStory />};
+export const RouterLinks: Story = {render: () => <RouterLinksStory />};
+export const CustomRowRenderer: Story = {render: () => <CustomRowRendererStory />};
+export const FullSearchUnavailable: Story = {render: () => <FullSearchUnavailableStory />};

src/widgets/SavedQueries/SavedQueries.tsx

@@ -6,6 +6,7 @@ import type {
     QueryListEditingConfig,
     QueryListFilterConfig,
     QueryListItem,
+    QueryListLinkRenderer,
     QueryListRowAction,
     QueryListRowRenderData,
     QueryListSearchConfig,
@@ -31,6 +32,10 @@ export type SavedQueriesProps<T extends SavedQuery = SavedQuery> = {
     renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;
     getRowActions?: (item: T) => QueryListRowAction<T>[];
     onListItemClick?: (item: QueryListItem<T>) => void;
+    hasMore?: boolean;
+    loading?: boolean;
+    onLoadMore?: () => void;
+    renderLink?: QueryListLinkRenderer;
 };
 
 const block = cn('qp-saved-queries');
@@ -49,6 +54,10 @@ export const SavedQueries = <T extends SavedQuery>({
     renderRowItem,
     getRowActions,
     onListItemClick,
+    hasMore,
+    loading,
+    onLoadMore,
+    renderLink,
     className,
 }: SavedQueriesProps<T>) => {
     return (
@@ -72,6 +81,10 @@ export const SavedQueries = <T extends SavedQuery>({
                 )
             }
             onListItemClick={onListItemClick}
+            hasMore={hasMore}
+            loading={loading}
+            onLoadMore={onLoadMore}
+            renderLink={renderLink}
         />
     );
 };