@quillsql/admin 1.6.3 → 1.7.0

package/dist/cjs/forms/client_onboard/CreateVirtualTables.js

@@ -20,6 +20,7 @@ const columnProcessing_1 = require("../../utils/columnProcessing");
 const AdminProvider_1 = require("../../AdminProvider");
 const constants_1 = require("../../utils/constants");
 const prism_react_renderer_1 = require("prism-react-renderer");
+const useLongLoading_1 = require("../../hooks/useLongLoading");
 function CreateVirtualTables({ containerStyle, header1Style, header2Style, environmentDetails, databaseSchema, completeOnboarding, client, state, tenantInit, isLoading, sqlTables, setSqlTables, }) {
     const [queryInfo, setQueryInfo] = (0, react_2.useState)({
         name: '',
@@ -33,11 +34,24 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
     const [openModalButtonLoading, setOpenModalButtonLoading] = (0, react_2.useState)(false);
     const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_2.useState)(false);
     const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_2.useState)(false);
+    (0, useLongLoading_1.useLongLoading)(openModalButtonLoading, {
+        origin: 'CreateVirtualTables',
+        loadDescription: 'Opening virtual table modal',
+    });
+    (0, useLongLoading_1.useLongLoading)(askAIButtonLoading, {
+        origin: 'CreateVirtualTables',
+        loadDescription: 'Asking AI',
+    });
+    (0, useLongLoading_1.useLongLoading)(runQueryButtonLoading, {
+        origin: 'CreateVirtualTables',
+        loadDescription: 'Running query',
+    });
     const [failingTenant, setFailingTenant] = (0, react_2.useState)(undefined);
+    const [failingTenantErrorType, setFailingTenantErrorType] = (0, react_2.useState)(undefined);
     const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
     const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(databaseSchema);
     const middleColumn = (0, react_2.useRef)(null);
-    const { getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    const { getToken, quillFetchWithToken, eventTracking } = (0, AdminProvider_1.useAdmin)();
     (0, react_2.useEffect)(() => {
         const scrollToBottom = () => {
             // Scroll to the bottom of the container (or page)
@@ -66,6 +80,7 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
         }) ?? [], client.clientId, tenantField === constants_1.SINGLE_TENANT || override ? [] : [tenantField], state.queryEndpoint, state.queryHeaders, getToken);
         if (results.failingTenant) {
             setFailingTenant(results.failingTenant);
+            setFailingTenantErrorType(results.failingTenantErrorType);
             return;
         }
         if (results.success && results.tables) {
@@ -160,7 +175,7 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
                                             whiteSpace: 'normal',
                                         }, displayBelow: true, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: async () => {
                                                 setAskAIButtonLoading(true);
-                                                const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(state.queryEndpoint, aiPrompt, client.clientId, getToken, client.schemaNames);
+                                                const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(state.isSelfHosted, databaseSchema, state.queryEndpoint, aiPrompt, client.clientId, getToken, client.schemaNames, state.queryHeaders);
                                                 setQueryInfo({ name: queryInfo.name, query: results });
                                                 setAskAIButtonLoading(false);
                                             }, style: { width: '90px' }, disabled: aiPrompt.trim().length > 500 }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-sql-text-editor", children: (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: queryInfo.query, setValue: (e) => {
@@ -169,7 +184,7 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
                                         paddingLeft: 16,
                                         paddingRight: 16,
                                         marginTop: 2,
-                                    }, schema: displayedTableData, databaseType: environmentDetails?.type, resizable: false }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }, schema: databaseSchema, databaseType: environmentDetails?.type, resizable: false }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     paddingTop: 12,
@@ -178,7 +193,7 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
                                     height: 70,
                                 }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Run query', isLoading: runQueryButtonLoading, onClick: async () => {
                                             setRunQueryButtonLoading(true);
-                                            const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(client.clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint, getToken);
+                                            const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(client.clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint, getToken, eventTracking, client.queryHeaders);
                                             if (!getSqlResults.success) {
                                                 setErrorInfo({ status: true, msg: getSqlResults.error });
                                             }
@@ -218,6 +233,7 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
                                                         const duplicateColumns2 = (0, VirtualTableManager_1.getDuplicateColumns)(tableData?.fields);
                                                         if (duplicateColumns2.length > 0) {
                                                             alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns2.join('\n')}`);
+                                                            setOpenModalButtonLoading(false);
                                                             return;
                                                         }
                                                         const clientId = client?.publicKey || client?.clientId;
@@ -312,18 +328,21 @@ function CreateVirtualTables({ containerStyle, header1Style, header2Style, envir
                                         completeOnboarding();
                                     }, style: {
                                     // marginBottom: -8,
-                                    }, isLoading: isLoading }) })) : null] })] }), (0, jsx_runtime_1.jsx)(TenantFieldModal, { isOpen: !!failingTenant, setClosed: () => setFailingTenant(undefined), tenant: failingTenant, onOverride: () => addVirtualTable(true) }), (0, jsx_runtime_1.jsx)(VirtualTableModal, { isOpen: virtualTableModalOpen, setIsOpen: setVirtualTableModalOpen, queryInfo: queryInfo, setQueryInfo: setQueryInfo, addVirtualTable: () => addVirtualTable(false) })] }));
+                                    }, isLoading: isLoading }) })) : null] })] }), (0, jsx_runtime_1.jsx)(TenantFieldModal, { isOpen: !!failingTenant, setClosed: () => setFailingTenant(undefined), tenant: failingTenant, onOverride: () => addVirtualTable(true), errorType: failingTenantErrorType }), (0, jsx_runtime_1.jsx)(VirtualTableModal, { isOpen: virtualTableModalOpen, setIsOpen: setVirtualTableModalOpen, queryInfo: queryInfo, setQueryInfo: setQueryInfo, addVirtualTable: () => addVirtualTable(false) })] }));
 }
 function VirtualTableModal({ isOpen, setIsOpen, queryInfo, setQueryInfo, addVirtualTable, }) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: isOpen, onClose: () => {
             setIsOpen(false);
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                         fontSize: 24,
+                        fontFamily: theme.fontFamily,
                         fontWeight: 600,
                         color: '#212121',
                         paddingBottom: 20,
                     }, children: "Add Virtual Table" }), (0, jsx_runtime_1.jsx)("h3", { style: {
                         fontWeight: '600',
+                        fontFamily: theme.fontFamily,
                         fontSize: '14px',
                         marginBottom: '6px',
                         color: '#212121',
@@ -333,6 +352,7 @@ function VirtualTableModal({ isOpen, setIsOpen, queryInfo, setQueryInfo, addVirt
                         setQueryInfo({ name: e.target.value, query: queryInfo.query });
                     }, placeholder: "Name..." }), (0, jsx_runtime_1.jsx)("h3", { style: {
                         fontWeight: '600',
+                        fontFamily: theme.fontFamily,
                         fontSize: '14px',
                         marginBottom: '6px',
                         marginTop: '12px',
@@ -364,32 +384,50 @@ function VirtualTableModal({ isOpen, setIsOpen, queryInfo, setQueryInfo, addVirt
                                 setIsOpen(false);
                             } })] })] }) }));
 }
-function TenantFieldModal({ isOpen, setClosed, tenant, onOverride, }) {
+function TenantFieldModal({ isOpen, setClosed, tenant, onOverride, errorType = 'missing', }) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: isOpen, onClose: () => setClosed(), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '500px' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                         fontSize: 24,
                         fontWeight: 600,
                         color: '#212121',
                         paddingBottom: 14,
-                    }, children: "Foreign Key Missing" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
-                                color: '#212121',
-                                fontWeight: 600,
-                                backgroundColor: '#f7f7f7',
-                                padding: '2px 4px',
-                                borderRadius: 4,
-                                border: '1px solid #e0e0e0',
-                            }, children: tenant?.name }), "'s foreign key", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
-                                color: 'red',
-                                fontWeight: 600,
-                                backgroundColor: '#f7f7f7',
-                                padding: '2px 4px',
-                                borderRadius: 4,
-                                border: '1px solid #e0e0e0',
-                            }, children: tenant?.tenantField.replaceAll('"', '') }), ' ', "is not present in the current query to allow for filtering.", onOverride ? ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "Only override if this data is meant to be accessible by", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "every tenant" }), " (this is rare)"] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "If this tenant is not meant to filter this data, remove it from the owners dropdown"] }))] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        fontFamily: theme.fontFamily,
+                    }, children: errorType === 'missing'
+                        ? 'Foreign Key Missing'
+                        : 'Foreign Key Type Mismatch' }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '12px', fontFamily: theme.fontFamily }, children: errorType === 'missing' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                    color: '#212121',
+                                    fontWeight: 600,
+                                    backgroundColor: '#f7f7f7',
+                                    padding: '2px 4px',
+                                    borderRadius: 4,
+                                    border: '1px solid #e0e0e0',
+                                }, children: tenant?.name }), "'s foreign key", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                    color: 'red',
+                                    fontWeight: 600,
+                                    backgroundColor: '#f7f7f7',
+                                    padding: '2px 4px',
+                                    borderRadius: 4,
+                                    border: '1px solid #e0e0e0',
+                                }, children: tenant?.tenantField.replaceAll('"', '') }), ' ', "is not present in the current query to allow for filtering.", onOverride ? ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "Only override if this data is meant to be accessible by", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "every tenant" }), " (this is rare)"] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "If this tenant is not meant to filter this data, remove it from the owners dropdown"] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["The foreign key", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                    color: 'red',
+                                    fontWeight: 600,
+                                    backgroundColor: '#f7f7f7',
+                                    padding: '2px 4px',
+                                    borderRadius: 4,
+                                    border: '1px solid #e0e0e0',
+                                }, children: tenant?.tenantField.replaceAll('"', '') }), ' ', "in your query has a type that does not match the tenant ID type for", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                    color: '#212121',
+                                    fontWeight: 600,
+                                    backgroundColor: '#f7f7f7',
+                                    padding: '2px 4px',
+                                    borderRadius: 4,
+                                    border: '1px solid #e0e0e0',
+                                }, children: tenant?.name }), ". Please modify your query to ensure the foreign key type matches the tenant ID type."] })) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',
                         justifyContent: 'flex-end',
-                    }, children: [onOverride && ((0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Override", onClick: () => {
+                    }, children: [onOverride && errorType === 'missing' && ((0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Override", onClick: () => {
                                 onOverride();
                                 setClosed();
                             } })), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Got It", onClick: () => setClosed() })] })] }) }));

package/dist/cjs/forms/client_onboard/__tests__/ConnectSchema.test.js

@@ -69,6 +69,7 @@ describe('ConnectSchema', () => {
     const mockGetToken = jest.fn();
     const mockQuillFetchWithToken = jest.fn();
     const mockState = {
+        isSelfHosted: false,
         queryEndpoint: 'http://test-endpoint',
         loading: true,
         publicKey: 'test-key',
@@ -95,7 +96,7 @@ describe('ConnectSchema', () => {
         theme: Admin_1.defaultTheme,
         organizationIdSet: false,
         dateFilter: {},
-        domainName: '',
+        clerkOrgId: '',
         databaseTypeMismatch: { show: false, backendDatabaseType: '' },
         selectedTenantField: undefined,
         selectedTenantValues: undefined,

package/dist/cjs/forms/client_onboard/__tests__/CreateVirtualTables.test.js

@@ -52,6 +52,7 @@ describe('CreateVirtualTables', () => {
     const mockGetToken = jest.fn();
     const mockQuillFetchWithToken = jest.fn();
     const mockState = {
+        isSelfHosted: false,
         queryEndpoint: 'http://test-endpoint',
         loading: true,
         publicKey: 'test-key',
@@ -79,7 +80,7 @@ describe('CreateVirtualTables', () => {
         theme: Admin_1.defaultTheme,
         organizationIdSet: false,
         dateFilter: {},
-        domainName: '',
+        clerkOrgId: '',
         databaseTypeMismatch: { show: false, backendDatabaseType: '' },
         selectedTenantField: undefined,
         selectedTenantValues: undefined,

package/dist/cjs/forms/virtual_tables/CreateEditVirtualTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEditVirtualTable.d.ts","sourceRoot":"","sources":["../../../../src/forms/virtual_tables/CreateEditVirtualTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAOL,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAU,cAAc,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAO/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD,UAAU,2BAA2B;IACnC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,EAAE,CACnB,OAAO,EAAE,KAAK,GAAG,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,MAAM,EAAE,EAC3B,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,GAAG,EAAE,EACf,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,mBAAmB,EACxC,gBAA2C,EAC3C,eAAgC,EAChC,wBAAkD,EAClD,SAA6B,EAC7B,YAAY,EACZ,eAAe,EACf,MAAM,GACP,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CAqgB3C"}
+{"version":3,"file":"CreateEditVirtualTable.d.ts","sourceRoot":"","sources":["../../../../src/forms/virtual_tables/CreateEditVirtualTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAOL,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEL,cAAc,EACd,KAAK,IAAI,SAAS,EACnB,MAAM,mBAAmB,CAAC;AAW3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD,UAAU,2BAA2B;IACnC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,EAAE,CACnB,OAAO,EAAE,KAAK,GAAG,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,MAAM,EAAE,EAC3B,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,GAAG,EAAE,EACf,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,mBAAmB,EACxC,gBAA2C,EAC3C,eAAgC,EAChC,wBAAkD,EAClD,SAA6B,EAC7B,YAAY,EACZ,eAAe,EACf,MAAM,GACP,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CA6mB3C"}

package/dist/cjs/forms/virtual_tables/CreateEditVirtualTable.js

@@ -30,6 +30,7 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
         client.ownerTenantFields?.filter((f) => f !== constants_1.SINGLE_TENANT) ??
         []);
     const [failingTenant, setFailingTenant] = (0, react_2.useState)(undefined);
+    const [failingTenantErrorType, setFailingTenantErrorType] = (0, react_2.useState)(undefined);
     const [isLoading, setIsLoading] = (0, react_2.useState)(false);
     const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
     const [editorMounted, setEditorMounted] = (0, react_2.useState)(false);
@@ -37,14 +38,37 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
     const [errorInfo, setErrorInfo] = (0, react_2.useState)({ show: false, message: '' });
     const [tableData, setTableData] = (0, react_2.useState)(undefined);
     const [runningQuery, setRunningQuery] = (0, react_2.useState)(false);
-    const { state, getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    const { state, getToken, quillFetchWithToken, eventTracking } = (0, AdminProvider_1.useAdmin)();
+    const containerRef = (0, react_2.useRef)(null);
     const addEditProcessVirtualTable = async (override = false) => {
-        const failingTenant = virtualTableOwners?.find((field) => tableData &&
+        const missingTenantField = virtualTableOwners?.find((field) => tableData &&
             !tableData.fields.find((col) => col.name === field?.replaceAll('"', '')));
-        if (!override && tableData && failingTenant) {
-            const tenant = client.allTenantTypes?.find((t) => t.tenantField === failingTenant);
-            setFailingTenant(tenant);
-            return;
+        if (!override && tableData) {
+            if (missingTenantField) {
+                const tenant = client.allTenantTypes?.find((t) => t.tenantField === missingTenantField);
+                setFailingTenant(tenant);
+                setFailingTenantErrorType('missing');
+                return;
+            }
+            else {
+                // let typeMismatchedTenant: QuillTenant | undefined;
+                // check that the all tenant field type match
+                // loop through all virtualTableOwneers and check the field type
+                const typeMismatchedTenant = virtualTableOwners.find((owner) => {
+                    const tenant = client.allTenantTypes?.find((t) => t.tenantField === owner);
+                    const tableDataField = tableData.fields.find((col) => col.name === owner?.replaceAll('"', ''));
+                    return ((tenant?.fieldType === 'string' &&
+                        (0, columnProcessing_1.isNumberType)(tableDataField?.fieldType ?? '')) ||
+                        (tenant?.fieldType === 'number' &&
+                            (0, columnProcessing_1.isStringType)(tableDataField?.fieldType ?? '')));
+                });
+                if (typeMismatchedTenant) {
+                    const tenant = client.allTenantTypes?.find((t) => t.tenantField === typeMismatchedTenant);
+                    setFailingTenant(tenant);
+                    setFailingTenantErrorType('type_mismatch');
+                    return;
+                }
+            }
         }
         addEditVirtualTable(initialVirtualTable ? 'edit' : 'add', ranVirtualTableQuery, virtualTableOwners, name, initialVirtualTable ? initialVirtualTable._id : undefined, tableData?.fields || [], override);
     };
@@ -59,6 +83,12 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
     // Run query on mount
     (0, react_2.useEffect)(() => {
         if (initialVirtualTable) {
+            eventTracking?.addBreadcrumb?.({
+                message: 'Initial Query Run on CreateEditVirtualTable load',
+                category: 'network',
+                level: 'info',
+                timestamp: Date.now(),
+            });
             handleRunQuery(initialVirtualTable.viewQuery);
         }
     }, []);
@@ -66,7 +96,13 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
         setErrorInfo({ show: false, message: '' });
         setVirtualTableAddable(false);
         setAskAIButtonLoading(true);
-        const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(state.queryEndpoint, aiPrompt, state.client._id, getToken, state.client.schemaNames);
+        eventTracking?.addBreadcrumb?.({
+            message: 'Used Ask AI in CreateEditVirtualTable',
+            category: 'network',
+            level: 'info',
+            timestamp: Date.now(),
+        });
+        const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(state.isSelfHosted, allTableData, state.queryEndpoint, aiPrompt, state.client._id, getToken, state.client.schemaNames, state.queryHeaders);
         setEditVirtualTableQuery(results);
         setAskAIButtonLoading(false);
     };
@@ -111,7 +147,7 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
             return;
         }
         setIsLoading(true);
-        const resp = await (0, ConnectionClient_1.getVirtualTableData)(state.client._id, query, state.client.databaseType, state.queryEndpoint, getToken);
+        const resp = await (0, ConnectionClient_1.getVirtualTableData)(state.client._id, query, state.client.databaseType, state.queryEndpoint, getToken, eventTracking, state.queryHeaders);
         if (!resp.success) {
             setErrorInfo({ show: true, message: resp.error });
             setTableData(undefined);
@@ -175,13 +211,16 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
         setIsLoading(false);
         setRunningQuery(false);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: {
             gap: 6,
-            height: 'calc(100vh - 130px)',
+            height: containerRef.current
+                ? `calc(100vh - ${containerRef.current.getBoundingClientRect().top ?? 0}px - 80px)`
+                : '100%',
+            // overflow: 'scroll',
+            ...containerStyle,
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(DynamicBanner_1.default, { header: initialVirtualTable
                         ? `Edit "${initialVirtualTable.name}" Virtual Table`
-                        : 'Create Virtual Table', onExit: initialVirtualTable ? undefined : closeEditVirtualTable }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        : 'Create Virtual Table', onExit: initialVirtualTable ? undefined : closeEditVirtualTable, theme: state.theme }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: '100%',
                         display: 'flex',
                         height: '100%',
@@ -245,10 +284,27 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
                                                     flexDirection: 'row',
                                                     justifyContent: 'space-between',
                                                 }, children: [(0, jsx_runtime_1.jsx)(ButtonComponent, { label: 'Run query', onClick: () => {
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Clicked run query button in CreateEditVirtualTable',
+                                                                category: 'interaction',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                             handleRunQuery();
                                                         } }), !!dashboardOwnerTenants?.length && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { label: 'Owner Tenants', width: 230, value: virtualTableOwners, options: dashboardOwnerTenants?.map((f) => {
                                                             return { value: f.tenantField, label: f.name };
-                                                        }) ?? [], onChange: (e) => setVirtualTableOwners(e.target.value), allSelectedLabel: (0, jsx_runtime_1.jsx)("div", { children: "All tenants" }), noneSelectedLabel: (0, jsx_runtime_1.jsx)("div", { children: "No owners" }) }))] })), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                        }) ?? [], onChange: (e) => {
+                                                            setVirtualTableOwners(e.target.value);
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Changed owner tenants in CreateEditVirtualTable',
+                                                                category: 'interaction',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                                data: {
+                                                                    ownerTenants: e.target.value,
+                                                                },
+                                                            });
+                                                        }, allSelectedLabel: (0, jsx_runtime_1.jsx)("div", { children: "All tenants" }), noneSelectedLabel: (0, jsx_runtime_1.jsx)("div", { children: "No owners" }) }))] })), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                                     fontSize: 15,
                                                     fontWeight: '400',
                                                     width: '100%',
@@ -270,7 +326,37 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
                                         flexDirection: 'row',
                                         gap: 12,
                                         marginTop: 'auto',
-                                    }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: closeEditVirtualTable, label: 'Discard changes' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: `${initialVirtualTable ? 'Save changes' : 'Create virtual table'}`, onClick: () => {
+                                    }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                closeEditVirtualTable();
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Clicked discard changes button in CreateEditVirtualTable',
+                                                    category: 'interaction',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
+                                            }, label: 'Discard changes' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: `${initialVirtualTable ? 'Save changes' : 'Create virtual table'}`, onClick: () => {
+                                                if (initialVirtualTable) {
+                                                    eventTracking?.addBreadcrumb?.({
+                                                        message: 'Saved changes to existing virtual table',
+                                                        data: {
+                                                            virtualTable: initialVirtualTable.name,
+                                                        },
+                                                        category: 'interaction',
+                                                        level: 'info',
+                                                        timestamp: Date.now(),
+                                                    });
+                                                }
+                                                else {
+                                                    eventTracking?.addBreadcrumb?.({
+                                                        message: 'Created new virtual table',
+                                                        data: {
+                                                            virtualTable: name,
+                                                        },
+                                                        category: 'interaction',
+                                                        level: 'info',
+                                                        timestamp: Date.now(),
+                                                    });
+                                                }
                                                 const duplicateColumns = (0, VirtualTableManager_1.getDuplicateColumns)(tableData?.fields);
                                                 if (duplicateColumns.length > 0) {
                                                     alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns.join('\n')}`);
@@ -290,5 +376,5 @@ function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEdit
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: 12,
-                                    }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: closeEditVirtualTable, label: 'Discard changes' }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateVirtualTables_1.TenantFieldModal, { isOpen: !!failingTenant, setClosed: () => setFailingTenant(undefined), tenant: failingTenant })] }) }));
+                                    }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: closeEditVirtualTable, label: 'Discard changes' }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateVirtualTables_1.TenantFieldModal, { isOpen: !!failingTenant, setClosed: () => setFailingTenant(undefined), tenant: failingTenant, errorType: failingTenantErrorType })] }) }));
 }

package/dist/cjs/hooks/useDatabaseSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDatabaseSchema.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDatabaseSchema.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;CAuD7B,CAAC"}
+{"version":3,"file":"useDatabaseSchema.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDatabaseSchema.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;CA2E7B,CAAC"}

package/dist/cjs/hooks/useDatabaseSchema.js

@@ -5,14 +5,19 @@ const AdminProvider_1 = require("../AdminProvider");
 const react_1 = require("react");
 const ConnectionClient_1 = require("../api/ConnectionClient");
 const useDatabaseSchema = () => {
-    const { state, dispatch, getToken } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch, getToken, eventTracking } = (0, AdminProvider_1.useAdmin)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(state.databaseSchema?.id !== state.client.id);
+    const idRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const fetchSchema = async () => {
             if ((state.databaseSchema?.schema?.length ||
                 state.databaseSchema?.loading) &&
                 state.databaseSchema?.id === state.client.id)
                 return;
+            if (idRef.current === state.client.id) {
+                return;
+            }
+            idRef.current = state.client.id;
             try {
                 dispatch({
                     type: 'SET_DATABASE_SCHEMA',
@@ -23,7 +28,7 @@ const useDatabaseSchema = () => {
                     },
                 });
                 setIsLoading(true);
-                const schema = await (0, ConnectionClient_1.getTableColumnsBySchema)(state.queryEndpoint, state.client.id, getToken);
+                const schema = await (0, ConnectionClient_1.getTableColumnsBySchema)(state.isSelfHosted, state.queryEndpoint, state.client.id, state.client.databaseType, getToken, state.client.schemaNames ?? [], state.queryHeaders);
                 dispatch({
                     type: 'SET_DATABASE_SCHEMA',
                     payload: {
@@ -34,6 +39,17 @@ const useDatabaseSchema = () => {
                 });
             }
             catch (e) {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching schema',
+                    errorMessage: e.message,
+                    errorStack: e.stack,
+                    errorData: {
+                        caller: 'useDatabaseSchema',
+                        function: 'fetchSchema',
+                    },
+                });
                 console.error(e);
             }
             finally {

package/dist/cjs/hooks/useLongLoading.d.ts

@@ -0,0 +1,13 @@
+type LongLoadingMeta = {
+    origin: string;
+    loadDescription: string;
+    expectedLoadTime?: number;
+    abnormalLoadTime?: number;
+};
+type LoadingState = {
+    isLongLoading: boolean;
+    isAbnormalLoading: boolean;
+};
+export declare function useLongLoading(isLoading: boolean, meta: LongLoadingMeta): LoadingState;
+export {};
+//# sourceMappingURL=useLongLoading.d.ts.map

package/dist/cjs/hooks/useLongLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongLoading.d.ts","sourceRoot":"","sources":["../../../src/hooks/useLongLoading.tsx"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,wBAAgB,cAAc,CAC5B,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,eAAe,GACpB,YAAY,CAoEd"}

package/dist/cjs/hooks/useLongLoading.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLongLoading = useLongLoading;
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+function useLongLoading(isLoading, meta) {
+    const { origin, expectedLoadTime = 5000, abnormalLoadTime = 15000, loadDescription, } = meta;
+    const [isLongLoading, setIsLongLoading] = (0, react_1.useState)(false);
+    const [isAbnormalLoading, setIsAbnormalLoading] = (0, react_1.useState)(false);
+    const { eventTracking } = (0, AdminProvider_1.useAdmin)();
+    (0, react_1.useEffect)(() => {
+        let longTimer = null;
+        let abnormalTimer = null;
+        if (isLoading) {
+            // Set timer for long loading
+            longTimer = setTimeout(() => {
+                setIsLongLoading(true);
+                eventTracking?.logError?.({
+                    type: 'timeout',
+                    severity: 'medium',
+                    message: `${origin} loading is taking longer than expected`,
+                    errorData: {
+                        loadDescription,
+                        expectedLoadTime,
+                        currentTime: Date.now(),
+                    },
+                });
+                // Set timer for abnormal loading
+                abnormalTimer = setTimeout(() => {
+                    setIsAbnormalLoading(true);
+                    eventTracking?.logError?.({
+                        type: 'timeout',
+                        severity: 'high',
+                        message: `${origin} loading is taking abnormally long`,
+                        errorData: {
+                            loadDescription,
+                            expectedLoadTime,
+                            abnormalLoadTime,
+                            currentTime: Date.now(),
+                        },
+                    });
+                }, abnormalLoadTime - expectedLoadTime);
+            }, expectedLoadTime);
+        }
+        else {
+            setIsLongLoading(false);
+            setIsAbnormalLoading(false);
+        }
+        return () => {
+            if (longTimer)
+                clearTimeout(longTimer);
+            if (abnormalTimer)
+                clearTimeout(abnormalTimer);
+        };
+    }, [
+        isLoading,
+        origin,
+        expectedLoadTime,
+        abnormalLoadTime,
+        loadDescription,
+        eventTracking,
+    ]);
+    return {
+        isLongLoading,
+        isAbnormalLoading,
+    };
+}

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

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnClickOutside.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,QAChB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,WAC3B;IAAE,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,CAAA;CAAE,cACnB,OAAO,SA2BpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,KAAG,MAoBzD,CAAC;AAqBF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnClickOutside.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,GACrB,KAAK,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS;IAAE,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,CAAA;CAAE,EAC/B,YAAY,OAAO,SA2BpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,MAoBzD,CAAC;AAqBF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/hooks/useThrottle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThrottle.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThrottle.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAClC,KAAK,EAAE,MAAM,aAGI,GAAG,EAAE,UAOvB"}
+{"version":3,"file":"useThrottle.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThrottle.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAClC,KAAK,EAAE,MAAM,IAGL,GAAG,MAAM,GAAG,EAAE,UAOvB"}

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

@@ -1 +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"}
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,iBAAiB,GAAI;;CAAY,4CActC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/icons/CheckCircleIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/CheckCircleIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe;;6CAepB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CheckCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/CheckCircleIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,GAAI;;CAAY,4CAepC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/icons/ExclamationFilledIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExclamationFilledIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ExclamationFilledIcon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,qBAAqB;;6CAa1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ExclamationFilledIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ExclamationFilledIcon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,qBAAqB,GAAI;;CAAY,4CAa1C,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/cjs/icons/ExteriorLinkIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExteriorLinkIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ExteriorLinkIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB;;6CAcrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ExteriorLinkIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ExteriorLinkIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,GAAI;;CAAY,4CAcrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/cjs/icons/QuestionMarkCircleIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionMarkCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/QuestionMarkCircleIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,sBAAsB;;6CAgB3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"QuestionMarkCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/QuestionMarkCircleIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,sBAAsB,GAAI;;CAAY,4CAgB3C,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/cjs/modals/CodePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.d.ts","sourceRoot":"","sources":["../../../src/modals/CodePreview.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAc,EACd,MAAM,EACN,SAAS,GACV,EAAE;IACD,cAAc,EAAE,GAAG,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,kDA4OA"}
+{"version":3,"file":"CodePreview.d.ts","sourceRoot":"","sources":["../../../src/modals/CodePreview.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAc,EACd,MAAM,EACN,SAAS,GACV,EAAE;IACD,cAAc,EAAE,GAAG,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,kDAoPA"}