@quillsql/admin 1.6.3 → 1.7.0

package/dist/cjs/primitives/ButtonPrimitive.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Admin_1 = require("../Admin");
 const UiComponents_1 = require("../components/UiComponents");
-const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
+const AdminProvider_1 = require("../AdminProvider");
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme, style, disabled, variant = 'primary', type = 'submit', }) => {
+    const { state: { theme: stateTheme }, } = (0, AdminProvider_1.useAdmin)();
+    theme = theme ?? stateTheme;
     if (variant === 'danger') {
         return ((0, jsx_runtime_1.jsx)("button", { type: type, style: {
                 height: 40,
@@ -26,7 +28,6 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.de
     }
     return ((0, jsx_runtime_1.jsxs)("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', type: type, style: {
             height: 40,
-            color: theme?.backgroundColor ?? 'white',
             display: 'flex',
             borderRadius: 6,
             alignItems: 'center',
@@ -45,13 +46,16 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.de
             ...style,
         }, onClick: disabled || isLoading ? () => { } : onClick, children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
                     visibility: isLoading ? 'hidden' : 'visible',
                 }, children: label })] }));

package/dist/cjs/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/cjs/primitives/CheckboxPrimitive.js

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

package/dist/cjs/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/cjs/primitives/HeaderPrimitive.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Admin_1 = require("../Admin");
-const HeaderPrimitive = ({ label, theme = Admin_1.defaultTheme, }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
-        color: theme?.primaryTextColor,
-        fontFamily: theme?.fontFamily,
-        fontWeight: theme?.buttonFontWeight || 600,
-        fontSize: 24,
-    }, children: label }));
+const AdminProvider_1 = require("../AdminProvider");
+const HeaderPrimitive = ({ label, theme }) => {
+    const { state: { theme: stateTheme }, } = (0, AdminProvider_1.useAdmin)();
+    theme = theme ?? stateTheme;
+    return ((0, jsx_runtime_1.jsx)("h1", { style: {
+            color: theme?.primaryTextColor,
+            fontFamily: theme?.fontFamily,
+            fontWeight: theme?.buttonFontWeight || 600,
+            fontSize: 24,
+        }, children: label }));
+};
 exports.default = HeaderPrimitive;

package/dist/cjs/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/cjs/primitives/PopoverPrimitive.js

@@ -4,7 +4,9 @@ exports.Popover = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const AdminProvider_1 = require("../AdminProvider");
 const Popover = ({ trigger, content }) => {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     const [isVisible, setIsVisible] = (0, react_1.useState)(false);
     const [position, setPosition] = (0, react_1.useState)({
         top: 0,
@@ -25,19 +27,30 @@ 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 ((0, jsx_runtime_1.jsxs)("div", { id: "my-relative-container", style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { ref: triggerRef, onClick: () => setIsVisible((isVisible) => !isVisible), children: trigger }), isVisible &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onClick: () => setIsVisible(false), style: {
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.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/cjs/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/cjs/primitives/SecondaryButtonPrimitive.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Admin_1 = require("../Admin");
-const SecondaryButtonPrimitive = ({ onClick, label, theme = Admin_1.defaultTheme, disabled, style, }) => {
+const AdminProvider_1 = require("../AdminProvider");
+const SecondaryButtonPrimitive = ({ onClick, label, theme, disabled, style, }) => {
+    const { state: { theme: stateTheme }, } = (0, AdminProvider_1.useAdmin)();
+    theme = theme ?? stateTheme;
     return ((0, jsx_runtime_1.jsx)("button", { style: {
             height: 40,
             background: disabled ? '#f8f8f8' : '#ffffff',
-            borderColor: '#E7E7E7',
+            borderColor: theme?.borderColor,
             borderStyle: 'solid',
             borderWidth: 1,
             color: theme?.primaryTextColor,

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

@@ -17,13 +17,16 @@ const useDashboardManager_1 = require("../hooks/useDashboardManager");
 const tenants_1 = require("../utils/tenants");
 const primitives_1 = require("../primitives");
 const constants_1 = require("../utils/constants");
+const CreateEnvironmentModal_1 = __importDefault(require("../modals/CreateEnvironmentModal"));
 function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }) {
     const parentRef = (0, react_1.useRef)(null);
-    const { state, dispatch, clientLoading, setClient } = (0, AdminProvider_1.useAdmin)();
+    const envPopoverRef = (0, react_1.useRef)(null);
+    const { state, dispatch, clientLoading, setClient, onRequestAddVirtualTable, } = (0, AdminProvider_1.useAdmin)();
     const [query, setQuery] = (0, react_1.useState)(state.activeQuery);
     const [toggleMode, setToggleMode] = (0, react_1.useState)(activeComponent);
+    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_1.useState)(false);
     const { setSelectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
-    const { reload } = (0, react_2.useDashboard)(constants_1.SAVED_QUERIES_DASHBOARD);
+    const { reload } = (0, react_2.useDashboardInternal)(constants_1.SAVED_QUERIES_DASHBOARD);
     const modeToggleOptions = [
         { label: 'SQL Editor', value: 'SQL Editor' },
         { label: 'Report Builder', value: 'Report Builder' },
@@ -54,6 +57,9 @@ function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinatio
     (0, react_1.useEffect)(() => {
         setToggleMode(activeComponent);
     }, [activeComponent]);
+    if (showCreateEnvironmentModal) {
+        return ((0, jsx_runtime_1.jsx)(CreateEnvironmentModal_1.default, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             height: '100%',
             ...containerStyle,
@@ -88,9 +94,12 @@ function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinatio
                                     flexDirection: 'row',
                                     gap: 12,
                                     alignItems: 'flex-end',
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(components_1.EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
+                                }, ref: envPopoverRef, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(components_1.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 &&
                                         !(0, tenants_1.onlySingleDatabaseTenant)(state.client) && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { isLoading: clientLoading })), (0, jsx_runtime_1.jsx)(QuillTab_1.default, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, width: "250px" })] }), onExit && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
                                     onExit();
@@ -110,8 +119,8 @@ function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinatio
                         gap: 32,
                         padding: 32,
                     }, children: [(0, jsx_runtime_1.jsx)(PlaceholderPrimitive_1.default, { containerStyle: { width: '12%' } }), (0, jsx_runtime_1.jsx)(PlaceholderPrimitive_1.default, { containerStyle: { maxHeight: 300 } })] })) : toggleMode === 'Report Builder' ? ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: onClick, label: 'Add to dashboard', isLoading: isLoading, disabled: disabled }));
@@ -119,13 +128,14 @@ function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinatio
                         return ((0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: onClick, label: label, isLoading: isLoading, disabled: disabled }));
                     }, destinationDashboard: destinationDashboard, chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
                         ? false
-                        : true })) : ((0, jsx_runtime_1.jsx)(react_2.SQLEditor, { isAdminEnabled: true, showTableFormatOptions: true, showAccessControlOptions: true, showDateFieldOptions: true, defaultQuery: query, addToDashboardButtonLabel: 'Add to dashboard', chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, 
+                        : true, onRequestAddVirtualTable: onRequestAddVirtualTable })) : ((0, jsx_runtime_1.jsx)(react_2.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/cjs/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"}

package/dist/cjs/public_components/CreateEnvironment.js

@@ -45,25 +45,14 @@ 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 header1Style = {
-    fontWeight: '600',
-    fontSize: '18px',
-    marginBottom: '6px',
-    color: '#000000',
-};
-const header2Style = {
-    fontWeight: '500',
-    fontSize: '13px',
-    color: '#595959',
-    marginBottom: '4px',
-};
+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.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: {
             label: 'Connect Database',
@@ -78,7 +67,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
             open: false,
         },
     });
-    const [connection, setConnection] = (0, react_1.useState)((0, databases_1.getDatabaseConnectionFormat)('PostgreSQL'));
+    const [connection, setConnection] = (0, react_1.useState)((0, databases_1.getDatabaseConnectionFormat)(state.isSelfHosted ? defaultDatabaseType : 'PostgreSQL'));
     const [newClient, setNewClient] = (0, react_1.useState)({});
     const [databaseSchema, setDatabaseSchema] = (0, react_1.useState)(undefined);
     const [sqlTables, setSqlTables] = (0, react_1.useState)([]);
@@ -90,12 +79,21 @@ 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([]);
         if (newClient.clientId) {
             await (0, dataFetcher_1.quillFetch)({
                 client: {
+                    queryHeaders: state.queryHeaders,
                     queryEndpoint: state.queryEndpoint,
                     clientId: newClient.clientId,
                     withCredentials: false,
@@ -107,6 +105,10 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                 getToken,
             });
         }
+        eventTracking?.logEvent?.('start-onboarding', {
+            clientId,
+            clerkOrgId,
+        });
         setNewClient({
             clientId,
         });
@@ -120,7 +122,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
             clientId,
             databaseType: connectionInfo.type,
             schemaNames: selectedSchemaNames,
-            domainName,
+            clerkOrgId,
         });
         // FIXME: Error handling
         try {
@@ -128,7 +130,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                 type: 'SET_DATABASE_SCHEMA',
                 payload: { schema: [], id: clientId, loading: true },
             });
-            await (0, ConnectionClient_1.getTableColumnsBySchema)(state.queryEndpoint, clientId, getToken, selectedSchemaNames)
+            await (0, ConnectionClient_1.getTableColumnsBySchema)(state.isSelfHosted, state.queryEndpoint, clientId, connection.type, getToken, selectedSchemaNames, state.queryHeaders)
                 .then((schema) => {
                 dispatch({
                     type: 'SET_DATABASE_SCHEMA',
@@ -141,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);
@@ -163,6 +186,8 @@ 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: {
                 queryEndpoint: state.queryEndpoint,
@@ -176,8 +201,9 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                     ...newClient,
                     allTenantTypes: undefined,
                 },
-                domainName: domainName,
+                clerkOrgId: clerkOrgId,
                 clientId: newClient.clientId,
+                orgName,
             },
             adminMode: true,
         });
@@ -185,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({
@@ -199,6 +233,20 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
         // setOnboardingCompleteIsLoading(false);
     };
     const isTestMode = process.env.TEST_MODE === 'true';
+    const header1Style = {
+        fontWeight: '600',
+        fontSize: '18px',
+        marginBottom: '6px',
+        color: state.theme?.primaryTextColor,
+        fontFamily: state.theme?.fontFamily,
+    };
+    const header2Style = {
+        fontWeight: '500',
+        fontSize: '13px',
+        marginBottom: '4px',
+        fontFamily: state.theme?.fontFamily,
+        color: state.theme?.secondaryTextColor,
+    };
     return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
             ...containerStyle,
             display: 'flex',
@@ -229,7 +277,7 @@ function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
                         ownerTenantFields: [tenantInit.ownerTenant.tenantField],
                         allTenantTypes: [tenantInit.ownerTenant],
                     });
-                    openStep('createVirtualTables');
+                    finishOnboarding();
                 }, returnToConnectDatabase: () => {
                     setNewClient({
                         ...newClient,
@@ -243,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;AAuChF,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,2CA6yBA"}
+{"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"}