@quillsql/admin 1.6.3 → 1.7.0

package/dist/esm/modals/NewDashboardModal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import InputLabel from '../components/InputLabel';
 import CardSection from '../components/CardSection';
 import { useAdmin } from '../AdminProvider';
@@ -25,6 +25,7 @@ export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, T
     const [initialRange, setInitialRange] = useState({ label: 'Last 30 days', value: 'LAST_30_DAYS' });
     const [newDateFilter, setNewDateFilter] = useState(undefined);
     const [tenantKey, setTenantKey] = useState(state.client?.ownerTenantFields?.[0]);
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const ownerTenants = useMemo(() => state.client?.allTenantTypes?.filter((tenant) => state.client?.ownerTenantFields?.includes(tenant.tenantField)), [state.client?.allTenantTypes, state.client?.ownerTenantFields]);
     const filteredTables = useMemo(() => {
         return state.tables.filter((table) => {
@@ -37,12 +38,16 @@ export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, T
         return (newFilters.some((filter) => !filter.label || !filter.table || !filter.field) ||
             newDateFilter?.label === '' ||
             !tenantKey ||
-            !selectedDashboardName);
-    }, [newFilters, newDateFilter, selectedDashboardName]);
+            !selectedDashboardName ||
+            isSubmitting);
+    }, [newFilters, newDateFilter, selectedDashboardName, isSubmitting]);
     const handleAddFilter = async () => {
         setNewFilters([...newFilters, {}]);
     };
-    const handleSubmitDashboardChanges = async () => {
+    const handleSubmitDashboardChanges = useCallback(async () => {
+        if (isSubmitting) {
+            return; // Prevent double submission
+        }
         if (!selectedDashboardName ||
             newFilters.some((filter) => !filter.label) ||
             (Object.keys(newDateFilter ?? {}).length && !newDateFilter?.label)) {
@@ -101,26 +106,47 @@ export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, T
             alert('Your dashboard must have an owner');
             return;
         }
-        await createDashboard({
-            name: selectedDashboardName.trim(),
-            filters: updatedFilters,
-            dateFilter: newDateFilter
-                ? {
-                    ...newDateFilter,
-                    // comparison: isDateComparison,
-                    comparison: false,
-                    primaryRange: initialRange,
-                }
-                : undefined,
-            dashboardOwners: [tenantKey],
-        });
-        onSave(selectedDashboardName, tenantKey);
-        await delay(200);
-        setIsOpen(false);
-        setSelectedDashboardName('');
-        setNewFilters([]);
-        // setIsDateComparison(false);
-    };
+        setIsSubmitting(true);
+        try {
+            await createDashboard({
+                name: selectedDashboardName.trim(),
+                filters: updatedFilters,
+                dateFilter: newDateFilter
+                    ? {
+                        ...newDateFilter,
+                        // comparison: isDateComparison,
+                        comparison: false,
+                        primaryRange: initialRange,
+                    }
+                    : undefined,
+                dashboardOwners: [tenantKey],
+            });
+            onSave(selectedDashboardName, tenantKey);
+            await delay(200);
+            setIsOpen(false);
+            setSelectedDashboardName('');
+            setNewFilters([]);
+            // setIsDateComparison(false);
+        }
+        catch (error) {
+            console.error('Error creating dashboard:', error);
+            // Optionally show an error message to the user
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [
+        isSubmitting,
+        selectedDashboardName,
+        newFilters,
+        newDateFilter,
+        dashNames,
+        tenantKey,
+        initialRange,
+        createDashboard,
+        onSave,
+        setIsOpen,
+    ]);
     const handleDeleteFilter = (index) => {
         setNewFilters(newFilters.filter((_, i) => i !== index));
     };
@@ -239,13 +265,13 @@ export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, T
                                             }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx(SelectComponent, { value: filter?.field ?? '', options: filter?.table
                                                         ? filteredTables
                                                             .find((t) => t.name === filter.table)
-                                                            .columns.filter((column) => convertFieldTypeToJSType(column.fieldType) === 'string')
+                                                            ?.columns.filter((column) => convertFieldTypeToJSType(column.fieldType) === 'string')
                                                             .map((column) => {
                                                             return {
-                                                                label: column.name,
-                                                                value: column.name,
+                                                                label: column.label || column.field,
+                                                                value: column.field,
                                                             };
-                                                        })
+                                                        }) || []
                                                         : [], onChange: (e) => {
                                                         // Capitalize the label
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
@@ -291,5 +317,5 @@ export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, T
                                                                     cursor: 'pointer',
                                                                     width: '100%',
                                                                 }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }));
-                            }) })), _jsx("div", { style: { height: 12 } }), _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), _jsx("div", { style: { height: 18 } }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: 'Create', disabled: saveButtonDisabled }) })] }) }));
+                            }) })), _jsx("div", { style: { height: 12 } }), _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), _jsx("div", { style: { height: 18 } }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: isSubmitting ? 'Creating...' : 'Create', disabled: saveButtonDisabled }) })] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PromoteReportModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteReportModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,oBAAoB,GACrB,EAAE,kBAAkB,2CA4LpB"}
+{"version":3,"file":"PromoteReportModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteReportModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,oBAAoB,GACrB,EAAE,kBAAkB,2CA2MpB"}

package/dist/esm/modals/PromoteReportModal.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useAdmin } from '../AdminProvider';
 import { useDashboards } from '@quillsql/react';
 export default function PromoteReportModal({ ModalComponent, HeaderComponent, ButtonComponent, SelectComponent, CheckboxComponent, isOpen, setIsOpen, reportId, currentClientId, currentDashboardName, }) {
-    const { state, quillFetchWithToken } = useAdmin();
+    const { state, quillFetchWithToken, eventTracking } = useAdmin();
     const { dashboards } = useDashboards();
     const [selectedClientId, setSelectedClientId] = useState(currentClientId);
     const [dashboardName, setDashboardName] = useState(null);
@@ -48,7 +48,7 @@ export default function PromoteReportModal({ ModalComponent, HeaderComponent, Bu
                     dashboardName: dashboardName,
                     itemId: reportId,
                     skipWarning,
-                    addMissingTables: autoPromoteVirtualTables,
+                    addMissingTables: autoPromoteVirtualTables && currentClientId !== selectedClientId,
                 },
                 adminMode: true,
             });
@@ -78,6 +78,17 @@ export default function PromoteReportModal({ ModalComponent, HeaderComponent, Bu
             alert('Report promoted successfully.');
         }
         catch (error) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error promoting report',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'PromoteReportModal',
+                    function: 'handlePromote',
+                },
+            });
             console.error('Promotion failed:', error);
         }
     };
@@ -112,13 +123,13 @@ export default function PromoteReportModal({ ModalComponent, HeaderComponent, Bu
                                 display: 'flex',
                                 justifyContent: 'space-between',
                                 gap: 12,
-                            }, children: [_jsx(CheckboxComponent, { label: "Add missing tables", isChecked: autoPromoteVirtualTables, onChange: () => {
+                            }, children: [_jsx(CheckboxComponent, { label: "Add missing tables", isChecked: autoPromoteVirtualTables && currentClientId !== selectedClientId, onChange: () => {
                                         setAutoPromoteVirtualTables(!autoPromoteVirtualTables);
                                     }, labelStyle: {
                                         color: '#666666',
                                         fontSize: '13px',
                                         fontWeight: 400,
-                                    } }), _jsx(ButtonComponent, { onClick: () => {
+                                    }, disabled: currentClientId === selectedClientId }), _jsx(ButtonComponent, { onClick: () => {
                                         handlePromote();
                                         setIsOpen(false);
                                     }, label: "Promote Report", disabled: !selectedClientId || !dashboardName, width: 160 })] })] })] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,cAAc,EACd,eAAe,EACf,eAAe,EACf,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,GACL,EAAE,wBAAwB,2CA2H1B"}
+{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,cAAc,EACd,eAAe,EACf,eAAe,EACf,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,GACL,EAAE,wBAAwB,2CAsI1B"}

package/dist/esm/modals/PromoteViewModal.js

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import { QuillSelectComponentWithCombo } from '../components/QuillSelectWithCombo';
 import { useAdmin } from '../AdminProvider';
 export default function PromoteVirtualTableModal({ ModalComponent, HeaderComponent, ButtonComponent, isOpen, setIsOpen, clientId, client, clients, view, }) {
-    const { state, quillFetchWithToken } = useAdmin();
+    const { state, quillFetchWithToken, eventTracking } = useAdmin();
     const [selectedClientId, setClientId] = useState(undefined);
     useEffect(() => {
-        setClientId(clients[0].id);
+        setClientId(clients[0]?.id);
     }, [clients]);
     const handlePromote = async (skipWarning = false) => {
         if (!selectedClientId) {
@@ -48,6 +48,17 @@ export default function PromoteVirtualTableModal({ ModalComponent, HeaderCompone
             alert('Virtual Table promoted successfully.');
         }
         catch (error) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error promoting virtual table',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'PromoteViewModal',
+                    function: 'handlePromote',
+                },
+            });
             console.error('Promotion failed:', error);
         }
     };

package/dist/esm/primitives/ButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAgGF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAsGF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/ButtonPrimitive.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defaultTheme } from '../Admin';
 import { LoadingSpinner } from '../components/UiComponents';
-const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
+import { useAdmin } from '../AdminProvider';
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme, style, disabled, variant = 'primary', type = 'submit', }) => {
+    const { state: { theme: stateTheme }, } = useAdmin();
+    theme = theme ?? stateTheme;
     if (variant === 'danger') {
         return (_jsx("button", { type: type, style: {
                 height: 40,
@@ -24,7 +26,6 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultThe
     }
     return (_jsxs("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', type: type, style: {
             height: 40,
-            color: theme?.backgroundColor ?? 'white',
             display: 'flex',
             borderRadius: 6,
             alignItems: 'center',
@@ -43,13 +44,16 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultThe
             ...style,
         }, onClick: disabled || isLoading ? () => { } : onClick, children: [_jsx("style", { children: `
       .quill-button {
-        background-color: #212121;
+        background-color: ${theme?.primaryButtonColor ?? '#212121'};
+        color: ${theme?.primaryButtonTextColor ?? 'white'}
       }
       .quill-button-disabled {
-        background-color: rgba(56, 65, 81, 0.9);
+        background-color: ${theme?.primaryButtonColor ?? '#212121'};
+        color: ${theme?.primaryButtonTextColor ?? 'white'}
       }
       .quill-button:hover {
-        background-color: rgba(56, 65, 81, 0.9);
+        background-color: ${theme?.hoverPrimaryButtonColor ?? 'rgba(56, 65, 81, 0.9)'};
+        color: ${theme?.hoverPrimaryButtonTextColor ?? 'white'}
       }` }), isLoading ? (_jsx("div", { style: { position: 'absolute' }, children: _jsx(LoadingSpinner, {}) })) : null, _jsx("div", { style: {
                     visibility: isLoading ? 'hidden' : 'visible',
                 }, children: label })] }));

package/dist/esm/primitives/CheckboxPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/CheckboxPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgDvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CheckboxPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/CheckboxPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkDvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/primitives/CheckboxPrimitive.js

@@ -13,6 +13,7 @@ const CheckboxPrimitive = ({ label, isChecked, onChange, containerStyle, labelSt
                     height: '14px',
                     margin: 'auto 0',
                     cursor: 'pointer',
+                    opacity: disabled ? 0.5 : 1,
                 } }), _jsx("span", { style: {
                     display: 'block',
                     marginTop: 'auto',
@@ -21,6 +22,7 @@ const CheckboxPrimitive = ({ label, isChecked, onChange, containerStyle, labelSt
                     whiteSpace: 'nowrap',
                     textOverflow: 'ellipsis',
                     overflow: 'hidden',
+                    opacity: disabled ? 0.5 : 1,
                     ...labelStyle,
                 }, children: label })] }));
 };

package/dist/esm/primitives/HeaderPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/HeaderPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAcnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HeaderPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/HeaderPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/HeaderPrimitive.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { defaultTheme } from '../Admin';
-const HeaderPrimitive = ({ label, theme = defaultTheme, }) => (_jsx("h1", { style: {
-        color: theme?.primaryTextColor,
-        fontFamily: theme?.fontFamily,
-        fontWeight: theme?.buttonFontWeight || 600,
-        fontSize: 24,
-    }, children: label }));
+import { useAdmin } from '../AdminProvider';
+const HeaderPrimitive = ({ label, theme }) => {
+    const { state: { theme: stateTheme }, } = useAdmin();
+    theme = theme ?? stateTheme;
+    return (_jsx("h1", { style: {
+            color: theme?.primaryTextColor,
+            fontFamily: theme?.fontFamily,
+            fontWeight: theme?.buttonFontWeight || 600,
+            fontSize: 24,
+        }, children: label }));
+};
 export default HeaderPrimitive;

package/dist/esm/primitives/PopoverPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/PopoverPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,UAAU,YAAY;IACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,OAAO,yBAA0B,YAAY,4CAiEzD,CAAC"}
+{"version":3,"file":"PopoverPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/PopoverPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,YAAY;IACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,OAAO,GAAI,sBAAsB,YAAY,4CAqFzD,CAAC"}

package/dist/esm/primitives/PopoverPrimitive.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { useAdmin } from '../AdminProvider';
 export const Popover = ({ trigger, content }) => {
+    const { state: { theme }, } = useAdmin();
     const [isVisible, setIsVisible] = useState(false);
     const [position, setPosition] = useState({
         top: 0,
@@ -22,19 +24,30 @@ export const Popover = ({ trigger, content }) => {
             updatePosition();
             window.addEventListener('scroll', updatePosition);
             window.addEventListener('resize', updatePosition);
+            const handleClickOutside = (event) => {
+                if (triggerRef.current &&
+                    !triggerRef.current.contains(event.target) &&
+                    !document
+                        .querySelector('[data-popover-content]')
+                        ?.contains(event.target)) {
+                    setIsVisible(false);
+                }
+            };
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                window.removeEventListener('scroll', updatePosition);
+                window.removeEventListener('resize', updatePosition);
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
         }
-        return () => {
-            window.removeEventListener('scroll', updatePosition);
-            window.removeEventListener('resize', updatePosition);
-        };
     }, [isVisible]);
     return (_jsxs("div", { id: "my-relative-container", style: { position: 'relative' }, children: [_jsx("div", { ref: triggerRef, onClick: () => setIsVisible((isVisible) => !isVisible), children: trigger }), isVisible &&
-                createPortal(_jsx("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onClick: () => setIsVisible(false), style: {
+                createPortal(_jsx("div", { "data-popover-content": true, onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onClick: () => setIsVisible(false), style: {
                         position: 'absolute',
                         zIndex: 1000,
                         top: position.top,
                         left: position.left - 53,
-                        background: 'white',
+                        background: theme.backgroundColor,
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
                         padding: 12,
                         borderRadius: 6,

package/dist/esm/primitives/SecondaryButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/SecondaryButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAEpD,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkCrE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"SecondaryButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/SecondaryButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAsCrE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/esm/primitives/SecondaryButtonPrimitive.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { defaultTheme } from '../Admin';
-const SecondaryButtonPrimitive = ({ onClick, label, theme = defaultTheme, disabled, style, }) => {
+import { useAdmin } from '../AdminProvider';
+const SecondaryButtonPrimitive = ({ onClick, label, theme, disabled, style, }) => {
+    const { state: { theme: stateTheme }, } = useAdmin();
+    theme = theme ?? stateTheme;
     return (_jsx("button", { style: {
             height: 40,
             background: disabled ? '#f8f8f8' : '#ffffff',
-            borderColor: '#E7E7E7',
+            borderColor: theme?.borderColor,
             borderStyle: 'solid',
             borderWidth: 1,
             color: theme?.primaryTextColor,

package/dist/esm/primitives/TogglePrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,eAAe,yCAKlB;IACD,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAoEA,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,eAAe,GAAI,sCAKtB;IACD,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAoEA,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChartQueryBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/ChartQueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AAUzB,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,MAAM,EACN,cAAc,EACd,oBAAoB,GACrB,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,2CAkOA"}
+{"version":3,"file":"ChartQueryBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/ChartQueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AAWzB,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,MAAM,EACN,cAAc,EACd,oBAAoB,GACrB,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,2CA4PA"}

package/dist/esm/public_components/ChartQueryBuilder.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
 import { EnvSelectPopover, OrgSelect } from '../components';
-import { ReportBuilder, SQLEditor, useDashboard, } from '@quillsql/react';
+import { ReportBuilder, SQLEditor, useDashboardInternal, } from '@quillsql/react';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
 import QuillTab from '../components/QuillTab';
 import XMarkIcon from '../icons/XMarkIcon';
@@ -11,13 +11,16 @@ import { useDashboardManager } from '../hooks/useDashboardManager';
 import { onlySingleDatabaseTenant } from '../utils/tenants';
 import { ButtonPrimitive } from '../primitives';
 import { SAVED_QUERIES_DASHBOARD } from '../utils/constants';
+import CreateEnvironmentModal from '../modals/CreateEnvironmentModal';
 export default function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }) {
     const parentRef = useRef(null);
-    const { state, dispatch, clientLoading, setClient } = useAdmin();
+    const envPopoverRef = useRef(null);
+    const { state, dispatch, clientLoading, setClient, onRequestAddVirtualTable, } = useAdmin();
     const [query, setQuery] = useState(state.activeQuery);
     const [toggleMode, setToggleMode] = useState(activeComponent);
+    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = useState(false);
     const { setSelectedDashboard } = useDashboardManager();
-    const { reload } = useDashboard(SAVED_QUERIES_DASHBOARD);
+    const { reload } = useDashboardInternal(SAVED_QUERIES_DASHBOARD);
     const modeToggleOptions = [
         { label: 'SQL Editor', value: 'SQL Editor' },
         { label: 'Report Builder', value: 'Report Builder' },
@@ -48,6 +51,9 @@ export default function ChartQueryBuilder({ activeComponent, onExit, containerSt
     useEffect(() => {
         setToggleMode(activeComponent);
     }, [activeComponent]);
+    if (showCreateEnvironmentModal) {
+        return (_jsx(CreateEnvironmentModal, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
+    }
     return (_jsx("div", { style: {
             height: '100%',
             ...containerStyle,
@@ -82,9 +88,12 @@ export default function ChartQueryBuilder({ activeComponent, onExit, containerSt
                                     flexDirection: 'row',
                                     gap: 12,
                                     alignItems: 'flex-end',
-                                }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
+                                }, ref: envPopoverRef, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
+                                                setSelectedDashboard(null);
                                                 setClient(client, true);
-                                            }, theme: state.theme, parentRef: parentRef, isLoading: clientLoading }) }), state.client?.name !== undefined &&
+                                            }, theme: state.theme, parentRef: envPopoverRef, isLoading: clientLoading, onCreateNewEnvironment: () => {
+                                                setShowCreateEnvironmentModal(true);
+                                            } }) }), state.client?.name !== undefined &&
                                         !state.databaseTypeMismatch.show &&
                                         !onlySingleDatabaseTenant(state.client) && (_jsx(OrgSelect, { isLoading: clientLoading })), _jsx(QuillTab, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, width: "250px" })] }), onExit && (_jsx("button", { type: "button", onClick: () => {
                                     onExit();
@@ -104,8 +113,8 @@ export default function ChartQueryBuilder({ activeComponent, onExit, containerSt
                         gap: 32,
                         padding: 32,
                     }, children: [_jsx(PlaceholderPrimitive, { containerStyle: { width: '12%' } }), _jsx(PlaceholderPrimitive, { containerStyle: { maxHeight: 300 } })] })) : toggleMode === 'Report Builder' ? (_jsx(ReportBuilder, { reportId: state.activeSavedQueryReportId ?? '', isAdminEnabled: true, onSubmitCreateReport: submitReport, onSubmitEditReport: submitReport, onSubmitSaveQuery: submitSavedQuery, containerStyle: {
-                        height: 'calc(100vh - 146px)',
                         width: '100%',
+                        backgroundColor: 'white',
                     }, ButtonComponent: ({ onClick, label, isLoading, disabled }) => {
                         if (label === 'Save changes' && state.activeSavedQueryReportId) {
                             return (_jsx(ButtonPrimitive, { onClick: onClick, label: 'Add to dashboard', isLoading: isLoading, disabled: disabled }));
@@ -113,13 +122,14 @@ export default function ChartQueryBuilder({ activeComponent, onExit, containerSt
                         return (_jsx(ButtonPrimitive, { onClick: onClick, label: label, isLoading: isLoading, disabled: disabled }));
                     }, destinationDashboard: destinationDashboard, chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
                         ? false
-                        : true })) : (_jsx(SQLEditor, { isAdminEnabled: true, showTableFormatOptions: true, showAccessControlOptions: true, showDateFieldOptions: true, defaultQuery: query, addToDashboardButtonLabel: 'Add to dashboard', chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, 
+                        : true, onRequestAddVirtualTable: onRequestAddVirtualTable })) : (_jsx(SQLEditor, { isAdminEnabled: true, showTableFormatOptions: true, showAccessControlOptions: true, showDateFieldOptions: true, defaultQuery: query, addToDashboardButtonLabel: 'Add to dashboard', chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, 
                     // report={state.activeQuery ? state.activeEditItem : undefined}
                     onAddToDashboardComplete: submitReport, onSaveQueryComplete: submitSavedQuery, containerStyle: {
                         height: '100%',
                         width: '100%',
                         overflow: 'hidden',
+                        backgroundColor: 'white',
                         // paddingRight: 25,
                         // paddingTop: 25,
-                    }, destinationDashboard: destinationDashboard }))] }) }));
+                    }, destinationDashboard: destinationDashboard, onRequestAddVirtualTable: onRequestAddVirtualTable }))] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,aAAa,EAOd,MAAM,OAAO,CAAC;AAsCf,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAoUA"}
+{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,aAAa,EAOd,MAAM,OAAO,CAAC;AAyBf,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA6YA"}