@quillsql/react 1.6.0 → 1.6.3

package/lib/SQLEditor.js

@@ -46,13 +46,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext, useMemo, useEffect } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { useState, useContext, useEffect } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
 import axios from 'axios';
 import { TailSpin } from 'react-loader-spinner';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { ChevronDownIcon, ChevronRightIcon, SparklesIcon, MagnifyingGlassIcon, } from '@heroicons/react/20/solid';
+import { ChevronDownIcon, ChevronRightIcon, } from '@heroicons/react/20/solid';
 export function convertPostgresColumn(column) {
     var format;
     switch (column.dataTypeID) {
@@ -107,9 +109,49 @@ function setEditorTheme(editor, monaco) {
         console.log('ERROR: ', e);
     }
 }
+var QuillButton = function (_a) {
+    var onClick = _a.onClick, label = _a.label, theme = _a.theme, secondary = _a.secondary;
+    return (_jsx("button", __assign({ style: {
+            borderRadius: '6px',
+            backgroundColor: secondary
+                ? (theme === null || theme === void 0 ? void 0 : theme.secondaryButtonColor) || '#FFFFFF'
+                : theme === null || theme === void 0 ? void 0 : theme.primaryButtonColor,
+            opacity: 1,
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            paddingTop: '10px',
+            paddingBottom: '10px',
+            fontSize: '14px',
+            fontWeight: 600,
+            color: secondary ? theme === null || theme === void 0 ? void 0 : theme.primaryTextColor : '#FFFFFF',
+            cursor: 'pointer',
+            outline: 'none',
+            border: 'none',
+            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+        }, onClick: onClick }, { children: label })));
+};
+var QuillTextInput = function (_a) {
+    var onChange = _a.onChange, value = _a.value, id = _a.id, placeholder = _a.placeholder, theme = _a.theme;
+    return (_jsx("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 === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
+            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+            borderWidth: '1px',
+            borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E7E7E7',
+            borderRadius: '6px',
+        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
+};
 export default function QueryEditor(_a) {
     var _this = this;
-    var _b = _a.containerStyle, containerStyle = _b === void 0 ? { height: '100vh' } : _b;
+    var _b = _a.containerStyle, containerStyle = _b === void 0 ? { height: '100vh' } : _b, ButtonComponent = _a.ButtonComponent, SecondaryButtonComponent = _a.SecondaryButtonComponent, TextInputComponent = _a.TextInputComponent, TableComponent = _a.TableComponent, AddToDashboardButton = _a.AddToDashboardButton, LoadingComponent = _a.LoadingComponent;
     var _c = useState(''), sqlPrompt = _c[0], setSqlPrompt = _c[1];
     var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
     var client = useContext(ClientContext)[0];
@@ -121,6 +163,8 @@ export default function QueryEditor(_a) {
     var _j = useContext(SchemaContext), schema = _j[0], setSchema = _j[1];
     var _k = useState(''), errorMessage = _k[0], setErrorMessage = _k[1];
     var _l = useState(false), sqlResponseLoading = _l[0], setSqlResponseLoading = _l[1];
+    var _m = useState(false), sqlQueryLoading = _m[0], setSqlQueryLoading = _m[1];
+    var _o = useState(false), schemaLoading = _o[0], setSchemaLoading = _o[1];
     useEffect(function () {
         var isSubscribed = true;
         function getSchema() {
@@ -130,6 +174,7 @@ export default function QueryEditor(_a) {
                     switch (_a.label) {
                         case 0:
                             publicKey = client.publicKey, environment = client.environment;
+                            setSchemaLoading(true);
                             return [4 /*yield*/, axios.get("https://quill-344421.uc.r.appspot.com/schema2/".concat(publicKey, "/"), {
                                     headers: {
                                         Authorization: "Bearer ",
@@ -140,6 +185,7 @@ export default function QueryEditor(_a) {
                             response3 = _a.sent();
                             if (isSubscribed) {
                                 setSchema(response3.data.tables);
+                                setSchemaLoading(false);
                             }
                             return [2 /*return*/];
                     }
@@ -178,54 +224,64 @@ export default function QueryEditor(_a) {
         });
     }); };
     var handleRunQuery = function () { return __awaiter(_this, void 0, void 0, function () {
-        var publicKey, customerId, environment, response, e_1;
+        var publicKey, customerId, environment, queryEndpoint, queryHeaders, response, e_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
-                            query: query,
-                        }, {
-                            params: {
-                                orgId: customerId,
-                                publicKey: publicKey,
-                            },
-                            headers: {
-                                Authorization: "Bearer ",
-                                environment: environment || undefined,
-                            },
-                        })];
+                    _a.trys.push([1, 6, , 7]);
+                    response = void 0;
+                    setSqlQueryLoading(true);
+                    if (!queryEndpoint) return [3 /*break*/, 3];
+                    return [4 /*yield*/, axios.post(queryEndpoint, { metadata: { query: query, task: 'query' } }, { headers: queryHeaders })];
                 case 2:
                     response = _a.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
+                        query: query,
+                    }, {
+                        params: {
+                            orgId: customerId,
+                            publicKey: publicKey,
+                        },
+                        headers: {
+                            Authorization: "Bearer ",
+                            environment: environment || undefined,
+                        },
+                    })];
+                case 4:
+                    response = _a.sent();
+                    _a.label = 5;
+                case 5:
                     if (response && response.data && response.data.errorMessage) {
+                        setSqlQueryLoading(false);
                         setErrorMessage('Failed to run SQL query: ' + response.data.errorMessage);
                         setRows([]);
                         setColumns([]);
                         setFields([]);
                         return [2 /*return*/];
                     }
+                    setSqlQueryLoading(false);
                     setErrorMessage('');
-                    setRows(response.data.rows);
+                    setRows(response.data.rows && response.data.rows.length
+                        ? response.data.rows
+                        : []);
                     setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
                     setFields(response.data.fields);
-                    return [3 /*break*/, 4];
-                case 3:
+                    return [3 /*break*/, 7];
+                case 6:
                     e_1 = _a.sent();
                     console.log('ERROR: ', e_1);
                     return [2 /*return*/];
-                case 4: return [2 /*return*/];
+                case 7: return [2 /*return*/];
             }
         });
     }); };
     var handleAddToDashboard = function () {
         setIsOpen(true);
     };
-    var newRows = useMemo(function () {
-        return JSON.parse(JSON.stringify(rows));
-    }, [rows]);
     /* all your useState and useContext calls and your useEffect hooks */
     var downloadCSV = function () {
         // report.rows
@@ -269,7 +325,7 @@ export default function QueryEditor(_a) {
                         display: 'flex',
                         height: '100%',
                         flexDirection: 'row',
-                    } }, { children: [_jsx(SchemaListComponent, { schema: schema, theme: theme }), _jsxs("div", __assign({ style: {
+                    } }, { children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", __assign({ style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 width: 'calc(100% - 250px)',
@@ -280,79 +336,7 @@ export default function QueryEditor(_a) {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
-                                    } }, { children: [_jsxs("div", __assign({ style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                paddingLeft: '12px',
-                                                paddingRight: '12px',
-                                                height: 38,
-                                                boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
-                                                width: '445px',
-                                                // TODO: change color
-                                                borderColor: theme.borderColor,
-                                                color: theme.primaryTextColor,
-                                                borderWidth: '1px',
-                                                // TODO: change color
-                                                backgroundColor: 'white',
-                                                borderRadius: 6,
-                                                borderStyle: 'solid',
-                                                outline: 'none',
-                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                            } }, { children: [_jsx(MagnifyingGlassIcon, { style: {
-                                                        height: 16,
-                                                        width: 16,
-                                                        color: theme.secondaryTextColor,
-                                                    }, "aria-hidden": "true" }), _jsx("input", { value: sqlPrompt, onChange: function (e) { return setSqlPrompt(e.target.value); }, style: {
-                                                        outline: 'none',
-                                                        marginLeft: 8,
-                                                        width: '100%',
-                                                        border: 'none',
-                                                        outline: 'none',
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } })] })), _jsx("button", __assign({ 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 === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                            } }, { children: sqlResponseLoading ? (_jsx("div", __assign({ style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    width: '100%',
-                                                    height: '100%',
-                                                    justifyContent: 'center',
-                                                } }, { children: _jsx(TailSpin, { height: "20", width: "20", 
-                                                    // TODO: change color
-                                                    color: theme.backgroundColor, ariaLabel: "loading-indicator" }) }))) : (_jsxs("div", __assign({ style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                } }, { children: [_jsx(SparklesIcon, { style: {
-                                                            height: 12,
-                                                            width: 12,
-                                                            marginRight: 4,
-                                                            // TODO: change color
-                                                            color: theme.backgroundColor,
-                                                        }, "aria-hidden": "true" }), _jsx("div", __assign({ style: {
-                                                            fontSize: 14,
-                                                            fontWeight: 600,
-                                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                            color: theme.backgroundColor,
-                                                        } }, { children: "Ask AI" }))] }))) }))] })), _jsx("div", __assign({ style: { height: 'calc(50% - 40px)' } }, { children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme }) })), _jsxs("div", __assign({ style: {
+                                    } }, { children: [_jsx("div", __assign({ style: { minWidth: 440, marginRight: 10 } }, { children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: function (e) { return setSqlPrompt(e.target.value); }, placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: function (e) { return setSqlPrompt(e.target.value); }, placeholder: "Ask a question...", theme: theme })) })), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] })), _jsx("div", __assign({ style: { height: 'calc(50% - 40px)' } }, { children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) })), _jsxs("div", __assign({ style: {
                                         height: 'calc(50% - 40px)',
                                         display: 'flex',
                                         flexDirection: 'column',
@@ -361,8 +345,8 @@ export default function QueryEditor(_a) {
                                         border: 'none',
                                         outline: 'none',
                                     } }, { children: [errorMessage && (_jsx("div", __assign({ style: {
-                                                fontFamily: theme.fontFamily,
-                                                color: theme.primaryTextColor,
+                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                                 fontSize: 15,
                                                 fontWeight: '400',
                                             } }, { children: _jsx("div", __assign({ style: {
@@ -372,105 +356,39 @@ export default function QueryEditor(_a) {
                                                     display: 'inline-block',
                                                     flex: 0,
                                                     borderRadius: 6,
+                                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                                     fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } }, { children: errorMessage })) }))), _jsx("div", __assign({ style: {
-                                                height: 'calc(100% - 60px)',
-                                                overflow: 'scroll',
-                                                padding: 0,
-                                                margin: 0,
-                                                border: 'none',
-                                                outline: 'none',
-                                            } }, { children: _jsxs("table", __assign({ style: {
-                                                    padding: 0,
-                                                    margin: 0,
-                                                    border: 'none',
-                                                    outline: 'none',
-                                                    borderSpacing: 0,
-                                                } }, { children: [_jsx("thead", __assign({ style: {
-                                                            position: 'sticky',
-                                                            // TODO: change color
-                                                            background: theme.backgroundColor,
-                                                            top: 0,
-                                                            height: 37,
-                                                            minHeight: 37,
-                                                            maxHeight: 37,
-                                                        } }, { children: _jsx("tr", __assign({ style: {
-                                                                outline: 'none',
-                                                                border: 'none',
-                                                                padding: 0,
-                                                                margin: 0,
-                                                            } }, { children: columns.map(function (column, index) { return (_jsx("th", __assign({ scope: "col", style: {
-                                                                    textAlign: 'left',
-                                                                    fontFamily: theme === null || theme === void 0 ? void 0 : 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 ".concat(theme.borderColor),
-                                                                    // TODO: change color
-                                                                    color: theme.primaryTextColor,
-                                                                    outline: 'none',
-                                                                    border: 'none',
-                                                                } }, { children: column.label }), index)); }) })) })), _jsx("tbody", __assign({ style: {
-                                                            // TODO: change color
-                                                            backgroundColor: theme.backgroundColor,
-                                                        } }, { children: newRows.map(function (row, rowIndex) { return (_jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("td", __assign({ style: {
-                                                                    padding: 12,
-                                                                    whiteSpace: 'nowrap',
-                                                                    fontSize: 13,
-                                                                    color: theme.secondaryTextColor,
-                                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                                    // TODO: change color
-                                                                    // borderBottom: `1px solid ${theme.borderColor} !important`,
-                                                                    boxShadow: "inset 0 -1px 0 ".concat(theme.borderColor),
-                                                                    outline: 'none',
-                                                                } }, { children: 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] }), columnIndex)); }) }, rowIndex)); }) }))] })) })), _jsx("div", __assign({ style: {
-                                                height: 60,
+                                                } }, { children: errorMessage })) }))), errorMessage
+                                            ? null
+                                            : (TableComponent && (_jsx(TableComponent, { rows: rows, columns: columns, height: "calc(100% - 70px)" }))) || (_jsx(SpecialTable, { rows: rows, columns: columns, height: "calc(100% - 70px)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading })), _jsx("div", __assign({ style: {
+                                                height: 70,
                                                 // TODO: change color
-                                                background: theme.backgroundColor,
+                                                background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
                                             } }, { children: rows.length ? (_jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                    height: 60,
+                                                    height: 70,
                                                     border: 'none',
                                                 } }, { children: [_jsx("div", { style: {
                                                             height: 1,
+                                                            width: '100%',
                                                             // TODO: change color
-                                                            background: theme.borderColor,
-                                                        } }), _jsxs("div", __assign({ style: { marginLeft: 0 } }, { children: [_jsx("button", __assign({ type: "button", onClick: downloadCSV, style: {
-                                                                    borderRadius: 6,
-                                                                    // TODO: change color
-                                                                    backgroundColor: theme.primaryButtonColor,
-                                                                    paddingLeft: '1rem',
-                                                                    paddingRight: '1rem',
-                                                                    paddingTop: '0.5rem',
-                                                                    paddingBottom: '0.5rem',
-                                                                    fontSize: '0.875rem',
-                                                                    fontWeight: '600',
-                                                                    // TODO: change color
-                                                                    color: theme.backgroundColor,
-                                                                    fontFamily: theme.fontFamily,
-                                                                    outline: 'none',
-                                                                    border: 'none',
-                                                                    cursor: 'pointer',
-                                                                    marginTop: 14,
-                                                                } }, { children: "Download CSV" })), _jsx("div", {})] }))] }))) : null }))] }))] }))] })) })) })) })));
+                                                            // background: theme.borderColor,
+                                                        } }), _jsxs("div", __assign({ style: {
+                                                            marginLeft: 0,
+                                                            height: 69,
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'flex-end',
+                                                            paddingRight: 20,
+                                                        } }, { children: [(SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: downloadCSV, label: "Download CSV" }))) || (_jsx(QuillButton, { theme: theme, onClick: downloadCSV, label: "Download CSV", secondary: true })), AddToDashboardButton && _jsx("div", { style: { width: 10 } }), AddToDashboardButton && (_jsx(AddToDashboardButton
+                                                            // @ts-ignore
+                                                            , { 
+                                                                // @ts-ignore
+                                                                rows: rows, columns: columns, query: query })), _jsx("div", {})] }))] }))) : null }))] }))] }))] })) })) })) })));
 }
 var SQLEditorComponent = function (_a) {
-    var query = _a.query, setQuery = _a.setQuery, handleRunQuery = _a.handleRunQuery, theme = _a.theme, defineEditorTheme = _a.defineEditorTheme, setEditorTheme = _a.setEditorTheme;
+    var query = _a.query, setQuery = _a.setQuery, handleRunQuery = _a.handleRunQuery, theme = _a.theme, defineEditorTheme = _a.defineEditorTheme, setEditorTheme = _a.setEditorTheme, ButtonComponent = _a.ButtonComponent, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
     return (_jsxs("div", __assign({ style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
@@ -485,38 +403,173 @@ var SQLEditorComponent = function (_a) {
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             overflow: 'hidden',
-        } }, { children: [_jsx(MonacoEditor, { height: "calc(100% - 50px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
+        } }, { children: [loading ? (_jsxs("div", __assign({ style: {
+                    height: 'calc(100% - 70px)',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#F9F9F9',
+                } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] }))) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
                     wordWrap: 'on',
                     minimap: {
                         enabled: false,
                     },
                     padding: { top: 16 },
-                }, onChange: function (query) { return setQuery(query); }, beforeMount: function (monaco) { return defineEditorTheme(monaco, theme); }, onMount: setEditorTheme }), _jsx("div", __assign({ style: {
+                }, onChange: function (query) { return setQuery(query); }, beforeMount: function (monaco) { return defineEditorTheme(monaco, theme); }, onMount: setEditorTheme })), _jsx("div", __assign({ style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
-                    height: 50,
-                } }, { children: _jsx("button", __assign({ type: "button", onClick: handleRunQuery, style: {
-                        borderRadius: 6,
-                        backgroundColor: theme.primaryButtonColor,
-                        height: 32,
-                        width: 100,
-                        marginLeft: 0,
-                        // paddingLeft: '1rem',
-                        // paddingRight: '1rem',
-                        // paddingTop: '0.5rem',
-                        // paddingBottom: '0.5rem',
-                        fontSize: '0.875rem',
-                        fontWeight: '600',
-                        color: theme.backgroundColor,
-                        fontFamily: theme.fontFamily,
-                        outline: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                    } }, { children: "Run query" })) }))] })));
+                    height: 70,
+                } }, { children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })) }))] })));
 };
+var 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',
+        lineHeight: '20px',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
+};
+export function SpecialTable(_a) {
+    var columns = _a.columns, rows = _a.rows, height = _a.height, containerStyle = _a.containerStyle, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
+    if (loading) {
+        return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
+                // paddingLeft: 25,
+                // paddingRight: 25,
+                // borderRadius: 8,
+                // marginTop: 25,
+                // overflow: 'visible',
+                width: '100%', height: height }) }, { children: _jsxs("div", __assign({ 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,
+                } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })) })));
+    }
+    if (!columns || !columns.length) {
+        return null;
+    }
+    return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
+            // paddingLeft: 25,
+            // paddingRight: 25,
+            // borderRadius: 8,
+            // marginTop: 25,
+            overflow: 'visible', height: height }) }, { children: _jsx("div", __assign({ 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,
+            } }, { children: _jsxs("div", __assign({ role: "table", className: "table", style: { minWidth: '0px' } }, { children: [_jsx("div", __assign({ className: "thead" }, { children: _jsx("div", __assign({ role: "row", className: "tr", style: {
+                                display: 'flex',
+                                flex: '1 0 auto',
+                                minWidth: '100px',
+                                boxSizing: 'border-box',
+                            } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({ 
+                                // @ts-ignore
+                                style: styles.columnHeader }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                        // @ts-ignore
+                                        style: styles.columnHeaderLabel }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ role: "row", className: "tr", style: {
+                                display: 'flex',
+                                flex: '1 0 auto',
+                                minWidth: '100px',
+                                boxSizing: 'border-box',
+                            } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ 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)',
+                                } }, { children: _jsx("div", __assign({ style: {
+                                        lineHeight: '1.5rem',
+                                        width: '100%',
+                                        display: 'flex',
+                                        cursor: 'default',
+                                        position: 'relative',
+                                    }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ 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',
+                                        } }, { children: 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] })) })) }), 'sqlcell' + columnIndex)); }) }), 'sqlrow' + rowIndex)); }) }))] })) })) })));
+}
 var SchemaListComponent = function (_a) {
-    var schema = _a.schema, theme = _a.theme;
+    var schema = _a.schema, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
+    if (loading) {
+        return (_jsxs("div", __assign({ 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',
+            } }, { children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })));
+    }
     return (_jsx("div", __assign({ style: {
             background: theme.backgroundColor,
             // maxHeight: 700,