diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx index 15d216f..2de852f 100644 --- a/frontend/src/components/ConfirmDialog.tsx +++ b/frontend/src/components/ConfirmDialog.tsx @@ -42,16 +42,18 @@ const ConfirmDialog: React.FC = ({ diff --git a/frontend/src/components/MainContent.tsx b/frontend/src/components/MainContent.tsx index 085a2f3..561ac22 100644 --- a/frontend/src/components/MainContent.tsx +++ b/frontend/src/components/MainContent.tsx @@ -48,14 +48,20 @@ const MainContent: React.FC = () => { pageSize: 100, }); - // Custom Alert State - const [errorInfo, setErrorInfo] = useState<{ open: boolean; message: string; title: string }>({ + // Custom Notification State + const [notification, setNotification] = useState<{ + open: boolean; + message: string; + title: string; + severity: 'success' | 'error' | 'info' | 'warning' + }>({ open: false, message: '', - title: '' + title: '', + severity: 'error' }); - const handleCloseError = () => setErrorInfo({ ...errorInfo, open: false }); + const handleCloseNotification = () => setNotification({ ...notification, open: false }); // Helper to map SQL types to MUI X Data Grid types const mapSqlTypeToMuiType = (sqlType: string): 'string' | 'number' | 'date' | 'dateTime' | 'boolean' => { @@ -175,10 +181,11 @@ const MainContent: React.FC = () => { } catch (error: any) { console.error('Execution error', error); const msg = error.response?.data?.error || 'An unexpected error occurred during SQL execution.'; - setErrorInfo({ + setNotification({ open: true, title: 'SQL Execution Error', - message: msg + message: msg, + severity: 'error' }); } finally { setLoadingData(false); @@ -226,17 +233,19 @@ const MainContent: React.FC = () => { setShowConfirm(false); try { await SchemaService.truncateTable(table!); - setErrorInfo({ + setNotification({ open: true, title: 'Success', - message: `Table "${table}" has been truncated.` + message: `Table "${table}" has been truncated.`, + severity: 'success' }); fetchMeta(); } catch (error: any) { - setErrorInfo({ + setNotification({ open: true, title: 'Truncate Error', - message: error.response?.data?.error || error.message + message: error.response?.data?.error || error.message, + severity: 'error' }); } finally { setTruncating(false); @@ -462,11 +471,15 @@ const MainContent: React.FC = () => { {/* Technical Info View */} {dbTab === 'info' && } - {/* Custom Alert (Snackbar) */} - - - {errorInfo.title} - {errorInfo.message} + {/* Custom Notification (Snackbar) */} + + + {notification.title} + {notification.message}