@quillsql/admin 1.6.4 → 1.7.1

package/dist/esm/public_components/CreateEnvironment.js

@@ -4,15 +4,15 @@ import React, { useCallback, useMemo, useState, } from 'react';
 import ConnectDatabase from '../forms/client_onboard/ConnectDatabase';
 import StepDisplay from '../components/StepDisplay';
 import ConnectSchema from '../forms/client_onboard/ConnectSchema';
-import { useAdmin } from '../AdminProvider';
+import { useAdmin } from '../hooks/useAdmin';
 import { getDatabaseConnectionFormat, } from '../utils/databases';
-import CreateVirtualTables from '../forms/client_onboard/CreateVirtualTables';
 import { getTableColumnsBySchema } from '../api/ConnectionClient';
 import { quillFetch } from '../utils/dataFetcher';
+import { useLongLoading } from '../hooks/useLongLoading';
 export default function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     const parentRef = React.useRef(null);
-    const { state, dispatch, setClient, getToken, quillFetchWithToken } = useAdmin();
-    const domainName = state.client?.domainName || state.domainName;
+    const { state, dispatch, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
+    const clerkOrgId = state.client?.clerkOrgId || state.clerkOrgId;
     const defaultDatabaseType = state.client?.databaseType || 'PostgreSQL';
     const [createEnvSteps, setCreateEnvSteps] = useState({
         connectDB: {
@@ -40,6 +40,14 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
     }), [newClient, connection, databaseSchema]);
     const [tenantInit, setTenantInit] = useState({});
     const [fetchSchemasLoading, setFetchSchemasLoading] = useState(false);
+    useLongLoading(onboardingCompleteIsLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Finishing onboarding',
+    });
+    useLongLoading(fetchSchemasLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Fetching schemas',
+    });
     const onConnectDatabase = useCallback(async (clientId) => {
         setTenantInit({});
         setSqlTables([]);
@@ -58,6 +66,10 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                 getToken,
             });
         }
+        eventTracking?.logEvent?.('start-onboarding', {
+            clientId,
+            clerkOrgId,
+        });
         setNewClient({
             clientId,
         });
@@ -71,7 +83,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
             clientId,
             databaseType: connectionInfo.type,
             schemaNames: selectedSchemaNames,
-            domainName,
+            clerkOrgId,
         });
         // FIXME: Error handling
         try {
@@ -92,10 +104,31 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                 openStep('connectSchema');
             })
                 .catch((error) => {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching schema',
+                    errorMessage: error.message,
+                    errorData: {
+                        caller: 'CreateEnvironment',
+                        function: 'setEnvironmentDetails',
+                    },
+                });
                 console.error(error);
             });
         }
         catch (error) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error setting up database',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'CreateEnvironment',
+                    function: 'setEnvironmentDetails',
+                },
+            });
             console.error(error);
         }
         setFetchSchemasLoading(false);
@@ -114,6 +147,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
     };
     const finishOnboarding = async () => {
         setOnboardingCompleteIsLoading(true);
+        const orgName = localStorage.getItem('orgName'); // Set via portal, alternatively, pass a prop through Admin Provider
         // TODO: Anyone could create a client with some domain through this endpoint
         const response = await quillFetchWithToken({
             client: {
@@ -128,8 +162,9 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                     ...newClient,
                     allTenantTypes: undefined,
                 },
-                domainName: domainName,
+                clerkOrgId: clerkOrgId,
                 clientId: newClient.clientId,
+                orgName,
             },
             adminMode: true,
         });
@@ -137,7 +172,15 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
             setOnboardingCompleteIsLoading(false);
             throw new Error(response.message);
         }
+        eventTracking?.logEvent?.('finish-onboarding', {
+            clientId: newClient.clientId,
+            clerkOrgId: clerkOrgId,
+        });
         setClient(response.data.client);
+        dispatch({
+            type: 'UPDATE_CLIENTS',
+            payload: response.data.client,
+        });
         sessionStorage.removeItem('quill-adminState');
         sessionStorage.setItem('quill-client', JSON.stringify(response.data.client));
         dispatch({
@@ -195,7 +238,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                         ownerTenantFields: [tenantInit.ownerTenant.tenantField],
                         allTenantTypes: [tenantInit.ownerTenant],
                     });
-                    openStep('createVirtualTables');
+                    finishOnboarding();
                 }, returnToConnectDatabase: () => {
                     setNewClient({
                         ...newClient,
@@ -209,15 +252,5 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                         !!newClient?.schemaNames?.length) {
                         openStep('connectSchema');
                     }
-                } })), createEnvSteps.createVirtualTables.open ? (_jsx(CreateVirtualTables, { containerStyle: {
-                    borderRadius: 6,
-                    border: '1px solid #e7e7e7',
-                    boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.07)',
-                    height: 'calc(100vh - 59px)',
-                    width: 'calc(100vw - 200px)',
-                }, header1Style: header1Style, header2Style: header2Style, databaseSchema: databaseSchema, environmentDetails: connection, completeOnboarding: finishOnboarding, state: state, client: newClient, tenantInit: tenantInit, isLoading: onboardingCompleteIsLoading, sqlTables: sqlTables, setSqlTables: setSqlTables })) : (_jsx(StepDisplay, { label: "Create Virtual Tables", completed: false, header1Style: header1Style, onClick: () => {
-                    if (tenantInit?.ownerTenant) {
-                        openStep('createVirtualTables');
-                    }
                 } }))] }));
 }

package/dist/esm/public_components/DashboardManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AAwChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAi0BA"}
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AA2ChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAw3BA"}

package/dist/esm/public_components/DashboardManager.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
-import { OrgSelect, EnvSelectPopover, DashboardSelectPopover, } from '../components';
-import { useDashboard, useDashboards } from '@quillsql/react';
+import { useAdmin } from '../hooks/useAdmin';
+import { useDashboardInternal, useDashboards, } from '@quillsql/react';
 import { deleteReport, ReportWrapper } from '../Admin';
 import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, CheckboxPrimitive, } from '../primitives';
 import { NewDashboardModal } from '../modals/NewDashboardModal';
@@ -21,9 +20,13 @@ import { Popover } from '../primitives/PopoverPrimitive';
 import CodePreview from '../modals/CodePreview';
 import SavedQueriesModal from '../modals/SavedQueriesModal';
 import { InternalDashboard } from '../components/InternalDashboard/InternalDashboard';
-import CreateEnvironment from './CreateEnvironment';
+import { useLongLoading } from '../hooks/useLongLoading';
+import CreateEnvironmentModal from '../modals/CreateEnvironmentModal';
+import EnvSelectPopover from './EnvSelectPopover';
+import DashboardSelectPopover from '../components/DashboardSelectPopover';
+import OrgSelect from '../components/OrgSelect';
 export default function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }) {
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = useAdmin();
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
     const parentRef = useRef(null);
     const envSelectPopoverRef = useRef(null);
     const dashboardSelectPopoverRef = useRef(null);
@@ -35,8 +38,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
     //FIXME: we don't want to lift up this state
     const [userFilters, setUserFilters] = useState([]);
     const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = useState(false);
-    const { data: dashboardConfig, reload: reloadDashboard } = useDashboard(state.selectedDashboard, userFilters);
+    const { data: dashboardConfig, reload: reloadDashboard } = useDashboardInternal(state.selectedDashboard, userFilters);
     const { dashboards, isLoading: dashboardsLoading } = useDashboards();
+    useLongLoading(dashboardsLoading, {
+        origin: 'DashboardManager',
+        loadDescription: 'Loading dashboards',
+    });
     const { setSelectedDashboard } = useDashboardManager();
     // const [editMode, setEditMode] = useState(true);
     const [autoPromoteVirtualTables, setAutoPromoteVirtualTables] = useState(true);
@@ -57,6 +64,15 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
             type: 'SET_ACTIVE_COMPONENT',
             payload: 'Report',
         });
+        eventTracking?.addBreadcrumb?.({
+            message: 'Clicked report in DashboardManager',
+            data: {
+                report: elem.id,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
     }, [dispatch]);
     const hoverActions = (data) => {
         return (_jsx("div", { style: {
@@ -80,7 +96,7 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                     gap: 4,
                 }, onClick: async (event) => {
                     event.stopPropagation();
-                    if (await deleteReport(data.id, state, getToken)) {
+                    if (await deleteReport(data.id, state, getToken, eventTracking)) {
                         reloadDashboard(undefined, false, {
                             report: { id: data.id },
                             action: 'delete',
@@ -154,11 +170,22 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
         }
         catch (error) {
             console.error('Promotion failed:', error);
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error promoting dashboard',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'DashboardManager',
+                    function: 'handlePromote',
+                },
+            });
             alert('Could not promote this dashboard.');
         }
     };
     if (showCreateEnvironmentModal) {
-        return (_jsx(ModalPrimitive, { isOpen: showCreateEnvironmentModal, onClose: () => setShowCreateEnvironmentModal(false), children: _jsx(CreateEnvironment, { onOnboardComplete: () => setShowCreateEnvironmentModal(false) }) }));
+        return (_jsx(CreateEnvironmentModal, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
     }
     return (_jsxs("div", { style: containerStyle, children: [(state.activeComponent === 'Report Builder' ||
                 state.activeComponent === 'SQL Editor') && (_jsx(ChartQueryBuilder, { activeComponent: state.activeComponent, destinationDashboard: state.selectedDashboard ??
@@ -268,6 +295,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                     type: 'SET_ACTIVE_COMPONENT',
                                                     payload: 'CodePreview',
                                                 });
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened embed preview in DashboardManager',
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                             }, label: "Embed Preview" }), _jsx(Popover, { content: _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
@@ -281,6 +314,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'Report Builder',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened report builder in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "Report Builder \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -289,6 +328,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'SQL Editor',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened SQL editor in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "SQL Editor \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -297,6 +342,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'SavedQueries',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened saved queries in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "Saved Queries \u2197" })] }), trigger: _jsx(ButtonPrimitive
                                             // onClick={() => {
                                             //   if (!state.selectedDashboard) {
@@ -360,6 +411,15 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                         dashboardsLoading ||
                                         dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)
                                             .length ? (_jsx("div", { style: { width: '100%', position: 'relative' }, children: _jsx(InternalDashboard, { name: state.selectedDashboard ?? '', containerStyle: { padding: 25, width: '100%' }, onClickReport: handleClickReport, hoverActions: hoverActions, onUserFiltersUpdated: setUserFilters, parentLoading: clientLoading || dashboardsLoading, onManageDashboard: () => {
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened manage dashboard in DashboardManager',
+                                                    data: {
+                                                        dashboard: state.selectedDashboard,
+                                                    },
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                                 setEditFilterModalIsOpen(true);
                                             } }) })) : null] }), !clientLoading && !dashboardsLoading && (_jsxs(_Fragment, { children: [_jsx(EditEnvironmentModal, { isOpen: editEnvironmentModalIsOpen, setIsOpen: setEditEnvironmentModalIsOpen, onSave: async () => {
                                             await reloadDashboard(state.selectedDashboard ?? undefined);

package/dist/esm/public_components/EnvSelectPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/public_components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,yBAAyB,EACzB,SAAS,EACT,SAAS,EACT,sBAAsB,GACvB,EAAE,qBAAqB,2CAwOvB"}
+{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/public_components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,yBAAyB,EACzB,SAAS,EACT,SAAS,EACT,sBAAsB,GACvB,EAAE,qBAAqB,2CAsQvB"}

package/dist/esm/public_components/EnvSelectPopover.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
+import { useAdmin } from '../hooks/useAdmin';
 import { ListboxRow, Popover } from '../components/OrgSelect';
 import MiniButtonPrimitive from '../primitives/MiniButtonPrimitive';
 import { LoadingSpinner } from '../components/UiComponents';
 import { ListboxTextInput } from '../components/QuillMultiSelectWithCombo';
 export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }) {
-    const { state, dispatch } = useAdmin();
+    const { state, dispatch, eventTracking } = useAdmin();
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const filteredClients = useMemo(() => {
@@ -20,6 +20,15 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
             dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
             dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
         }
+        eventTracking?.addBreadcrumb?.({
+            message: 'Set client in EnvSelectPopover',
+            data: {
+                clientId: selectedClient._id || selectedClient.id,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         setClient(selectedClient);
         setIsOpen(false);
     };
@@ -84,7 +93,9 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery, width: 180 }), _jsx("div", { style: {
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: (e) => {
+                                setSearchQuery(e);
+                            }, width: 180 }), _jsx("div", { style: {
                                 height: 9,
                                 width: 230,
                                 borderTop: `1px solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
@@ -93,6 +104,15 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
                                         : undefined, item: item.name, isSelected: client._id === item._id, hoverActions: onSelectedEditEnvironment
                                         ? (item) => (_jsx(MiniButtonPrimitive, { label: "Manage", onClick: () => {
                                                 onSelectedEditEnvironment(item);
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened manage environment in EnvSelectPopover',
+                                                    data: {
+                                                        environment: item,
+                                                    },
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                                 setIsOpen(false);
                                             }, style: {
                                                 marginRight: -8,
@@ -102,7 +122,15 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
                                                 color: theme.secondaryTextColor,
                                                 backgroundColor: theme.backgroundColor,
                                             } }))
-                                        : undefined }, item._id))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("a", { onClick: onCreateNewEnvironment, style: {
+                                        : undefined }, item._id))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("a", { onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened create new environment in EnvSelectPopover',
+                                                category: 'navigation',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
+                                            onCreateNewEnvironment?.();
+                                        }, style: {
                                             height: 42,
                                             width: 216,
                                             borderRadius: 6,

package/dist/esm/public_components/VirtualTableManager.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react';
-export declare const getDuplicateColumns: (columns?: any[]) => string[];
 export default function VirtualTableManager({ containerStyle, virtualTable, }: {
     containerStyle?: CSSProperties;
     virtualTable?: string;

package/dist/esm/public_components/VirtualTableManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTableManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/VirtualTableManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AA2C5E,eAAO,MAAM,mBAAmB,aAAc,GAAG,EAAE,aAalD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,cAAc,EACd,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAw+BA"}
+{"version":3,"file":"VirtualTableManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/VirtualTableManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AA6C5E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,cAAc,EACd,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAukCA"}

package/dist/esm/public_components/VirtualTableManager.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, } from '../primitives';
-import { useAdmin } from '../AdminProvider';
+import { useAdmin } from '../hooks/useAdmin';
 import { EnvSelectPopover } from '../components';
 import { TableCell } from '../Admin';
 import CreateEditVirtualTable from '../forms/virtual_tables/CreateEditVirtualTable';
@@ -23,22 +23,8 @@ import { onlySingleDatabaseTenant } from '../utils/tenants';
 import { useDatabaseSchema } from '../hooks/useDatabaseSchema';
 import InputLabel from '../components/InputLabel';
 import { useDashboardManager } from '../hooks/useDashboardManager';
-import CreateEnvironment from './CreateEnvironment';
-export const getDuplicateColumns = (columns) => {
-    if (!columns) {
-        return [];
-    }
-    const columnCount = columns?.reduce((acc, curr) => {
-        if (acc[curr.field]) {
-            acc[curr.field] += 1;
-        }
-        else {
-            acc[curr.field] = 1;
-        }
-        return acc;
-    }, {});
-    return Object.keys(columnCount).filter((column) => columnCount[column] > 1);
-};
+import CreateEnvironmentModal from '../modals/CreateEnvironmentModal';
+import { getDuplicateColumns } from '../utils/columnProcessing';
 export default function VirtualTableManager({ containerStyle, virtualTable, }) {
     const { data: tables, isLoading: areTablesLoading, reloadAll, refreshSome, loadingTables, } = useVirtualTables();
     const { reloadFilteredReports } = useReports();
@@ -64,7 +50,7 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
     const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = useState(false);
     const parentRef = useRef(null);
     const envHeaderRef = useRef(null);
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = useAdmin();
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
     const closeEditModal = () => {
         setEditModalIsOpen(false);
         setEditName('');
@@ -80,6 +66,16 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
         setEditError(table.broken ? (table.error ?? 'Invalid query') : undefined);
         setCustomFieldInfo(table.customFieldInfo);
         !suppressModal && setEditModalIsOpen(true);
+        eventTracking?.addBreadcrumb?.({
+            message: 'Clicked table cell in VirtualTableManager',
+            data: {
+                table: table.name,
+                suppressModal: suppressModal,
+            },
+            category: 'interaction',
+            level: 'info',
+            timestamp: Date.now(),
+        });
     };
     const reloadTables = async (tables) => {
         const tempClient = {
@@ -256,6 +252,17 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
             setEditQueryView(false);
         }
         catch (e) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error submitting virtual table',
+                errorMessage: e.message,
+                errorStack: e.stack,
+                errorData: {
+                    caller: 'VirtualTableManager',
+                    function: 'handleModalSubmit',
+                },
+            });
             console.error(e);
         }
     };
@@ -283,6 +290,15 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
             alert(`This table is referenced in the following dashboard filter${filtersIsPlural}.\n\n${referencedFilterInfo.join('\n')} \n\nPlease delete those filters before deleting this table.`);
             return;
         }
+        eventTracking?.addBreadcrumb?.({
+            message: 'Confirmed delete table in VirtualTableManager',
+            data: {
+                table: name,
+            },
+            category: 'interaction',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         const response = await requestDeleteVirtualTable(id, state, getToken);
         await reloadTables();
         return response;
@@ -298,7 +314,7 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
         }
     };
     if (showCreateEnvironmentModal) {
-        return (_jsx(ModalPrimitive, { isOpen: showCreateEnvironmentModal, onClose: () => setShowCreateEnvironmentModal(false), children: _jsx(CreateEnvironment, { onOnboardComplete: () => setShowCreateEnvironmentModal(false) }) }));
+        return (_jsx(CreateEnvironmentModal, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
     }
     return (_jsx("div", { style: { ...containerStyle }, children: _jsxs("div", { style: {
                 minHeight: '100%',
@@ -347,6 +363,12 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                     flexDirection: 'row',
                                     gap: 8,
                                 }, children: [_jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Clicked refresh tables button in VirtualTableManager',
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                             reloadTables(tables);
                                         }, label: "Refresh Tables" }), _jsx(ButtonPrimitive, { onClick: () => {
                                             setEditName('');
@@ -354,6 +376,12 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                             setEditVirtualTableId('');
                                             setInitialVirtualTable(undefined);
                                             setEditQueryView(true);
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Clicked add virtual table button in VirtualTableManager',
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                         }, label: "Add Virtual Table +" })] }))] }) })), clientLoading || areTablesLoading ? (_jsx("div", { style: {
                         display: 'grid',
                         gridGap: 24,
@@ -372,6 +400,12 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                 overflow: 'hidden',
                             }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), _jsx("defs", { fill: '#F9F9FA', children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }, i))) }, 'edit-view-query')) : state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [!editQueryView ? (tables && tables.length === 0 ? (_jsx(EmptyVirtualTablesComponent, { onClick: () => {
                                 setEditQueryView(true);
+                                eventTracking?.addBreadcrumb?.({
+                                    message: 'Clicked EmptyVirtualTablesComponent in VirtualTableManager',
+                                    category: 'interaction',
+                                    level: 'info',
+                                    timestamp: Date.now(),
+                                });
                             } })) : (_jsx("div", { style: {
                                 display: 'grid',
                                 gridGap: 24,
@@ -385,6 +419,12 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                             }, children: tables && tables?.length ? (_jsxs(_Fragment, { children: [tables.map((table) => (_jsx(TableCell, { table: table, clickTableCellHeader: clickTableCell, clickTableCellBody: () => {
                                             clickTableCell(table, true);
                                             setEditQueryView(true);
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Clicked table body in VirtualTableManager',
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                         }, isLoading: loadingTables[table._id], reloadAction: (table) => reloadTables([table]), hoverActions: (table) => (_jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
@@ -403,6 +443,15 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
                                                     }, onClick: (event) => {
                                                         event.stopPropagation();
+                                                        eventTracking?.addBreadcrumb?.({
+                                                            message: 'Clicked edit query button in VirtualTableManager Table Cell',
+                                                            data: {
+                                                                table: table.name,
+                                                            },
+                                                            category: 'interaction',
+                                                            level: 'info',
+                                                            timestamp: Date.now(),
+                                                        });
                                                         clickTableCell(table, true);
                                                         setEditQueryView(true);
                                                     }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 12, width: 12, style: {
@@ -422,6 +471,15 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
                                                     }, onClick: (event) => {
                                                         event.stopPropagation();
+                                                        eventTracking?.addBreadcrumb?.({
+                                                            message: 'Clicked table settings in VirtualTableManager Table Cell',
+                                                            data: {
+                                                                table: table.name,
+                                                            },
+                                                            category: 'interaction',
+                                                            level: 'info',
+                                                            timestamp: Date.now(),
+                                                        });
                                                         clickTableCell(table);
                                                     }, className: "secondary-button-quill", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 16, width: 16, style: {
                                                             marginLeft: 'auto',
@@ -446,6 +504,15 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
                                                     }, className: "secondary-button-quill", onClick: (event) => {
                                                         event.stopPropagation();
+                                                        eventTracking?.addBreadcrumb?.({
+                                                            message: 'Clicked refresh table button in VirtualTableManager Table Cell',
+                                                            data: {
+                                                                table: table.name,
+                                                            },
+                                                            category: 'interaction',
+                                                            level: 'info',
+                                                            timestamp: Date.now(),
+                                                        });
                                                         reloadTables([table]);
                                                     }, children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", strokeWidth: 1.5, height: 16, width: 16, style: {
                                                                 marginLeft: 'auto',
@@ -464,6 +531,15 @@ export default function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         alignItems: 'center',
                                                     }, onClick: (event) => {
                                                         event.stopPropagation();
+                                                        eventTracking?.addBreadcrumb?.({
+                                                            message: 'Clicked delete table button in VirtualTableManager Table Cell',
+                                                            data: {
+                                                                table: table.name,
+                                                            },
+                                                            category: 'interaction',
+                                                            level: 'info',
+                                                            timestamp: Date.now(),
+                                                        });
                                                         deleteVirtualTable(table._id, table.name, table.name);
                                                     }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, style: {
                                                                 marginLeft: 'auto',
@@ -500,7 +576,7 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
     const [tableData, setTableData] = useState(undefined);
     const [errorInfo, setErrorInfo] = useState({ show: false, message: '' });
     const clientIsSingleTenant = useMemo(() => onlySingleDatabaseTenant(state.client), [state.client]);
-    const { getToken } = useAdmin();
+    const { getToken, eventTracking } = useAdmin();
     useEffect(() => {
         setCustomFieldQuery(customFieldInfo?.query || '');
         setCustomFieldType(customFieldInfo?.type || 'eav');
@@ -622,7 +698,7 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                         }
                                         setErrorInfo({ show: false, message: '' });
                                         setRunQueryButtonLoading(true);
-                                        const getSqlResults = await getVirtualTableData(state.client._id, customFieldQuery, state.client.databaseType, state.queryEndpoint, getToken, state.queryHeaders);
+                                        const getSqlResults = await getVirtualTableData(state.client._id, customFieldQuery, state.client.databaseType, state.queryEndpoint, getToken, eventTracking, state.queryHeaders);
                                         if (!getSqlResults.success) {
                                             setErrorInfo({
                                                 show: true,