@quillsql/react 1.6.1 → 1.6.4

package/src/SQLEditor.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import React, { useState, useContext, useMemo, useEffect } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
@@ -10,6 +12,7 @@ import {
   SparklesIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/20/solid';
+import { QuillTheme } from './QuillProvider';
 
 export function convertPostgresColumn(column) {
   let format;
@@ -68,19 +71,131 @@ function setEditorTheme(editor, monaco) {
   }
 }
 
+interface ButtonComponentProps {
+  onClick: () => void;
+  label: string;
+}
+
 interface SQLEditorProps {
   containerStyle: React.CSSProperties;
+  ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+  SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+  TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
+  TableComponent?: (props: TableComponentProps) => JSX.Element;
+  AddToDashboardButton?: (props: AddToDashboardButtonProps) => JSX.Element;
+  LoadingComponent?: () => JSX.Element;
+}
+
+interface AddToDashboardButtonProps {
+  rows: any[];
+  columns: any[];
+  query: string;
+}
+
+interface TableComponentProps {
+  rows: any[];
+  columns: any[];
+  height: string;
+}
+
+interface TextInputComponentProps {
+  onChange: (e: any) => void;
+  value: string;
+  id: string;
+  placeholder?: string;
 }
 
+const QuillButton = ({
+  onClick,
+  label,
+  theme,
+  secondary,
+}: {
+  onClick: () => void;
+  label: string;
+  theme?: any;
+  secondary?: boolean;
+}) => (
+  <button
+    style={{
+      borderRadius: '6px',
+      backgroundColor: secondary
+        ? theme?.secondaryButtonColor || '#FFFFFF'
+        : theme?.primaryButtonColor,
+      opacity: 1,
+      paddingLeft: '16px',
+      paddingRight: '16px',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      fontSize: '14px',
+      fontWeight: 600,
+      color: secondary ? theme?.primaryTextColor : '#FFFFFF',
+      cursor: 'pointer',
+      outline: 'none',
+      border: 'none',
+      fontFamily: theme?.fontFamily,
+    }}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);
+
+const QuillTextInput = ({
+  onChange,
+  value,
+  id,
+  placeholder,
+  theme,
+}: {
+  onChange: (e: any) => void;
+  value: string;
+  id: string;
+  placeholder?: string;
+  theme?: any;
+}) => {
+  return (
+    <input
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: '12px',
+        paddingRight: '12px',
+        fontWeight: 'medium',
+        height: 36,
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
+        width: '445px',
+        backgroundColor: theme?.backgroundColor || 'white',
+        color: theme?.primaryTextColor,
+        borderWidth: '1px',
+        borderColor: theme?.borderColor || '#E7E7E7',
+        borderRadius: '6px',
+      }}
+      id={id}
+      onChange={onChange}
+      value={value}
+      placeholder={placeholder}
+    />
+  );
+};
+
 export default function QueryEditor({
   containerStyle = { height: '100vh' },
+  ButtonComponent,
+  SecondaryButtonComponent,
+  TextInputComponent,
+  TableComponent,
+  AddToDashboardButton,
+  LoadingComponent,
 }: SQLEditorProps) {
   const [sqlPrompt, setSqlPrompt] = useState('');
 
   const [isOpen, setIsOpen] = useState(false);
 
   const [client] = useContext(ClientContext);
-  const [theme] = useContext(ThemeContext);
+  const [theme] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
   const [query, setQuery] = useState('');
   const [rows, setRows] = useState([]);
   const [columns, setColumns] = useState([]);
@@ -88,11 +203,14 @@ export default function QueryEditor({
   const [schema, setSchema] = useContext(SchemaContext);
   const [errorMessage, setErrorMessage] = useState('');
   const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+  const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
+  const [schemaLoading, setSchemaLoading] = useState(false);
 
   useEffect(() => {
     let isSubscribed = true;
     async function getSchema() {
       const { publicKey, environment } = client;
+      setSchemaLoading(true);
       const response3 = await axios.get(
         `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`,
         {
@@ -104,6 +222,7 @@ export default function QueryEditor({
       );
       if (isSubscribed) {
         setSchema(response3.data.tables);
+        setSchemaLoading(false);
       }
     }
     if (isSubscribed) {
@@ -135,25 +254,37 @@ export default function QueryEditor({
   };
 
   const handleRunQuery = async () => {
-    const { publicKey, customerId, environment } = client;
+    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
+      client;
     try {
-      const response = await axios.post(
-        `https://quill-344421.uc.r.appspot.com/dashquery`,
-        {
-          query,
-        },
-        {
-          params: {
-            orgId: customerId,
-            publicKey: publicKey,
-          },
-          headers: {
-            Authorization: `Bearer `,
-            environment: environment || undefined,
+      let response;
+      setSqlQueryLoading(true);
+      if (queryEndpoint) {
+        response = await axios.post(
+          queryEndpoint,
+          { metadata: { query, task: 'query' } },
+          { headers: queryHeaders }
+        );
+      } else {
+        response = await axios.post(
+          `https://quill-344421.uc.r.appspot.com/dashquery`,
+          {
+            query,
           },
-        }
-      );
+          {
+            params: {
+              orgId: customerId,
+              publicKey: publicKey,
+            },
+            headers: {
+              Authorization: `Bearer `,
+              environment: environment || undefined,
+            },
+          }
+        );
+      }
       if (response && response.data && response.data.errorMessage) {
+        setSqlQueryLoading(false);
         setErrorMessage(
           'Failed to run SQL query: ' + response.data.errorMessage
         );
@@ -162,8 +293,13 @@ export default function QueryEditor({
         setFields([]);
         return;
       }
+      setSqlQueryLoading(false);
       setErrorMessage('');
-      setRows(response.data.rows);
+      setRows(
+        response.data.rows && response.data.rows.length
+          ? response.data.rows
+          : []
+      );
       setColumns(response.data.fields.map(elem => convertPostgresColumn(elem)));
       setFields(response.data.fields);
     } catch (e) {
@@ -176,10 +312,6 @@ export default function QueryEditor({
     setIsOpen(true);
   };
 
-  const newRows = useMemo(() => {
-    return JSON.parse(JSON.stringify(rows));
-  }, [rows]);
-
   /* all your useState and useContext calls and your useEffect hooks */
 
   const downloadCSV = () => {
@@ -238,7 +370,12 @@ export default function QueryEditor({
               flexDirection: 'row',
             }}
           >
-            <SchemaListComponent schema={schema} theme={theme} />
+            <SchemaListComponent
+              schema={schema}
+              theme={theme}
+              LoadingComponent={LoadingComponent}
+              loading={schemaLoading}
+            />
 
             <div
               style={{
@@ -257,7 +394,7 @@ export default function QueryEditor({
                   alignItems: 'center',
                 }}
               >
-                <div
+                {/* <div
                   style={{
                     display: 'flex',
                     flexDirection: 'row',
@@ -299,79 +436,37 @@ export default function QueryEditor({
                       fontFamily: theme?.fontFamily,
                     }}
                   />
-                </div>
-                <button
-                  onClick={handleRunSqlPrompt}
-                  style={{
-                    // TODO: change color
-                    background: theme.primaryButtonColor,
-                    // TODO: change color
-                    color: theme.backgroundColor,
-                    height: 38,
-                    paddingLeft: 10,
-                    paddingRight: 12,
-                    width: 87,
-                    minWidth: 87,
-                    maxWidth: 87,
-                    marginLeft: 12,
-                    fontWeight: '400',
-                    borderRadius: '0.375rem',
-                    border: 'none',
-                    outline: 'none',
-                    cursor: 'pointer',
-                    fontFamily: theme?.fontFamily,
-                  }}
-                >
-                  {sqlResponseLoading ? (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '100%',
-                        height: '100%',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <TailSpin
-                        height="20"
-                        width="20"
-                        // TODO: change color
-                        color={theme.backgroundColor}
-                        ariaLabel="loading-indicator"
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <SparklesIcon
-                        style={{
-                          height: 12,
-                          width: 12,
-                          marginRight: 4,
-                          // TODO: change color
-                          color: theme.backgroundColor,
-                        }}
-                        aria-hidden="true"
-                      />
-                      <div
-                        style={{
-                          fontSize: 14,
-                          fontWeight: 600,
-                          fontFamily: theme?.fontFamily,
-                          color: theme.backgroundColor,
-                        }}
-                      >
-                        Ask AI
-                      </div>
-                    </div>
+                </div> */}
+                <div style={{ minWidth: 440, marginRight: 10 }}>
+                  {(TextInputComponent && (
+                    <TextInputComponent
+                      id="ai-search"
+                      value={sqlPrompt}
+                      onChange={e => setSqlPrompt(e.target.value)}
+                      placeholder="Ask a question..."
+                    />
+                  )) || (
+                    <QuillTextInput
+                      id="ai-search"
+                      value={sqlPrompt}
+                      onChange={e => setSqlPrompt(e.target.value)}
+                      placeholder="Ask a question..."
+                      theme={theme}
+                    />
                   )}
-                </button>
+                </div>
+                {(ButtonComponent && (
+                  <ButtonComponent
+                    onClick={handleRunSqlPrompt}
+                    label="Ask AI"
+                  />
+                )) || (
+                  <QuillButton
+                    theme={theme}
+                    onClick={handleRunSqlPrompt}
+                    label="Ask AI"
+                  />
+                )}
               </div>
               <div style={{ height: 'calc(50% - 40px)' }}>
                 <SQLEditorComponent
@@ -381,6 +476,9 @@ export default function QueryEditor({
                   theme={theme}
                   defineEditorTheme={defineEditorTheme}
                   setEditorTheme={setEditorTheme}
+                  ButtonComponent={ButtonComponent}
+                  loading={sqlResponseLoading}
+                  LoadingComponent={LoadingComponent}
                 />
               </div>
               <div
@@ -397,8 +495,8 @@ export default function QueryEditor({
                 {errorMessage && (
                   <div
                     style={{
-                      fontFamily: theme.fontFamily,
-                      color: theme.primaryTextColor,
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
                       fontSize: 15,
                       fontWeight: '400',
                     }}
@@ -411,6 +509,7 @@ export default function QueryEditor({
                         display: 'inline-block',
                         flex: 0,
                         borderRadius: 6,
+                        color: theme?.primaryTextColor,
                         fontFamily: theme?.fontFamily,
                       }}
                     >
@@ -418,119 +517,28 @@ export default function QueryEditor({
                     </div>
                   </div>
                 )}
+                {errorMessage
+                  ? null
+                  : (TableComponent && (
+                      <TableComponent
+                        rows={rows}
+                        columns={columns}
+                        height="calc(100% - 70px)"
+                      />
+                    )) || (
+                      <SpecialTable
+                        rows={rows}
+                        columns={columns}
+                        height="calc(100% - 70px)"
+                        LoadingComponent={LoadingComponent}
+                        loading={sqlQueryLoading}
+                      />
+                    )}
                 <div
                   style={{
-                    height: 'calc(100% - 60px)',
-                    overflow: 'scroll',
-                    padding: 0,
-                    margin: 0,
-                    border: 'none',
-                    outline: 'none',
-                  }}
-                >
-                  <table
-                    style={{
-                      padding: 0,
-                      margin: 0,
-                      border: 'none',
-                      outline: 'none',
-                      borderSpacing: 0,
-                    }}
-                  >
-                    <thead
-                      style={{
-                        position: 'sticky',
-                        // TODO: change color
-                        background: theme.backgroundColor,
-                        top: 0,
-                        height: 37,
-                        minHeight: 37,
-                        maxHeight: 37,
-                      }}
-                    >
-                      <tr
-                        style={{
-                          outline: 'none',
-                          border: 'none',
-                          padding: 0,
-                          margin: 0,
-                        }}
-                      >
-                        {columns.map((column, index) => (
-                          <th
-                            key={index}
-                            scope="col"
-                            style={{
-                              textAlign: 'left',
-                              fontFamily: theme?.fontFamily,
-                              fontSize: 13,
-                              height: 37,
-                              minHeight: 37,
-                              maxHeight: 37,
-                              paddingLeft: 12,
-                              paddingRight: 12,
-                              paddingTop: 0,
-                              paddingBottom: 0,
-                              margin: 0,
-                              fontWeight: '500',
-                              // TODO: change color
-                              boxShadow: `inset 0 -1px 0 ${theme.borderColor}`,
-                              // TODO: change color
-                              color: theme.primaryTextColor,
-                              outline: 'none',
-                              border: 'none',
-                            }}
-                          >
-                            {column.label}
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody
-                      style={{
-                        // TODO: change color
-                        backgroundColor: theme.backgroundColor,
-                      }}
-                    >
-                      {newRows.map((row, rowIndex) => (
-                        <tr key={rowIndex}>
-                          {columns.map((column, columnIndex) => (
-                            <td
-                              key={columnIndex}
-                              style={{
-                                padding: 12,
-                                whiteSpace: 'nowrap',
-                                fontSize: 13,
-                                color: theme.secondaryTextColor,
-                                fontFamily: theme?.fontFamily,
-                                // TODO: change color
-                                // borderBottom: `1px solid ${theme.borderColor} !important`,
-                                boxShadow: `inset 0 -1px 0 ${theme.borderColor}`,
-                                outline: 'none',
-                              }}
-                            >
-                              {typeof row[column.field] === 'object'
-                                ? JSON.stringify(row[column.field]).length > 55
-                                  ? JSON.stringify(row[column.field]).substring(
-                                      0,
-                                      52
-                                    ) + '...'
-                                  : JSON.stringify(row[column.field])
-                                : row[column.field].length > 55
-                                ? row[column.field].substring(0, 52) + '...'
-                                : row[column.field]}
-                            </td>
-                          ))}
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-                <div
-                  style={{
-                    height: 60,
+                    height: 70,
                     // TODO: change color
-                    background: theme.backgroundColor,
+                    background: theme?.backgroundColor,
                   }}
                 >
                   {rows.length ? (
@@ -538,19 +546,29 @@ export default function QueryEditor({
                       style={{
                         display: 'flex',
                         flexDirection: 'column',
-                        height: 60,
+                        height: 70,
                         border: 'none',
                       }}
                     >
                       <div
                         style={{
                           height: 1,
+                          width: '100%',
                           // TODO: change color
-                          background: theme.borderColor,
+                          // background: theme.borderColor,
                         }}
                       />
-                      <div style={{ marginLeft: 0 }}>
-                        <button
+                      <div
+                        style={{
+                          marginLeft: 0,
+                          height: 69,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'flex-end',
+                          paddingRight: 20,
+                        }}
+                      >
+                        {/* <button
                           type="button"
                           onClick={downloadCSV}
                           style={{
@@ -573,7 +591,29 @@ export default function QueryEditor({
                           }}
                         >
                           Download CSV
-                        </button>
+                        </button> */}
+                        {(SecondaryButtonComponent && (
+                          <SecondaryButtonComponent
+                            onClick={downloadCSV}
+                            label="Download CSV"
+                          />
+                        )) || (
+                          <QuillButton
+                            theme={theme}
+                            onClick={downloadCSV}
+                            label="Download CSV"
+                            secondary
+                          />
+                        )}
+                        {AddToDashboardButton && <div style={{ width: 10 }} />}
+                        {AddToDashboardButton && (
+                          <AddToDashboardButton
+                            // @ts-ignore
+                            rows={rows}
+                            columns={columns}
+                            query={query}
+                          />
+                        )}
                         <div />
                       </div>
                     </div>
@@ -595,6 +635,10 @@ const SQLEditorComponent = ({
   theme,
   defineEditorTheme,
   setEditorTheme,
+  ButtonComponent,
+  theme,
+  loading,
+  LoadingComponent,
 }) => {
   return (
     <div
@@ -614,30 +658,48 @@ const SQLEditorComponent = ({
         overflow: 'hidden',
       }}
     >
-      <MonacoEditor
-        height="calc(100% - 50px)"
-        width="100%"
-        defaultLanguage="pgsql"
-        defaultValue=""
-        value={query}
-        loading={<div />}
-        options={{
-          wordWrap: 'on',
-          minimap: {
-            enabled: false,
-          },
-          padding: { top: 16 },
-        }}
-        onChange={query => setQuery(query)}
-        beforeMount={monaco => defineEditorTheme(monaco, theme)}
-        onMount={setEditorTheme}
-      />
+      {loading ? (
+        <div
+          style={{
+            height: 'calc(100% - 70px)',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#F9F9F9',
+          }}
+        >
+          {LoadingComponent && <LoadingComponent />}
+          {!LoadingComponent && (
+            <TailSpin height={36} width={36} color="#364153" />
+          )}
+        </div>
+      ) : (
+        <MonacoEditor
+          height="calc(100% - 70px)"
+          width="100%"
+          defaultLanguage="pgsql"
+          defaultValue=""
+          value={query}
+          loading={<div />}
+          options={{
+            wordWrap: 'on',
+            minimap: {
+              enabled: false,
+            },
+            padding: { top: 16 },
+          }}
+          onChange={query => setQuery(query)}
+          beforeMount={monaco => defineEditorTheme(monaco, theme)}
+          onMount={setEditorTheme}
+        />
+      )}
       <div
         style={{
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          height: 50,
+          height: 70,
         }}
       >
         {/* <button
@@ -659,7 +721,7 @@ const SQLEditorComponent = ({
         >
           Run query
         </button> */}
-        <button
+        {/* <button
           type="button"
           onClick={handleRunQuery}
           style={{
@@ -682,13 +744,521 @@ const SQLEditorComponent = ({
           }}
         >
           Run query
-        </button>
+        </button> */}
+        {(ButtonComponent && (
+          <ButtonComponent onClick={handleRunQuery} label="Run query" />
+        )) || (
+          <QuillButton
+            onClick={handleRunQuery}
+            label="Run query"
+            theme={theme}
+          />
+        )}
       </div>
     </div>
   );
 };
 
-const SchemaListComponent = ({ schema, theme }) => {
+const styles = {
+  columnHeader: {
+    boxSizing: 'border-box',
+    flex: '150 0 auto',
+    minWidth: '50px',
+    width: '150px',
+    position: 'relative',
+    cursor: 'pointer',
+    background: 'rgb(249, 250, 251)',
+    borderRight: '1px solid rgb(229, 231, 235)',
+    whiteSpace: 'nowrap',
+    display: 'flex',
+    alignItems: 'center',
+    overflowX: 'visible',
+    margin: '0px',
+    textOverflow: 'ellipsis',
+    minHeight: '36px', // 2.25rem * 16px = 36px
+  },
+  columnHeaderLabel: {
+    fontFamily:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+    WebkitTapHighlightColor: 'transparent',
+    color: 'rgb(55, 65, 81)',
+    textDecoration: 'none',
+    fontWeight: 500,
+    fontSize: '14px', // 0.875rem * 16px = 14px
+    lineHeight: '20px', // 1.25rem * 16px = 20px
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+};
+
+export function SpecialTable({
+  columns,
+  rows,
+  height,
+  containerStyle,
+  loading,
+  LoadingComponent,
+  theme,
+  showDownloadCsvButton,
+  csvFilename,
+}: {
+  columns: any[];
+  rows: any[];
+  height: string;
+  containerStyle?: React.CSSProperties;
+  loading?: boolean;
+  LoadingComponent?: () => JSX.Element;
+  theme?: any;
+  showDownloadCsvButton?: boolean;
+  csvFilename?: string;
+}) {
+  const downloadCSV = () => {
+    // report.rows
+    if (!rows.length) {
+      return;
+    }
+    const json = rows; // JSON data passed as a prop
+    const fields = Object.keys(json[0]); // Assumes all objects have same keys
+    const csvRows = [];
+
+    // Header row
+    csvRows.push(fields.join(','));
+
+    // Data rows
+    for (const row of json) {
+      const values = fields.map(field => JSON.stringify(row[field] || ''));
+      csvRows.push(values.join(','));
+    }
+
+    // Create CSV string and create a 'blob' with it
+    const csvString = csvRows.join('\r\n');
+    const csvBlob = new Blob([csvString], { type: 'text/csv' });
+
+    // Create a download link and click it
+    const downloadLink = document.createElement('a');
+    downloadLink.download = `${csvFilename}.csv`;
+    downloadLink.href = URL.createObjectURL(csvBlob);
+    downloadLink.style.display = 'none';
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  };
+  if (loading) {
+    return (
+      <div
+        style={{
+          ...containerStyle,
+          // paddingLeft: 25,
+          // paddingRight: 25,
+          // borderRadius: 8,
+          // marginTop: 25,
+          // overflow: 'visible',
+          width: '100%',
+          height: height,
+          // overflow: 'hidden',
+          // @ts-ignore
+          // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+        }}
+      >
+        <div
+          style={{
+            height: '100%',
+            overflow: 'scroll',
+            borderRadius: 6,
+            border: '1px solid rgb(229, 231, 235)',
+            padding: 0,
+            margin: 0,
+            // border: 'none',
+            boxSizing: 'border-box',
+            outline: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            // maxHeight: 600,
+          }}
+        >
+          {LoadingComponent && <LoadingComponent />}
+          {!LoadingComponent && (
+            <TailSpin height={36} width={36} color="#364153" />
+          )}
+        </div>
+      </div>
+    );
+  }
+  if (!columns || !columns.length || !rows) {
+    return null;
+  }
+
+  if (showDownloadCsvButton) {
+    return (
+      <div
+        style={{
+          ...containerStyle,
+          // paddingLeft: 25,
+          // paddingRight: 25,
+          // borderRadius: 8,
+          // marginTop: 25,
+          overflow: 'visible',
+          height: height,
+          // overflow: 'hidden',
+          // @ts-ignore
+          // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+        }}
+      >
+        <div style={{ height: 50, background: 'white' }} className="thead">
+          <div
+            role="row"
+            className="tr"
+            style={{
+              display: 'flex',
+              flex: '1 0 auto',
+              minWidth: '100px',
+              boxSizing: 'border-box',
+              alignItems: 'center',
+              height: 50,
+              // position: 'absolute',
+              // bottom: 0,
+            }}
+          >
+            <div
+              onClick={downloadCSV}
+              style={{
+                height: 40,
+                minHeight: 40,
+                color: theme?.primaryTextColor,
+                boxSizing: 'content-box',
+                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                fontSize: theme?.fontSizeSmall || '14px',
+                fontWeight: theme?.fontWeightMedium || '500',
+                // marginTop: 8,
+                marginLeft: 20,
+                alignItems: 'center',
+                display: 'flex',
+                cursor: 'pointer',
+              }}
+            >
+              Download CSV
+            </div>
+          </div>
+        </div>
+        <div
+          style={{
+            height: 'calc(100% - 50px)',
+            overflow: 'scroll',
+            borderRadius: 6,
+            border: '1px solid rgb(229, 231, 235)',
+            padding: 0,
+            margin: 0,
+            // border: 'none',
+            boxSizing: 'border-box',
+            outline: 'none',
+            // maxHeight: 600,
+          }}
+        >
+          <div role="table" className="table" style={{ minWidth: '0px' }}>
+            <div className="thead">
+              <div
+                role="row"
+                className="tr"
+                style={{
+                  display: 'flex',
+                  flex: '1 0 auto',
+                  minWidth: '100px',
+                  boxSizing: 'border-box',
+                }}
+              >
+                {/* @ts-ignore */}
+                {columns.map((column, index) => (
+                  <div
+                    key={'sqlcol' + index}
+                    // @ts-ignore
+                    style={styles.columnHeader}
+                  >
+                    <div style={{ width: 16 }} />
+                    <div
+                      aria-haspopup="dialog"
+                      aria-expanded="false"
+                      aria-controls="mantine-r6-dropdown"
+                      // @ts-ignore
+                      style={styles.columnHeaderLabel}
+                    >
+                      {column.label}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div role="rowgroup" className="tbody">
+              {/* @ts-ignore */}
+              {rows.map((row, rowIndex) => (
+                <div
+                  key={'sqlrow' + rowIndex}
+                  role="row"
+                  className="tr"
+                  style={{
+                    display: 'flex',
+                    flex: '1 0 auto',
+                    minWidth: '100px',
+                    boxSizing: 'border-box',
+                  }}
+                >
+                  {/* @ts-ignore */}
+                  {columns.map((column, columnIndex) => (
+                    <div
+                      key={'sqlcell' + columnIndex}
+                      role="cell"
+                      className="td airplane-1h7muk6"
+                      style={{
+                        boxSizing: 'border-box',
+                        flex: '150 0 auto',
+                        minWidth: '50px',
+                        width: '150px',
+                        display: 'flex',
+                        margin: '0px',
+                        textOverflow: 'ellipsis',
+                        minHeight: '36px',
+                        borderRight: '1px solid rgb(229, 231, 235)',
+                        overflow: 'hidden',
+                        borderTop: '1px solid rgb(229, 231, 235)',
+                      }}
+                    >
+                      <div
+                        style={{
+                          lineHeight: '1.5rem',
+                          width: '100%',
+                          display: 'flex',
+                          cursor: 'default',
+                          position: 'relative',
+                        }}
+                        className="airplane-gowkln"
+                        data-testid="static-cell"
+                      >
+                        <div
+                          className="airplane-Text-root airplane-mzqt6k"
+                          aria-haspopup="dialog"
+                          aria-expanded="false"
+                          aria-controls="mantine-r8-dropdown"
+                          id="mantine-r8-target"
+                          style={{
+                            fontFamily:
+                              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                            WebkitTapHighlightColor: 'transparent',
+                            color: 'rgb(55, 65, 81)',
+                            textDecoration: 'none',
+                            fontWeight: 400,
+                            fontSize: '14px',
+                            lineHeight: '20px',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            padding: '8px 16px',
+                          }}
+                        >
+                          {typeof row[column.field] === 'object'
+                            ? JSON.stringify(row[column.field]).length > 55
+                              ? JSON.stringify(row[column.field]).substring(
+                                  0,
+                                  52
+                                ) + '...'
+                              : JSON.stringify(row[column.field])
+                            : row[column.field].length > 55
+                            ? row[column.field].substring(0, 52) + '...'
+                            : row[column.field]}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...containerStyle,
+        // paddingLeft: 25,
+        // paddingRight: 25,
+        // borderRadius: 8,
+        // marginTop: 25,
+        overflow: 'visible',
+        height: height,
+        // overflow: 'hidden',
+        // @ts-ignore
+        // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          overflow: 'scroll',
+          borderRadius: 6,
+          border: '1px solid rgb(229, 231, 235)',
+          padding: 0,
+          margin: 0,
+          // border: 'none',
+          boxSizing: 'border-box',
+          outline: 'none',
+          // maxHeight: 600,
+        }}
+      >
+        <div role="table" className="table" style={{ minWidth: '0px' }}>
+          <div className="thead">
+            <div
+              role="row"
+              className="tr"
+              style={{
+                display: 'flex',
+                flex: '1 0 auto',
+                minWidth: '100px',
+                boxSizing: 'border-box',
+              }}
+            >
+              {/* @ts-ignore */}
+              {columns.map((column, index) => (
+                <div
+                  key={'sqlcol' + index}
+                  // @ts-ignore
+                  style={styles.columnHeader}
+                >
+                  <div style={{ width: 16 }} />
+                  <div
+                    aria-haspopup="dialog"
+                    aria-expanded="false"
+                    aria-controls="mantine-r6-dropdown"
+                    // @ts-ignore
+                    style={styles.columnHeaderLabel}
+                  >
+                    {column.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div role="rowgroup" className="tbody">
+            {/* @ts-ignore */}
+            {rows.map((row, rowIndex) => (
+              <div
+                key={'sqlrow' + rowIndex}
+                role="row"
+                className="tr"
+                style={{
+                  display: 'flex',
+                  flex: '1 0 auto',
+                  minWidth: '100px',
+                  boxSizing: 'border-box',
+                }}
+              >
+                {/* @ts-ignore */}
+                {columns.map((column, columnIndex) => (
+                  <div
+                    key={'sqlcell' + columnIndex}
+                    role="cell"
+                    className="td airplane-1h7muk6"
+                    style={{
+                      boxSizing: 'border-box',
+                      flex: '150 0 auto',
+                      minWidth: '50px',
+                      width: '150px',
+                      display: 'flex',
+                      margin: '0px',
+                      textOverflow: 'ellipsis',
+                      minHeight: '36px',
+                      borderRight: '1px solid rgb(229, 231, 235)',
+                      overflow: 'hidden',
+                      borderTop: '1px solid rgb(229, 231, 235)',
+                    }}
+                  >
+                    <div
+                      style={{
+                        lineHeight: '1.5rem',
+                        width: '100%',
+                        display: 'flex',
+                        cursor: 'default',
+                        position: 'relative',
+                      }}
+                      className="airplane-gowkln"
+                      data-testid="static-cell"
+                    >
+                      <div
+                        className="airplane-Text-root airplane-mzqt6k"
+                        aria-haspopup="dialog"
+                        aria-expanded="false"
+                        aria-controls="mantine-r8-dropdown"
+                        id="mantine-r8-target"
+                        style={{
+                          fontFamily:
+                            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                          WebkitTapHighlightColor: 'transparent',
+                          color: 'rgb(55, 65, 81)',
+                          textDecoration: 'none',
+                          fontWeight: 400,
+                          fontSize: '14px',
+                          lineHeight: '20px',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                          padding: '8px 16px',
+                        }}
+                      >
+                        {typeof row[column.field] === 'object'
+                          ? JSON.stringify(row[column.field]).length > 55
+                            ? JSON.stringify(row[column.field]).substring(
+                                0,
+                                52
+                              ) + '...'
+                            : JSON.stringify(row[column.field])
+                          : row[column.field].length > 55
+                          ? row[column.field].substring(0, 52) + '...'
+                          : row[column.field]}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
+  if (loading) {
+    return (
+      <div
+        style={{
+          background: theme.backgroundColor,
+          // maxHeight: 700,
+          width: 250,
+          minWidth: 250,
+          // overflowY: 'scroll',
+          height: '100%',
+          // maxHeight: "100%",
+          paddingLeft: 20,
+          paddingRight: 30,
+          paddingTop: 40,
+          display: 'flex',
+          // alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div style={{ height: 100 }} />
+        {LoadingComponent && <LoadingComponent />}
+        {!LoadingComponent && (
+          <TailSpin height={36} width={36} color="#364153" />
+        )}
+      </div>
+    );
+  }
   return (
     <div
       style={{