@danikokonn/yarik-frontend-lib 2.0.58 → 2.1.1

package/README.md

@@ -1 +1,309 @@
-# YARIK-frontend-lib
+# YARIK-frontend-lib
+
+Библиотека переиспользуемых React-компонентов, утилит и провайдеров.
+
+[![NPM](https://img.shields.io/npm/v/@danikokonn/yarik-frontend-lib)](https://www.npmjs.com/package/@danikokonn/yarik-frontend-lib)
+[![License: Apache-2.0](https://img.shields.io/badge/License-Apache--2.0-blue.svg)](LICENSE)
+
+---
+
+## Содержание
+
+- [Установка](#установка)
+- [Требования](#требования)
+- [Использование](#использование)
+- [Компоненты](#компоненты)
+- [Провайдеры](#провайдеры)
+- [Утилиты и HTTP-клиент](#утилиты-и-http-клиент)
+- [Разработка](#разработка)
+- [Тестирование](#тестирование)
+- [Публикация](#публикация)
+- [Как дополнять README](#как-дополнять-readme)
+
+---
+
+## Установка
+
+```bash
+npm install @danikokonn/yarik-frontend-lib
+```
+
+---
+
+## Требования
+
+| Зависимость | Версия   |
+|-------------|----------|
+| React       | >=18 <20 |
+| react-dom   | >=18 <20 |
+
+MUI, Emotion и остальные зависимости устанавливаются автоматически.
+
+---
+
+## Использование
+
+### Импорт компонентов
+
+```tsx
+import { SmartTable, Navigation, PageWrapper } from '@danikokonn/yarik-frontend-lib';
+```
+
+### Импорт утилит
+
+```tsx
+import { prettyDatetime, getCSRFToken } from '@danikokonn/yarik-frontend-lib/utils';
+```
+
+### Импорт HTTP-клиента
+
+```tsx
+import { get, post } from '@danikokonn/yarik-frontend-lib/http';
+```
+
+### Импорт типов
+
+```tsx
+import type { Dag, DagRun, TaskInstance } from '@danikokonn/yarik-frontend-lib/types';
+```
+
+### Подключение провайдеров
+
+```tsx
+import { SnackBarProvider, SessionProvider } from '@danikokonn/yarik-frontend-lib';
+
+function App() {
+  return (
+    <SessionProvider>
+      <SnackBarProvider>
+        {/* ваше приложение */}
+      </SnackBarProvider>
+    </SessionProvider>
+  );
+}
+```
+
+---
+
+## Компоненты
+
+| Компонент                  | Описание                                                         |
+|----------------------------|------------------------------------------------------------------|
+| `ActionDialog`             | Диалог подтверждения действия с опциональной формой ввода       |
+| `ColumnSearchInput`        | Поле поиска для столбца таблицы                                 |
+| `DateTimeRangePicker`      | Выбор диапазона дат и времени                                   |
+| `DatetimeRangeInput`       | Ввод диапазона дата/время                                       |
+| `Footer`                   | Нижний колонтитул страницы                                      |
+| `IpAddressInput`           | Поле ввода IP-адреса с валидацией                               |
+| `IpAddressSwitchableInput` | Переключаемое поле ввода IP-адреса                              |
+| `LocalizedDatetimePicker`  | Выбор даты/времени с поддержкой часовых поясов                  |
+| `Navigation`               | Навигационная панель с поддержкой меню                          |
+| `NumberRangeInput`         | Ввод числового диапазона                                        |
+| `PageWrapper`              | Обёртка страницы (Navigation + контент + Footer)                |
+| `RichFilterTextField`      | Расширенное поле фильтрации с историей и подсказками            |
+| `SmartTable`               | Виртуализированная таблица с сортировкой, пагинацией, фильтрами |
+| `SortBtn`                  | Кнопка сортировки                                               |
+| `SubtaskItem`              | Отображение элемента подзадачи                                  |
+| `TaskLoader`               | Компонент состояния загрузки                                    |
+| `TaskStateDialog`          | Диалог отображения состояния задачи                             |
+
+### Иконки
+
+Доступны 9 SVG-иконок: `GenerateAndRunIcon`, `GenerateIcon`, `IntegerIcon`, `ProcessingIcon`, `QueueIcon`, `RangeIcon`, `RunIcon`, `TextModeIcon`, `TreeModeIcon`.
+
+```tsx
+import { RunIcon } from '@danikokonn/yarik-frontend-lib/components/icons/RunIcon';
+```
+
+---
+
+## Провайдеры
+
+### SnackBarProvider
+
+Контекст уведомлений на основе notistack.
+
+```tsx
+import { SnackBarProvider, useSnackbarContext } from '@danikokonn/yarik-frontend-lib';
+
+function MyComponent() {
+  const { enqueueSnackbar } = useSnackbarContext();
+
+  return (
+    <button onClick={() => enqueueSnackbar('Успешно!', { variant: 'success' })}>
+      Показать уведомление
+    </button>
+  );
+}
+```
+
+Доступные варианты: `default`, `error`, `success`, `warning`, `info`.
+
+### SessionProvider
+
+Управление состоянием сессии и аутентификации.
+
+### AirflowProvider
+
+Контекст интеграции с Apache Airflow.
+
+### DagStateProvider
+
+Управление состоянием DAG-рабочих процессов.
+
+---
+
+## Утилиты и HTTP-клиент
+
+### Утилиты (`/utils`)
+
+```tsx
+import {
+  prettyDatetime,   // форматирование даты/времени для отображения
+  formatDate,       // форматирование даты
+  formatDuration,   // форматирование длительности
+  getCSRFToken,     // получение CSRF-токена
+  setCSRFToken,     // установка CSRF-токена
+  useDebounce,      // хук debounce
+  gettextTS,        // i18n: перевод строки
+  ngettextTS,       // i18n: перевод с учётом числа
+} from '@danikokonn/yarik-frontend-lib/utils';
+```
+
+### HTTP-клиент (`/http`)
+
+Fetch-обёртка с поддержкой CSRF и автоматическим определением истечения сессии (401).
+
+```tsx
+import { get, post } from '@danikokonn/yarik-frontend-lib/http';
+
+const data = await get('/api/endpoint');
+await post('/api/endpoint', { key: 'value' });
+```
+
+---
+
+## Разработка
+
+### Установка зависимостей
+
+```bash
+npm install
+```
+
+### Сборка
+
+```bash
+npm run build
+```
+
+Компилирует TypeScript в `dist/`. Декларации типов генерируются автоматически.
+
+### Добавление нового компонента
+
+Создайте папку `src/components/<ComponentName>/` со структурой:
+
+```
+src/components/MyComponent/
+├── MyComponent.tsx       # компонент
+├── MyComponentProps.ts   # интерфейс пропсов
+├── MyComponent.test.tsx  # тесты (обязательно, см. раздел «Тестирование»)
+└── index.ts              # export { default } from './MyComponent'
+```
+
+Добавьте экспорт в `src/components/index.ts`.
+
+---
+
+## Тестирование
+
+Проект использует [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+
+### Запуск тестов
+
+```bash
+npm test           # watch-режим (разработка)
+npm run test:run   # однократный запуск (CI)
+npm run coverage   # запуск с отчётом о покрытии
+```
+
+### Структура тестов
+
+Тестовые файлы располагаются рядом с компонентом (`*.test.tsx`) и автоматически подхватываются Vitest.
+
+```
+src/components/SortBtn/
+├── SortBtn.tsx
+├── SortBtnProps.ts
+├── SortBtn.test.tsx   ← тесты
+└── index.ts
+```
+
+### Обязательный плейсхолдер
+
+При создании нового компонента **всегда** создавайте файл `<ComponentName>.test.tsx` рядом с компонентом — даже если тесты пока не написаны:
+
+```tsx
+import { render } from '@testing-library/react'
+import MyComponent from './MyComponent'
+
+describe('MyComponent', () => {
+  /**
+   * Проверяем, что компонент рендерится без ошибок с обязательными пропсами.
+   * Базовая страховка от синтаксических и runtime-ошибок при первом рендере.
+   */
+  it.todo('renders correctly')
+})
+```
+
+Это сигнализирует о том, что компонент ещё не покрыт тестами, и не даёт файлу «потеряться».
+
+### Описание тест-кейсов
+
+Каждый блок `it` (в том числе `it.todo`) должен предваряться JSDoc-комментарием, объясняющим **что** тестируется и **зачем**. Названия теста недостаточно — комментарий должен отвечать на вопрос «что сломается в продакшене, если этот тест упадёт»:
+
+```tsx
+/**
+ * Проверяем, что первый клик из состояния "none" вызывает onToggleSort с направлением "asc".
+ * Это начало трёхступенчатого цикла: none → asc → desc → none.
+ * Callback должен получать и поле, и новое направление, чтобы родитель мог обновить свой стейт.
+ */
+it('calls onToggleSort with asc when order is none', async () => {
+  // ...
+})
+```
+
+Правило распространяется на все тесты — и реальные, и заглушки `it.todo`.
+
+### Конфигурация
+
+| Файл | Назначение |
+|------|------------|
+| `vitest.config.ts` | Основная конфигурация Vitest |
+| `src/test/setup.ts` | Подключение `@testing-library/jest-dom` |
+| `tsconfig.test.json` | TypeScript-конфигурация для тестов |
+
+---
+
+## Публикация
+
+Публикация выполняется автоматически через GitHub Actions при создании релиза.
+
+| Тип релиза  | NPM-тег  |
+|-------------|----------|
+| Pre-release | `test`   |
+| Release     | `latest` |
+
+Версия берётся из git-тега и подставляется в `package.json` во время CI-сборки.
+
+---
+
+## Как дополнять README
+
+Добавляйте информацию в соответствующий раздел. Если раздела нет — создайте новый перед этим разделом.
+
+**Рекомендации:**
+- Каждый новый компонент — строка в таблицу раздела «Компоненты» с кратким описанием.
+- Каждый новый провайдер — подраздел в «Провайдеры» с примером использования.
+- Новые утилиты — добавить в список импортов раздела «Утилиты».
+- Примеры кода должны быть минимальными и рабочими.

package/dist/components/RichFilterTextField/RichFilterTextField.js

@@ -40,7 +40,7 @@ const RichFilterTextField = ({ filterExpr, filterExprHist: searchHist, fields, o
         if (cursorPos &&
             getHints(value, cursorPos, fields, operators) !== currentHintOptions)
             setFocusIdx(0);
-        onChange(value /*(v: unknown) => setSearchHist(v as string[])*/);
+        onChange(value);
     };
     const insertHint = (hint) => {
         if (cursorPos == null)

package/dist/components/SubtaskItem/SubtaskItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAgBA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,2CAwIlB"}
+{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAgBA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,2CAsIlB"}

package/dist/components/SubtaskItem/SubtaskItem.js

@@ -12,7 +12,7 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import CircularProgress from "@mui/material/CircularProgress";
 import moment from "moment";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { taskStateText } from "../../utils";
 const SubtaskState = ({ state }) => {
     switch (state) {
@@ -34,6 +34,16 @@ export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs,
     const [copyVisible, setCopyVisible] = useState(false);
     const [copyText, setCopyText] = useState("Копировать");
     const theme = useTheme();
+    useEffect(() => {
+        if (expanded) {
+            setCopyVisible(true);
+            setCopyText("Копировать");
+        }
+        else {
+            setCopyVisible(false);
+            setCopyText("Копировать");
+        }
+    }, [expanded]);
     const formatEndDate = new Date(taskInstance.executionDate).toLocaleString("ru", {
         weekday: "short",
         month: "short",
@@ -51,17 +61,6 @@ export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs,
     });
     return (_jsxs(Accordion, { disableGutters: true, expanded: expanded, onChange: () => onShowLogs(taskInstance.taskId, taskInstance.tryNumber), disabled: !["running", "success", "failed"].includes(taskInstance.state || ""), sx: {
             position: "relative",
-        }, slotProps: {
-            transition: {
-                onEntered: () => {
-                    setCopyVisible(true);
-                    setCopyText("Копировать");
-                },
-                onExit: () => {
-                    setCopyVisible(false);
-                    setCopyText("Копировать");
-                },
-            },
         }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(SubtaskState, { state: taskInstance.state }), _jsxs("span", { children: [taskInstance.taskId, " - ", taskStateText(taskInstance.state), taskInstance.state === "success"
                                     ? (formatEndDate.startsWith("вт") ? " во " : " в ") +
                                         formatEndDate +

package/dist/components/TaskLoader/TaskLoader.js

@@ -180,7 +180,7 @@ const TaskLoader = ({ style, subTitle, onUnauthorized }) => {
             successHandler: (resp) => {
                 if (!resp)
                     return;
-                onUpdateState(true, resp.dagRun, resp.taskInstances);
+                onUpdateState(true, resp.dagRun);
                 setActiveTask(null);
                 setLogs([null, null, null]);
             },
@@ -211,7 +211,7 @@ const TaskLoader = ({ style, subTitle, onUnauthorized }) => {
             successHandler: (resp) => {
                 if (!resp)
                     return;
-                onUpdateState(true, resp.dagRun, resp.taskInstances);
+                onUpdateState(true, resp.dagRun);
                 setActiveTask(null);
                 setLogs([null, null, null]);
                 setBlockControls(false);

package/dist/providers/AirflowProvider.d.ts

@@ -1,15 +1,16 @@
 import React from "react";
+type AirflowContextValue = {
+    dagId?: string | null;
+    airflowAvailable: boolean;
+    onChangeDagId(dagId: string | null): void;
+    onLostConnection(): void;
+};
 interface AirflowProviderProps {
     children?: React.ReactNode;
     dagId?: string | null;
     onUnauthorized(): void;
 }
 export declare const AirflowProvider: ({ children, dagId: _dagId, onUnauthorized, }: AirflowProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useAirflowContext: () => {
-    dagId?: string | null;
-    airflowAvailable: boolean;
-    onChangeDagId(dagId: string | null): void;
-    onLostConnection(): void;
-};
+export declare const useAirflowContext: () => AirflowContextValue;
 export default AirflowProvider;
 //# sourceMappingURL=AirflowProvider.d.ts.map

package/dist/providers/AirflowProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AirflowProvider.d.ts","sourceRoot":"","sources":["../../src/providers/AirflowProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAgBhF,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,GAAI,8CAI7B,oBAAoB,4CAyEtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;YAhGpB,MAAM,GAAG,IAAI;sBACH,OAAO;yBACJ,MAAM,GAAG,IAAI,GAAG,IAAI;wBACrB,IAAI;CA+FzB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AirflowProvider.d.ts","sourceRoot":"","sources":["../../src/providers/AirflowProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,gBAAgB,IAAI,IAAI,CAAC;CAC1B,CAAC;AAIF,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,IAAI,IAAI,CAAC;CACxB;AA+BD,eAAO,MAAM,eAAe,GAAI,8CAI7B,oBAAoB,4CAyDtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,2BAM7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/providers/AirflowProvider.js

@@ -1,66 +1,69 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
 import useSWR from "swr";
 import { useSnackbarContext } from "./SnackBarProvider";
-const AirflowContext = createContext({
-    dagId: "",
-    airflowAvailable: false,
-    onChangeDagId: () => { },
-    onLostConnection: () => { },
-});
+const AirflowContext = createContext(null);
+const makeFetcher = (onUnauthorized) => async (url) => {
+    const res = await fetch(url);
+    let err;
+    if (res.status === 401) {
+        onUnauthorized();
+        err = new Error("Unauthorized Airflow connection checking request.");
+        err.status = 401;
+    }
+    else if (!res.ok && res.status !== 404) {
+        err = new Error("An error occurred while fetching the data.");
+        err.info = await res.json();
+        err.status = res.status;
+    }
+    if (typeof err !== "undefined") {
+        throw err;
+    }
+    return res.json();
+};
 export const AirflowProvider = ({ children, dagId: _dagId, onUnauthorized, }) => {
-    const fetcher = async (url) => {
-        const res = await fetch(url);
-        if (res.status === 401) {
-            onUnauthorized();
-        }
-        if (!res.ok && res.status !== 404) {
-            const error = new Error("An error occurred while fetching the data.");
-            throw { ...error, info: await res.json(), status: res.status };
-        }
-        return res.json();
-    };
+    const fetcher = useMemo(() => makeFetcher(onUnauthorized), [onUnauthorized]);
     const { enqueueSnackbar } = useSnackbarContext();
     const [dagId, setDagId] = useState(_dagId);
-    const [firstRun, setFirstRun] = useState(true);
-    const [previousAirflowAvailable, setPreviousAirflowAvailable] = useState(false);
-    const { error, mutate } = useSWR("airflow/check_connection", fetcher, {
+    // null = первый запрос ещё не завершён
+    const prevAvailable = useRef(null);
+    const { error, isLoading, mutate } = useSWR("airflow/check_connection", fetcher, {
         refreshInterval: 10000,
         onSuccess: () => {
-            if (firstRun) {
-                setFirstRun(false);
-            }
-            else if (!previousAirflowAvailable) {
+            if (prevAvailable.current === false) {
                 enqueueSnackbar("Соединение с Airflow установлено!", "info");
             }
-            setPreviousAirflowAvailable(true);
+            prevAvailable.current = true;
         },
         onError: () => {
-            if (firstRun) {
-                enqueueSnackbar(`Не удалось установить соединение с Airflow!`, "warning");
-                setFirstRun(false);
+            if (prevAvailable.current === null) {
+                enqueueSnackbar("Не удалось установить соединение с Airflow!", "warning");
             }
-            else if (previousAirflowAvailable) {
-                enqueueSnackbar(`Потеряно соединение с Airflow!`, "warning");
+            else if (prevAvailable.current === true) {
+                enqueueSnackbar("Потеряно соединение с Airflow!", "warning");
             }
-            setPreviousAirflowAvailable(false);
+            prevAvailable.current = false;
         },
     });
-    const airflowAvailable = error == null;
-    const setContext = useCallback((dagId) => {
+    const airflowAvailable = !isLoading && error == null;
+    const onChangeDagId = useCallback((dagId) => {
         setDagId(dagId);
-    }, [dagId, setDagId]);
-    const onLostConnection = () => {
-        mutate();
-    };
+    }, []);
+    const onLostConnection = useCallback(() => {
+        void mutate();
+    }, [mutate]);
     return (_jsx(AirflowContext.Provider, { value: {
             airflowAvailable,
             dagId,
-            onChangeDagId: setContext,
+            onChangeDagId,
             onLostConnection,
         }, children: children }));
 };
 export const useAirflowContext = () => {
-    return useContext(AirflowContext);
+    const ctx = useContext(AirflowContext);
+    if (ctx === null) {
+        throw new Error("useAirflowContext must be used within AirflowProvider");
+    }
+    return ctx;
 };
 export default AirflowProvider;

package/dist/providers/DagStateProvider.d.ts

@@ -4,19 +4,19 @@ interface DagRunStateProviderProps {
     children?: React.ReactNode;
     dagRun?: DagRun;
     autorun?: boolean;
-    poolingByUser?: boolean;
+    pollingByUser?: boolean;
     taskInstances?: TaskInstances;
     autorunHandler?(dagRun: DagRun | null, autorun: boolean): void;
     onUnauthorized(): void;
 }
-declare const DagRunStateProvider: ({ children, dagRun: _dagRun, autorun: _autorun, poolingByUser, autorunHandler, onUnauthorized, }: DagRunStateProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const DagRunStateProvider: ({ children, dagRun: _dagRun, autorun: _autorun, pollingByUser, autorunHandler, onUnauthorized, }: DagRunStateProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useDagRunStateContext: () => {
     isActive: boolean;
     autorun: boolean;
     dagRun: DagRun | null;
     taskInstances: TaskInstances | null;
     dagStartedOnce: boolean;
-    onUpdateState(isActive: boolean, dagRun: DagRun | null, taskInstances: TaskInstances | null): void;
+    onUpdateState(isActive: boolean, dagRun: DagRun | null): void;
     error: boolean;
     onDagStarted: () => void;
     activate(): void;

package/dist/providers/DagStateProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DagStateProvider.d.ts","sourceRoot":"","sources":["../../src/providers/DagStateProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAkCjD,UAAU,wBAAwB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/D,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,mBAAmB,GAAI,kGAO1B,wBAAwB,4CAuJ1B,CAAC;AAEF,eAAO,MAAM,qBAAqB;cAvMtB,OAAO;aACR,OAAO;YACR,MAAM,GAAG,IAAI;mBACN,aAAa,GAAG,IAAI;oBACnB,OAAO;4BAEX,OAAO,UACT,MAAM,GAAG,IAAI,iBACN,aAAa,GAAG,IAAI,GAClC,IAAI;WACA,OAAO;kBACA,MAAM,IAAI;gBACZ,IAAI;kBACF,IAAI;wBACE,OAAO,GAAG,IAAI;CA2LnC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DagStateProvider.d.ts","sourceRoot":"","sources":["../../src/providers/DagStateProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAkBjD,UAAU,wBAAwB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/D,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,mBAAmB,GAAI,kGAO1B,wBAAwB,4CAwJ1B,CAAC;AAEF,eAAO,MAAM,qBAAqB;cAxLtB,OAAO;aACR,OAAO;YACR,MAAM,GAAG,IAAI;mBACN,aAAa,GAAG,IAAI;oBACnB,OAAO;4BACC,OAAO,UAAU,MAAM,GAAG,IAAI,GAAG,IAAI;WACtD,OAAO;kBACA,MAAM,IAAI;gBACZ,IAAI;kBACF,IAAI;wBACE,OAAO,GAAG,IAAI;CAsLnC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/providers/DagStateProvider.js

@@ -3,41 +3,38 @@ import { createContext, useCallback, useContext, useEffect, useEffectEvent, useS
 import useSWR from "swr";
 import { useAirflowContext } from "./AirflowProvider";
 import { useSnackbarContext } from "./SnackBarProvider";
-const DagRunStateContext = createContext({
-    isActive: true,
-    autorun: false,
-    dagRun: null,
-    taskInstances: null,
-    dagStartedOnce: false,
-    error: false,
-    onUpdateState: () => { },
-    onDagStarted: () => { },
-    fetchState: () => { },
-    activate: () => { },
-    setAutorun: () => { },
-});
-const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, poolingByUser, autorunHandler, onUnauthorized, }) => {
+const DagRunStateContext = createContext(null);
+const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, pollingByUser, autorunHandler, onUnauthorized, }) => {
     const { airflowAvailable, dagId, onLostConnection } = useAirflowContext();
-    const [autorun, setAutorun] = useState(_autorun || false);
-    const [dagRunId, setDagRunId] = useState(_dagRun?.dagRunId);
+    const [autorun, setAutorun] = useState(_autorun ?? false);
+    const [dagRunId, setDagRunId] = useState(_dagRun?.dagRunId ?? null);
     const [dagStartedOnce, setDagStartedOnce] = useState(false);
     const { enqueueSnackbar } = useSnackbarContext();
-    const defaultFetcher = async ([url, dagId, dagRunId, poolingByUser]) => {
+    const defaultFetcher = useCallback(async ([url, dagId, dagRunId, pollingByUser]) => {
         const requestUrl = new URL("http://foo/" + url);
         requestUrl.searchParams.append("dag_id", dagId);
         if (dagRunId)
             requestUrl.searchParams.append("dag_run_id", dagRunId);
-        requestUrl.searchParams.append("by_user", String(poolingByUser));
+        requestUrl.searchParams.append("by_user", String(pollingByUser));
         const resultUrl = requestUrl.pathname.substring(1) + requestUrl.search;
-        const res = await fetch(resultUrl, { signal: AbortSignal.timeout(10000) });
+        const res = await fetch(resultUrl, {
+            signal: AbortSignal.timeout(10000),
+        });
         if (res.status === 401) {
             onUnauthorized();
         }
         if (!res.ok) {
-            throw { ...(await res.json()), status: res.status };
+            let body = {};
+            try {
+                body = await res.json();
+            }
+            catch {
+                /* ignore non-JSON bodies (e.g. nginx error pages) */
+            }
+            throw { ...body, status: res.status };
         }
         return res.json();
-    };
+    }, [onUnauthorized]);
     const [shouldRevalidate, setShouldRevalidate] = useState(true);
     const activate = useCallback(() => {
         setShouldRevalidate(true);
@@ -47,12 +44,12 @@ const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, poo
         "airflow/dag_run",
         dagId,
         dagRunId ?? null,
-        Boolean(poolingByUser),
+        Boolean(pollingByUser),
     ], defaultFetcher, {
         refreshInterval: shouldRevalidate ? 1000 : 0,
         onError: (err) => {
-            if (err?.status !== 404) {
-                enqueueSnackbar(`Ошибка при обновлении состояния задачи${(dagId && " ") || ""}${dagId || ""}!`, "error");
+            if (err?.status !== 404 && err?.status !== 401) {
+                enqueueSnackbar(`Ошибка при обновлении состояния задачи${dagId ? ` ${dagId}` : ""}!`, "error");
             }
             if (err?.status === 503) {
                 onLostConnection();
@@ -65,15 +62,14 @@ const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, poo
     });
     const dagRun = data?.dagRun ?? null;
     const taskInstances = data?.taskInstances ?? null;
-    const updDagRunIdId = useEffectEvent((newDagRunId) => {
+    const updDagRunId = useEffectEvent((newDagRunId) => {
         if (dagRunId !== newDagRunId) {
             setDagRunId(newDagRunId);
         }
     });
     // Обновлять идентификатор запуска при изменении
     useEffect(() => {
-        updDagRunIdId(dagRun?.dagRunId ?? null);
-        console.log("effect 1");
+        updDagRunId(dagRun?.dagRunId ?? null);
     }, [dagRun?.dagRunId ?? null]);
     const autorunAction = useEffectEvent((dagRun) => {
         if (autorunHandler) {
@@ -89,23 +85,19 @@ const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, poo
         if (dagRun?.state === "success") {
             autorunAction(dagRun);
         }
-        console.log("effect 2");
     }, [dagRun?.state]);
-    const onUpdateState = (isActive, newDagRun, _taskInstances) => {
+    const onUpdateState = (isActive, newDagRun) => {
         setShouldRevalidate(isActive);
-        setDagRunId(newDagRun?.dagRunId);
+        setDagRunId(newDagRun?.dagRunId ?? null);
         if (newDagRun == null)
             mutate();
     };
-    /**Вызывать сразу после запуска дага*/
+    /** Вызывать сразу после запуска дага */
     const onDagStarted = () => {
-        // setIsActive(true);
         setDagRunId(null);
-        // setTaskInstances(null);
         setShouldRevalidate(true);
         setDagStartedOnce(true);
     };
-    const updateState = () => mutate();
     return (_jsx(DagRunStateContext.Provider, { value: {
             isActive: shouldRevalidate,
             autorun,
@@ -116,11 +108,15 @@ const DagRunStateProvider = ({ children, dagRun: _dagRun, autorun: _autorun, poo
             onDagStarted,
             activate,
             error: Boolean(error),
-            fetchState: updateState,
-            setAutorun: (autorun) => setAutorun(autorun),
+            fetchState: () => mutate(),
+            setAutorun,
         }, children: children }));
 };
 export const useDagRunStateContext = () => {
-    return useContext(DagRunStateContext);
+    const ctx = useContext(DagRunStateContext);
+    if (!ctx) {
+        throw new Error("useDagRunStateContext must be used within DagRunStateProvider");
+    }
+    return ctx;
 };
 export default DagRunStateProvider;

package/dist/providers/SessionProvider.d.ts

@@ -1,11 +1,9 @@
-import React from "react";
 interface SessionProviderProps {
     children?: React.ReactNode;
     pollingInterval: number;
-    autoRedirect?: boolean;
     onUnauthorized?(): void;
 }
-declare const SessionProvider: ({ children, pollingInterval, autoRedirect, onUnauthorized, }: SessionProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const SessionProvider: ({ children, pollingInterval, onUnauthorized, }: SessionProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useSessionContext: () => {
     expiresIn: number;
 };

package/dist/providers/SessionProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionProvider.d.ts","sourceRoot":"","sources":["../../src/providers/SessionProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAU9E,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,IAAI,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,eAAe,GAAI,8DAKtB,oBAAoB,4CA8CtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;eAjEjB,MAAM;CAmElB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SessionProvider.d.ts","sourceRoot":"","sources":["../../src/providers/SessionProvider.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,IAAI,IAAI,CAAC;CACzB;AAQD,QAAA,MAAM,eAAe,GAAI,gDAItB,oBAAoB,4CA8CtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;eAzDjB,MAAM;CA2DlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/providers/SessionProvider.js

@@ -5,24 +5,24 @@ import { useSnackbarContext } from "./SnackBarProvider";
 const SessionContext = createContext({
     expiresIn: 0,
 });
-const SessionProvider = ({ children, pollingInterval, autoRedirect, onUnauthorized, }) => {
+const SessionProvider = ({ children, pollingInterval, onUnauthorized, }) => {
     const { enqueueSnackbar } = useSnackbarContext();
     const [expires, setExpires] = useState(false);
+    const [expiresIn, setExpiresIn] = useState(0);
     const alertExpire = () => enqueueSnackbar("Сессия завершилась, перезагрузите страницу!", "default");
     const fetchSessionExpiryAge = () => getRequest({
         url: "base/check_session",
-        successHandler: (_resp) => { },
+        successHandler: (resp) => {
+            setExpiresIn(resp.sessionExpiresIn);
+        },
         errorHandler: (e) => {
-            if (e?.status === 401 && autoRedirect && onUnauthorized) {
-                onUnauthorized();
+            if (e?.status === 401) {
+                onUnauthorized?.();
             }
             setExpires(true);
             alertExpire();
         },
-    }).catch((e) => {
-        if (e?.status === 401 && autoRedirect && onUnauthorized) {
-            onUnauthorized();
-        }
+    }).catch(() => {
         setExpires(true);
         alertExpire();
     });
@@ -35,7 +35,7 @@ const SessionProvider = ({ children, pollingInterval, autoRedirect, onUnauthoriz
         return () => clearInterval(interval);
     }, [expires]);
     return (_jsx(SessionContext.Provider, { value: {
-            expiresIn: pollingInterval,
+            expiresIn,
         }, children: children }));
 };
 export const useSessionContext = () => {

package/dist/providers/SnackBarProvider.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
+type SnackbarVariant = "default" | "error" | "success" | "warning" | "info";
 interface SnackBarProps {
-    children?: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode;
 }
 declare const SnackBarProvider: ({ children }: SnackBarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useSnackbarContext: () => {
-    enqueueSnackbar(message: string, variant: "default" | "error" | "success" | "warning" | "info"): void;
+    enqueueSnackbar(message: string, variant: SnackbarVariant): void;
 };
 export default SnackBarProvider;
 //# sourceMappingURL=SnackBarProvider.d.ts.map

package/dist/providers/SnackBarProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackBarProvider.d.ts","sourceRoot":"","sources":["../../src/providers/SnackBarProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAChD;AA8CD,QAAA,MAAM,gBAAgB,GAAI,cAAc,aAAa,4CAMpD,CAAC;AAEF,eAAO,MAAM,kBAAkB;6BA/DlB,MAAM,WACN,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAC5D,IAAI;CA+DR,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SnackBarProvider.d.ts","sourceRoot":"","sources":["../../src/providers/SnackBarProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAY5E,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoDD,QAAA,MAAM,gBAAgB,GAAI,cAAc,aAAa,4CAMpD,CAAC;AAEF,eAAO,MAAM,kBAAkB;6BAvEJ,MAAM,WAAW,eAAe,GAAG,IAAI;CAyEjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/providers/SnackBarProvider.js

@@ -1,29 +1,36 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from "react";
 import Button from "@mui/material/Button";
 import { SnackbarProvider, useSnackbar } from "notistack";
 const SnackBarContext = createContext({
+    // Намеренный no-op по умолчанию: позволяет вызывать useSnackbarContext()
+    // вне провайдера без исключения. Это нужно для обратной совместимости:
+    // другие провайдеры (AirflowProvider, DagStateProvider) мокируют
+    // SnackBarProvider в своих тестах и ожидают, что хук не бросает ошибку.
     enqueueSnackbar: () => { },
 });
 const SnackBarProviderUtilities = ({ children }) => {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-    const action = (snackbarId) => (_jsx(_Fragment, { children: _jsx(Button, { size: "small", variant: "text", color: "inherit", onClick: () => {
-                closeSnackbar(snackbarId);
-            }, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C" }) }));
-    function handleEnqueueSnackbar(message, variant) {
+    // closeSnackbar стабилен (гарантия notistack), поэтому action создаётся один раз.
+    const action = useCallback((snackbarId) => (_jsx(Button, { size: "small", variant: "text", color: "inherit", onClick: () => {
+            closeSnackbar(snackbarId);
+        }, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C" })), [closeSnackbar]);
+    // enqueueSnackbar и action оба стабильны, поэтому callback создаётся один раз.
+    // preventDuplicate не передаём — он уже задан на уровне <SnackbarProvider>.
+    const handleEnqueueSnackbar = useCallback((message, variant) => {
         enqueueSnackbar(message, {
-            variant: variant,
-            preventDuplicate: true,
-            action: action,
+            variant,
+            action,
             anchorOrigin: {
                 horizontal: "left",
                 vertical: "bottom",
             },
         });
-    }
-    return (_jsx(SnackBarContext.Provider, { value: {
-            enqueueSnackbar: handleEnqueueSnackbar,
-        }, children: children }));
+    }, [enqueueSnackbar, action]);
+    // useMemo предотвращает создание нового объекта value на каждом рендере,
+    // что вызвало бы лишние ре-рендеры у всех потребителей контекста.
+    const contextValue = useMemo(() => ({ enqueueSnackbar: handleEnqueueSnackbar }), [handleEnqueueSnackbar]);
+    return (_jsx(SnackBarContext.Provider, { value: contextValue, children: children }));
 };
 const SnackBarProvider = ({ children }) => {
     return (_jsx(SnackbarProvider, { maxSnack: 5, autoHideDuration: 5000, preventDuplicate: true, children: _jsx(SnackBarProviderUtilities, { children: children }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danikokonn/yarik-frontend-lib",
-  "version": "2.0.58",
+  "version": "2.1.1",
   "license": "Apache-2.0",
   "description": "",
   "author": "",
@@ -14,52 +14,60 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/moment-duration-format": "^2.2.7",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.2",
+    "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-unicorn": "^62.0.0",
     "globals": "^16.5.0",
+    "jsdom": "^29.0.1",
     "prettier": "3.6.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "ts-loader": "^9.5.4",
     "tss-react": "^4.9.20",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0"
+    "typescript-eslint": "^8.57.1",
+    "vitest": "^4.1.0"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@mui/x-date-pickers": "^8.22.0",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mui/x-date-pickers": "^8.27.2",
     "@tsconfig/strictest": "^2.0.8",
-    "css-loader": "^7.1.2",
+    "css-loader": "^7.1.4",
     "moment": "^2.30.1",
     "moment-duration-format": "^2.3.2",
-    "moment-timezone": "^0.6.0",
+    "moment-timezone": "^0.6.1",
     "notistack": "^3.0.2",
     "react-imask": "^7.6.1",
     "react-json-tree": "^0.20.0",
-    "react-router": "^7.10.1",
-    "react-virtuoso": "^4.17.0",
+    "react-router": "^7.13.1",
+    "react-virtuoso": "^4.18.3",
     "style-loader": "^4.0.0",
-    "swr": "^2.3.7",
-    "transliteration": "^2.3.5"
+    "swr": "^2.4.1",
+    "transliteration": "^2.6.1"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\"",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "coverage": "vitest run --coverage",
     "build": "tsc"
   },
-  "main": ".dist/index.js",
-  "types": ".dist/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",