feat: implement MainContent component with SQL editor and interactive data grid table viewer

2026-04-24 08:17:42 +03:00
parent 43d864f2bd
commit 48e608a736
1 changed files with 103 additions and 23 deletions
@@ -1,6 +1,18 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Box, Paper, Typography, CircularProgress, Button, Divider, IconButton, Tooltip } from '@mui/material';
-import { PlayArrow, History, Save, CleaningServices } from '@mui/icons-material';
+import { 
+  Box, 
+  Paper, 
+  Typography, 
+  CircularProgress, 
+  Button, 
+  Divider, 
+  IconButton, 
+  Tooltip, 
+  Snackbar, 
+  Alert,
+  AlertTitle
+} from '@mui/material';
+import { PlayArrow, History, Save, CleaningServices, Close } from '@mui/icons-material';
 import { DataGrid } from '@mui/x-data-grid';
 import type { GridColDef, GridPaginationModel } from '@mui/x-data-grid';
 import Editor from '@monaco-editor/react';
@@ -21,6 +33,15 @@ const MainContent: React.FC = () => {
    pageSize: 100,
  });

+  // Custom Alert State
+  const [errorInfo, setErrorInfo] = useState<{ open: boolean; message: string; title: string }>({
+    open: false,
+    message: '',
+    title: ''
+  });
+
+  const handleCloseError = () => setErrorInfo({ ...errorInfo, open: false });
+
  // Helper to map SQL types to MUI X Data Grid types
  const mapSqlTypeToMuiType = (sqlType: string): 'string' | 'number' | 'date' | 'dateTime' | 'boolean' => {
    sqlType = sqlType.toLowerCase();
@@ -35,7 +56,7 @@ const MainContent: React.FC = () => {
  useEffect(() => {
    if (activeTable && activeDatabase) {
      setSqlQuery(`SELECT * FROM ${activeDatabase}.${activeTable} LIMIT 1000;`);
-      setIsCustomQuery(false); // Reset to table mode when a new table is selected
+      setIsCustomQuery(false);
    }
  }, [activeTable, activeDatabase]);

@@ -111,7 +132,7 @@ const MainContent: React.FC = () => {
  const handleExecute = async () => {
    if (!sqlQuery) return;
    setLoadingData(true);
-    setIsCustomQuery(true); // Switch to custom query mode
+    setIsCustomQuery(true);
    try {
      const response = await SchemaService.executeQuery(sqlQuery);
      const rawData = response.data.data;
@@ -138,7 +159,12 @@ const MainContent: React.FC = () => {
      }
    } catch (error: any) {
      console.error('Execution error', error);
-      alert(error.response?.data?.error || 'Execution failed');
+      const msg = error.response?.data?.error || 'An unexpected error occurred during SQL execution.';
+      setErrorInfo({
+        open: true,
+        title: 'SQL Execution Error',
+        message: msg
+      });
    } finally {
      setLoadingData(false);
    }
@@ -156,19 +182,19 @@ const MainContent: React.FC = () => {
    <Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0, overflow: 'hidden', gap: 2 }}>
      {/* SQL Editor Section */}
      <Paper elevation={0} sx={{ 
-        flexShrink: 0, // Prevent editor from collapsing
-        borderRadius: 2, 
+        flexShrink: 0, 
+        borderRadius: 3, 
        overflow: 'hidden', 
        border: 1, 
        borderColor: 'divider',
-        bgcolor: darkMode ? 'rgba(30, 41, 59, 0.5)' : 'rgba(255, 255, 255, 0.5)',
-        backdropFilter: 'blur(8px)'
+        bgcolor: darkMode ? '#111827' : '#ffffff',
+        boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
      }}>
-        <Box sx={{ px: 2, py: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'rgba(0,0,0,0.02)' }}>
+        <Box sx={{ px: 3, py: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'rgba(0,0,0,0.02)' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Typography variant="subtitle2" sx={{ fontWeight: 700, opacity: 0.7 }}>SQL EDITOR</Typography>
+            <Typography variant="subtitle2" sx={{ fontWeight: 800, opacity: 0.8, letterSpacing: 1 }}>SQL EDITOR</Typography>
            <Divider orientation="vertical" flexItem sx={{ height: 16, my: 'auto' }} />
-            <Typography variant="caption" sx={{ opacity: 0.5 }}>
+            <Typography variant="caption" sx={{ opacity: 0.5, fontWeight: 500 }}>
              {isCustomQuery ? 'Custom Query' : `${activeDatabase}.${activeTable}`}
            </Typography>
          </Box>
@@ -188,47 +214,66 @@ const MainContent: React.FC = () => {
              onClick={handleExecute}
              disabled={loadingData}
              startIcon={loadingData ? <CircularProgress size={16} color="inherit" /> : <PlayArrow />}
-              sx={{ ml: 1, px: 2, borderRadius: 1.5, textTransform: 'none', fontWeight: 700 }}
+              sx={{ ml: 1, px: 3, borderRadius: 2, textTransform: 'none', fontWeight: 700, boxShadow: '0 4px 12px rgba(0, 97, 255, 0.3)' }}
            >
              Execute
            </Button>
          </Box>
        </Box>
        <Editor
-          height="200px"
+          height="220px"
          defaultLanguage="sql"
          theme={darkMode ? 'vs-dark' : 'light'}
          value={sqlQuery}
          onChange={(value) => setSqlQuery(value || '')}
          options={{
            minimap: { enabled: false },
-            fontSize: 13,
+            fontSize: 14,
            fontFamily: "'Fira Code', 'Cascadia Code', Consolas, monospace",
            lineNumbers: 'on',
            scrollBeyondLastLine: false,
            automaticLayout: true,
-            padding: { top: 10, bottom: 10 }
+            padding: { top: 16, bottom: 16 },
+            cursorSmoothCaretAnimation: 'on',
+            smoothScrolling: true
          }}
        />
      </Paper>

      {/* Data Section */}
      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
-        <Box sx={{ mb: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography variant="h6" sx={{ fontWeight: 700 }}>
+        <Box sx={{ mb: 1.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Typography variant="h6" sx={{ fontWeight: 800 }}>
              {isCustomQuery ? 'Query Results' : 'Table Results'}
            </Typography>
-            <Typography variant="caption" sx={{ opacity: 0.5, mt: 0.5 }}>{rowCount} rows found</Typography>
+            <Box sx={{ px: 1.5, py: 0.5, borderRadius: 10, bgcolor: 'rgba(0, 97, 255, 0.1)', color: 'primary.main' }}>
+              <Typography variant="caption" sx={{ fontWeight: 700 }}>{rowCount} rows found</Typography>
+            </Box>
          </Box>
          {isCustomQuery && (
-            <Button size="small" onClick={() => setIsCustomQuery(false)} sx={{ textTransform: 'none' }}>
+            <Button 
+              size="small" 
+              variant="outlined"
+              onClick={() => setIsCustomQuery(false)} 
+              sx={{ textTransform: 'none', borderRadius: 2 }}
+            >
              Back to Table View
            </Button>
          )}
        </Box>
        
-        <Paper sx={{ flexGrow: 1, borderRadius: 2, overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', border: 1, borderColor: 'divider' }}>
+        <Paper sx={{ 
+          flexGrow: 1, 
+          borderRadius: 3, 
+          overflow: 'hidden', 
+          display: 'flex', 
+          flexDirection: 'column', 
+          width: '100%', 
+          border: 1, 
+          borderColor: 'divider',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
+        }}>
          {(loadingSchema && !isCustomQuery) ? (
            <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
              <CircularProgress />
@@ -239,7 +284,7 @@ const MainContent: React.FC = () => {
              columns={columns}
              rowCount={rowCount}
              loading={loadingData}
-              paginationMode={isCustomQuery ? 'client' : 'server'} // Client pagination for SQL results
+              paginationMode={isCustomQuery ? 'client' : 'server'}
              paginationModel={paginationModel}
              onPaginationModelChange={setPaginationModel}
              pageSizeOptions={[25, 50, 100]}
@@ -255,6 +300,10 @@ const MainContent: React.FC = () => {
                '& .MuiDataGrid-row:hover': {
                  bgcolor: (theme) => theme.palette.mode === 'light' ? 'rgba(0, 97, 255, 0.04)' : 'rgba(0, 97, 255, 0.08)',
                },
+                '& .MuiDataGrid-columnHeaderTitle': {
+                  fontWeight: 700,
+                  opacity: 0.8
+                }
              }}
              slotProps={{
                loadingOverlay: {
@@ -266,6 +315,37 @@ const MainContent: React.FC = () => {
          )}
        </Paper>
      </Box>
+
+      {/* Custom Alert (Snackbar) */}
+      <Snackbar 
+        open={errorInfo.open} 
+        autoHideDuration={10000} 
+        onClose={handleCloseError}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      >
+        <Alert 
+          onClose={handleCloseError} 
+          severity="error" 
+          variant="filled"
+          sx={{ 
+            width: '100%', 
+            maxWidth: 600, 
+            borderRadius: 2,
+            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
+            '& .MuiAlert-message': { wordBreak: 'break-word' }
+          }}
+          action={
+            <IconButton size="small" color="inherit" onClick={handleCloseError}>
+              <Close fontSize="small" />
+            </IconButton>
+          }
+        >
+          <AlertTitle sx={{ fontWeight: 800 }}>{errorInfo.title}</AlertTitle>
+          <Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>
+            {errorInfo.message}
+          </Typography>
+        </Alert>
+      </Snackbar>
    </Box>
  );
 };