feat: Рефакторинг модальных окон для улучшения UX, добавление базового компонента Modal и улучшение структуры кода. Обновление компонентов HistoryModal, ImportModal, SettingsModal и WsUpdateModal для повышения читаемости и удобства использования.

2025-10-03 09:42:58 +07:00
parent 2ae26801c4
commit 41ef73376a
5 changed files with 561 additions and 363 deletions
@@ -1,11 +1,16 @@
-import { useEffect, useState } from 'react';
+import Modal from './Modal';
+import { useState } from 'react';
 import api from '../lib/api.js';
 import { useQuery } from '@tanstack/react-query';
 import ConfirmDialog from './ConfirmDialog.jsx';
 import { useNotify } from './NotifyProvider.jsx';
-import { IconHistory, IconRefresh, IconDeviceFloppy, IconInfoCircle, IconRotate2 } from '@tabler/icons-react';
+import { IconHistory, IconRefresh, IconInfoCircle, IconRotate2, IconClock } from '@tabler/icons-react';
 import { formatDateTimeWithRelative } from '../lib/datetime.js';

+/**
+ * HistoryModal - модальное окно истории версий
+ * Рефакторинг: теперь использует базовый Modal компонент
+ */
 export default function HistoryModal({ resource, show, onClose, onRolledBack }) {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState([]);
@@ -15,123 +20,147 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
    queryKey: ['history', resource],
    enabled: false,
    queryFn: async () => {
-      const res = await api.get(`/history/${resource}`)
-      const data = Array.isArray(res.data?.items) ? res.data.items : []
-      setItems(data)
-      return data
+      const res = await api.get(`/history/${resource}`);
+      const data = Array.isArray(res.data?.items) ? res.data.items : [];
+      setItems(data);
+      return data;
    },
-  })
-
-  useEffect(() => { if (show) refetch().catch(() => notify.error('Не удалось загрузить историю версий')); }, [show, resource]);
+  });

  const [confirmState, setConfirmState] = useState({ open: false, onConfirm: null });
+  
  const rollback = async (versionId) => {
    if (!versionId) return;
-    await new Promise((resolve) => {
-      setConfirmState({
-        open: true,
-        onConfirm: async () => {
-          setConfirmState({ open: false, onConfirm: null });
-          setLoading(true);
-          try {
-            const res = await api.post(`/history/${resource}/rollback`, { versionId });
-            notify.success('Откат выполнен');
-            onRolledBack && onRolledBack(res.data || {});
-            onClose && onClose();
-          } catch (e) {
-            notify.error('Не удалось выполнить откат');
-          } finally {
-            setLoading(false);
-          }
-          resolve();
+    setConfirmState({
+      open: true,
+      onConfirm: async () => {
+        setConfirmState({ open: false, onConfirm: null });
+        setLoading(true);
+        try {
+          const res = await api.post(`/history/${resource}/rollback`, { versionId });
+          notify.success('Откат выполнен успешно');
+          onRolledBack?.(res.data || {});
+          onClose?.();
+        } catch (e) {
+          notify.error('Не удалось выполнить откат');
+        } finally {
+          setLoading(false);
        }
-      });
+      }
    });
  };

-  if (!show) return null;
+  const handleOpen = () => {
+    if (show) {
+      refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
+    }
+  };

  return (
-    <div className="modal show d-block" role="dialog" aria-modal="true" aria-labelledby="history-title" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }} onKeyDown={(e) => { if (e.key === 'Escape') onClose?.() }}>
-      <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
-        <div className="modal-content" tabIndex={-1} onKeyDown={(e) => {
-          if (e.key === 'Tab') {
-            const c = e.currentTarget
-            const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-            if (!focusable || focusable.length === 0) return
-            const first = focusable[0]
-            const last = focusable[focusable.length - 1]
-            if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
-            else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
-          }
-        }}>
-          <div className="modal-header">
-            <h5 id="history-title" className="modal-title d-flex align-items-center">
-              <IconHistory className="me-2" /> История версий
-            </h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
+    <>
+      <Modal
+        show={show}
+        onClose={onClose}
+        title={
+          <div className="d-flex align-items-center">
+            <IconHistory className="me-2" size={24} />
+            История версий
          </div>
-          <div className="modal-body">
-            <div className="d-flex justify-content-between align-items-center mb-2">
-              <div className="text-muted small d-flex align-items-center">
-                <IconInfoCircle size={16} className="me-1" />
-                Ресурс: <code className="ms-1">{resource}</code>
-              </div>
-              <button className="btn btn-outline-secondary btn-sm" onClick={() => refetch()} disabled={loading}>
-                <IconRefresh className={loading ? 'spin' : ''} />
-                <span className="ms-1">Обновить</span>
-              </button>
-            </div>
-            <div className="table-responsive">
-              <table className="table card-table table-vcenter table-nowrap mb-0">
-                <thead>
-                  <tr>
-                    <th>Версия</th>
-                    <th>Дата</th>
-                    <th>Размер</th>
-                    <th>ETag</th>
-                    <th className="text-end">Действия</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {items.length === 0 ? (
-                    <tr><td colSpan="5" className="text-muted text-center py-4">Нет данных (возможно, версионирование бакета отключено)</td></tr>
-                  ) : items.map((v) => (
-                    <tr key={v.versionId} className={v.isLatest ? 'table-info' : ''}>
-                      <td><code>{v.versionId}</code></td>
-                      <td>{v.lastModified ? formatDateTimeWithRelative(v.lastModified) : '—'}</td>
-                      <td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
-                      <td><code>{v.etag || '—'}</code></td>
-                      <td className="text-end">
-                        {!v.isLatest && (
-                          <button className="btn btn-outline-primary btn-sm" onClick={() => rollback(v.versionId)} disabled={loading} title="Восстановить содержимое файла до этой версии">
-                            <IconRotate2 className="me-1" /> Восстановить
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div className="modal-footer">
-            <button className="btn" onClick={onClose}>Закрыть</button>
+        }
+        size="lg"
+        centered
+        scrollable
+        onOpen={handleOpen}
+      >
+        {/* Info bar */}
+        <div className="d-flex justify-content-between align-items-center mb-3 p-2 bg-blue-lt rounded">
+          <div className="text-muted small d-flex align-items-center">
+            <IconInfoCircle size={16} className="me-2" />
+            Ресурс: <code className="ms-1">{resource}</code>
          </div>
+          <button 
+            className="btn btn-outline-primary btn-sm" 
+            onClick={() => refetch()} 
+            disabled={loading}
+          >
+            <IconRefresh size={16} className={loading ? 'spin' : ''} />
+            <span className="ms-1">Обновить</span>
+          </button>
        </div>
-      </div>
+
+        {/* Table */}
+        <div className="table-responsive">
+          <table className="table card-table table-vcenter table-hover">
+            <thead>
+              <tr>
+                <th>Версия</th>
+                <th>Дата</th>
+                <th>Размер</th>
+                <th>ETag</th>
+                <th className="text-end">Действия</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.length === 0 ? (
+                <tr>
+                  <td colSpan="5" className="text-muted text-center py-5">
+                    <div className="empty">
+                      <div className="empty-icon">
+                        <IconClock size={48} className="text-muted" />
+                      </div>
+                      <p className="empty-title">Нет данных</p>
+                      <p className="empty-subtitle text-muted">
+                        Версионирование бакета может быть отключено
+                      </p>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                items.map((v) => (
+                  <tr key={v.versionId} className={v.isLatest ? 'table-active' : ''}>
+                    <td>
+                      <code className="text-muted small">{v.versionId}</code>
+                      {v.isLatest && (
+                        <span className="badge bg-green-lt text-green ms-2">Текущая</span>
+                      )}
+                    </td>
+                    <td className="text-nowrap">
+                      {v.lastModified ? formatDateTimeWithRelative(v.lastModified) : '—'}
+                    </td>
+                    <td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
+                    <td><code className="text-muted small">{v.etag || '—'}</code></td>
+                    <td className="text-end">
+                      {!v.isLatest && (
+                        <button 
+                          className="btn btn-primary btn-sm" 
+                          onClick={() => rollback(v.versionId)} 
+                          disabled={loading}
+                          title="Восстановить содержимое файла до этой версии"
+                        >
+                          <IconRotate2 size={16} className="me-1" />
+                          Восстановить
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Modal>
+
      <ConfirmDialog
        open={confirmState.open}
        title="Восстановить версию файла?"
        message="Текущее содержимое будет заменено выбранной версией. Действие можно отменить, выбрав предыдущую версию."
        confirmText="Восстановить"
        destructive
-        size={'sm'}
+        size="sm"
+        loading={loading}
        onCancel={() => setConfirmState({ open: false, onConfirm: null })}
        onConfirm={confirmState.onConfirm}
      />
-    </div>
+    </>
  );
 }
-
-