@quillsql/admin 1.4.0 → 1.6.0

package/dist/esm/forms/client_onboard/ConnectSchema.js

@@ -1,12 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ButtonPrimitive } from '../../primitives';
+import { ButtonPrimitive, TextInputPrimitive } from '../../primitives';
 import DropdownMenuWithLabel from '../../components/DropDownMenuWithLabel';
-import { getFKInfo, getOrgInfo, getSchemaTableInfo, getTableInfo, getTablesBySchema, } from '../../api/ConnectionClient';
-export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }) {
+import { getFKInfo, getOrgInfo, getSchemaTableInfo, getSqlViewData, getTableInfo, getTablesBySchema, processCustomerOrgViewQuery, } from '../../api/ConnectionClient';
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, state, }) {
     const [schemaDetails, setSchemaDetails] = useState(allSchemaInfo);
     const [schemaError, setSchemaError] = useState(initialError);
     const [formError, setFormError] = useState({ show: false, message: '' });
+    const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
+    const [errorInfo, setErrorInfo] = useState({ status: false, msg: '' });
+    const [customerViewQuery, setCustomerViewQuery] = useState('');
+    const handleQuerySuccess = async (getSqlResults) => {
+        const processedResults = await processCustomerOrgViewQuery(customerViewQuery, allSchemaInfo?.selectedFields.schema || '', clientId);
+        if (processedResults.success === false) {
+            setErrorInfo({
+                status: true,
+                msg: processedResults.message || 'Failed to process the query.',
+            });
+            return;
+        }
+        setSchemaDetails({
+            ...schemaDetails,
+            // @ts-ignore
+            selectedFields: {
+                ...schemaDetails?.selectedFields,
+                table: processedResults.table,
+                organizationIdField: 'id',
+                customerNameField: 'name',
+                customerView: customerViewQuery,
+            },
+            customQueryFKs: processedResults.fkInfo,
+            customQueryOrganizations: getSqlResults.rows,
+        });
+    };
     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%',
@@ -60,92 +86,141 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
                             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, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
-                                        const columns = await getTableInfo(clientId, 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, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
-                                        const fkStrings = await getFKInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
-                                        if (schemaDetails?.selectedFields.customerNameField) {
-                                            const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
+                        } }))] }), schemaDetails?.tables && (_jsxs("div", { children: [_jsxs("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, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
+                                            const columns = await getTableInfo(clientId, schemaDetails?.selectedFields?.schema, e);
                                             setSchemaDetails({
                                                 ...schemaDetails,
-                                                organizations: organizations,
+                                                columns: columns.columns,
+                                                foreignKeys: [],
+                                                organizations: [],
+                                                selectedFields: {
+                                                    schema: schemaDetails?.selectedFields?.schema,
+                                                    table: e,
+                                                },
+                                            });
+                                        }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                            const fkStrings = await getFKInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
+                                            if (schemaDetails?.selectedFields.customerNameField) {
+                                                const organizations = await getOrgInfo(clientId, 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,
                                                 },
                                             });
-                                        }
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            foreignKeys: fkStrings,
-                                            selectedFields: {
-                                                ...schemaDetails?.selectedFields,
-                                                organizationIdField: e,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
-                                        if (schemaDetails?.selectedFields.organizationIdField) {
-                                            const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
+                                        }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                            if (schemaDetails?.selectedFields.organizationIdField) {
+                                                const organizations = await getOrgInfo(clientId, 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, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
+                                            [], setSelected: async (e) => {
+                                            const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
                                             setSchemaDetails({
                                                 ...schemaDetails,
-                                                organizations: organizations,
                                                 selectedFields: {
                                                     ...schemaDetails?.selectedFields,
-                                                    customerNameField: e,
+                                                    defaultOrg: orgObj,
                                                 },
                                             });
-                                        }
-                                        else {
+                                        }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
                                             setSchemaDetails({
                                                 ...schemaDetails,
                                                 selectedFields: {
                                                     ...schemaDetails?.selectedFields,
-                                                    customerNameField: e,
+                                                    foreignKey: e,
                                                 },
                                             });
-                                        }
-                                    }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, 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, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            selectedFields: {
-                                                ...schemaDetails?.selectedFields,
-                                                foreignKey: e,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }) }), _jsxs("div", { style: {
+                                        }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), _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' } })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: "#6e6e6e" }, children: "Customer Organization View" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [_jsx(TextInputPrimitive, { onChange: (e) => {
+                                                            setCustomerViewQuery(e.target.value);
+                                                        }, value: customerViewQuery }), _jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
+                                                            setRunQueryButtonLabel('Querying...');
+                                                            const getSqlResults = await getSqlViewData(clientId, customerViewQuery, environmentDetails.type, state.queryEndpoint);
+                                                            if (!getSqlResults.success) {
+                                                                setErrorInfo({
+                                                                    status: true,
+                                                                    msg: getSqlResults.error,
+                                                                });
+                                                            }
+                                                            else {
+                                                                setErrorInfo({ status: false, msg: '' });
+                                                                handleQuerySuccess(getSqlResults);
+                                                            }
+                                                            setRunQueryButtonLabel('Run query');
+                                                        }, 
+                                                        // dont let the font wrap
+                                                        style: { whiteSpace: 'nowrap' } })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.customQueryOrganizations?.map((orgObj) => orgObj.name) || [], setSelected: async (e) => {
+                                                    const orgObj = schemaDetails?.customQueryOrganizations?.find((orgObj) => orgObj.name === e);
+                                                    setSchemaDetails({
+                                                        ...schemaDetails,
+                                                        selectedFields: {
+                                                            ...schemaDetails?.selectedFields,
+                                                            defaultOrg: orgObj,
+                                                        },
+                                                    });
+                                                }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.customQueryFKs || [], setSelected: async (e) => {
+                                                    setSchemaDetails({
+                                                        ...schemaDetails,
+                                                        selectedFields: {
+                                                            ...schemaDetails?.selectedFields,
+                                                            foreignKey: e,
+                                                        },
+                                                    });
+                                                }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), errorInfo.status ? (_jsx("h2", { style: {
+                                            ...header2Style,
+                                            color: 'red',
+                                            paddingTop: '12px',
+                                        }, children: errorInfo.msg })) : (_jsx("div", {}))] })] }), _jsxs("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',

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

@@ -1 +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,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAa3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAK7E,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,KAAK,GACN,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;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,2CAiWA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,2CAiDA"}
+{"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,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAY3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAS7E,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,KAAK,GACN,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;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,2CA0ZA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,2CAiDA"}

package/dist/esm/forms/client_onboard/CreateSqlViews.js

@@ -4,7 +4,8 @@ import { ButtonPrimitive, ModalPrimitive, TextInputPrimitive, } from '../../prim
 import { createSQLView, getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
 import SqlViewTile from '../../components/SqlViewTile';
 import SqlTextEditor from '../../components/SqlTextEditor';
-import { QuillTable } from '@quillsql/react';
+import { SchemaListComponent, Table } from '@quillsql/react';
+import { LoadingSpinner, } from '../../components/UiComponents';
 export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }) {
     const [selectedTable, setSelectedTable] = useState(undefined);
     const [queryInfo, setQueryInfo] = useState({
@@ -17,9 +18,11 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
     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 [askAIButtonLoading, setAskAIButtonLoading] = useState(false);
+    const [runQueryButtonLoading, setRunQueryButtonLoading] = useState(false);
     const [showFKModal, setShowFKModal] = useState(false);
+    const [tableSearchQuery, setTableSearchQuery] = useState('');
+    const [displayedTableData, setDisplayedTableData] = useState(columnsByTable);
     const addSqlView = async (override) => {
         const results = await createSQLView(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
             return e.name;
@@ -37,6 +40,15 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
             setSqlQueryInfo({ msg: results.message, status: true });
         }
     };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (queryInfo.query && queryInfo.query.length > 0) {
+            await navigator.clipboard.writeText(name || '');
+        }
+        else {
+            setQueryInfo({ name: queryInfo.name, query: `SELECT * FROM ${name}` });
+        }
+    };
     useEffect(() => {
         window.scrollTo({
             behavior: 'smooth',
@@ -58,7 +70,24 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                     flexDirection: 'row',
                     borderTop: 'solid 1px #e7e7e7',
                     height: 'calc(100vh - 143px)',
-                }, children: [_jsxs("div", { id: "form-editor-table", style: {
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx("div", { style: {
+                                    paddingLeft: '20px',
+                                    paddingRight: '30px',
+                                    height: 70,
+                                    minHeight: 70,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, children: _jsx(TextInputPrimitive, { placeholder: "Search...", 
+                                    // @ts-ignore
+                                    onChange: (e) => {
+                                        setTableSearchQuery(e.target.value);
+                                        setDisplayedTableData(columnsByTable.filter((table) => table.tableName
+                                            .toLowerCase()
+                                            .includes(e.target.value.toLowerCase().trim())));
+                                    }, value: tableSearchQuery, width: "100%" }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, width: '300px', loading: false, LoadingComponent: LoadingSpinner, onClick: handleClickSchemaItem })] }), _jsxs("div", { id: "form-editor-table", style: {
                             display: 'flex',
                             flexDirection: 'column',
                             width: 'calc(100% - 300px)',
@@ -73,13 +102,13 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                     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...');
+                                        }, placeholder: 'Describe a query...', value: aiPrompt }), _jsx(ButtonPrimitive, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: async () => {
+                                            setAskAIButtonLoading(true);
                                             const results = await getQueryFromAiWithConnection(aiPrompt, clientId, allSchemaInfo?.selectedFields.schema
                                                 ? [allSchemaInfo?.selectedFields.schema]
                                                 : undefined);
                                             setQueryInfo({ name: queryInfo.name, query: results });
-                                            setAskAIButton('Ask AI');
+                                            setAskAIButtonLoading(false);
                                         }, style: { width: '90px' } })] }), _jsx(SqlTextEditor, { value: queryInfo.query, setValue: (e) => {
                                     setQueryInfo({ name: queryInfo.name, query: e });
                                 }, containerStyle: { paddingLeft: 16, paddingRight: 16 } }), _jsxs("div", { style: {
@@ -90,8 +119,8 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                     paddingLeft: 16,
                                     paddingRight: 16,
                                     height: 70,
-                                }, children: [_jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
-                                            setRunQueryButtonLabel('Querying...');
+                                }, children: [_jsx(ButtonPrimitive, { label: 'Run query', onClick: async () => {
+                                            setRunQueryButtonLoading(true);
                                             const getSqlResults = await getSqlViewData(clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint);
                                             if (!getSqlResults.success) {
                                                 setErrorInfo({ status: true, msg: getSqlResults.error });
@@ -100,7 +129,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                                 setErrorInfo({ status: false, msg: '' });
                                                 setTableData(getSqlResults);
                                             }
-                                            setRunQueryButtonLabel('Run query');
+                                            setRunQueryButtonLoading(false);
                                         } }), errorInfo.status ? (_jsx("h2", { style: {
                                             ...header2Style,
                                             color: 'red',
@@ -110,10 +139,10 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                     paddingLeft: 16,
                                     paddingRight: 16,
                                     height: 'calc(100vh - 515px)',
-                                }, children: [_jsx(QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
+                                }, children: [_jsx(Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
                                             height: 'calc(100vh - 589px)',
                                             width: '100%',
-                                        }, showDownloadCSVButton: true }), _jsxs("div", { style: {
+                                        }, hideCSVDownloadButton: true }), _jsxs("div", { style: {
                                             width: '100%',
                                             display: 'flex',
                                             justifyContent: 'space-between',

package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-import { ButtonComponentProps, TextInputComponentProps, HeaderProps } from '@quillsql/react';
+import { ButtonComponentProps } from '@quillsql/react';
+import { ReactNode } from 'react';
+import { TextInputComponentProps } from '../../components/UiComponents';
 import { ColumnsByTable } from '../../utils/table';
 interface CreateEditSqlViewProps {
     containerStyle: React.CSSProperties;
@@ -12,9 +13,11 @@ interface CreateEditSqlViewProps {
     SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
     TextInput?: (props: TextInputComponentProps) => JSX.Element;
     LoadingComponent?: () => JSX.Element;
-    Header?: (props: HeaderProps) => JSX.Element;
+    Header?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
     closeEditView: () => void;
-    addEditView: (request: string, query: string, name?: string, id?: string) => void;
+    addEditView: (request: string, query: string, name?: string, id?: string, columns?: any[]) => void;
     allTableData: ColumnsByTable[];
     schemaIsLoading: boolean;
 }

package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,oBAAoB,EAEpB,uBAAuB,EACvB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAwBzB,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAK3D,UAAU,sBAAsB;IAC9B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,KACR,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,wBAAwB,EACxB,gBAA2C,EAC3C,MAAuB,EACvB,SAA6B,EAC7B,MAAuB,EACvB,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAuStC"}
+{"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAKrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AASf,OAAO,EAML,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAI3D,UAAU,sBAAsB;IAC9B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,GAAG,EAAE,KACZ,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,wBAAwB,EACxB,gBAA2C,EAC3C,MAAuB,EACvB,SAA6B,EAC7B,MAAuB,EACvB,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAgUtC"}

package/dist/esm/forms/sql_views/CreateEditSqlView.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { QuillTable } from '@quillsql/react';
-import { useEffect, useState } from 'react';
+import { Table, SchemaListComponent, } from '@quillsql/react';
+import { useEffect, useState, } from 'react';
 import { useAdmin } from '../../AdminProvider';
 import { getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
 import SqlTextEditor from '../../components/SqlTextEditor';
 import { LoadingSpinner, MemoizedButton, MemoizedHeader, MemoizedTextInput, } from '../../components/UiComponents';
-import { SchemaListComponent } from '@quillsql/react';
 import { ForeignKeyModal } from '../client_onboard/CreateSqlViews';
 import DynamicBanner from '../../components/DynamicBanner';
 export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent = () => _jsx(LoadingSpinner, {}), Button = MemoizedButton, TextInput = MemoizedTextInput, Header = MemoizedHeader, allTableData, schemaIsLoading, }) {
     const [name, setName] = useState(initialSqlView?.name || '');
     const [editViewQuery, setEditViewQuery] = useState(initialSqlView?.query || '');
     const [ranViewQuery, setRanViewQuery] = useState(initialSqlView?.query || '');
-    const [askAIButton, setAskAIButton] = useState('Ask AI');
+    const [askAIButtonLoading, setAskAIButtonLoading] = useState(false);
+    const [runQueryButtonLoading, setRunQueryButtonLoading] = useState(false);
     const [aiPrompt, setAIPrompt] = useState('');
-    const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
     const [viewAddable, setViewAddable] = useState(false);
     const [showFKModal, setShowFKModal] = useState(false);
     const [overrideFKCheck, setOverrideFKCheck] = useState(false);
@@ -31,7 +30,7 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
             setShowFKModal(true);
             return;
         }
-        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined);
+        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined, tableData?.fields || []);
     };
     useEffect(() => {
         setDisplayedTableData(allTableData);
@@ -39,19 +38,28 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
     const handleRunSqlPrompt = async () => {
         setErrorInfo({ show: false, message: '' });
         setViewAddable(false);
-        setAskAIButton('Loading...');
+        setAskAIButtonLoading(true);
         const results = await getQueryFromAiWithConnection(aiPrompt, state.client._id, state.client.schemaNames);
         setOverrideFKCheck(false);
         setEditViewQuery(results);
-        setAskAIButton('Ask AI');
+        setAskAIButtonLoading(false);
+    };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (editViewQuery && editViewQuery.length > 0) {
+            await navigator.clipboard.writeText(name || '');
+        }
+        else {
+            setEditViewQuery(`SELECT * FROM ${name}`);
+        }
     };
     const handleRunQuery = async () => {
         const query = editViewQuery;
         // If this query has a limit at the end alert the user
-        if (query.toLowerCase().includes(' limit ')) {
+        if (/limit\s+\d+\s*;?\s*$/i.test(query)) {
             setErrorInfo({
                 show: true,
-                message: 'Error: Please remove the limit on you query.',
+                message: 'Error: Please remove the limit at the end of your query.',
             });
             return;
         }
@@ -59,11 +67,11 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
         setErrorInfo({ show: false, message: '' });
         setTableData(undefined);
         setIsLoading(true);
-        setRunQueryButtonLabel('Querying...');
+        setRunQueryButtonLoading(true);
         setOverrideFKCheck(false);
         if (editViewQuery.length === 0) {
             setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
-            setRunQueryButtonLabel('Run query');
+            setRunQueryButtonLoading(false);
             return;
         }
         const resp = await getSqlViewData(state.client._id, query, state.client.databaseType, state.queryEndpoint);
@@ -71,12 +79,21 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
             setErrorInfo({ show: true, message: resp.error });
             setTableData(undefined);
             setViewAddable(false);
-            setRunQueryButtonLabel('Run query');
+            setRunQueryButtonLoading(false);
             setIsLoading(false);
             return;
         }
-        setRunQueryButtonLabel('Run query');
+        setRunQueryButtonLoading(false);
         setErrorInfo({ show: false, message: '' });
+        // stringify all rows that are either jsonb or json
+        resp.rows = resp.rows.map((row) => {
+            for (const key in row) {
+                if (typeof row[key] === 'object') {
+                    row[key] = JSON.stringify(row[key]);
+                }
+            }
+            return row;
+        });
         setTableData(resp);
         setViewAddable(true);
         setRanViewQuery(query);
@@ -112,11 +129,11 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
                                         paddingLeft: '20px',
                                         paddingRight: '30px',
                                     }, children: _jsx(TextInput, { placeholder: "Search...", onChange: (e) => {
-                                            setTableSearchQuery(e);
+                                            setTableSearchQuery(e.target.value);
                                             setDisplayedTableData(allTableData.filter((table) => table.tableName
                                                 .toLowerCase()
-                                                .includes(e.toLowerCase().trim())));
-                                        }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), _jsxs("div", { style: {
+                                                .includes(e.target.value.toLowerCase().trim())));
+                                        }, value: tableSearchQuery, id: 'edit-name', width: '100%' }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px', onClick: handleClickSchemaItem })] }), _jsxs("div", { style: {
                                 display: 'flex',
                                 gap: 20,
                                 flexDirection: 'column',
@@ -132,11 +149,10 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
                                         gap: 20,
                                         width: '100%',
                                     }, children: [_jsx(TextInput, { onChange: (e) => {
-                                                setAIPrompt(e);
-                                            }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '95%' }), _jsx(Button, { label: askAIButton, onClick: handleRunSqlPrompt, width: "100px" })] }), _jsx(SqlTextEditor, { value: editViewQuery, setValue: (e) => {
-                                        setErrorInfo({ show: false, message: '' });
+                                                setAIPrompt(e.target.value);
+                                            }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '100%' }), _jsx(Button, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: handleRunSqlPrompt })] }), _jsx(SqlTextEditor, { value: editViewQuery, setValue: (e) => {
                                         setEditViewQuery(e);
-                                    } }), _jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: runQueryButtonLabel, onClick: handleRunQuery }) }), errorInfo.show ? (_jsx("div", { style: {
+                                    } }), _jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: 'Run query', isLoading: runQueryButtonLoading, onClick: handleRunQuery }) }), errorInfo.show ? (_jsx("div", { style: {
                                         fontSize: 15,
                                         fontWeight: '400',
                                     }, children: _jsx("div", { style: {
@@ -151,5 +167,5 @@ export default function CreateEditSqlView({ containerStyle, initialSqlView, clos
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
-                                    }, children: _jsx(LoadingComponent, {}) })), tableData && (_jsx(QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
+                                    }, children: _jsx(LoadingComponent, {}) })), tableData && (_jsx(Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
 }

package/dist/esm/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+declare const useOnClickOutside: (ref: React.RefObject<HTMLDivElement>, handler: (event: any) => void) => void;
+export default useOnClickOutside;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/esm/hooks/useOnClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnClickOutside.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,QAChB,MAAM,SAAS,CAAC,cAAc,CAAC,mBACjB,GAAG,KAAG,IAAI,SAgB9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/hooks/useOnClickOutside.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+const useOnClickOutside = (ref, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+};
+export default useOnClickOutside;

package/dist/esm/modals/EditFiltersModal.d.ts

@@ -0,0 +1,17 @@
+export declare function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
+    isOpen: boolean;
+    dashboardData: any;
+    selectedDashboard: any;
+    client: any;
+    setIsOpen: any;
+    onSave: any;
+    openEditOrderModal: any;
+    ModalComponent: any;
+    TextInputComponent: any;
+    ButtonComponent: any;
+    HeaderComponent: any;
+    SelectComponent: any;
+    dashNames: any;
+    SecondaryButtonComponent: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditFiltersModal.d.ts.map

package/dist/esm/modals/EditFiltersModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAeA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA8mBA"}