@quillsql/admin 1.6.4 → 1.7.0

package/dist/cjs/public_components/CreateEnvironment.js

@@ -45,13 +45,13 @@ const StepDisplay_1 = __importDefault(require("../components/StepDisplay"));
 const ConnectSchema_1 = __importDefault(require("../forms/client_onboard/ConnectSchema"));
 const AdminProvider_1 = require("../AdminProvider");
 const databases_1 = require("../utils/databases");
-const CreateVirtualTables_1 = __importDefault(require("../forms/client_onboard/CreateVirtualTables"));
 const ConnectionClient_1 = require("../api/ConnectionClient");
 const dataFetcher_1 = require("../utils/dataFetcher");
+const useLongLoading_1 = require("../hooks/useLongLoading");
 function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     const parentRef = react_1.default.useRef(null);
-    const { state, dispatch, setClient, getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
-    const domainName = state.client?.domainName || state.domainName;
+    const { state, dispatch, setClient, getToken, quillFetchWithToken, eventTracking, } = (0, AdminProvider_1.useAdmin)();
+    const clerkOrgId = state.client?.clerkOrgId || state.clerkOrgId;
     const defaultDatabaseType = state.client?.databaseType || 'PostgreSQL';
     const [createEnvSteps, setCreateEnvSteps] = (0, react_1.useState)({
         connectDB: {
@@ -79,6 +79,14 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     }), [newClient, connection, databaseSchema]);
     const [tenantInit, setTenantInit] = (0, react_1.useState)({});
     const [fetchSchemasLoading, setFetchSchemasLoading] = (0, react_1.useState)(false);
+    (0, useLongLoading_1.useLongLoading)(onboardingCompleteIsLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Finishing onboarding',
+    });
+    (0, useLongLoading_1.useLongLoading)(fetchSchemasLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Fetching schemas',
+    });
     const onConnectDatabase = (0, react_1.useCallback)(async (clientId) => {
         setTenantInit({});
         setSqlTables([]);
@@ -97,6 +105,10 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                 getToken,
             });
         }
+        eventTracking?.logEvent?.('start-onboarding', {
+            clientId,
+            clerkOrgId,
+        });
         setNewClient({
             clientId,
         });
@@ -110,7 +122,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
             clientId,
             databaseType: connectionInfo.type,
             schemaNames: selectedSchemaNames,
-            domainName,
+            clerkOrgId,
         });
         // FIXME: Error handling
         try {
@@ -131,10 +143,31 @@ 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);
@@ -153,6 +186,7 @@ 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: {
@@ -167,8 +201,9 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                     ...newClient,
                     allTenantTypes: undefined,
                 },
-                domainName: domainName,
+                clerkOrgId: clerkOrgId,
                 clientId: newClient.clientId,
+                orgName,
             },
             adminMode: true,
         });
@@ -176,7 +211,15 @@ 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({
@@ -234,7 +277,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                         ownerTenantFields: [tenantInit.ownerTenant.tenantField],
                         allTenantTypes: [tenantInit.ownerTenant],
                     });
-                    openStep('createVirtualTables');
+                    finishOnboarding();
                 }, returnToConnectDatabase: () => {
                     setNewClient({
                         ...newClient,
@@ -248,15 +291,5 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                         !!newClient?.schemaNames?.length) {
                         openStep('connectSchema');
                     }
-                } })), createEnvSteps.createVirtualTables.open ? ((0, jsx_runtime_1.jsx)(CreateVirtualTables_1.default, { 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 })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Create Virtual Tables", completed: false, header1Style: header1Style, onClick: () => {
-                    if (tenantInit?.ownerTenant) {
-                        openStep('createVirtualTables');
-                    }
                 } }))] }));
 }

package/dist/cjs/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;AA6ChF,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/cjs/public_components/DashboardManager.js

@@ -27,9 +27,10 @@ const PopoverPrimitive_1 = require("../primitives/PopoverPrimitive");
 const CodePreview_1 = __importDefault(require("../modals/CodePreview"));
 const SavedQueriesModal_1 = __importDefault(require("../modals/SavedQueriesModal"));
 const InternalDashboard_1 = require("../components/InternalDashboard/InternalDashboard");
-const CreateEnvironment_1 = __importDefault(require("./CreateEnvironment"));
+const useLongLoading_1 = require("../hooks/useLongLoading");
+const CreateEnvironmentModal_1 = __importDefault(require("../modals/CreateEnvironmentModal"));
 function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }) {
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = (0, AdminProvider_1.useAdmin)();
     const parentRef = (0, react_1.useRef)(null);
     const envSelectPopoverRef = (0, react_1.useRef)(null);
     const dashboardSelectPopoverRef = (0, react_1.useRef)(null);
@@ -41,8 +42,12 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
     //FIXME: we don't want to lift up this state
     const [userFilters, setUserFilters] = (0, react_1.useState)([]);
     const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_1.useState)(false);
-    const { data: dashboardConfig, reload: reloadDashboard } = (0, react_2.useDashboard)(state.selectedDashboard, userFilters);
+    const { data: dashboardConfig, reload: reloadDashboard } = (0, react_2.useDashboardInternal)(state.selectedDashboard, userFilters);
     const { dashboards, isLoading: dashboardsLoading } = (0, react_2.useDashboards)();
+    (0, useLongLoading_1.useLongLoading)(dashboardsLoading, {
+        origin: 'DashboardManager',
+        loadDescription: 'Loading dashboards',
+    });
     const { setSelectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
     // const [editMode, setEditMode] = useState(true);
     const [autoPromoteVirtualTables, setAutoPromoteVirtualTables] = (0, react_1.useState)(true);
@@ -63,6 +68,15 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
             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 ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -86,7 +100,7 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                     gap: 4,
                 }, onClick: async (event) => {
                     event.stopPropagation();
-                    if (await (0, Admin_1.deleteReport)(data.id, state, getToken)) {
+                    if (await (0, Admin_1.deleteReport)(data.id, state, getToken, eventTracking)) {
                         reloadDashboard(undefined, false, {
                             report: { id: data.id },
                             action: 'delete',
@@ -160,11 +174,22 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
         }
         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 ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: showCreateEnvironmentModal, onClose: () => setShowCreateEnvironmentModal(false), children: (0, jsx_runtime_1.jsx)(CreateEnvironment_1.default, { onOnboardComplete: () => setShowCreateEnvironmentModal(false) }) }));
+        return ((0, jsx_runtime_1.jsx)(CreateEnvironmentModal_1.default, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(state.activeComponent === 'Report Builder' ||
                 state.activeComponent === 'SQL Editor') && ((0, jsx_runtime_1.jsx)(ChartQueryBuilder_1.default, { activeComponent: state.activeComponent, destinationDashboard: state.selectedDashboard ??
@@ -274,6 +299,12 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                     type: 'SET_ACTIVE_COMPONENT',
                                                     payload: 'CodePreview',
                                                 });
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened embed preview in DashboardManager',
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                             }, label: "Embed Preview" }), (0, jsx_runtime_1.jsx)(PopoverPrimitive_1.Popover, { content: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
@@ -287,6 +318,12 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                                 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" }), (0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -295,6 +332,12 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                                 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" }), (0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -303,6 +346,12 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                                 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: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive
                                             // onClick={() => {
                                             //   if (!state.selectedDashboard) {
@@ -366,6 +415,15 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                         dashboardsLoading ||
                                         dashboards?.filter((d) => d.name !== constants_1.SAVED_QUERIES_DASHBOARD)
                                             .length ? ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', position: 'relative' }, children: (0, jsx_runtime_1.jsx)(InternalDashboard_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditEnvironmentModal_1.EditEnvironmentModal, { isOpen: editEnvironmentModalIsOpen, setIsOpen: setEditEnvironmentModalIsOpen, onSave: async () => {
                                             await reloadDashboard(state.selectedDashboard ?? undefined);

package/dist/cjs/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/cjs/public_components/EnvSelectPopover.js

@@ -12,7 +12,7 @@ const MiniButtonPrimitive_1 = __importDefault(require("../primitives/MiniButtonP
 const UiComponents_1 = require("../components/UiComponents");
 const QuillMultiSelectWithCombo_1 = require("../components/QuillMultiSelectWithCombo");
 function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }) {
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch, eventTracking } = (0, AdminProvider_1.useAdmin)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const filteredClients = (0, react_1.useMemo)(() => {
@@ -26,6 +26,15 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
             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);
     };
@@ -90,7 +99,9 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery, width: 180 }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: (e) => {
+                                setSearchQuery(e);
+                            }, width: 180 }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 height: 9,
                                 width: 230,
                                 borderTop: `1px solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
@@ -99,6 +110,15 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
                                         : undefined, item: item.name, isSelected: client._id === item._id, hoverActions: onSelectedEditEnvironment
                                         ? (item) => ((0, jsx_runtime_1.jsx)(MiniButtonPrimitive_1.default, { 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,
@@ -108,7 +128,15 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
                                                 color: theme.secondaryTextColor,
                                                 backgroundColor: theme.backgroundColor,
                                             } }))
-                                        : undefined }, item._id))), (0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: (0, jsx_runtime_1.jsxs)("a", { onClick: onCreateNewEnvironment, style: {
+                                        : undefined }, item._id))), (0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: (0, jsx_runtime_1.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/cjs/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;AA2C5E,eAAO,MAAM,mBAAmB,GAAI,UAAU,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,2CAukCA"}

package/dist/cjs/public_components/VirtualTableManager.js

@@ -30,7 +30,7 @@ const tenants_1 = require("../utils/tenants");
 const useDatabaseSchema_1 = require("../hooks/useDatabaseSchema");
 const InputLabel_1 = __importDefault(require("../components/InputLabel"));
 const useDashboardManager_1 = require("../hooks/useDashboardManager");
-const CreateEnvironment_1 = __importDefault(require("./CreateEnvironment"));
+const CreateEnvironmentModal_1 = __importDefault(require("../modals/CreateEnvironmentModal"));
 const getDuplicateColumns = (columns) => {
     if (!columns) {
         return [];
@@ -72,7 +72,7 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
     const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_2.useState)(false);
     const parentRef = (0, react_2.useRef)(null);
     const envHeaderRef = (0, react_2.useRef)(null);
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = (0, AdminProvider_1.useAdmin)();
     const closeEditModal = () => {
         setEditModalIsOpen(false);
         setEditName('');
@@ -88,6 +88,16 @@ 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 = {
@@ -264,6 +274,17 @@ 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);
         }
     };
@@ -291,6 +312,15 @@ 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 (0, dataEditor_1.deleteVirtualTable)(id, state, getToken);
         await reloadTables();
         return response;
@@ -306,7 +336,7 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
         }
     };
     if (showCreateEnvironmentModal) {
-        return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: showCreateEnvironmentModal, onClose: () => setShowCreateEnvironmentModal(false), children: (0, jsx_runtime_1.jsx)(CreateEnvironment_1.default, { onOnboardComplete: () => setShowCreateEnvironmentModal(false) }) }));
+        return ((0, jsx_runtime_1.jsx)(CreateEnvironmentModal_1.default, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 minHeight: '100%',
@@ -355,6 +385,12 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                     flexDirection: 'row',
                                     gap: 8,
                                 }, children: [(0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Clicked refresh tables button in VirtualTableManager',
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                             reloadTables(tables);
                                         }, label: "Refresh Tables" }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: () => {
                                             setEditName('');
@@ -362,6 +398,12 @@ 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 ? ((0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'grid',
                         gridGap: 24,
@@ -380,6 +422,12 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                 overflow: 'hidden',
                             }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }, i))) }, 'edit-view-query')) : state.databaseTypeMismatch.show ? ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!editQueryView ? (tables && tables.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyVirtualTablesComponent_1.default, { onClick: () => {
                                 setEditQueryView(true);
+                                eventTracking?.addBreadcrumb?.({
+                                    message: 'Clicked EmptyVirtualTablesComponent in VirtualTableManager',
+                                    category: 'interaction',
+                                    level: 'info',
+                                    timestamp: Date.now(),
+                                });
                             } })) : ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'grid',
                                 gridGap: 24,
@@ -393,6 +441,12 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                             }, children: tables && tables?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tables.map((table) => ((0, jsx_runtime_1.jsx)(Admin_1.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) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
@@ -411,6 +465,15 @@ 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: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 12, width: 12, style: {
@@ -430,6 +493,15 @@ 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: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 16, width: 16, style: {
                                                             marginLeft: 'auto',
@@ -454,6 +526,15 @@ 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: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.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',
@@ -472,6 +553,15 @@ 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: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, style: {
                                                                 marginLeft: 'auto',
@@ -508,7 +598,7 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
     const [tableData, setTableData] = (0, react_2.useState)(undefined);
     const [errorInfo, setErrorInfo] = (0, react_2.useState)({ show: false, message: '' });
     const clientIsSingleTenant = (0, react_2.useMemo)(() => (0, tenants_1.onlySingleDatabaseTenant)(state.client), [state.client]);
-    const { getToken } = (0, AdminProvider_1.useAdmin)();
+    const { getToken, eventTracking } = (0, AdminProvider_1.useAdmin)();
     (0, react_2.useEffect)(() => {
         setCustomFieldQuery(customFieldInfo?.query || '');
         setCustomFieldType(customFieldInfo?.type || 'eav');
@@ -630,7 +720,7 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                         }
                                         setErrorInfo({ show: false, message: '' });
                                         setRunQueryButtonLoading(true);
-                                        const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(state.client._id, customFieldQuery, state.client.databaseType, state.queryEndpoint, getToken, state.queryHeaders);
+                                        const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(state.client._id, customFieldQuery, state.client.databaseType, state.queryEndpoint, getToken, eventTracking, state.queryHeaders);
                                         if (!getSqlResults.success) {
                                             setErrorInfo({
                                                 show: true,