Display query results in Raw or Table view

ShahanaFarooqui · ShahanaFarooqui · commit 95e170eca7fe · 2026-03-12T18:36:18.000-07:00
diff --git a/apps/frontend/src/components/modals/SQLTerminal/SQLTerminal.scss b/apps/frontend/src/components/modals/SQLTerminal/SQLTerminal.scss
@@ -20,23 +20,59 @@
   resize: none;
   font-size: $font-size-base;
   white-space: pre-wrap;
-  padding: 1rem 0 1rem 2rem;
+  padding: 1rem;
   margin-bottom: 1.5rem;
   background-color: $body-bg-light;
-  border-radius: $border-radius;
+  border-radius: $border-radius-sm;
   border: $input-border-width solid $input-border-color;
   box-shadow: 0px 1px 2px rgba($dark-blue, 0.05);
+
+  &.terminal-table-wrapper {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+
+    .terminal-table-header {
+      padding: 0.75rem 1rem 0.25rem;
+      flex-shrink: 0;
+    }
+
+    .ps {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden !important;
+      &.ps--active-x > .ps__rail-x {
+        display: block !important;
+        background-color: transparent;
+        opacity: 1;
+        z-index: 99;
+        height: 0.5rem;
+        & .ps__thumb-x {
+          height: 0.25rem;
+          background-color: #DFB316;
+        }
+      }
+    }
+  }
+
+  & .terminal-output-scroll-container {
+    height: 47vh;
+    overflow: hidden;
+    width: 100%;
+    resize: none;
+    white-space: pre-wrap;
+    background-color: transparent;
+  }
 }
 
+
 .btn-copy-output {
-  padding: 1rem;
+  padding: 0 1rem;
   border: none;
   cursor: pointer;
-  position: absolute;
-  right: 0;
   background: transparent;
   z-index: 1;
-  border-radius: $border-radius;
+  border-radius: $border-radius-sm;
   &:hover,
   &:focus-visible {
     outline: none;
@@ -53,6 +89,5 @@
 @include color-mode(dark) {
   .terminal-output {
     background-color: $body-bg-dark;
-    border: $input-border-width solid $input-border-color;
   }
 }
diff --git a/apps/frontend/src/components/modals/SQLTerminal/SQLTerminal.tsx b/apps/frontend/src/components/modals/SQLTerminal/SQLTerminal.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ButtonGroup, Form, InputGroup, Modal } from 'react-bootstrap';
 import './SQLTerminal.scss';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ButtonGroup, Form, InputGroup, Modal, Table } from 'react-bootstrap';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import { CloseSVG } from '../../../svgs/Close';
 import logger from '../../../services/logger.service';
@@ -11,15 +11,63 @@ import { RootService } from '../../../services/http.service';
 import { setShowModals, setShowToast } from '../../../store/rootSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectShowModals } from '../../../store/rootSelectors';
+import ToggleSwitch from '../../shared/ToggleSwitch/ToggleSwitch';
+
+const parseTableName = (sql: string): string | null => {
+  const match = sql.replace(/\s+/g, ' ').trim().match(/\bFROM\s+([`"\[]?[\w]+[`"\]]?)/i);
+  if (!match) return null;
+  return match[1].replace(/[`"[\]]/g, '');
+};
+
+const parseColumnNames = (sql: string): string[] | null => {
+  const trimmed = sql.replace(/\s+/g, ' ').trim();
+  const match = trimmed.match(/^SELECT\s+([\s\S]+?)\s+FROM\s+/i);
+  if (!match) return null;
+
+  const colsPart = match[1].trim();
+  if (colsPart === '*') return null;
+
+  const cols: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of colsPart) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    else if (ch === ',' && depth === 0) {
+      cols.push(current.trim());
+      current = '';
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) cols.push(current.trim());
+
+  return cols.map(col => {
+    const asMatch = col.match(/\bAS\s+([`"\[]?[\w]+[`"\]]?)\s*$/i);
+    if (asMatch) return asMatch[1].replace(/[`"[\]]/g, '');
+    const tokens = col.split(/\s+/);
+    const last = tokens[tokens.length - 1].replace(/[`"[\]]/g, '');
+    if (/^[\w]+$/.test(last)) return last;
+    return col;
+  });
+};
+
+type ViewMode = 'Raw' | 'Table';
+
+type OutputState =
+  | { type: 'empty' }
+  | { type: 'error'; message: string }
+  | { type: 'result'; columns: string[] | null; rows: any[][] };
 
 const SQLTerminal = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const showModals = useSelector(selectShowModals);
   const dispatch = useDispatch();
-  const outputRef = useRef<HTMLPreElement | null>(null);
+  const outputRef = useRef<HTMLDivElement | null>(null);
   const [executed, setExecuted] = useState(false);
   const [query, setQuery] = useState('');
-  const [output, setOutput] = useState('');
+  const [viewMode, setViewMode] = useState<ViewMode>('Raw');
+  const [outputState, setOutputState] = useState<OutputState>({ type: 'empty' });
 
   const scrollToBottom = () => {
     if (outputRef.current) {
@@ -56,14 +104,35 @@ const SQLTerminal = () => {
     const formattedQuery = query.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
     try {
       const result: any = await RootService.executeSql(formattedQuery);
-      setOutput(JSON.stringify(result.rows, null, 2) + '\n\n');
-      setOutput(formattedQuery + '\n' + JSON.stringify(result.rows, null, 2) + '\n\n');
-    } catch (error: any) {
-      if (error && error.message) {
-        setOutput(formattedQuery + '\nError: ' + error.message);
-      } else {
-        setOutput(formattedQuery + '\nError: ' + error);
+      const rows: any[][] = result.rows;
+
+      if (!Array.isArray(rows) || rows.length === 0) {
+        setOutputState({ type: 'result', columns: null, rows: [] });
+        return;
+      }
+
+      let columns = parseColumnNames(formattedQuery);
+
+      if (!columns) {
+        const tableName = parseTableName(formattedQuery);
+        if (tableName) {
+          try {
+            const schema: any = await RootService.listSqlSchemas(tableName);
+            const tableSchema = schema?.schemas?.[0];
+            if (tableSchema?.columns && Array.isArray(tableSchema.columns)) {
+              columns = tableSchema.columns.map((col: any) => col.name ?? String(col));
+            }
+          } catch (schemaError: any) {
+            logger.error('Failed to fetch SQL schema for table: ' + tableName, schemaError);
+          }
+        }
       }
+      setOutputState({ type: 'result', columns, rows });
+    } catch (error: any) {
+      setOutputState({
+        type: 'error',
+        message: error?.message ? error.message : String(error),
+      });
     }
   }, [query]);
 
@@ -73,11 +142,11 @@ const SQLTerminal = () => {
 
   const handleClear = () => {
     setQuery('');
-    setOutput('');
+    setOutputState({ type: 'empty' });
+    setViewMode('Raw');
   };
 
   useEffect(() => {
-    // Check if the last character is a newline and the character before it is a semicolon
     if (!executed && query.endsWith('\n') && query.trimEnd().endsWith(';')) {
       setExecuted(true);
       handleExecute();
@@ -86,11 +155,101 @@ const SQLTerminal = () => {
 
   useEffect(() => {
     scrollToBottom();
-  }, [output]);
+  }, [outputState]);
 
   const closeHandler = () => {
+    handleClear();
     dispatch(setShowModals({ ...showModals, sqlTerminalModal: false }));
-  }
+  };
+
+  const getHeaders = (columns: string[] | null, firstRow: any[]): string[] => {
+    if (columns && columns.length === firstRow.length) return columns;
+    return firstRow.map((_, i) => `Col ${i}`);
+  };
+
+  const renderOutput = () => {
+    switch (outputState.type) {
+      case 'empty':
+        return (
+          <div className='terminal-output text-muted'>
+            <span>Results will appear here…</span>
+          </div>
+        );
+
+      case 'error':
+        return (
+          <pre className='terminal-output text-invalid'>
+            <code>Error: {outputState.message}</code>
+          </pre>
+        );
+
+      case 'result': {
+        const { columns, rows } = outputState;
+
+        if (rows.length === 0) {
+          return (
+            <div className='terminal-output text-muted'>
+              <span>Query returned no rows.</span>
+            </div>
+          );
+        }
+
+        const headers = getHeaders(columns, rows[0]);
+
+        return (
+          <div>
+            {viewMode === 'Table' ? (
+              <div className='terminal-output terminal-table-wrapper text-valid' ref={outputRef}>
+                <div className='terminal-table-header text-muted'>
+                  {rows.length} row{rows.length !== 1 ? 's' : ''}
+                </div>
+                <PerfectScrollbar options={{ suppressScrollX: false }}>
+                  <Table striped bordered hover size='sm' className='sql-result-table mb-0'>
+                    <thead>
+                      <tr>
+                        {headers.map((h, i) => (
+                          <th key={i}>{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {rows.map((row, ri) => (
+                        <tr key={ri}>
+                          {(Array.isArray(row) ? row : [row]).map((cell, ci) => (
+                            <td key={ci}>
+                              {cell === null || cell === undefined
+                                ? <span className='text-muted fst-italic'>null</span>
+                                : String(cell)}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </Table>
+                </PerfectScrollbar>
+              </div>
+            ) : (
+              <div className='terminal-output text-valid'>
+                <div className='d-flex justify-content-between align-items-start'>
+                  <div className='text-muted'>
+                    {rows.length} record{rows.length !== 1 ? 's' : ''}
+                  </div>
+                  <button tabIndex={3} onClick={handleCopy} className='btn-copy-output'>
+                    <CopySVG id='Output' showTooltip={true} />
+                  </button>
+                </div>
+                <pre className='terminal-output-scroll-container' ref={outputRef as any}>
+                  <PerfectScrollbar>
+                    <code>{JSON.stringify(rows, null, 2)}</code>
+                  </PerfectScrollbar>
+                </pre>
+              </div>
+            )}
+          </div>
+        );
+      }
+    }
+  };
 
   return (
     <Modal ref={containerRef} show={showModals.sqlTerminalModal} onHide={closeHandler} centered className='modal-xl' data-testid='sql-terminal'>
@@ -128,44 +287,20 @@ const SQLTerminal = () => {
               <CopySVG id='SQL Query' showTooltip={true} />
             </InputGroup.Text>
           </InputGroup>
-          <div style={{ position: 'relative' }}>
-            <button tabIndex={3} onClick={handleCopy} className='btn-copy-output'>
-              <CopySVG id='Output' showTooltip={true} />
-            </button>
-            <pre
-              className={
-                'terminal-output ' + (output.includes('Error: ') ? 'text-invalid' : 'text-valid')
-              }
-              ref={outputRef}
-            >
-              <PerfectScrollbar>
-                <code>{output}</code>
-              </PerfectScrollbar>
-            </pre>
+          <div className='d-flex justify-content-end'>
+            <ToggleSwitch className='mb-4' onChange={(changedIndex) => setViewMode(changedIndex === 0 ? 'Raw' : 'Table')} values={['Raw', 'Table']} selValue={viewMode} />
+          </div>
+          <div className='terminal-output-container'>
+            {renderOutput()}
           </div>
           <ButtonGroup className='btn-group-action mb-3'>
-            <button
-              tabIndex={4}
-              type='button'
-              className='btn-rounded bg-primary fs-6 me-4'
-              onClick={handleExecute}
-            >
+            <button tabIndex={4} type='button' className='btn-rounded bg-primary fs-6 me-4' onClick={handleExecute}>
               Execute
             </button>
-            <button
-              tabIndex={5}
-              type='button'
-              className='btn-rounded bg-primary fs-6 me-4'
-              onClick={handleClear}
-            >
+            <button tabIndex={5} type='button' className='btn-rounded bg-primary fs-6 me-4' onClick={handleClear}>
               Clear
             </button>
-            <button
-              tabIndex={6}
-              type='button'
-              className='btn-rounded bg-primary fs-6 me-4'
-              onClick={handleHelp}
-            >
+            <button tabIndex={6} type='button' className='btn-rounded bg-primary fs-6 me-4' onClick={handleHelp}>
               Help
             </button>
           </ButtonGroup>
