mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-27 07:43:41 +00:00
refactor: replace redundant window.confirm with custom dialog
Removes duplicate confirmation dialogs when deleting documents. Previously, users were asked twice: once by the UI component's custom dialog and again by window.confirm in the store. Changes: - Remove window.confirm from workspaceStore deleteDocument function - Add useConfirm hook to DocumentTabs component for delete action - Consistent confirmation UX across DocumentManager and DocumentTabs Both components now show the same styled confirmation dialog with proper handling of unsaved changes warnings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
28f8224284
commit
94c7845ca7
2 changed files with 27 additions and 8 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
import { useWorkspaceStore } from '../../stores/workspaceStore';
|
import { useWorkspaceStore } from '../../stores/workspaceStore';
|
||||||
import { useCreateDocument } from '../../hooks/useCreateDocument';
|
import { useCreateDocument } from '../../hooks/useCreateDocument';
|
||||||
|
import { useConfirm } from '../../hooks/useConfirm';
|
||||||
import Tab from './Tab';
|
import Tab from './Tab';
|
||||||
import AddIcon from '@mui/icons-material/Add';
|
import AddIcon from '@mui/icons-material/Add';
|
||||||
import EditIcon from '@mui/icons-material/Edit';
|
import EditIcon from '@mui/icons-material/Edit';
|
||||||
|
|
@ -37,6 +38,7 @@ const DocumentTabs = () => {
|
||||||
} = useWorkspaceStore();
|
} = useWorkspaceStore();
|
||||||
|
|
||||||
const { handleNewDocument, NewDocumentDialog } = useCreateDocument();
|
const { handleNewDocument, NewDocumentDialog } = useCreateDocument();
|
||||||
|
const { confirm, ConfirmDialogComponent } = useConfirm();
|
||||||
|
|
||||||
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
||||||
const [contextMenu, setContextMenu] = useState<{
|
const [contextMenu, setContextMenu] = useState<{
|
||||||
|
|
@ -124,11 +126,30 @@ const DocumentTabs = () => {
|
||||||
setContextMenu(null);
|
setContextMenu(null);
|
||||||
}, [contextMenu, closeDocument]);
|
}, [contextMenu, closeDocument]);
|
||||||
|
|
||||||
const handleDeleteFromMenu = useCallback(() => {
|
const handleDeleteFromMenu = useCallback(async () => {
|
||||||
if (!contextMenu) return;
|
if (!contextMenu) return;
|
||||||
|
|
||||||
|
const meta = documentMetadata.get(contextMenu.documentId);
|
||||||
|
if (!meta) return;
|
||||||
|
|
||||||
|
const confirmTitle = 'Delete Document';
|
||||||
|
const confirmMessage = meta.isDirty
|
||||||
|
? `"${meta.title}" has unsaved changes. Delete anyway?`
|
||||||
|
: `Are you sure you want to delete "${meta.title}"?`;
|
||||||
|
|
||||||
|
const confirmed = await confirm({
|
||||||
|
title: confirmTitle,
|
||||||
|
message: confirmMessage,
|
||||||
|
confirmLabel: 'Delete',
|
||||||
|
severity: 'danger',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (confirmed) {
|
||||||
deleteDocument(contextMenu.documentId);
|
deleteDocument(contextMenu.documentId);
|
||||||
|
}
|
||||||
|
|
||||||
setContextMenu(null);
|
setContextMenu(null);
|
||||||
}, [contextMenu, deleteDocument]);
|
}, [contextMenu, documentMetadata, deleteDocument, confirm]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center bg-gray-100 border-b border-gray-300 overflow-x-auto">
|
<div className="flex items-center bg-gray-100 border-b border-gray-300 overflow-x-auto">
|
||||||
|
|
@ -219,6 +240,9 @@ const DocumentTabs = () => {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Confirmation Dialog */}
|
||||||
|
{ConfirmDialogComponent}
|
||||||
|
|
||||||
{/* New Document Dialog */}
|
{/* New Document Dialog */}
|
||||||
{NewDocumentDialog}
|
{NewDocumentDialog}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -367,11 +367,6 @@ export const useWorkspaceStore = create<Workspace & WorkspaceActions>((set, get)
|
||||||
const state = get();
|
const state = get();
|
||||||
|
|
||||||
const metadata = state.documentMetadata.get(documentId);
|
const metadata = state.documentMetadata.get(documentId);
|
||||||
const confirmed = window.confirm(
|
|
||||||
`Are you sure you want to delete "${metadata?.title}"? This cannot be undone.`
|
|
||||||
);
|
|
||||||
if (!confirmed) return false;
|
|
||||||
|
|
||||||
const docTitle = metadata?.title || 'Untitled';
|
const docTitle = metadata?.title || 'Untitled';
|
||||||
|
|
||||||
// Delete from storage
|
// Delete from storage
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue