@quillsql/admin 1.6.3 → 1.7.0

package/dist/esm/components/UiComponents.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-//@ts-nocheck
 import { useContext, useEffect, useState, useRef, } from 'react';
+import { useAdmin } from '../AdminProvider';
 import { XIcon } from '../assets';
 import { ThemeContext } from '@quillsql/react';
-import useOnClickOutside from '../hooks/useOnClickOutside';
+import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
 import { QuillToolTipPortal } from './QuillToolTipPortal';
+import { createPortal } from 'react-dom';
+import { getScrollableParent } from '../utils/ui';
 export const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
-    const [theme] = useContext(ThemeContext);
+    const { state } = useAdmin();
     return (_jsxs("div", { style: { position: 'relative', width: width }, children: [_jsx("style", { children: `
       .quill-text-input {
         background-color: white;
         height: 40px;
         width: 180px;
         color: #384151;
-        border: 1px solid #e7e7e7;
+        border: 1px solid ${state.theme.borderColor};
         border-radius: 6px;
         text-align: left;
         box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
@@ -23,15 +25,14 @@ export const MemoizedTextInput = ({ value, onChange, placeholder, id, width, })
         padding-bottom: 0px;
         box-sizing: content-box;
     }` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: onChange, placeholder: placeholder, style: {
-                    fontFamily: theme?.fontFamily,
+                    fontFamily: state.theme?.fontFamily,
                     width: width ? 'calc(100% - 24px)' : '180px',
                 } })] }));
 };
 export const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', disabled = false, tooltipText = '', }) => {
-    const [theme] = useContext(ThemeContext);
+    const { state } = useAdmin();
     return (_jsx(QuillToolTipPortal, { text: tooltipText, enabled: tooltipText !== '', children: _jsxs("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', onClick: disabled ? undefined : onClick, style: {
-                fontFamily: theme?.fontFamily,
-                color: primary ? 'white' : '#212121',
+                fontFamily: state.theme?.fontFamily,
                 height: 40,
                 display: 'flex',
                 border: 'none',
@@ -50,20 +51,30 @@ export const MemoizedButton = ({ label, onClick, isLoading = false, primary = tr
                 width: width,
             }, children: [_jsx("style", { children: `
         .quill-button {
-            background-color: ${primary ? '#212121' : 'white'};
+          background-color: ${primary ? state.theme?.primaryButtonColor : 'white'};
+          color: ${primary
+                        ? (state.theme?.primaryButtonTextColor ?? 'white')
+                        : state.theme?.secondaryTextColor}
         }
         .quill-button-disabled {
-          background-color: rgba(56, 65, 81, 0.6);
+          background-color: ${primary ? state.theme?.primaryButtonColor : 'white'};
+          opacity: 0.5;
+          color: ${primary
+                        ? (state.theme?.primaryButtonTextColor ?? 'white')
+                        : state.theme?.secondaryTextColor}
         }
         .quill-button:hover {
-          background-color: rgba(56, 65, 81, 0.9);
+          background-color: ${primary ? state.theme?.hoverPrimaryButtonColor : 'rgba(56, 65, 81, 0.9)'};
+          color: ${primary
+                        ? (state.theme?.hoverPrimaryButtonTextColor ?? 'white')
+                        : state.theme?.secondaryTextColor}
         }` }), isLoading ? (_jsx("div", { style: { position: 'absolute' }, children: _jsx(LoadingSpinner, {}) })) : null, _jsx("div", { style: {
                         visibility: isLoading ? 'hidden' : 'visible',
                     }, children: label })] }) }));
 };
 export const MemoizedSecondaryButton = ({ label, onClick, isLoading = false, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_jsx("style", { children: `
+    const { state } = useAdmin();
+    return (_jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: state.theme?.fontFamily }, children: [_jsx("style", { children: `
     .quill-secondary-button {
         background-color: #F5F5F6;
         background-color: white;
@@ -108,6 +119,7 @@ export const MemoizedText = ({ children }) => (_jsx("p", { style: {
     }, children: children }));
 export function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = useRef(null);
+    const { state } = useAdmin();
     useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
@@ -129,7 +141,7 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
                         onClick(e);
                     }
                 }, label: label })), isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
-                        background: 'white',
+                        background: state.theme?.backgroundColor,
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
                         border: '1px solid #e7e7e7',
@@ -142,7 +154,10 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
                         ...style,
                     }, children: children }) }))] }));
 }
-export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) => (_jsx("div", { style: {
+export const QuillTabs = ({ options = [
+    { label: 'or', value: 'OR' },
+    { label: 'and', value: 'AND' },
+], value, onChange, }) => (_jsx("div", { style: {
         flexDirection: 'row',
         alignItems: 'center',
         borderRadius: '0.25rem',
@@ -181,7 +196,7 @@ export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) =
                 }),
         }, children: option.label }, index))) }));
 export function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
-    const [theme] = useContext(ThemeContext);
+    const { state } = useAdmin();
     useEffect(() => {
         // Prevent scrolling in the background when the modal is open
         if (isOpen) {
@@ -213,7 +228,7 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                     justifyContent: 'center',
                     alignItems: 'center',
                     transform: 'translateX(-50%) translateY(-50%)',
-                    background: 'white',
+                    background: state.theme?.backgroundColor,
                     borderRadius: 8,
                     borderStyle: 'solid',
                     borderWidth: 1,
@@ -232,7 +247,7 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                         display: 'flex',
                         flexDirection: 'column',
                         position: 'relative',
-                        fontFamily: theme?.fontFamily,
+                        fontFamily: state.theme?.fontFamily,
                     }, children: [_jsxs("div", { id: "quill-modal-header", style: {
                                 display: 'flex',
                                 flexDirection: 'row',
@@ -245,8 +260,8 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                                         marginLeft: 20,
                                         // width: '90%',
                                         textAlign: 'left',
-                                        color: theme?.primaryTextColor,
-                                    }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
+                                        color: state.theme?.primaryTextColor,
+                                    }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false), style: {} }) })] }), children] }) })] }));
 }
 export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { title: "Delete", className: "quill-delete-button", type: "button", onClick: onClick, style: {
         height: 40,
@@ -265,13 +280,16 @@ export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { t
   .quill-delete-button:hover {
     background-color: rgba(56, 65, 81, 0.03);
   }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
-export const LoadingSpinner = ({ scale = 1 }) => (_jsxs("svg", { width: "24", height: "24", style: { scale: scale }, children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-            , strokeDashoffset: "9.81" // calc(2 * 3.14 * 9.375 / 6)
-            , stroke: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 19.63" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)
-            , strokeDashoffset: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-            , stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }));
+export const LoadingSpinner = ({ scale = 1 }) => {
+    const { state: { theme }, } = useAdmin();
+    return (_jsxs("svg", { width: "24", height: "24", style: { scale: scale }, children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
+                , strokeDashoffset: "9.81" // calc(2 * 3.14 * 9.375 / 6)
+                , stroke: theme?.primaryTextColor ?? '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 19.63" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)
+                , strokeDashoffset: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
+                , stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }));
+};
 export const QuillErrorMessageComponent = ({ containerStyle, errorMessage, }) => {
-    const [theme] = useContext(ThemeContext);
+    const { state } = useAdmin();
     return (_jsx("div", { style: {
             borderRadius: 8,
             backgroundColor: '#FF9494',
@@ -282,7 +300,7 @@ export const QuillErrorMessageComponent = ({ containerStyle, errorMessage, }) =>
             alignItems: 'center',
             fontSize: 13,
             fontWeight: 'bold',
-            fontFamily: theme?.fontFamily,
+            fontFamily: state.theme?.fontFamily,
             color: 'white',
             ...containerStyle,
         }, children: errorMessage }));
@@ -303,8 +321,8 @@ export const OverflowContainer = ({ children }) => {
         const container = containerRef.current;
         if (container) {
             checkOverflow();
-            const topObserver = new IntersectionObserver(([entry]) => setShowTopShadow(!entry.isIntersecting), { root: container, threshold: 0 });
-            const bottomObserver = new IntersectionObserver(([entry]) => setShowBottomShadow(!entry.isIntersecting), { root: container, threshold: 0 });
+            const topObserver = new IntersectionObserver(([entry]) => setShowTopShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
+            const bottomObserver = new IntersectionObserver(([entry]) => setShowBottomShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
             const topSentinel = document.createElement('div');
             const bottomSentinel = document.createElement('div');
             container.insertBefore(topSentinel, container.firstChild);
@@ -322,6 +340,7 @@ export const OverflowContainer = ({ children }) => {
     const containerStyle = {
         position: 'relative',
         overflowY: 'auto',
+        overscrollBehavior: 'none',
     };
     const shadowStyle = {
         position: 'sticky',
@@ -410,3 +429,82 @@ export const QuillToolTip = ({ children, text, enabled = true, containerStyle =
           opacity: 1;
         }` }), children, _jsx("div", { className: "tooltip-text", style: { ...textStyle }, children: text })] })) : (children);
 };
+export const QuillPortal = ({ children, containerStyle, anchorRef, showModal, setShowModal, }) => {
+    const modalRef = useRef(null);
+    const [popoverPosition, setPopoverPosition] = useState(undefined);
+    const [z, setZ] = useState(10);
+    const scrollableParentRef = useRef(document.body);
+    const updatePosition = () => {
+        if (anchorRef.current) {
+            requestAnimationFrame(() => {
+                const rect = anchorRef?.current?.getBoundingClientRect();
+                if (rect) {
+                    const viewportHeight = window.innerHeight;
+                    // Calculate available space below the element with a 64px bottom margin
+                    const availableHeight = viewportHeight - rect.bottom - 64;
+                    setPopoverPosition({
+                        top: rect.bottom + window.scrollY,
+                        left: rect.left + window.scrollX,
+                        width: rect.width,
+                        maxHeight: availableHeight,
+                    });
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        let resizeObserver;
+        let mutationObserver;
+        if (showModal && anchorRef.current) {
+            updatePosition();
+            setZ(getEffectiveZIndex(anchorRef.current) + 1);
+            resizeObserver = new ResizeObserver(() => updatePosition());
+            resizeObserver.observe(anchorRef.current);
+            mutationObserver = new MutationObserver(() => updatePosition());
+            mutationObserver.observe(anchorRef.current, {
+                attributes: true,
+                subtree: true,
+            });
+            // Track scrolling of the nearest scrollable ancestor
+            scrollableParentRef.current = getScrollableParent(anchorRef.current);
+            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
+                passive: true,
+            });
+            const handleResize = () => requestAnimationFrame(updatePosition);
+            window.addEventListener('resize', handleResize, { passive: true });
+            return () => {
+                resizeObserver.disconnect();
+                mutationObserver.disconnect();
+                scrollableParentRef.current.removeEventListener('scroll', updatePosition);
+                window.removeEventListener('resize', handleResize);
+            };
+        }
+    }, [showModal]);
+    useOnClickOutside(modalRef, (event) => {
+        if (!anchorRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    return createPortal(_jsx("div", { style: {
+            position: 'absolute',
+            top: `${popoverPosition?.top ?? 0}px`,
+            left: `${popoverPosition?.left ?? 0}px`,
+            width: `${popoverPosition?.width ?? 0}px`,
+            maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
+            visibility: popoverPosition ? 'visible' : 'hidden',
+            // display: 'flex',
+            // flexDirection: 'column',
+            // boxSizing: 'border-box',
+            // borderWidth: 1,
+            // borderStyle: 'solid',
+            // borderColor: theme?.borderColor,
+            // borderRadius: 6,
+            // background: theme?.backgroundColor,
+            // marginTop: 12,
+            zIndex: z,
+            // padding: 6,
+            // fontFamily: theme?.fontFamily,
+            // overflow: 'scroll',
+            // fontSize: 14,
+            ...containerStyle,
+        }, ref: modalRef, "data-portal-ignore": "true", children: children }), document.body);
+};

package/dist/esm/forms/client_onboard/ConnectDatabase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectDatabase.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectDatabase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EASf,MAAM,uBAAuB,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE;QAClB,UAAU,EAAE,cAAc,CAAC;QAC3B,MAAM,EAAE,OAAO,CAAC,mBAAmB,GAAG;YAAE,WAAW,EAAE,MAAM,EAAE,CAAA;SAAE,CAAC,CAAC;QACjE,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;KAC3B,CAAC;IACF,qBAAqB,EAAE,CACrB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,cAAc,EAAE,EACxB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD,2CA0lBA"}
+{"version":3,"file":"ConnectDatabase.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectDatabase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EAUf,MAAM,uBAAuB,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE;QAClB,UAAU,EAAE,cAAc,CAAC;QAC3B,MAAM,EAAE,OAAO,CAAC,mBAAmB,GAAG;YAAE,WAAW,EAAE,MAAM,EAAE,CAAA;SAAE,CAAC,CAAC;QACjE,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;KAC3B,CAAC;IACF,qBAAqB,EAAE,CACrB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,cAAc,EAAE,EACxB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD,2CA4uBA"}

package/dist/esm/forms/client_onboard/ConnectDatabase.js

@@ -11,10 +11,16 @@ import { QuillMultiSelectComponentWithCombo } from '../../components/QuillMultiS
 import CardSection from '../../components/CardSection';
 // import InputLabel from '../../components/InputLabel';
 import { useAdmin } from '../../AdminProvider';
+import { quillFetch } from '../../utils/dataFetcher';
+import { useLongLoading } from '../../hooks/useLongLoading';
 export default function ConnectDatabase({ containerStyle, header1Style, header2Style, environmentDetails, setEnvironmentDetails, fetchSchemasLoading, onConnectDatabase, }) {
-    const { state, getToken } = useAdmin();
+    const { state, getToken, eventTracking } = useAdmin();
     const [error, setError] = useState(undefined);
     const [isConnecting, setIsConnecting] = useState(false);
+    useLongLoading(isConnecting, {
+        origin: 'ConnectDatabase',
+        loadDescription: 'Connecting to database',
+    });
     const [clientId, setClientId] = useState(environmentDetails.client.clientId);
     const [fileLabel, setFileLabel] = useState('No file chosen');
     const [allSchemas, setAllSchemas] = useState([]);
@@ -48,7 +54,12 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
         // Redact sensitive information
         const savedConnectionDetails = { ...databaseConnectionDetails };
         savedConnectionDetails.connectionString = '';
-        savedConnectionDetails.password = '';
+        if (databaseConnectionDetails.type === 'Databricks') {
+            savedConnectionDetails.token = '';
+        }
+        else {
+            savedConnectionDetails.password = '';
+        }
         sessionStorage.setItem('connectionDetails', JSON.stringify(savedConnectionDetails));
     }, [databaseConnectionDetails]);
     const handleFileChange = (e) => {
@@ -70,6 +81,17 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
             }
             catch (err) {
                 console.log('Error parsing JSON file', err);
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error parsing JSON file',
+                    errorMessage: err.message,
+                    errorStack: err.stack,
+                    errorData: {
+                        caller: 'ConnectDatabase',
+                        function: 'handleFileChange',
+                    },
+                });
                 setFileLabel('Error parsing JSON file');
             }
         };
@@ -80,6 +102,7 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
             return false;
         }
         const typedDetails = databaseConnectionDetails;
+        const databricksDetails = databaseConnectionDetails;
         switch (databaseConnectionDetails.type) {
             case 'PostgreSQL':
             case 'MySQL':
@@ -94,6 +117,10 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                     !(typedDetails.port ||
                         (typedDetails.warehouse &&
                             typedDetails.type === 'Snowflake')));
+            case 'Databricks':
+                return (!databricksDetails.host ||
+                    !databricksDetails.path ||
+                    !databricksDetails.token);
             case 'BigQuery':
                 return !databaseConnectionDetails.jsonString;
             default:
@@ -120,11 +147,22 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
         }
         try {
             setIsConnecting(true);
-            await setSchemaNames(state.queryEndpoint, clientId, selectedSchemas, getToken);
-            const databaseSchema = await getTableColumnsBySchema(state.queryEndpoint, clientId, getToken, selectedSchemas).then((res) => res.columnsByTable);
+            await setSchemaNames(state.queryEndpoint, clientId, selectedSchemas, getToken, state.queryHeaders);
+            const databaseSchema = await getTableColumnsBySchema(state.isSelfHosted, state.queryEndpoint, clientId, databaseConnectionDetails.type, getToken, selectedSchemas, state.queryHeaders).then((res) => res.columnsByTable);
             setEnvironmentDetails(databaseConnectionDetails, databaseSchema, selectedSchemas, clientId);
         }
         catch (e) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error setting up database',
+                errorMessage: e.message,
+                errorStack: e.stack,
+                errorData: {
+                    caller: 'ConnectDatabase',
+                    function: 'nextStep',
+                },
+            });
             setError(e.message);
         }
         finally {
@@ -133,11 +171,38 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
             }, 1000);
         }
     };
+    const getSchemaNames = async () => {
+        setIsConnecting(true);
+        const tempClientId = clientId ?? state.client?.clientId;
+        const { data, status, queries } = await quillFetch({
+            client: {
+                queryEndpoint: state.queryEndpoint,
+                queryHeaders: state.queryHeaders,
+                withCredentials: !!state.withCredentials,
+                clientId: tempClientId,
+            },
+            task: 'get-schema-names',
+            metadata: {
+                databaseType: databaseConnectionDetails.type,
+                newClientId: clientId,
+            },
+            getToken: getToken,
+        });
+        if (status !== 'success') {
+            setIsConnecting(false);
+            setError('Error fetching schemas');
+            return;
+        }
+        const schemas = queries?.queryResults?.[0]?.rows?.map((row) => row['schema_name'] || row['SCHEMA_NAME']);
+        setClientId(data?.clientId);
+        setAllSchemas(schemas);
+        setIsConnecting(false);
+    };
     const testConnectionAndFormClient = async () => {
         setError(undefined);
         const connectionString = formConnectionString(databaseConnectionDetails);
         setIsConnecting(true);
-        const result = await testConnectionString(state.queryEndpoint, connectionString, databaseConnectionDetails.type, getToken, clientId);
+        const result = await testConnectionString(state.queryEndpoint, connectionString, databaseConnectionDetails.type, getToken, clientId, state.queryHeaders);
         if (result.success) {
             try {
                 setConnectionDetails({
@@ -155,6 +220,17 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                 onConnectDatabase?.(result.clientId);
             }
             catch (e) {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error connecting to database',
+                    errorMessage: e.message,
+                    errorStack: e.stack,
+                    errorData: {
+                        caller: 'ConnectDatabase',
+                        function: 'testConnectionAndFormClient',
+                    },
+                });
                 setError("Couldn't connect to database");
             }
             finally {
@@ -170,50 +246,75 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                     display: 'flex',
                     flexDirection: 'row',
                     justifyContent: 'space-between',
-                }, children: [_jsx("h1", { style: header1Style, children: "Connect Database" }), clientId && !!selectedSchemas?.length && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", width: "24px", height: "24px", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", clipRule: "evenodd" }) }))] }), _jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: '#565656' }, children: "Database type" }), _jsx("div", { style: { display: 'flex', gap: 10, userSelect: 'none' }, children: DATABASE_DEFAULT_INFO.map((database) => {
-                            return (_jsx(DatabaseSelector, { onDatabaseSelect: onDatabaseSelect, databaseType: databaseConnectionDetails?.type || '', containerStyle: { marginBottom: '12px' }, label: database.label, value: database.value, imageUrl: database.imageUrl }, database.label));
-                        }) })] }), databaseConnectionDetails && (_jsxs("div", { children: [databaseConnectionDetails.type !== 'BigQuery' ? (_jsxs("div", { children: [['MySQL', 'PostgreSQL'].includes(databaseConnectionDetails.type) && (_jsxs("div", { style: { marginTop: 16, marginBottom: 24 }, children: [_jsx("h2", { style: {
-                                            ...header2Style,
-                                            fontWeight: 600,
-                                            marginBottom: 8,
-                                        }, children: "Connection Method" }), _jsx(QuillTab, { width: "486px", modeToggleOptions: credentialTabOptions, toggleMode: credentialTab, setToggleMode: setCredentialTab })] })), credentialTab === 'Database Credentials' ? (_jsx("div", { id: "database-details-form", children: _jsx("div", { style: {
-                                        display: 'grid',
-                                        gridTemplateColumns: 'repeat(3, 1fr)',
-                                        gap: '20px',
-                                        justifyContent: 'space-between',
-                                        marginTop: '16px',
-                                    }, children: 
-                                    // get a list of types in the databaseConnectionDetails object and create a form for each
-                                    Object.entries(databaseConnectionDetails).map(([key, value]) => {
-                                        if (key !== 'connectionString' && key !== 'type')
-                                            return (_jsxs("div", { "data-testid": `quill-input-${key}`, children: [_jsx("h2", { style: {
-                                                            ...header2Style,
-                                                            fontWeight: '600',
-                                                        }, children: key
-                                                            .split(/(?=[A-Z])/)
-                                                            .map((word) => word.charAt(0).toUpperCase() +
-                                                            word.slice(1))
-                                                            .join(' ') }), _jsx(TextInputPrimitive, { onChange: (e) => {
-                                                            setConnectionDetails({
-                                                                ...databaseConnectionDetails,
-                                                                [key]: e.target.value,
-                                                                connectionString: '',
-                                                            });
-                                                        }, value: value, disabled: key === 'type', password: key === 'password' ? true : false })] }, key));
-                                    }) }) })) : (_jsxs("div", { "data-testid": "quill-input-connectionString", children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), _jsx(TextInputPrimitive, { onChange: (e) => {
-                                            updateConnectionString(e.target.value);
-                                        }, value: databaseConnectionDetails.connectionString })] }))] })) : (_jsx("div", { style: { minWidth: 790 }, children: _jsx("div", { id: "database-details-form-bq", style: {
-                                display: 'grid',
-                                gridTemplateColumns: 'repeat(1, 1fr)',
-                                gap: '20px',
-                                justifyContent: 'space-between',
-                                marginTop: '16px',
-                            }, children: _jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Service Account Json" }), _jsxs("div", { children: [_jsx("input", { title: "Upload JSON", type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", "data-testid": "quill-input-fileInput", ref: myInputRef }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: 12,
-                                                    alignItems: 'center',
-                                                }, children: [_jsx(ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), _jsx("span", { "data-testid": "quill-file-label", style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] }) }) })), _jsxs("div", { style: {
+                }, children: [_jsx("h1", { style: header1Style, children: "Connect Database" }), clientId && !!selectedSchemas?.length && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", width: "24px", height: "24px", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", clipRule: "evenodd" }) }))] }), !state.isSelfHosted && (_jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Database type" }), _jsx("div", { style: { display: 'flex', gap: 10, userSelect: 'none' }, children: DATABASE_DEFAULT_INFO.map((database) => {
+                            return (_jsx(DatabaseSelector, { onDatabaseSelect: onDatabaseSelect, databaseType: databaseConnectionDetails?.type || '', containerStyle: {
+                                    marginBottom: '12px',
+                                    ...(state.isSelfHosted && {
+                                        cursor: 'not-allowed',
+                                        pointerEvents: 'none',
+                                    }),
+                                    ...(state.isSelfHosted &&
+                                        database.value.toLowerCase() !==
+                                            environmentDetails.connection.type.toLowerCase() && {
+                                        backgroundColor: '#f5f5f5',
+                                    }),
+                                }, label: database.label, value: database.value, imageUrl: database.imageUrl, theme: state.theme }, database.label));
+                        }) })] })), databaseConnectionDetails && (_jsxs("div", { children: [!state.isSelfHosted && (_jsx("div", { children: databaseConnectionDetails.type !== 'BigQuery' ? (_jsxs("div", { children: [['MySQL', 'PostgreSQL'].includes(databaseConnectionDetails.type) && (_jsxs("div", { style: { marginTop: 16, marginBottom: 24 }, children: [_jsx("h2", { style: {
+                                                ...header2Style,
+                                                fontWeight: 600,
+                                                marginBottom: 8,
+                                            }, children: "Connection Method" }), _jsx(QuillTab, { width: "486px", modeToggleOptions: credentialTabOptions, toggleMode: credentialTab, setToggleMode: setCredentialTab })] })), credentialTab === 'Database Credentials' ? (_jsx("div", { id: "database-details-form", children: _jsx("div", { style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'repeat(3, 1fr)',
+                                            gap: '20px',
+                                            justifyContent: 'space-between',
+                                            marginTop: '16px',
+                                        }, children: 
+                                        // get a list of types in the databaseConnectionDetails object and create a form for each
+                                        Object.entries(databaseConnectionDetails).map(([key, value]) => {
+                                            if (key !== 'connectionString' && key !== 'type')
+                                                return (_jsxs("div", { "data-testid": `quill-input-${key}`, children: [_jsx("h2", { style: {
+                                                                ...header2Style,
+                                                                fontWeight: '600',
+                                                            }, children: key
+                                                                .split(/(?=[A-Z])/)
+                                                                .map((word) => word.charAt(0).toUpperCase() +
+                                                                word.slice(1))
+                                                                .join(' ') }), _jsx(TextInputPrimitive, { onChange: (e) => {
+                                                                setConnectionDetails({
+                                                                    ...databaseConnectionDetails,
+                                                                    [key]: e.target.value,
+                                                                    connectionString: '',
+                                                                });
+                                                            }, value: value, disabled: key === 'type', password: key === 'password' ? true : false })] }, key));
+                                        }) }) })) : (_jsxs("div", { "data-testid": "quill-input-connectionString", children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), _jsx(TextInputPrimitive, { onChange: (e) => {
+                                                updateConnectionString(e.target.value);
+                                            }, value: databaseConnectionDetails.connectionString })] }))] })) : (_jsx("div", { style: { minWidth: 790 }, children: _jsx("div", { id: "database-details-form-bq", style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: 'repeat(1, 1fr)',
+                                    gap: '20px',
+                                    justifyContent: 'space-between',
+                                    marginTop: '16px',
+                                }, children: _jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Service Account Json" }), _jsxs("div", { children: [_jsx("input", { title: "Upload JSON", type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", "data-testid": "quill-input-fileInput", ref: myInputRef }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        gap: 12,
+                                                        alignItems: 'center',
+                                                    }, children: [_jsx(ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), _jsx("span", { "data-testid": "quill-file-label", style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] }) }) })) })), state.isSelfHosted ? (_jsxs("div", { style: {
+                            borderRadius: 6,
+                            padding: 12,
+                            background: '#f5f5f5',
+                            marginBottom: 18,
+                            marginTop: 18,
+                            fontSize: 14,
+                        }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Self-hosted Database Connection" }), _jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                    color: state.theme?.secondaryTextColor,
+                                    fontFamily: state.theme?.fontFamily,
+                                }, children: `Using the database credentials passed into the Quill Server SDK at this endpoint: ${state.queryEndpoint}.` })] })) : (_jsxs("div", { style: {
                             borderRadius: 6,
                             padding: 12,
                             background: '#f5f5f5',
@@ -225,6 +326,8 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: 4,
+                                    color: state.theme?.secondaryTextColor,
+                                    fontFamily: state.theme?.fontFamily,
                                 }, children: ["Ensure Quill's IP is allowed to connect to your database", ' ', _jsx(ExternalLink, { href: databaseConnectionDetails.type.toLowerCase() === 'bigquery'
                                             ? 'https://cloud.google.com/access-context-manager/docs/overview#ip-address'
                                             : databaseConnectionDetails.type.toLowerCase() === 'mysql'
@@ -240,18 +343,26 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                                                             ? 'https://clickhouse.com/docs/cloud/security/setting-ip-filters/'
                                                             : 'https://www.postgresql.org/docs/current/auth-pg-hba-conf.html' })] }), _jsx(ClipboardButton, { text: "34.133.137.225", containerStyle: {
                                     marginTop: 12,
-                                } })] }), _jsx("div", { style: {
+                                } })] })), _jsx("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
                             marginTop: '24px',
-                        }, "data-testid": "quill-connect-button", children: _jsx(ButtonPrimitive, { label: 'Connect', onClick: testConnectionAndFormClient, disabled: isButtonDisabled, isLoading: isConnecting }) })] })), _jsx(ModalPrimitive, { isOpen: !!error, onClose: () => setError(undefined), style: {
+                        }, "data-testid": "quill-connect-button", children: _jsx(ButtonPrimitive, { label: 'Connect', onClick: () => {
+                                if (state.isSelfHosted) {
+                                    getSchemaNames();
+                                }
+                                else {
+                                    testConnectionAndFormClient();
+                                }
+                            }, disabled: isButtonDisabled && !state.isSelfHosted, isLoading: isConnecting }) })] })), _jsx(ModalPrimitive, { isOpen: !!error, onClose: () => setError(undefined), style: {
                     width: 420,
                 }, children: _jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         gap: 20,
+                        fontFamily: state.theme?.fontFamily,
                         width: '100%',
                     }, children: [_jsx(CardSection, { children: "Failed to Connect" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx("div", { style: {
                                         color: 'red',
@@ -280,6 +391,7 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                         flexDirection: 'column',
                         gap: 20,
                         width: '100%',
+                        fontFamily: state.theme?.fontFamily,
                     }, children: [_jsx(CardSection, { children: "Connection Successful" }), _jsx("h2", { style: {
                                 fontSize: 15,
                                 fontWeight: 500,

package/dist/esm/forms/client_onboard/ConnectSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgC,MAAM,OAAO,CAAC;AAOpE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAY,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EAEZ,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,KAAK,EACL,KAAK,EACL,uBAAuB,GACxB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB,EAAE,MAAM,IAAI,CAAC;CACrC,2CA0SA"}
+{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgC,MAAM,OAAO,CAAC;AAOpE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAY,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EAEZ,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,KAAK,EACL,KAAK,EACL,uBAAuB,GACxB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB,EAAE,MAAM,IAAI,CAAC;CACrC,2CA6UA"}