@quillsql/react 1.6.9 → 1.7.1

package/lib/SQLEditor.js

@@ -1,63 +1,22 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertPostgresColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { useState, useContext, useEffect } from 'react';
-import MonacoEditor from '@monaco-editor/react';
+const react_1 = require("react");
+const react_2 = __importDefault(require("@monaco-editor/react"));
 // import './nightOwlLight.css';
-import axios from 'axios';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { ChevronDownIcon, ChevronRightIcon, } from '@heroicons/react/20/solid';
-import { SpecialTable } from './Table';
-import { TailSpin } from 'react-loader-spinner';
-export function convertPostgresColumn(column) {
-    var format;
+const axios_1 = __importDefault(require("axios"));
+const Context_1 = require("./Context");
+const solid_1 = require("@heroicons/react/20/solid");
+const Table_1 = require("./Table");
+const react_loader_spinner_1 = require("react-loader-spinner");
+function convertPostgresColumn(column) {
+    let format;
     switch (column.dataTypeID) {
         case 20: // int8
         case 21: // int2
@@ -85,6 +44,7 @@ export function convertPostgresColumn(column) {
         format: format,
     };
 }
+exports.convertPostgresColumn = convertPostgresColumn;
 function defineEditorTheme(monaco, theme) {
     monaco.editor.defineTheme('onedark', {
         base: theme.darkMode ? 'vs-dark' : 'vs',
@@ -110,30 +70,26 @@ 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: {
+const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_1.jsx)("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, children: label }));
+const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
+    return ((0, jsx_runtime_1.jsx)("input", { style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -143,173 +99,134 @@ var QuillTextInput = function (_a) {
             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,
+            backgroundColor: theme?.backgroundColor || 'white',
+            color: theme?.primaryTextColor,
             borderWidth: '1px',
-            borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E7E7E7',
+            borderColor: theme?.borderColor || '#E7E7E7',
             borderStyle: 'solid',
             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, 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];
-    var theme = useContext(ThemeContext)[0];
-    var _e = useState(''), query = _e[0], setQuery = _e[1];
-    var _f = useState([]), rows = _f[0], setRows = _f[1];
-    var _g = useState([]), columns = _g[0], setColumns = _g[1];
-    var _h = useState([]), fields = _h[0], setFields = _h[1];
-    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() {
-            return __awaiter(this, void 0, void 0, function () {
-                var publicKey, environment, response3;
-                return __generator(this, function (_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 ",
-                                        environment: environment || undefined,
-                                    },
-                                })];
-                        case 1:
-                            response3 = _a.sent();
-                            if (isSubscribed) {
-                                setSchema(response3.data.tables);
-                                setSchemaLoading(false);
-                            }
-                            return [2 /*return*/];
-                    }
-                });
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, AddToDashboardButton, LoadingComponent, }) {
+    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [rows, setRows] = (0, react_1.useState)([]);
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const [fields, setFields] = (0, react_1.useState)([]);
+    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
+    const [sqlQueryLoading, setSqlQueryLoading] = (0, react_1.useState)(false);
+    const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            const { publicKey, environment } = client;
+            setSchemaLoading(true);
+            const response3 = await axios_1.default.get(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
+                headers: {
+                    Authorization: `Bearer `,
+                    environment: environment || undefined,
+                },
             });
+            if (isSubscribed) {
+                setSchema(response3.data.tables);
+                setSchemaLoading(false);
+            }
         }
         if (isSubscribed) {
             getSchema();
         }
-        return function () {
+        return () => {
             isSubscribed = false;
         };
     }, []);
-    var handleRunSqlPrompt = function () { return __awaiter(_this, void 0, void 0, function () {
-        var publicKey, environment, response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    publicKey = client.publicKey, environment = client.environment;
-                    setSqlResponseLoading(true);
-                    return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/quillai", {
-                            initialQuestion: sqlPrompt,
-                            publicKey: publicKey,
-                        }, {
-                            headers: {
-                                Authorization: "Bearer ",
-                                environment: environment || undefined,
-                            },
-                        })];
-                case 1:
-                    response = _a.sent();
-                    setQuery(response.data.message);
-                    setSqlResponseLoading(false);
-                    return [2 /*return*/];
-            }
+    const handleRunSqlPrompt = async () => {
+        const { publicKey, environment } = client;
+        setSqlResponseLoading(true);
+        const response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/quillai`, {
+            initialQuestion: sqlPrompt,
+            publicKey: publicKey,
+        }, {
+            headers: {
+                Authorization: `Bearer `,
+                environment: environment || undefined,
+            },
         });
-    }); };
-    var handleRunQuery = function () { return __awaiter(_this, void 0, void 0, function () {
-        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, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
-                    _a.label = 1;
-                case 1:
-                    _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 && response.data.rows.length
-                        ? response.data.rows
-                        : []);
-                    setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
-                    setFields(response.data.fields);
-                    return [3 /*break*/, 7];
-                case 6:
-                    e_1 = _a.sent();
-                    console.log('ERROR: ', e_1);
-                    return [2 /*return*/];
-                case 7: return [2 /*return*/];
+        setQuery(response.data.message);
+        setSqlResponseLoading(false);
+    };
+    const handleRunQuery = async () => {
+        const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
+        try {
+            let response;
+            setSqlQueryLoading(true);
+            if (queryEndpoint) {
+                response = await axios_1.default.post(queryEndpoint, { metadata: { query, task: 'query' } }, { headers: queryHeaders, withCredentials });
             }
-        });
-    }); };
-    var handleAddToDashboard = function () {
+            else {
+                response = await axios_1.default.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);
+                setRows([]);
+                setColumns([]);
+                setFields([]);
+                return;
+            }
+            setSqlQueryLoading(false);
+            setErrorMessage('');
+            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) {
+            console.log('ERROR: ', e);
+            return;
+        }
+    };
+    const handleAddToDashboard = () => {
         setIsOpen(true);
     };
     /* all your useState and useContext calls and your useEffect hooks */
-    var downloadCSV = function () {
+    const downloadCSV = () => {
         // report.rows
         if (!rows.length) {
             return;
         }
-        var json = rows; // JSON data passed as a prop
-        var fields = Object.keys(json[0]); // Assumes all objects have same keys
-        var csvRows = [];
+        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(','));
-        var _loop_1 = function (row) {
-            var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
-            csvRows.push(values.join(','));
-        };
         // Data rows
-        for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
-            var row = json_1[_i];
-            _loop_1(row);
+        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
-        var csvString = csvRows.join('\r\n');
-        var csvBlob = new Blob([csvString], { type: 'text/csv' });
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        var downloadLink = document.createElement('a');
-        downloadLink.download = "".concat(query, ".csv");
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${query}.csv`;
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -317,28 +234,28 @@ export default function QueryEditor(_a) {
         document.body.removeChild(downloadLink);
     };
     /* rest of your methods */
-    return (_jsx("div", __assign({ style: containerStyle }, { children: _jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 height: 'calc(100%)',
                 display: 'flex',
                 flexDirection: 'column',
                 padding: 0,
-            } }, { children: _jsx("div", __assign({ style: { height: '100%', display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: '100%',
                         display: 'flex',
                         height: '100%',
                         flexDirection: 'row',
-                    } }, { children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", __assign({ style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 width: 'calc(100% - 250px)',
-                            } }, { children: [_jsxs("div", __assign({ style: {
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                         // TODO: change color
                                         height: 80,
                                         background: 'white',
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
-                                    } }, { 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: {
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         height: 'calc(50% - 40px)',
                                         display: 'flex',
                                         flexDirection: 'column',
@@ -346,52 +263,52 @@ export default function QueryEditor(_a) {
                                         margin: 0,
                                         border: 'none',
                                         outline: 'none',
-                                    } }, { children: [errorMessage && (_jsx("div", __assign({ style: {
-                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                    }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                fontFamily: theme?.fontFamily,
+                                                color: theme?.primaryTextColor,
                                                 fontSize: 15,
                                                 fontWeight: '400',
-                                            } }, { children: _jsx("div", __assign({ style: {
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                     padding: 30,
                                                     // TODO: change color
                                                     background: 'rgba(0,0,0,0.02)',
                                                     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 })) }))), errorMessage
+                                                    color: theme?.primaryTextColor,
+                                                    fontFamily: theme?.fontFamily,
+                                                }, 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, theme: theme })), _jsx("div", __assign({ style: {
+                                            : (TableComponent && ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, height: "calc(100% - 70px)" }))) || ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: rows, columns: columns, height: "calc(100% - 70px)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, theme: theme })), (0, jsx_runtime_1.jsx)("div", { style: {
                                                 height: 70,
                                                 // TODO: change color
-                                                background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
-                                            } }, { children: rows.length ? (_jsxs("div", __assign({ style: {
+                                                background: theme?.backgroundColor,
+                                            }, children: rows.length ? ((0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     height: 70,
                                                     border: 'none',
-                                                } }, { children: [_jsx("div", { style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                             height: 1,
                                                             width: '100%',
                                                             // TODO: change color
                                                             // background: theme.borderColor,
-                                                        } }), _jsxs("div", __assign({ style: {
+                                                        } }), (0, jsx_runtime_1.jsxs)("div", { 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
+                                                        }, children: [(SecondaryButtonComponent && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: downloadCSV, label: "Download CSV" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: downloadCSV, label: "Download CSV", secondary: true })), AddToDashboardButton && (0, jsx_runtime_1.jsx)("div", { style: { width: 10 } }), AddToDashboardButton && ((0, jsx_runtime_1.jsx)(AddToDashboardButton
                                                             // @ts-ignore
                                                             , { 
                                                                 // @ts-ignore
-                                                                rows: rows, columns: columns, query: query })), _jsx("div", {})] }))] }))) : null }))] }))] }))] })) })) })) })));
+                                                                rows: rows, columns: columns, query: query })), (0, jsx_runtime_1.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, ButtonComponent = _a.ButtonComponent, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
-    return (_jsxs("div", __assign({ style: {
+exports.default = QueryEditor;
+const SQLEditorComponent = ({ query, setQuery, handleRunQuery, defineEditorTheme, setEditorTheme, ButtonComponent, theme, loading, LoadingComponent, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
@@ -405,27 +322,27 @@ var SQLEditorComponent = function (_a) {
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             overflow: 'hidden',
-        } }, { children: [loading ? (_jsxs("div", __assign({ style: {
+        }, children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { 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: {
+                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsx)(react_loader_spinner_1.TailSpin, { height: 36, width: 36, color: "#364153" }))] })) : ((0, jsx_runtime_1.jsx)(react_2.default, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: (0, jsx_runtime_1.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: query => setQuery(query), beforeMount: monaco => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), (0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     height: 70,
-                } }, { children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })) }))] })));
+                }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })) })] }));
 };
-var styles = {
+const styles = {
     columnHeader: {
         boxSizing: 'border-box',
         flex: '150 0 auto',
@@ -457,10 +374,9 @@ var styles = {
         overflow: 'hidden',
     },
 };
-var SchemaListComponent = function (_a) {
-    var schema = _a.schema, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
+const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
     if (loading) {
-        return (_jsxs("div", __assign({ style: {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: 250,
@@ -474,9 +390,9 @@ var SchemaListComponent = function (_a) {
                 display: 'flex',
                 // alignItems: 'center',
                 justifyContent: 'center',
-            } }, { children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })));
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsx)(react_loader_spinner_1.TailSpin, { height: 36, width: 36, color: "#364153" }))] }));
     }
-    return (_jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: 250,
@@ -486,12 +402,11 @@ var SchemaListComponent = function (_a) {
             // maxHeight: "100%",
             paddingLeft: 20,
             paddingRight: 30,
-        } }, { children: schema.map(function (elem, index) { return (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index)); }) })));
+        }, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
 };
-function SchemaItem(_a) {
-    var elem = _a.elem, theme = _a.theme, index = _a.index;
-    var _b = useState(index === 0), isOpen = _b[0], setIsOpen = _b[1];
-    var schemaContainerStyle = {
+function SchemaItem({ elem, theme, index }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
+    const schemaContainerStyle = {
         display: 'flex',
         flexDirection: 'column',
         // WebkitTouchCallout: "none",
@@ -501,7 +416,7 @@ function SchemaItem(_a) {
         // msUserSelect: "none",
         // userSelect: "none",
     };
-    var schemaRowStyle = {
+    const schemaRowStyle = {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
@@ -509,10 +424,10 @@ function SchemaItem(_a) {
         justifyContent: 'space-between',
         cursor: 'pointer',
     };
-    var schemaRowHoverStyle = {
+    const schemaRowHoverStyle = {
         background: theme.selectUnderlayColor,
     };
-    return (_jsxs("div", __assign({ style: schemaContainerStyle }, { children: [_jsxs("div", __assign({ style: __assign(__assign({}, schemaRowStyle), (isOpen && schemaRowHoverStyle)), onClick: function () { return setIsOpen(!isOpen); } }, { children: [_jsx("p", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
                             marginLeft: theme.padding,
                             fontSize: 13,
                             color: '#384151',
@@ -522,8 +437,8 @@ function SchemaItem(_a) {
                             margin: 0,
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
-                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                        }, title: elem.displayName }, { children: elem.displayName })), _jsx("div", __assign({ style: {
+                            fontFamily: theme?.fontFamily,
+                        }, title: elem.displayName, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -532,19 +447,19 @@ function SchemaItem(_a) {
                             paddingBottom: 12,
                             paddingLeft: 0,
                             cursor: 'pointer',
-                        } }, { children: isOpen ? (_jsx(ChevronDownIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) : (_jsx(ChevronRightIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) }))] })), isOpen ? (_jsx("div", __assign({ style: {
+                        }, children: isOpen ? ((0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(solid_1.ChevronRightIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     paddingBottom: theme.padding,
                     display: 'flex',
                     flexDirection: 'column',
                     paddingLeft: theme.padding,
                     paddingRight: theme.padding,
-                } }, { children: elem.columns.map(function (elem, index) { return (_jsxs("div", __assign({ style: {
+                }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                         paddingTop: theme.padding,
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    } }, { children: [_jsx("div", __assign({ title: elem.displayName, 
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, 
                             // className="text-gray-500"
                             style: {
                                 fontSize: 12,
@@ -558,8 +473,8 @@ function SchemaItem(_a) {
                                 overflow: 'hidden',
                                 width: 200,
                                 maxWidth: 200,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                            } }, { children: elem.displayName })), _jsx("div", __assign({ 
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { 
                             // className="text-gray-500"
                             title: elem.displayName, style: {
                                 fontSize: 12,
@@ -567,7 +482,7 @@ function SchemaItem(_a) {
                                 color: theme.secondaryTextColor,
                                 padding: 0,
                                 margin: 0,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                            } }, { children: elem.fieldType }))] }), elem.displayName + elem.index)); }) }))) : null] })));
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
 }
 //# sourceMappingURL=SQLEditor.js.map