@quillsql/admin 1.3.1 → 1.3.2

package/dist/forms/client_onboard/ConnectDatabase.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ButtonPrimitive, TextInputPrimitive } from '../../primitives';
+import DatabaseSelector from '../../components/DatabaseSelector';
+import { DATABASE_DEFAULT_INFO, formConnectionString, getDatabaseConnectionFormat, } from '../../utils/databases';
+import { getSchemaTableInfo, testConnectionString, } from '../../api/ConnectionClient';
+import { delay } from '../../utils/delay';
+export default function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, }) {
+    const [showError, setShowError] = useState(false);
+    const [connectButtonMessage, setConnectButtonMessage] = useState('Connect');
+    const [copied, setCopied] = useState(false);
+    const [databaseConnectionDetails, setConnectionDetails] = useState(environmentDetails);
+    const onDatabaseSelect = (database) => {
+        setConnectionDetails(getDatabaseConnectionFormat(database));
+    };
+    const testConnection = async () => {
+        const connectionString = formConnectionString(databaseConnectionDetails);
+        const result = await testConnectionString(connectionString);
+        if (result) {
+            try {
+                const suspectedSchema = await getSchemaTableInfo(connectionString, 'public');
+                setConnectButtonMessage('Connecting');
+                // Stop the next code from running for a second
+                // This is to show the connecting message
+                await delay(1000);
+                if ('selectedFields' in suspectedSchema) {
+                    setConnectButtonMessage('Connected ✅');
+                    await delay(2000);
+                    setEnvironmentDetails(databaseConnectionDetails, suspectedSchema, undefined);
+                }
+                else {
+                    setConnectButtonMessage('Connected ✅');
+                    await delay(2000);
+                    setEnvironmentDetails(databaseConnectionDetails, undefined, suspectedSchema);
+                }
+            }
+            catch (e) {
+                setConnectButtonMessage('Connect');
+                setShowError(true);
+            }
+        }
+        else {
+            setConnectButtonMessage('Connect');
+            setShowError(true);
+        }
+    };
+    return (_jsxs("div", { style: { ...containerStyle }, id: "connect-database-form", children: [_jsx("h1", { style: header1Style, children: "Connect Database" }), _jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: '#565656' }, children: "Database type" }), _jsx("div", { style: { display: 'flex', gap: 10 }, children: DATABASE_DEFAULT_INFO.map((database) => {
+                            return (_jsx(DatabaseSelector, { onDatabaseSelect: onDatabaseSelect, containerStyle: { marginBottom: '12px' }, label: database.label, value: database.value, imageUrl: database.imageUrl }, database.label));
+                        }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsxs("div", { style: {
+                            // width: '100%',
+                            maxWidth: 330,
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            padding: '6px 12px',
+                            marginTop: '20px',
+                            marginBottom: '18px',
+                            borderRadius: 6,
+                            cursor: 'pointer',
+                        }, onClick: () => {
+                            navigator.clipboard.writeText('34.133.137.225');
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 1500);
+                        }, className: "quill-active", children: [_jsx("style", { children: `.quill-active { background: #fff; border: 1px solid #e7e7e7; } 
+        .quill-active:hover { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7 }
+        .quill-active:active { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #9DC4F8; outline: 2px solid #9DC4F8; }
+        ` }), _jsx("div", { style: { ...header2Style, color: '#212121', marginBottom: '0px' }, children: _jsx("h2", { style: {
+                                        WebkitUserSelect: 'none',
+                                        MozUserSelect: 'none',
+                                        msUserSelect: 'none',
+                                        userSelect: 'none',
+                                    }, children: "Whitelist Quill's IP" }) }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    cursor: 'pointer',
+                                    marginLeft: '12px',
+                                }, children: [_jsx("h2", { style: {
+                                            ...header2Style,
+                                            color: '#212121',
+                                            marginBottom: '0px',
+                                        }, children: "34.133.137.225" }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [_jsx("path", { d: "M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" }), _jsx("path", { d: "M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" })] })] })] }), copied && (_jsxs("div", { style: {
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: '#565656',
+                            marginLeft: 16,
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                        }, children: [_jsx("div", { children: "\u2705" }), " ", _jsx("div", { children: "Copied to clipboard" })] }))] }), databaseConnectionDetails && (_jsxs("div", { children: [databaseConnectionDetails.type === 'PostgreSQL' && (_jsx("div", { children: _jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), _jsx(TextInputPrimitive, { onChange: (e) => {
+                                        setConnectionDetails({
+                                            ...databaseConnectionDetails,
+                                            connectionString: e.target.value,
+                                        });
+                                    }, value: databaseConnectionDetails.connectionString })] }) })), _jsxs("div", { style: {
+                            ...header1Style,
+                            textAlign: 'center',
+                            fontSize: 14,
+                            color: '#565656',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingTop: 24,
+                            paddingBottom: 0,
+                        }, children: [_jsx("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } }), _jsx("div", { style: { padding: 12 }, children: "or" }), _jsx("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } })] }), _jsx("div", { id: "database-details-form", children: _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(3, 1fr)',
+                                gap: '20px',
+                                justifyContent: 'space-between',
+                                marginTop: '16px',
+                            }, children: 
+                            // get a list of types in the databaseConnectionDetails object and create a form for each
+                            Object.entries(databaseConnectionDetails).map(([key, value]) => {
+                                if (key !== 'connectionString' && key !== 'type')
+                                    return (_jsxs("div", { children: [_jsx("h2", { style: {
+                                                    ...header2Style,
+                                                    fontWeight: '600',
+                                                }, children: key
+                                                    .split(/(?=[A-Z])/)
+                                                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                                    .join(' ') }), _jsx(TextInputPrimitive, { onChange: (e) => {
+                                                    setConnectionDetails({
+                                                        ...databaseConnectionDetails,
+                                                        [key]: e.target.value,
+                                                    });
+                                                }, value: value, disabled: key === 'type' })] }, key));
+                            }) }) }), _jsxs("div", { style: {
+                            width: '100%',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginTop: '24px',
+                        }, children: [showError ? (_jsx("h2", { style: { ...header2Style, color: 'red' }, children: "Couldn't connect to database." })) : (_jsx("div", {})), _jsx(ButtonPrimitive, { label: connectButtonMessage, onClick: testConnection })] })] }))] }));
+}

package/dist/forms/client_onboard/ConnectSchema.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { SchemaDetails } from '../../utils/schema';
+import { ConnectionError, ConnectionType } from '../../utils/databases';
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, }: {
+    containerStyle?: CSSProperties;
+    header1Style?: CSSProperties;
+    header2Style?: CSSProperties;
+    allSchemaInfo?: SchemaDetails;
+    environmentDetails?: ConnectionType;
+    initialError?: ConnectionError;
+    propogateSchemaDetails: (schemaDetails?: SchemaDetails) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectSchema.d.ts.map

package/dist/forms/client_onboard/ConnectSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AASnD,OAAO,EACL,eAAe,EACf,cAAc,EAEf,MAAM,uBAAuB,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,sBAAsB,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACjE,2CA6RA"}

package/dist/forms/client_onboard/ConnectSchema.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ButtonPrimitive } from '../../primitives';
+import DropdownMenuWithLabel from '../../components/DropDownMenuWithLabel';
+import { getFKInfo, getOrgInfo, getSchemaTableInfo, getTableInfo, getTablesBySchema, } from '../../api/ConnectionClient';
+import { formConnectionString, } from '../../utils/databases';
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, }) {
+    const [schemaDetails, setSchemaDetails] = useState(allSchemaInfo);
+    const [schemaError, setSchemaError] = useState(initialError);
+    const [formError, setFormError] = useState({ show: false, message: '' });
+    return (_jsxs("div", { style: { ...containerStyle }, id: "connect-database-form", children: [_jsx("h1", { style: header1Style, children: "Select Organization Table" }), _jsx("h2", { style: header2Style, children: "Select which table you use for organizations (your customers). Quill uses this table to partition data by organization." }), _jsxs("div", { style: {
+                    marginTop: 16,
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: '16px',
+                    alignItems: 'flex-end',
+                    paddingBottom: '16px',
+                }, children: [_jsx(DropdownMenuWithLabel, { items: schemaDetails?.schemas || schemaError?.schemas || [], setSelected: async (e) => {
+                            const tables = await getTablesBySchema(formConnectionString(environmentDetails), e);
+                            if (tables) {
+                                setFormError({ show: false, message: '' });
+                                setSchemaError(undefined);
+                                setSchemaDetails({
+                                    ...schemaDetails,
+                                    schemas: schemaDetails?.schemas || schemaError?.schemas || [],
+                                    tables: tables,
+                                    columns: [],
+                                    organizations: [],
+                                    foreignKeys: [],
+                                    selectedFields: {
+                                        schema: e,
+                                    },
+                                });
+                            }
+                            else {
+                                setSchemaDetails({
+                                    schemas: schemaDetails?.schemas || schemaError?.schemas || [],
+                                    tables: undefined,
+                                    columns: [],
+                                    organizations: [],
+                                    foreignKeys: [],
+                                    selectedFields: {
+                                        schema: e,
+                                    },
+                                });
+                                setSchemaError({
+                                    schemas: schemaDetails?.schemas || schemaError?.schemas || [],
+                                    message: "Invalid permissions. Unable to access to '" +
+                                        e +
+                                        "' schema.",
+                                    schemaName: e,
+                                });
+                            }
+                        }, selected: schemaDetails?.selectedFields?.schema || schemaError?.schemaName, label: 'Schema' }), schemaError?.schemas.length === 0 && (_jsx(ButtonPrimitive, { label: "Re-fetch", onClick: async () => {
+                            const suspectedSchema = await getSchemaTableInfo(formConnectionString(environmentDetails), 'public');
+                            if ('selectedFields' in suspectedSchema) {
+                                setSchemaError(undefined);
+                                setSchemaDetails(suspectedSchema);
+                            }
+                            else {
+                                setSchemaError(suspectedSchema);
+                            }
+                        } }))] }), schemaDetails?.tables && (_jsxs("div", { children: [_jsx("div", { style: { gap: 16 }, id: "database-details-form", children: _jsxs("div", { 
+                            // style={{
+                            //   display: 'flex',
+                            //   flexWrap: 'wrap',
+                            //   width: '100%',
+                            //   gap: '16px',
+                            // }}
+                            style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(3, 1fr)',
+                                gap: '20px',
+                                justifyContent: 'space-between',
+                                marginTop: '8px',
+                            }, children: [_jsx(DropdownMenuWithLabel, { items: schemaDetails?.tables || [], setSelected: async (e) => {
+                                        const columns = await getTableInfo(formConnectionString(environmentDetails), schemaDetails?.selectedFields?.schema, e);
+                                        setSchemaDetails({
+                                            ...schemaDetails,
+                                            columns: columns.columns,
+                                            foreignKeys: [],
+                                            organizations: [],
+                                            selectedFields: {
+                                                schema: schemaDetails?.selectedFields?.schema,
+                                                table: e,
+                                            },
+                                        });
+                                    }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                        const fkStrings = await getFKInfo(formConnectionString(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
+                                        if (schemaDetails?.selectedFields.customerNameField) {
+                                            const organizations = await getOrgInfo(formConnectionString(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
+                                            setSchemaDetails({
+                                                ...schemaDetails,
+                                                organizations: organizations,
+                                                selectedFields: {
+                                                    ...schemaDetails?.selectedFields,
+                                                    organizationIdField: e,
+                                                },
+                                            });
+                                        }
+                                        setSchemaDetails({
+                                            ...schemaDetails,
+                                            foreignKeys: fkStrings,
+                                            selectedFields: {
+                                                ...schemaDetails?.selectedFields,
+                                                organizationIdField: e,
+                                            },
+                                        });
+                                    }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                        if (schemaDetails?.selectedFields.organizationIdField) {
+                                            const organizations = await getOrgInfo(formConnectionString(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
+                                            setSchemaDetails({
+                                                ...schemaDetails,
+                                                organizations: organizations,
+                                                selectedFields: {
+                                                    ...schemaDetails?.selectedFields,
+                                                    customerNameField: e,
+                                                },
+                                            });
+                                        }
+                                        else {
+                                            setSchemaDetails({
+                                                ...schemaDetails,
+                                                selectedFields: {
+                                                    ...schemaDetails?.selectedFields,
+                                                    customerNameField: e,
+                                                },
+                                            });
+                                        }
+                                    }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
+                                        [], setSelected: async (e) => {
+                                        const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
+                                        setSchemaDetails({
+                                            ...schemaDetails,
+                                            selectedFields: {
+                                                ...schemaDetails?.selectedFields,
+                                                defaultOrg: orgObj,
+                                            },
+                                        });
+                                    }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
+                                        setSchemaDetails({
+                                            ...schemaDetails,
+                                            selectedFields: {
+                                                ...schemaDetails?.selectedFields,
+                                                foreignKey: e,
+                                            },
+                                        });
+                                    }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }) }), _jsxs("div", { style: {
+                            width: '100%',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginTop: '12px',
+                        }, children: [formError.show ? (_jsx("h2", { style: { ...header2Style, color: 'red' }, children: formError.message })) : (_jsx("div", {})), _jsx(ButtonPrimitive, { label: "Confirm", onClick: () => {
+                                    if (schemaDetails?.selectedFields?.schema &&
+                                        schemaDetails?.selectedFields?.table &&
+                                        schemaDetails?.selectedFields?.organizationIdField &&
+                                        schemaDetails?.selectedFields?.customerNameField &&
+                                        schemaDetails?.selectedFields?.defaultOrg &&
+                                        schemaDetails?.selectedFields?.foreignKey) {
+                                        propogateSchemaDetails(schemaDetails);
+                                    }
+                                    else {
+                                        setFormError({
+                                            show: true,
+                                            message: 'Please complete all dropdowns',
+                                        });
+                                    }
+                                } })] })] })), schemaError?.message && (_jsx("h2", { style: { ...header2Style, color: 'red' }, children: schemaError.message }))] }));
+}

package/dist/forms/client_onboard/CreateSqlViews.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { ColumnsByTable } from '../../utils/table';
+import { SchemaDetails } from '../../utils/schema';
+import { ConnectionType } from '../../utils/databases';
+export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, }: {
+    containerStyle?: CSSProperties;
+    header1Style?: CSSProperties;
+    header2Style?: CSSProperties;
+    columnsByTable: ColumnsByTable[];
+    environmentDetails?: ConnectionType;
+    allSchemaInfo?: SchemaDetails;
+    domainName: string | undefined;
+    completeOnboarding: (client: any) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateSqlViews.d.ts.map

package/dist/forms/client_onboard/CreateSqlViews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateSqlViews.d.ts","sourceRoot":"","sources":["../../../src/forms/client_onboard/CreateSqlViews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAanD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAG7E,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,GACnB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C,2CA8VA"}

package/dist/forms/client_onboard/CreateSqlViews.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ButtonPrimitive, ModalPrimitive, TextInputPrimitive, } from '../../primitives';
+import { SqlTextEditor, Table } from '@quillsql/react';
+import { addEnvironment, getQueryFromAI, getSqlViewData, } from '../../api/ConnectionClient';
+import { formConnectionString } from '../../utils/databases';
+import SqlViewTile from '../../components/SqlViewTile';
+export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, }) {
+    const [selectedTable, setSelectedTable] = useState(undefined);
+    const [queryInfo, setQueryInfo] = useState({
+        name: '',
+        query: '',
+    });
+    const [aiPrompt, setAIPrompt] = useState('');
+    const [errorInfo, setErrorInfo] = useState({ status: false, msg: '' });
+    const [sqlQueryError, setSqlQueryInfo] = useState({ status: false, msg: '' });
+    const [tableData, setTableData] = useState(undefined);
+    const [client, setClient] = useState(undefined);
+    const [sqlTables, setSqlTables] = useState([]);
+    const [askAIButton, setAskAIButton] = useState('Ask AI');
+    const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
+    const [showFKModal, setShowFKModal] = useState(false);
+    const addSqlView = async (override) => {
+        const results = await addEnvironment(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
+            return e.name;
+        }), override);
+        if (results.throwModal) {
+            setShowFKModal(true);
+            return;
+        }
+        if (results.success) {
+            setSqlQueryInfo({ msg: '', status: false });
+            setClient(results.client);
+            setSqlTables(results.tables);
+        }
+        else {
+            setSqlQueryInfo({ msg: results.message, status: true });
+        }
+    };
+    useEffect(() => {
+        window.scrollTo({
+            behavior: 'smooth',
+            top: 900,
+        });
+    }, []);
+    return (_jsxs("div", { style: {
+            ...containerStyle,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }, id: "create-sql-view", children: [_jsxs("div", { style: {
+                    padding: 20,
+                    paddingBottom: 12,
+                    height: 92,
+                    maxHeight: 92,
+                    minHeight: 92,
+                }, children: [_jsx("h1", { style: header1Style, children: "Add SQL Views" }), _jsx("h2", { style: { ...header2Style }, children: "Create a cleaned schema that makes it easier to write queries." })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    borderTop: 'solid 1px #e7e7e7',
+                    height: 'calc(100vh - 143px)',
+                }, children: [_jsxs("div", { id: "form-editor-table", style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: 'calc(100% - 300px)',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    gap: 12,
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 70,
+                                }, children: [_jsx(TextInputPrimitive, { onChange: (e) => {
+                                            setAIPrompt(e.target.value);
+                                        }, placeholder: 'Describe a query...', value: aiPrompt }), _jsx(ButtonPrimitive, { label: askAIButton, onClick: async () => {
+                                            setAskAIButton('Loading...');
+                                            const results = await getQueryFromAI(aiPrompt, columnsByTable);
+                                            setQueryInfo({ name: queryInfo.name, query: results });
+                                            setAskAIButton('Ask AI');
+                                        }, style: { width: '90px' } })] }), _jsx(SqlTextEditor, { value: queryInfo.query, setValue: (e) => {
+                                    setQueryInfo({ name: queryInfo.name, query: e });
+                                }, containerStyle: { paddingLeft: 16, paddingRight: 16 } }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 70,
+                                }, children: [_jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
+                                            setRunQueryButtonLabel('Querying...');
+                                            const connectionString = formConnectionString(environmentDetails);
+                                            const getSqlResults = await getSqlViewData(connectionString, queryInfo.query);
+                                            if (!getSqlResults.success) {
+                                                setErrorInfo({ status: true, msg: getSqlResults.error });
+                                            }
+                                            else {
+                                                setErrorInfo({ status: false, msg: '' });
+                                                setTableData(getSqlResults);
+                                            }
+                                            setRunQueryButtonLabel('Run query');
+                                        } }), errorInfo.status ? (_jsx("h2", { style: {
+                                            ...header2Style,
+                                            color: 'red',
+                                            paddingTop: '12px',
+                                            textTransform: 'capitalize',
+                                        }, children: errorInfo.msg })) : (_jsx("div", {}))] }), !errorInfo.status && tableData && (_jsxs("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 'calc(100vh - 515px)',
+                                }, children: [_jsx(Table, { rows: tableData.rows, columns: tableData.columns, 
+                                        // height="400px"
+                                        containerStyle: {
+                                            height: 'calc(100vh - 589px)',
+                                            width: '100%',
+                                        }, showDownloadCsvButton: false }), _jsxs("div", { style: {
+                                            width: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            height: 70,
+                                        }, children: [sqlQueryError.status ? (_jsx("h2", { style: {
+                                                    ...header2Style,
+                                                    color: 'red',
+                                                    paddingTop: '12px',
+                                                    // textTransform: 'capitalize',
+                                                }, children: sqlQueryError.msg })) : (_jsx("div", {})), _jsx(ButtonPrimitive, { label: "Add SQL View", onClick: () => addSqlView(false) })] })] }))] }), _jsxs("div", { style: {
+                            // width: '30%',
+                            background: '#fafafa',
+                            borderLeft: 'solid 1px #e7e7e7',
+                            width: 300,
+                            height: 'calc(100vh - 154px)',
+                        }, children: [_jsx("h1", { style: {
+                                    ...header1Style,
+                                    color: '#212121',
+                                    paddingLeft: 16,
+                                    height: 70,
+                                    background: 'white',
+                                    borderBottom: 'solid 1px #e7e7e7',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    alignItems: 'flex-start',
+                                }, children: "SQL Views" }), sqlTables.length > 0 ? (_jsx("div", { style: { height: 'calc(100vh - 302px)' }, children: _jsxs("div", { style: {
+                                        display: 'grid',
+                                        gridTemplateColumns: 'repeat(auto-fill, minmax(245px, 1fr))',
+                                        gridAutoRows: '200px',
+                                        gap: '10px',
+                                        overflow: 'auto',
+                                        height: 'calc(100vh - 302px)',
+                                        paddingLeft: '12px',
+                                        paddingRight: '12px',
+                                    }, children: [sqlTables.map((e) => {
+                                            return (_jsx("div", { children: _jsx(SqlViewTile, { name: e.name, query: e.viewQuery, header1Style: header1Style, header2Style: header2Style }) }, e.name));
+                                        }), _jsx("div", { style: { height: 20 } })] }) })) : (_jsx("div", { style: { paddingLeft: 12, paddingRight: 12 }, children: _jsx("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        border: 'dashed 1px #C5C5C5',
+                                        marginTop: '12px',
+                                        borderRadius: 6,
+                                        height: 200,
+                                    }, children: _jsxs("h2", { style: {
+                                            ...header2Style,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            color: '#565656',
+                                            textAlign: 'center',
+                                        }, children: ['No SQL views yet.', _jsx("br", {}), 'Add one with the SQL editor.'] }) }) })), sqlTables.length > 0 ? (_jsx("div", { style: {
+                                    display: 'flex',
+                                    justifyContent: 'flex-end',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    height: 70,
+                                    paddingRight: 12,
+                                    background: 'white',
+                                    borderTop: 'solid 1px #e7e7e7',
+                                }, children: _jsx(ButtonPrimitive, { label: "Go to dashboard", onClick: () => {
+                                        completeOnboarding(client);
+                                    }, style: { width: 276 } }) })) : null] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addSqlView, foreignKey: allSchemaInfo?.selectedFields.foreignKey, tableName: allSchemaInfo?.selectedFields.table })] }));
+}
+function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }) {
+    return (_jsx(ModalPrimitive, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '600px' }, children: [_jsx("h1", { style: {
+                        fontSize: 24,
+                        fontWeight: 600,
+                        color: '#212121',
+                        paddingBottom: 14,
+                    }, children: `Organization Foreign Key "${foreignKey}" Not Found` }), _jsxs("div", { style: { marginBottom: '12px' }, children: [`Your organization table `, _jsx("strong", { children: `"${tableName}"` }), ` foreign key  `, _jsx("strong", { children: `"${foreignKey}"` }), " is not present in the current query. If this query will never have organization specific data on it (this is rare), override this message.`"] }), _jsx("br", {}), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '12px',
+                        justifyContent: 'flex-end',
+                    }, children: [_jsx(ButtonPrimitive, { label: "Got It", onClick: () => setIsOpen(false) }), _jsx(ButtonPrimitive, { label: "Override", variant: "danger", onClick: () => {
+                                override(true);
+                                setIsOpen(false);
+                            } })] })] }) }));
+}

package/dist/hooks/useItemBeingEdited.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export declare const useItemBeingEdited: () => void;
+export declare const ItemBeingEditedProvider: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=useItemBeingEdited.d.ts.map

package/dist/hooks/useItemBeingEdited.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useItemBeingEdited.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemBeingEdited.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAsCf,eAAO,MAAM,kBAAkB,YAI9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,4CAM/D,CAAC"}

package/dist/hooks/useItemBeingEdited.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { createContext, useContext, useReducer, } from 'react';
+/**
+ * The actual context that this hook will monitor.
+ */
+const ItemBeingEditedContext = createContext(null);
+const reducer = (_, action) => {
+    switch (action.type) {
+        case 'SET_ITEM': {
+            return action.value;
+        }
+        case 'CLEAR_ITEM': {
+            return null;
+        }
+        // No default necessary because action.type is a union of string literals
+    }
+};
+export const useItemBeingEdited = () => {
+    const [todos, dispatch] = useReducer(reducer, null);
+    const foo = useContext(ItemBeingEditedContext);
+};
+export const ItemBeingEditedProvider = (props) => {
+    return (_jsx(ItemBeingEditedContext.Provider, { value: { state, dispatch }, children: children }));
+};

package/{lib → dist}/icons/ArrowDownHeadIcon.d.ts

@@ -2,3 +2,4 @@ declare const ArrowDownHeadIcon: ({ ...props }: {
     [x: string]: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ArrowDownHeadIcon;
+//# sourceMappingURL=ArrowDownHeadIcon.d.ts.map

package/dist/icons/ArrowDownHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/icons/ArrowDownHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
+export default ArrowDownHeadIcon;

package/dist/icons/XMarkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function XMarkIcon(props: any): JSX.Element;
+//# sourceMappingURL=XMarkIcon.d.ts.map

package/dist/icons/XMarkIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XMarkIcon.d.ts","sourceRoot":"","sources":["../../src/icons/XMarkIcon.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA4BzD"}

package/dist/icons/XMarkIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function XMarkIcon(props) {
+    return (_jsx("div", { style: {
+            height: 38,
+            width: 42,
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            cursor: 'pointer',
+        }, ...props, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: props.fill || '#4C5462', width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }));
+}

package/dist/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ArrowDownHeadIcon } from './ArrowDownHeadIcon';
+//# sourceMappingURL=index.d.ts.map