feat: Рефакторинг компонента HistoryModal с заменой на простой подход с встроенным backdrop. Упрощение структуры и улучшение взаимодействия с пользователем через обновленный интерфейс модального окна.

2025-10-03 10:56:56 +07:00
parent 2104c0170d
commit 9bff239035
2 changed files with 177 additions and 186 deletions
@@ -1,4 +1,3 @@
-import Modal from './Modal';
 import { useState } from 'react';
 import api from '../lib/api.js';
 import { useQuery } from '@tanstack/react-query';
@@ -9,7 +8,7 @@ import { formatDateTimeWithRelative } from '../lib/datetime.js';

 /**
 * HistoryModal - модальное окно истории версий
- * Рефакторинг: теперь использует базовый Modal компонент
+ * Простой подход со встроенным backdrop
 */
 export default function HistoryModal({ resource, show, onClose, onRolledBack }) {
  const [loading, setLoading] = useState(false);
@@ -50,105 +49,135 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
    });
  };

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

  return (
    <>
-      <Modal
-        show={show}
-        onClose={onClose}
-        title={
-          <div className="d-flex align-items-center">
-            <IconHistory className="me-2" size={24} />
-            История версий
-          </div>
-        }
-        size="lg"
-        centered
-        scrollable
-        onOpen={handleOpen}
+      <div 
+        className="modal show d-block" 
+        role="dialog" 
+        aria-modal="true"
+        style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
      >
-        {/* 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}
+        <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();
+                }
+              }
+            }}
          >
-            <IconRefresh size={16} className={loading ? 'spin' : ''} />
-            <span className="ms-1">Обновить</span>
-          </button>
-        </div>
+            <div className="modal-header">
+              <h5 className="modal-title d-flex align-items-center">
+                <IconHistory className="me-2" size={24} />
+                История версий
+              </h5>
+              <button type="button" className="btn-close" onClick={onClose} />
+            </div>
+            
+            <div className="modal-body">
+              {/* 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>

-        {/* 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>
+              {/* 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>
+            </div>
+            
+            <div className="modal-footer">
+              <button className="btn" onClick={onClose}>Закрыть</button>
+            </div>
+          </div>
        </div>
-      </Modal>
+      </div>

      <ConfirmDialog
        open={confirmState.open}