@quillsql/admin 1.6.3 → 1.7.0

package/dist/cjs/public_components/DashboardManager.js

@@ -27,8 +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 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);
@@ -39,8 +41,13 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
     const [editEnvironmentModalIsOpen, setEditEnvironmentModalIsOpen] = (0, react_1.useState)(false);
     //FIXME: we don't want to lift up this state
     const [userFilters, setUserFilters] = (0, react_1.useState)([]);
-    const { data: dashboardConfig, reload: reloadDashboard } = (0, react_2.useDashboard)(state.selectedDashboard, userFilters);
+    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_1.useState)(false);
+    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);
@@ -61,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: {
@@ -84,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',
@@ -158,9 +174,23 @@ 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)(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 ??
                     dashboards?.filter((d) => d.name !== constants_1.SAVED_QUERIES_DASHBOARD)?.[0]
@@ -234,6 +264,8 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                     setClient(client, true);
                                                 }, onSelectedEditEnvironment: () => {
                                                     setEditEnvironmentModalIsOpen(true);
+                                                }, onCreateNewEnvironment: () => {
+                                                    setShowCreateEnvironmentModal(true);
                                                 }, theme: state.theme, parentRef: envSelectPopoverRef, isLoading: clientLoading }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, ref: dashboardSelectPopoverRef, children: (0, jsx_runtime_1.jsx)(components_1.DashboardSelectPopover, { dashboards: dashboards?.filter((d) => d.name !== constants_1.SAVED_QUERIES_DASHBOARD)?.length
                                                     ? dashboards
                                                         .map((elem) => {
@@ -267,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',
@@ -280,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;
@@ -288,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;
@@ -296,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) {
@@ -342,8 +398,10 @@ function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTabl
                                                         justifyContent: 'center',
                                                         width: 260,
                                                     }, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                                fontSize: 16,
+                                                                fontSize: state.theme?.fontSize,
                                                                 fontWeight: 500,
+                                                                fontFamily: state.theme?.fontFamily,
+                                                                fontSizeAdjust: 0.5,
                                                                 color: '#565656',
                                                                 paddingTop: 8,
                                                                 paddingBottom: 8,
@@ -357,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

@@ -6,7 +6,8 @@ interface EnvSelectPopoverProps {
     onSelectedEditEnvironment?: (environment: string) => void;
     parentRef: React.RefObject<HTMLDivElement>;
     isLoading?: boolean;
+    onCreateNewEnvironment?: () => void;
 }
-export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, }: EnvSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }: EnvSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=EnvSelectPopover.d.ts.map

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;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,yBAAyB,EACzB,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,2CA4NvB"}
+{"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

@@ -10,8 +10,9 @@ const AdminProvider_1 = require("../AdminProvider");
 const OrgSelect_1 = require("../components/OrgSelect");
 const MiniButtonPrimitive_1 = __importDefault(require("../primitives/MiniButtonPrimitive"));
 const UiComponents_1 = require("../components/UiComponents");
-function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, }) {
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+const QuillMultiSelectWithCombo_1 = require("../components/QuillMultiSelectWithCombo");
+function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }) {
+    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)(() => {
@@ -25,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);
     };
@@ -84,24 +94,50 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
                     marginBottom: '4px',
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
                 }, children: "Environment" }), (0, jsx_runtime_1.jsx)(OrgSelect_1.Popover, { parentRef: parentRef, label: client?.name ?? 'Select environment', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     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)(OrgSelect_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredClients.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: client._id !== item._id
+                }, 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'}`,
+                            } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredClients.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: client._id !== item._id
                                         ? () => handleItemClick(item)
                                         : 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,
                                                 marginTop: 'auto',
                                                 marginBottom: 'auto',
+                                                fontFamily: theme.fontFamily,
+                                                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", { href: '/onboard', 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,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -115,15 +151,19 @@ function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnv
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                     .quill-list-select > a {
-                      background-color: white;
+                      background-color: ${state.theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-list-selected > a {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${state.theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }
                     .quill-list-select:hover > a {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${state.theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }` }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

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;AA0C5E,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,2CA08BA"}
+{"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,6 +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 CreateEnvironmentModal_1 = __importDefault(require("../modals/CreateEnvironmentModal"));
 const getDuplicateColumns = (columns) => {
     if (!columns) {
         return [];
@@ -68,8 +69,10 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
     const [initialVirtualTable, setInitialVirtualTable] = (0, react_2.useState)(undefined);
     const [submittingVirtualTable, setSubmittingVirtualTable] = (0, react_2.useState)(false);
     const [noCustomerField, setNoCustomerField] = (0, react_2.useState)(false);
+    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_2.useState)(false);
     const parentRef = (0, react_2.useRef)(null);
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = (0, AdminProvider_1.useAdmin)();
+    const envHeaderRef = (0, react_2.useRef)(null);
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = (0, AdminProvider_1.useAdmin)();
     const closeEditModal = () => {
         setEditModalIsOpen(false);
         setEditName('');
@@ -85,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 = {
@@ -261,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);
         }
     };
@@ -288,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;
@@ -302,13 +335,16 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                 break;
         }
     };
+    if (showCreateEnvironmentModal) {
+        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%',
                 display: 'flex',
                 flexDirection: 'column',
                 paddingTop: '0px',
                 position: 'relative',
-            }, ref: parentRef, children: [(state.databaseTypeMismatch.show || !editQueryView) && ((0, jsx_runtime_1.jsx)("div", { style: {
+            }, ref: parentRef, children: [(state.databaseTypeMismatch.show || !editQueryView) && ((0, jsx_runtime_1.jsx)("div", { ref: envHeaderRef, style: {
                         //   width: 'calc(100vw - 30px)',
                         display: 'flex',
                         position: 'sticky',
@@ -342,11 +378,19 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                         setClient(client, true);
                                     }, onSelectedEditEnvironment: () => {
                                         setEditEnvironmentModalIsOpen(true);
+                                    }, onCreateNewEnvironment: () => {
+                                        setShowCreateEnvironmentModal(true);
                                     }, theme: state.theme, parentRef: parentRef, isLoading: clientLoading }) }), !editQueryView && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     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('');
@@ -354,12 +398,19 @@ 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,
                         gridTemplateColumns: 'repeat(auto-fill,minmax(460px, 1fr))',
                         padding: 25,
                         width: '100%',
+                        ...containerStyle,
                     }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("div", { style: {
                             height: '180px',
                             width: '540px',
@@ -371,14 +422,31 @@ 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,
                                 gridTemplateColumns: 'repeat(auto-fill,minmax(460px, 1fr))',
                                 padding: 25,
+                                height: '100%',
+                                maxHeight: envHeaderRef.current
+                                    ? `calc(100vh - ${envHeaderRef.current?.getBoundingClientRect().bottom ?? 0}px)`
+                                    : '100%',
+                                overflow: 'scroll',
                             }, 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',
@@ -394,8 +462,18 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         display: 'flex',
                                                         flexDirection: 'row',
                                                         alignItems: 'center',
+                                                        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: {
@@ -412,8 +490,18 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         display: 'flex',
                                                         flexDirection: 'row',
                                                         alignItems: 'center',
+                                                        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',
@@ -435,8 +523,18 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         display: 'flex',
                                                         flexDirection: 'row',
                                                         alignItems: 'center',
+                                                        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',
@@ -445,6 +543,7 @@ function VirtualTableManager({ containerStyle, virtualTable, }) {
                                                         height: 32,
                                                         width: 32,
                                                         color: state.theme?.secondaryTextColor,
+                                                        border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
                                                         borderRadius: 6,
                                                         outline: 'none',
                                                         cursor: 'pointer',
@@ -454,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',
@@ -490,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');
@@ -526,7 +634,8 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                 marginTop: '0px',
                                 marginBottom: '0px',
                                 fontWeight: 'bold',
-                                color: '#384151',
+                                color: state.theme?.primaryTextColor,
+                                fontFamily: state.theme?.fontFamily,
                             }, children: viewName ? 'Edit Virtual Table' : 'Add Virtual Table' }), (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedDeleteButton, { onClick: closeEditModal, style: undefined })] }), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { ref: (input) => editModalIsOpen && !viewName && input?.focus(), placeholder: "Enter view display name...", onChange: (e) => setName(e.target.value), value: name ? name : '' }), (0, jsx_runtime_1.jsx)("br", {}), viewOwnerTenantFields.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: "Dashboards may only query from virtual tables that share an owner with them. Virtual tables are required to return each of their owners' foreign keys as part of the query.", children: "Owners" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 flexDirection: 'row',
                                 display: 'flex',
@@ -538,7 +647,8 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                 .map((tenantField) => ((0, jsx_runtime_1.jsx)("div", { style: {
                                     fontWeight: 300,
                                     fontSize: 12,
-                                    color: Admin_1.defaultTheme?.primaryTextColor,
+                                    fontFamily: state.theme?.fontFamily,
+                                    color: state.theme?.primaryTextColor,
                                     padding: 2,
                                     paddingLeft: 4,
                                     paddingRight: 4,
@@ -567,7 +677,8 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                 fontWeight: '600',
                                 fontSize: '14px',
                                 marginBottom: '6px',
-                                color: '#212121',
+                                color: state.theme?.secondaryTextColor,
+                                fontFamily: state.theme?.fontFamily,
                             }, children: "Custom fields" }), (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: useCustomField, onClick: () => {
                                 setUseCustomField((useCustomField) => !useCustomField);
                             }, style: {
@@ -577,19 +688,22 @@ function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId,
                                         fontSize: '14px',
                                         marginBottom: '6px',
                                         marginTop: '20px',
-                                        color: '#212121',
+                                        color: state.theme?.secondaryTextColor,
+                                        fontFamily: state.theme?.fontFamily,
                                     }, children: "Custom field type" }), (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { theme: state.theme, value: customFieldType?.toLowerCase(), onChange: (e) => {
                                         setCustomFieldType(e);
                                     }, left: { label: 'EAV', value: 'eav' }, right: { label: 'JSON', value: 'json' } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("h3", { style: {
                                         fontWeight: '600',
                                         fontSize: '14px',
                                         marginBottom: '6px',
-                                        color: '#212121',
+                                        color: state.theme?.secondaryTextColor,
+                                        fontFamily: state.theme?.fontFamily,
                                     }, children: "Custom field query" }), (0, jsx_runtime_1.jsx)("h3", { style: {
                                         fontWeight: '400',
                                         fontSize: '14px',
                                         marginBottom: '20px',
-                                        color: '#212121',
+                                        color: state.theme?.secondaryTextColor,
+                                        fontFamily: state.theme?.fontFamily,
                                     }, children: customFieldType === 'eav'
                                         ? `A table of custom fields. It must have these columns: ref_table, ref_id, ref_table_id_field, field, value, type${clientIsSingleTenant ? '' : `, ${state.client.customerFieldName.replaceAll('"', '')}`}.`
                                         : `A table of custom fields. It must have these columns: ref_table, ref_column, field${clientIsSingleTenant ? '' : `, ${state.client.customerFieldName.replaceAll('"', '')}`}.` }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: customFieldQuery, setValue: (e) => {
@@ -606,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);
+                                        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,