@gravity-ui/querieskit 1.0.1

package/plans/queries-history-structure.md

@@ -0,0 +1,143 @@
+# План трёхуровневой структуры QueriesKit
+
+## Контекст
+
+Текущая структура держит почти всё внутри [`src/components/QueriesHistory`](src/components/QueriesHistory). Из-за этого [`QueriesHistory`](src/components/QueriesHistory/QueriesHistory.tsx:28) одновременно выглядит и как публичный виджет, и как контейнер для всех внутренних частей: [`HistoryList`](src/components/QueriesHistory/HistoryList.tsx:26), [`HistoryHeader`](src/components/QueriesHistory/HistoryHeader/HistoryHeader.tsx:13), [`HistoryRow`](src/components/QueriesHistory/HistoryRow/HistoryRow.tsx:17), [`HistoryRowHeader`](src/components/QueriesHistory/HistoryRow/HistoryRowHeader.tsx:19), [`HistoryDuration`](src/components/QueriesHistory/HistoryRow/HistoryDuration.tsx), [`QueryStatusIcon`](src/components/QueriesHistory/HistoryRow/QueryStatusIcon.tsx:27), [`HistoryRowContent`](src/components/QueriesHistory/HistoryRowContent.tsx:1), [`HistoryGroupHeader`](src/components/QueriesHistory/HistoryGroupHeader.tsx:1).
+
+Библиотека `@gravity-ui/querieskit` находится в начале развития: сейчас в ней один публичный виджет ([`QueriesHistory`](src/components/QueriesHistory/QueriesHistory.tsx:28)), но в дальнейшем планируется добавление ещё многих виджетов. Это подтверждает целесообразность трёхуровневого деления сразу, а не откладывания его "на потом".
+
+Также обнаружен реальный баг: [`src/components/index.ts`](src/components/index.ts:1) содержит самоссылающийся экспорт `export * from '.'`, который не реэкспортирует ничего полезного из [`src/components/QueriesHistory/index.ts`](src/components/QueriesHistory/index.ts:1). Это нужно исправить в рамках реструктуризации.
+
+Цель — сделать структуру библиотеки читаемой для потребителей: отдельно базовые building blocks, отдельно сборки из них, отдельно готовые виджеты — с расчётом на рост числа виджетов.
+
+## Модель трёх уровней
+
+1. [`src/components`](src/components) — базовые атомарные или малые доменные компоненты.
+2. [`src/modules`](src/modules) — компоненты, собирающие несколько базовых компонентов в переиспользуемый сценарный блок внутри одного виджета.
+3. [`src/widgets`](src/widgets) — готовые продуктовые виджеты, которые можно поставить в приложение как цельный feature.
+
+### Почему `modules`, а не `compositions`/`blocks`
+
+- `compositions` точно передаёт смысл, но менее привычно в JS/React-экосистеме.
+- `blocks` короче и привычнее для UI-библиотек в целом, но в этом проекте уже активно используется BEM через `bem-cn-lite` (`const block = cn('qp-history-row')` в [`HistoryRow.tsx`](src/components/QueriesHistory/HistoryRow/HistoryRow.tsx:15), [`HistoryList.tsx`](src/components/QueriesHistory/HistoryList.tsx:24) и др.) — термин "block" уже занят под BEM-блок в CSS-классах, и папка `src/blocks` создавала бы двусмысленность.
+- `modules` — нейтральный и привычный термин, не конфликтует с BEM-терминологией проекта и не тянет за собой чужую методологию (Atomic Design, Feature-Sliced Design), названия которой не совсем подходят под текущие сущности.
+
+Главное ограничение: не нужно автоматически выносить каждую маленькую внутреннюю часть в публичный атом. Атом должен попадать в [`src/components`](src/components), только если потребитель библиотеки действительно может использовать его отдельно и если у него есть стабильный props-контракт.
+
+## Классификация текущих компонентов
+
+### Базовые компоненты
+
+В [`src/components`](src/components) стоит держать малые компоненты, которые не управляют большим сценарием:
+
+- [`QueryStatusIcon`](src/components/QueriesHistory/HistoryRow/QueryStatusIcon.tsx:27) — хороший кандидат в base component.
+- [`QueryDuration`](src/components/QueryDuration/QueryDuration.tsx) — base component для отображения длительности запроса. Переименован из `HistoryDuration` — может переиспользоваться за пределами `QueriesHistory`. Использует хук [`useQueryDuration`](src/components/QueryDuration/useQueryDuration.ts), который лежит рядом.
+- [`HistoryRowMenu`](src/components/QueriesHistory/HistoryRow/HistoryRowMenu.tsx) — скорее малый доменный component, но его можно оставить рядом с [`HistoryRow`](src/modules/HistoryRow), если самостоятельного использования почти нет.
+- [`HistoryRowHeader`](src/components/QueriesHistory/HistoryRow/HistoryRowHeader.tsx:19) — пограничный случай: если header нужен отдельно, он может быть component; если только как часть строки, лучше держать внутри [`src/modules/HistoryRow`](src/modules/HistoryRow).
+- [`HistoryGroupHeader`](src/components/QueriesHistory/HistoryGroupHeader.tsx:1) — маленький визуальный компонент заголовка группы, физически сейчас лежит в корне `QueriesHistory/`, используется только из [`HistoryRowContent`](src/components/QueriesHistory/HistoryRowContent.tsx:1).
+
+### Модули
+
+В [`src/modules`](src/modules) стоит держать блоки, которые собирают несколько components и задают сценарий взаимодействия внутри конкретного виджета:
+
+- [`HistoryHeader`](src/components/QueriesHistory/HistoryHeader/HistoryHeader.tsx:13) — сборка поиска, фильтра и действий над историей.
+- [`HistoryList`](src/components/QueriesHistory/HistoryList.tsx:26) — сборка списка, групп, строк, selection, editing и render pipeline. Включает внутренние [`HistoryRowContent`](src/components/QueriesHistory/HistoryRowContent.tsx:1) и хелпер [`prepareRowData`](src/components/QueriesHistory/helpers/prepareRowData.ts).
+- [`HistoryRow`](src/components/QueriesHistory/HistoryRow/HistoryRow.tsx:17) — сборка строки из статуса, title/header, duration, metadata, checkbox и меню.
+
+### Виджеты
+
+В [`src/widgets`](src/widgets) стоит держать законченные feature-блоки:
+
+- [`QueriesHistory`](src/components/QueriesHistory/QueriesHistory.tsx:28) — готовый виджет истории запросов, который собирает [`HistoryHeader`](src/modules/HistoryHeader), [`HistoryList`](src/modules/HistoryList), i18n и widget-level настройки.
+- В будущем сюда же будут добавляться новые виджеты библиотеки (например, редактор запроса, результат запроса и т.п.) по той же трёхуровневой схеме.
+
+## Рекомендуемая целевая структура
+
+```text
+src/
+  components/
+    QueryStatusIcon/
+      QueryStatusIcon.tsx
+      QueryStatusIcon.scss
+      index.ts
+    QueryDuration/
+      QueryDuration.tsx
+      QueryDuration.scss
+      useQueryDuration.ts
+      index.ts
+    HistoryGroupHeader/
+      HistoryGroupHeader.tsx
+      HistoryGroupHeader.scss
+      index.ts
+  modules/
+    HistoryHeader/
+      HistoryHeader.tsx
+      internal/
+        HistorySearch.tsx
+        HistoryFilter.tsx
+      index.ts
+    HistoryRow/
+      HistoryRow.tsx
+      HistoryRowHeader.tsx
+      HistoryRowMenu.tsx
+      HistoryRow.scss
+      index.ts
+    HistoryList/
+      HistoryList.tsx
+      internal/
+        HistoryRowContent.tsx
+      helpers/
+        prepareRowData.ts
+      index.ts
+  widgets/
+    QueriesHistory/
+      QueriesHistory.tsx
+      i18n/
+      index.ts
+  types/
+    history.ts
+  helpers/
+    time.ts
+  index.ts
+```
+
+## Почему не слишком мелко
+
+Это не слишком мелко, потому что деление идёт по уровню ответственности:
+
+- [`src/components`](src/components) отвечает за малые визуальные building blocks.
+- [`src/modules`](src/modules) отвечает за переиспользуемые сценарные блоки внутри виджета.
+- [`src/widgets`](src/widgets) отвечает за готовые feature-пакеты.
+
+Но будет слишком мелко, если вынести [`HistorySearch`](src/components/QueriesHistory/HistoryHeader/HistorySearch.tsx:16), [`HistoryFilter`](src/components/QueriesHistory/HistoryHeader/HistoryFilter.tsx:16), [`HistoryRowHeader`](src/components/QueriesHistory/HistoryRow/HistoryRowHeader.tsx:19), [`HistoryRowMenu`](src/components/QueriesHistory/HistoryRow/HistoryRowMenu.tsx) в top-level components только ради симметрии. Если эти части не имеют самостоятельного сценария использования, лучше оставить их в [`internal`](src/modules/HistoryHeader/internal) или рядом с модулем [`HistoryRow`](src/modules/HistoryRow).
+
+## Публичные entrypoints
+
+Минимальный публичный API:
+
+- [`src/index.ts`](src/index.ts:1) — общий экспорт библиотеки.
+- [`src/components/index.ts`](src/components/index.ts:1) — базовые components.
+- [`src/modules/index.ts`](src/modules/index.ts) — модули.
+- [`src/widgets/index.ts`](src/widgets/index.ts) — готовые виджеты.
+
+Если package exports будут настраиваться отдельно, можно дать потребителям импортировать уровни напрямую:
+
+- [`src/components/index.ts`](src/components/index.ts:1) для base components.
+- [`src/modules/index.ts`](src/modules/index.ts) для modules.
+- [`src/widgets/index.ts`](src/widgets/index.ts) для widgets.
+
+## Предлагаемый порядок реализации
+
+1. Создать папки [`src/components`](src/components), [`src/modules`](src/modules), [`src/widgets`](src/widgets) как публичные уровни библиотеки.
+2. Перенести [`QueriesHistory`](src/components/QueriesHistory/QueriesHistory.tsx:28) и его i18n в [`src/widgets/QueriesHistory`](src/widgets/QueriesHistory).
+3. Перенести [`HistoryHeader`](src/components/QueriesHistory/HistoryHeader/HistoryHeader.tsx:13), [`HistoryList`](src/components/QueriesHistory/HistoryList.tsx:26) (вместе с [`HistoryRowContent`](src/components/QueriesHistory/HistoryRowContent.tsx:1) и [`prepareRowData`](src/components/QueriesHistory/helpers/prepareRowData.ts)), [`HistoryRow`](src/components/QueriesHistory/HistoryRow/HistoryRow.tsx:17) в [`src/modules`](src/modules).
+4. Вынести [`QueryStatusIcon`](src/components/QueryStatusIcon/QueryStatusIcon.tsx:27), [`QueryDuration`](src/components/QueryDuration/QueryDuration.tsx) (вместе с хуком [`useQueryDuration`](src/components/QueryDuration/useQueryDuration.ts)) и [`HistoryGroupHeader`](src/components/HistoryGroupHeader/HistoryGroupHeader.tsx:1) в [`src/components`](src/components).
+5. Оставить [`HistorySearch`](src/components/QueriesHistory/HistoryHeader/HistorySearch.tsx:16), [`HistoryFilter`](src/components/QueriesHistory/HistoryHeader/HistoryFilter.tsx:16), [`HistoryRowHeader`](src/components/QueriesHistory/HistoryRow/HistoryRowHeader.tsx:19), [`HistoryRowMenu`](src/components/QueriesHistory/HistoryRow/HistoryRowMenu.tsx) внутри соответствующих modules, пока нет явной потребности в самостоятельном использовании.
+6. Обновить imports между уровнями: widgets импортируют modules и components, modules импортируют components, components не импортируют modules или widgets.
+7. Исправить сломанный barrel-экспорт [`src/components/index.ts`](src/components/index.ts:1) (сейчас там `export * from '.'` — самоссылающийся экспорт) и создать корректные `index.ts` для всех трёх уровней.
+8. Реэкспортировать публичные типы из [`src/types/history.ts`](src/types/history.ts:3) через [`src/index.ts`](src/index.ts:1), если они являются частью контракта.
+9. Проверить сборку и storybook после переноса файлов (сейчас `.stories.tsx` файлов в проекте нет — добавить их отдельной задачей при необходимости).
+
+## Итоговая рекомендация
+
+Трёхуровневая структура [`components`](src/components) / [`modules`](src/modules) / [`widgets`](src/widgets) оправдана, так как библиотека находится в начале развития и в неё планируется добавление многих новых виджетов — закладывать деление по уровню абстракции нужно сразу, а не переделывать структуру повторно в будущем. При этом не стоит выносить каждую внутреннюю часть в top-level atom: маленькие детали должны становиться base components только при наличии самостоятельного публичного сценария использования.

package/plans/tutorials-history-plan.md

@@ -0,0 +1,59 @@
+# План: виджет TutorialsHistory на базе инфраструктуры QueriesHistory
+
+## Контекст и развилка
+
+`TutorialsHistory` — частный случай [`QueriesHistory`](src/widgets/QueriesHistory/QueriesHistory.tsx:39): список туториалов без выбора видимых полей (`FieldsSelector` скрыт), с использованием [`TutorialRow`](src/modules/TutorialRow/TutorialRow.tsx:9) вместо [`HistoryRow`](src/modules/HistoryRow/HistoryRow.tsx:18).
+
+Проблема: [`QueryHistoryRow`](src/types/history.ts:13) требует обязательное поле `status`, которого нет у туториалов. `status` используется внутри [`QueryStatusIcon`](src/components/QueryStatusIcon/QueryStatusIcon.tsx:28), [`QueryDuration`](src/components/QueryDuration/QueryDuration.tsx:17)/[`useQueryDuration`](src/components/QueryDuration/useQueryDuration.ts), [`HistoryRow`](src/modules/HistoryRow/HistoryRow.tsx:18), [`HistorySearchRow`](src/modules/HistorySearchRow/HistorySearchRow.tsx:21).
+
+**Решение:** выделить базовый тип `BaseHistoryRow` (id/title/query?/href? + `HistoryRowRenderProps`), от которого наследуется `QueryHistoryRow` (добавляя обязательный `status` и query-специфичные поля). Общая generic-инфраструктура (`QueryHistoryItem`, `QueryHistoryRowRenderData` и связанные конфиги) параметризуется `BaseHistoryRow`, а status-специфичные компоненты (`HistoryRow`, `HistorySearchRow`, `QueryStatusIcon`, `QueryDuration`) продолжают требовать `QueryHistoryRow`. Обратная совместимость сохраняется — `QueryHistoryRow` всё ещё удовлетворяет `BaseHistoryRow`.
+
+## Согласованный набор возможностей TutorialsHistory
+
+Остаётся: `title`, `logo`, `search`, `filter`, `items`, `selectedRowId`, `onListItemClick`/`href`.
+Убирается: `visibleFields`/`FieldsSelector`, `comparison`, `editing`, `getRowActions`.
+
+Полнотекстовый поиск (`fullSearch`) остаётся — для него будет отдельный `TutorialSearchRow` (аналог [`HistorySearchRow`](src/modules/HistorySearchRow/HistorySearchRow.tsx:21)) с Monaco-редактором, но в шапке только `id` и `title`, без `status`/`engine`/`mode`/`isPrivate`.
+
+## Диаграмма компонентов
+
+```mermaid
+graph TD
+    BHR[BaseHistoryRow] --> QHR[QueryHistoryRow + status]
+    BHR --> THR[TutorialHistoryRow]
+
+    QHR --> HistoryRow
+    QHR --> HistorySearchRow
+    THR --> TutorialRow
+    THR --> TutorialSearchRow
+
+    HistoryRow --> HistoryRowContent
+    HistorySearchRow --> HistoryRowContent
+    TutorialRow --> TutorialRowContent
+    TutorialSearchRow --> TutorialRowContent
+
+    HistoryRowContent --> HistoryList
+    HistoryList --> RowsList
+    TutorialRowContent --> TutorialsHistory
+
+    RowsList --> QueriesHistory
+    RowsList --> TutorialsHistory
+    HistoryLayout --> QueriesHistory
+    HistoryLayout --> TutorialsHistory
+```
+
+Список один — [`RowsList`](../src/modules/RowsList/RowsList.tsx): он владеет виртуализацией, высотами строк и пустым состоянием, а разметку строки получает через `renderRow`. [`HistoryList`](../src/modules/HistoryList/HistoryList.tsx) — тонкая обёртка над ним с query-строками по умолчанию. Каркас виджета (logo/actions, title, header, footer) вынесен в [`HistoryLayout`](../src/modules/HistoryLayout/HistoryLayout.tsx).
+
+## Чек-лист реализации
+
+1. **Типы** — вынести `BaseHistoryRow` в [`src/types/history.ts`](src/types/history.ts:13), ослабить generic-constraint (`QueryHistoryRow` → `BaseHistoryRow`) у `QueryHistoryItem`, `QueryHistoryRowAction`, `QueryHistoryEditingConfig`, `QueryHistoryComparisonConfig`, `QueryHistoryVisibleFieldsConfig`, `RowFieldKey`/`QueryHistoryFieldKey`, `QueryHistoryEditingRenderData`, `QueryHistoryRowRenderData`. `QueryHistoryRow` = `BaseHistoryRow & {status: QueryStatus, engine?, mode?, isPrivate?, startTime?, endTime?}`.
+2. **Новый тип** — создать [`src/types/tutorial.ts`](src/types/tutorial.ts) с `TutorialHistoryRow` (на основе `BaseHistoryRow`, с запасом на будущие поля), реэкспортировать через [`src/index.ts`](src/index.ts:1).
+3. **Промоут общих компонентов** — вынести [`HistoryGroupHeader`](src/modules/HistoryList/HistoryGroupHeader.tsx:1) и [`HistoryListEmpty`](src/modules/HistoryList/HistoryListEmpty/HistoryListEmpty.tsx:10) (со scss/i18n) из `src/modules/HistoryList/*` в `src/components/HistoryGroupHeader/` и `src/components/HistoryListEmpty/`; обновить импорты в [`HistoryRowContent.tsx`](src/modules/HistoryList/HistoryRowContent.tsx:1)/[`HistoryList.tsx`](src/modules/HistoryList/HistoryList.tsx:1) и barrel-экспорты.
+4. **Общий хелпер** — перенести [`prepareRowData`](src/modules/HistoryList/helpers/prepareRowData.ts:21) в `src/helpers/prepareRowData.ts`, ослабить constraint до `BaseHistoryRow`, обновить импорт в `HistoryList.tsx`.
+5. **Общие Monaco-хелперы** — вынести [`fitQueryToVisibleLines`](src/modules/HistorySearchRow/helpers/fitQueryToVisibleLines.ts:3), [`resolveMonacoLanguage`](src/modules/HistorySearchRow/helpers/resolveMonacoLanguage.ts:3), [`MONACO_CONFIG`](src/modules/HistorySearchRow/monacoConfig.ts:5) из `src/modules/HistorySearchRow/*` в `src/helpers/`, обновить импорт в `HistorySearchRow.tsx`.
+6. **TutorialRow** — доработать [`src/modules/TutorialRow/TutorialRow.tsx`](src/modules/TutorialRow/TutorialRow.tsx:9): принимать `item: TutorialHistoryRow`, поддержать `href`/`isActive`-стилизацию по аналогии с `HistoryRow` (без статус-иконки, меню, editing, comparison); добавить `TutorialRow.scss` и `.stories.tsx`.
+7. **TutorialSearchRow** — создать `src/modules/TutorialSearchRow/` по аналогии с `HistorySearchRow`: в шапке только `id`+`title`, ниже Monaco-редактор с `query` (реюз общих Monaco-хелперов); добавить scss и `.stories.tsx`.
+8. **RowsList вместо отдельного TutorialList** — не копировать `HistoryList`, а вынести generic-список в `src/modules/RowsList/` (`T extends BaseHistoryRow`, обязательный `renderRow`, `rowVariant` пробрасывается в `renderRow`); `HistoryList` переписать как обёртку над ним. Строки туториалов переключает `TutorialRowContent`, живущий внутри виджета.
+9. **TutorialsHistory widget** — создать `src/widgets/TutorialsHistory/`: `HistoryLayout` + `RowsList` с `renderRow={TutorialRowContent}`; без `FieldsSelector`/`visibleFields`/`comparison`/`editing`/`getRowActions`; оставить `title`/`logo`/`search`/`filter`/`items`/`selectedRowId`/`onListItemClick`; generic по `T extends TutorialHistoryRow`; i18n-кейсет `qp:tutorials` с ключом `title_tutorials`; добавить `.stories.tsx`.
+10. **Barrel-экспорты** — обновить `src/modules/index.ts`, `src/widgets/index.ts`, `src/components/index.ts`, `src/index.ts`.
+11. **Проверка** — прогнать сборку и Storybook, исправить возможные TS-ошибки после ослабления generic-constraints.

package/skills-lock.json

@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "skills": {
+    "gravity-ui": {
+      "source": "gravity-ui/skills",
+      "sourceType": "github",
+      "skillPath": "skills/gravity-ui/SKILL.md",
+      "computedHash": "e2ecf858568e39c22fd2bb35b7b34721e79a61ac47b45134d11db2ce937d8115"
+    }
+  }
+}

package/src/components/FieldsSelector/FieldsSelector.scss

@@ -0,0 +1,18 @@
+.qp-fields-selector {
+  padding: 8px 16px;
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    //width: 16px;
+    //height: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
+    color: var(--g-color-base-generic-medium);
+
+    &_checked {
+      color: var(--g-color-base-brand);
+    }
+  }
+}

package/src/components/FieldsSelector/FieldsSelector.stories.tsx

@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {action} from 'storybook/actions';
+import {FieldsSelector} from './FieldsSelector';
+
+const meta: Meta<typeof FieldsSelector> = {
+    title: 'Components/FieldsSelector',
+    component: FieldsSelector,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        onChange: {action: true},
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldsSelector>;
+
+const fields = [
+    {id: 'id', title: 'Id'},
+    {id: 'title', title: 'Title'},
+    {id: 'author', title: 'Author'},
+    {id: 'status', title: 'Status'},
+    {id: 'createdAt', title: 'Created at'},
+    {id: 'updatedAt', title: 'Updated at'},
+];
+
+const logOnChange = action('onChange');
+
+/** Fully controlled example: selected fields persist between openings of the popup */
+export const Controlled: Story = {
+    render: function ControlledFieldsSelector() {
+        const [values, setValues] = useState<string[]>(['id', 'status']);
+
+        return (
+            <FieldsSelector
+                fields={fields}
+                value={values}
+                onChange={(newValue) => {
+                    logOnChange(newValue);
+                    setValues(newValue);
+                }}
+            />
+        );
+    },
+};

package/src/components/FieldsSelector/FieldsSelector.tsx

@@ -0,0 +1,92 @@
+import React, {ReactNode, useState} from 'react';
+import {Button, Flex, Icon, Popup, Text} from '@gravity-ui/uikit';
+import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
+import CheckIcon from '@gravity-ui/icons/svgs/check.svg';
+import {useToggle} from '../../helpers/useToggle';
+import i18n from './i18n';
+import './FieldsSelector.scss';
+import cn from 'bem-cn-lite';
+
+export type FieldsSelectorOption<K extends string = string> = {
+    id: K;
+    title: ReactNode;
+};
+
+export type FieldsSelectorProps<K extends string = string> = {
+    fields: FieldsSelectorOption<K>[];
+    value: K[];
+    onChange: (value: K[]) => void;
+    buttonLabel?: string;
+};
+
+const block = cn('qp-fields-selector');
+
+export const FieldsSelector = <K extends string = string>({
+    fields,
+    value,
+    onChange,
+    buttonLabel = i18n('action_configure-visible-fields'),
+}: FieldsSelectorProps<K>) => {
+    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
+    const [open, toggleOpen] = useToggle(false);
+
+    const handleOnChange = (field: K, isChecked: boolean) => {
+        const newValue = isChecked ? [...value, field] : value.filter((key) => key !== field);
+        onChange(newValue);
+    };
+
+    return (
+        <>
+            <Button ref={setButtonElement} onClick={toggleOpen} aria-label={buttonLabel}>
+                <Icon data={GearIcon} size={16} />
+            </Button>
+            <Popup
+                anchorElement={buttonElement}
+                placement="right-start"
+                open={open}
+                onOpenChange={toggleOpen}
+                className={block()}
+            >
+                <Flex direction="column" alignItems="flex-start" gap={1}>
+                    {fields.map((field) => {
+                        const isChecked = value.includes(field.id);
+                        const checkboxLabel =
+                            typeof field.title === 'string' ? field.title : undefined;
+
+                        return (
+                            <Flex
+                                key={field.id}
+                                gap={3}
+                                alignItems="center"
+                                role="checkbox"
+                                aria-checked={isChecked}
+                                aria-label={checkboxLabel}
+                                tabIndex={0}
+                                className={block('checkbox', {checked: isChecked})}
+                                onClick={() => {
+                                    handleOnChange(field.id, !isChecked);
+                                }}
+                                onKeyDown={(event) => {
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                        event.preventDefault();
+                                        handleOnChange(field.id, !isChecked);
+                                    }
+                                }}
+                            >
+                                <Icon
+                                    data={CheckIcon}
+                                    size={16}
+                                    className={block('checkbox-icon')}
+                                />
+
+                                <Text variant="body-1" color="primary">
+                                    {field.title}
+                                </Text>
+                            </Flex>
+                        );
+                    })}
+                </Flex>
+            </Popup>
+        </>
+    );
+};

package/src/components/FieldsSelector/i18n/dicts.ts

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

package/src/components/FieldsSelector/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "action_configure-visible-fields": "Configure visible fields"
+}

package/src/components/FieldsSelector/i18n/index.ts

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

package/src/components/FieldsSelector/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "action_configure-visible-fields": "Настроить видимые поля"
+}

package/src/components/FieldsSelector/index.ts

@@ -0,0 +1 @@
+export {FieldsSelector} from './FieldsSelector';

package/src/components/HistoryFilter/HistoryFilter.scss

@@ -0,0 +1,5 @@
+.qp-history-filter {
+  &__container {
+    padding: 20px;
+  }
+}

package/src/components/HistoryFilter/HistoryFilter.stories.tsx

@@ -0,0 +1,69 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {FormField} from '../SimpleForm';
+import {HistoryFilter} from './HistoryFilter';
+
+const meta: Meta<typeof HistoryFilter> = {
+    title: 'Components/HistoryFilter',
+    component: HistoryFilter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryFilter>;
+
+const fields: FormField[] = [
+    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
+    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
+    {
+        id: 'checkobxGroup',
+        type: 'checkboxGroup',
+        title: 'Dialect',
+        initialValue: [],
+        items: [
+            {id: 'yql', title: 'YQL'},
+            {id: 'sql', title: 'SQL'},
+        ],
+    },
+];
+
+/** Basic filter with a set of fields and Apply/Reset handlers */
+export const Default: Story = {
+    args: {
+        fields,
+        onApply: (values) => alert(JSON.stringify(values)),
+        onReset: () => alert('Reset'),
+    },
+};
+
+/** Filter with a "changed" state — the popup toggle button is highlighted (view="action") */
+export const Changed: Story = {
+    args: {
+        fields,
+        isChanged: true,
+        onApply: (values) => alert(JSON.stringify(values)),
+        onReset: () => alert('Reset'),
+    },
+};
+
+/** Filter in controlled mode with provided values */
+export const Controlled: Story = {
+    args: {
+        fields,
+        values: {onlyMine: false},
+        onApply: (values) => alert(JSON.stringify(values)),
+        onReset: () => alert('Reset'),
+    },
+};
+
+/** Filter with initial values (uncontrolled mode) */
+export const WithInitialValues: Story = {
+    args: {
+        fields,
+        initialValues: {onlyMine: true},
+        onApply: (values) => alert(JSON.stringify(values)),
+        onReset: () => alert('Reset'),
+    },
+};

package/src/components/HistoryFilter/HistoryFilter.tsx

@@ -0,0 +1,64 @@
+import React, {FC, useRef, useState} from 'react';
+import {Button, Flex, Icon, Popup} from '@gravity-ui/uikit';
+import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
+import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
+import {useToggle} from '../../helpers/useToggle';
+import {QueryHistoryFilterConfig} from '../../types/history';
+import cn from 'bem-cn-lite';
+import {SimpleForm} from '../SimpleForm';
+import i18n from './i18n';
+import './HistoryFilter.scss';
+
+const block = cn('qp-history-filter');
+
+export const HistoryFilter: FC<QueryHistoryFilterConfig> = ({
+    fields = [],
+    values,
+    initialValues,
+    isChanged,
+    onApply,
+    onReset,
+}) => {
+    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
+    const [open, toggleOpen] = useToggle(false);
+    const valuesRef = useRef<Record<string, any>>(values ?? initialValues ?? {});
+
+    return (
+        <>
+            <Button
+                ref={setButtonElement}
+                onClick={toggleOpen}
+                view={isChanged ? 'action' : 'normal'}
+            >
+                <Icon data={FunnelIcon} size={16} />
+            </Button>
+            <Popup
+                anchorElement={buttonElement}
+                open={open}
+                onOpenChange={toggleOpen}
+                className={block()}
+                placement="bottom-start"
+            >
+                <div className={block('container')}>
+                    <SimpleForm
+                        fields={fields}
+                        values={values}
+                        initialValues={initialValues}
+                        onValuesChange={(nextValues) => {
+                            valuesRef.current = nextValues;
+                        }}
+                    />
+                </div>
+                <Flex gap={3} className={block('container')}>
+                    <Button view="action" onClick={() => onApply?.(valuesRef.current)}>
+                        {i18n('action_apply')}
+                    </Button>
+                    <Button onClick={onReset}>
+                        <Icon data={ArrowRotateLeftIcon} size={16} />
+                        {i18n('action_reset')}
+                    </Button>
+                </Flex>
+            </Popup>
+        </>
+    );
+};

package/src/components/HistoryFilter/i18n/dicts.ts

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

package/src/components/HistoryFilter/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "action_apply": "Apply",
+    "action_reset": "Reset"
+}

package/src/components/HistoryFilter/i18n/index.ts

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

package/src/components/HistoryFilter/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+    "action_apply": "Применить",
+    "action_reset": "Сбросить"
+}

package/src/components/HistoryFilter/index.ts

@@ -0,0 +1 @@
+export {HistoryFilter} from './HistoryFilter';

package/src/components/HistoryGroupHeader/HistoryGroupHeader.scss

@@ -0,0 +1,7 @@
+.qp-history-list-header {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  width: 100%;
+  padding: 4px 16px;
+}

package/src/components/HistoryGroupHeader/HistoryGroupHeader.tsx

@@ -0,0 +1,18 @@
+import React, {FC} from 'react';
+import {Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import './HistoryGroupHeader.scss';
+
+type Props = {
+    title: string;
+};
+
+const block = cn('qp-history-list-header');
+
+export const HistoryGroupHeader: FC<Props> = ({title}) => {
+    return (
+        <Text as="div" color="secondary" className={block()}>
+            {title}
+        </Text>
+    );
+};

package/src/components/HistoryGroupHeader/index.ts

@@ -0,0 +1 @@
+export {HistoryGroupHeader} from './HistoryGroupHeader';

package/src/components/HistoryListEmpty/HistoryListEmpty.scss

@@ -0,0 +1,3 @@
+.qp-history-list-empty {
+  height: 100%;
+}