@quillsql/admin 1.5.2 → 1.6.1

package/dist/esm/components/UiComponents.js

@@ -1,31 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 //@ts-nocheck
-import { useContext, useEffect, useRef } from 'react';
-import { ArrowDownHeadIcon, XIcon } from '../assets';
+import { useContext, useEffect, useRef, } from 'react';
+import { XIcon } from '../assets';
 import { ThemeContext } from '@quillsql/react';
+import useOnClickOutside from '../hooks/useOnClickOutside';
 export const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("div", { style: { position: 'relative', width: width }, children: [_jsx("style", { children: `
-    .quill-text-input {
+      .quill-text-input {
         background-color: white;
         height: 40px;
-       width: 180px;
-       color: #384151;
-       border: 1px solid #e7e7e7;
-       border-radius: 6px;
-       text-align: left;
-       box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
-       padding-left: 12px;
-       padding-right: 12px;
-       padding-top: 0px;
-       padding-bottom: 0px;
-       box-sizing: content-box;
-    }` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+        width: 180px;
+        color: #384151;
+        border: 1px solid #e7e7e7;
+        border-radius: 6px;
+        text-align: left;
+        box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
+        padding-left: 12px;
+        padding-right: 12px;
+        padding-top: 0px;
+        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,
                     width: width ? 'calc(100% - 24px)' : '180px',
                 } })] }));
 };
-export const MemoizedButton = ({ label, onClick, primary = true, style = {}, width = 'auto', }) => {
+export const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily, ...style, width: width }, children: [_jsx("style", { children: `
     .quill-button {
@@ -38,17 +39,16 @@ export const MemoizedButton = ({ label, onClick, primary = true, style = {}, wid
        box-sizing: content-box;
        padding-left: 16px;
        padding-right: 16px;
-       overflow: hidden;
+       white-space: nowrap;
        font-size: 15px;
        cursor: pointer;
     }
     .quill-button:hover {
       background-color: rgba(56, 65, 81, 0.9);
       border-radius: 6px;
-      overflow: hidden;
-    }` }), label] }));
+    }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
 };
-export const MemoizedSecondaryButton = ({ label, onClick }) => {
+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: `
     .quill-secondary-button {
@@ -69,34 +69,7 @@ export const MemoizedSecondaryButton = ({ label, onClick }) => {
     }
     .quill-secondary-button:hover {
       background-color: rgba(56, 65, 81, 0.09);
-    }` }), label] }));
-};
-export const MemoizedSelect = ({ value, onChange, options, disabled = false, label, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            maxWidth: 206,
-        }, children: [_jsx("style", { children: `
-    .quill-select {
-        background-color: white;
-        height: 42px;
-        color: #384151;
-        width: 206px;
-       border: 1px solid #e7e7e7;
-       border-radius: 6px;
-       text-align: left;
-       box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
-       padding-left: 12px;
-       padding-right: 12px;
-    }` }), _jsx("select", { style: { WebkitAppearance: 'none', fontFamily: theme?.fontFamily }, className: "quill-select", value: value, disabled: disabled, onChange: (event) => onChange(event.target.value), children: options.map((option) => (_jsx("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), _jsx(ArrowDownHeadIcon, { style: {
-                    height: '20px',
-                    width: '20px',
-                    flex: 'none',
-                    position: 'absolute',
-                    right: 8,
-                    top: 11,
-                    color: '#6C727F',
-                }, "aria-hidden": "true" })] }));
+    }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
 };
 export const MemoizedHeader = ({ children }) => (_jsx("h1", { style: {
         fontSize: 16,
@@ -120,22 +93,6 @@ export const MemoizedText = ({ children }) => (_jsx("p", { style: {
         color: '#575E6A',
         userSelect: 'none',
     }, children: children }));
-const useOnClickOutside = (ref, handler) => {
-    useEffect(() => {
-        const listener = (event) => {
-            if (!ref.current || ref.current.contains(event.target)) {
-                return;
-            }
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
-};
 export function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = useRef(null);
     useOnClickOutside(modalRef, (e) => {
@@ -172,7 +129,18 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
                         ...style,
                     }, children: children }) }))] }));
 }
-export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style = {}, }) {
+export function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
+    const [theme] = useContext(ThemeContext);
+    useEffect(() => {
+        // Prevent scrolling in the background when the modal is open
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            // Re-enable scrolling when the modal is closed/unmounted
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen]);
     if (!isOpen) {
         return null;
     }
@@ -185,15 +153,11 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: onClose }), _jsx("div", { style: {
-                    // position: "absolute",
+                }, onClick: () => setIsOpen(false) }), _jsx("div", { style: {
                     position: 'fixed',
                     left: '50%',
                     top: '50%',
                     zIndex: '50',
-                    // width: "100%",
-                    // maxWidth: 1024,
-                    // maxHeight: '90vh',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -203,21 +167,19 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                     borderStyle: 'solid',
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
-                    overflow: 'hidden',
-                    // zIndex: 1000,
-                    ...style,
+                    width: width ?? 'auto',
+                    height: height ?? 'auto',
+                    overflow: 'auto',
+                    maxWidth: 'calc(100vw - 82px)',
+                    maxHeight: 'calc(100vh - 82px)',
                 }, children: _jsxs("div", { style: {
-                        width: '100%',
                         height: '100%',
-                        overflowY: 'auto',
-                        // maxWidth: "700px",
+                        width: '100%',
+                        maxWidth: 'calc(100vw - 82px)',
+                        maxHeight: 'calc(100vh - 82px)',
                         backgroundColor: '#ffffff',
-                        // padding: "20px",
-                        // borderRadius: "8px",
-                        flexGrow: 1,
                         display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center',
                         position: 'relative',
                         fontFamily: theme?.fontFamily,
                     }, children: [_jsxs("div", { id: "quill-modal-header", style: {
@@ -234,11 +196,11 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                                         textAlign: 'left',
                                         paddingTop: 18,
                                         color: theme?.primaryTextColor,
-                                    }, children: title }), _jsx(MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
+                                    }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
 }
 export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
-        height: 42,
-        width: 42,
+        height: 40,
+        width: 40,
         border: 'none',
         cursor: 'pointer',
         display: 'flex',

package/dist/esm/constants/dataTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const ALL_INT_TYPES: string[];
+//# sourceMappingURL=dataTypes.d.ts.map

package/dist/esm/constants/dataTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTypes.d.ts","sourceRoot":"","sources":["../../../src/constants/dataTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,UAiBzB,CAAC"}

package/dist/esm/constants/dataTypes.js

@@ -0,0 +1,18 @@
+export const ALL_INT_TYPES = [
+    'int4',
+    'int8',
+    'int2',
+    'integer',
+    'bigint',
+    'smallint',
+    'tinyint',
+    'byteint',
+    'real',
+    'double precision',
+    'smallserial',
+    'serial',
+    'bigserial',
+    'serial4',
+    'serial8',
+    'serial2',
+];

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,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AAG/D,OAAO,EACL,eAAe,EACf,cAAc,EAIf,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,kBAAkB,EAClB,WAAgB,GACjB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,qBAAqB,EAAE,CACrB,cAAc,CAAC,EAAE,cAAc,EAC/B,aAAa,CAAC,EAAE,aAAa,EAC7B,WAAW,CAAC,EAAE,eAAe,EAC7B,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAwYA"}
+{"version":3,"file":"ConnectDatabase.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectDatabase.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AAG/D,OAAO,EACL,eAAe,EACf,cAAc,EAIf,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,kBAAkB,EAClB,WAAgB,GACjB,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,qBAAqB,EAAE,CACrB,cAAc,CAAC,EAAE,cAAc,EAC/B,aAAa,CAAC,EAAE,aAAa,EAC7B,WAAW,CAAC,EAAE,eAAe,EAC7B,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAsXA"}

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

@@ -50,6 +50,7 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
         reader.readAsText(file);
     };
     const testConnectionAndFormClient = async () => {
+        setShowError(false);
         const connectionString = formConnectionString(databaseConnectionDetails);
         const result = await testConnectionString(connectionString, databaseConnectionDetails.type, clientId);
         if (result.success) {
@@ -164,28 +165,19 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                                                                 ...databaseConnectionDetails,
                                                                 [key]: e.target.value,
                                                             });
-                                                        }, value: value, disabled: key === 'type' })] }, key));
-                                    }) }) })] })) : (_jsx("div", { style: { minWidth: 790 }, children: _jsxs("div", { id: "database-details-form", style: {
+                                                        }, value: value, disabled: key === 'type', password: key === 'password' ? true : false })] }, key));
+                                    }) }) })] })) : (_jsx("div", { style: { minWidth: 790 }, children: _jsx("div", { id: "database-details-form", 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: "Project ID" }), _jsx(TextInputPrimitive, { onChange: (e) => {
-                                                setConnectionDetails({
-                                                    ...databaseConnectionDetails,
-                                                    companyTag: e.target.value,
-                                                });
-                                                setCompanyTag(e.target.value);
-                                            }, value: companyTag })] }), _jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Submit File" }), _jsxs("div", { children: [_jsx("input", { type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", ref: myInputRef }), _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        gap: 12,
-                                                        alignItems: 'center',
-                                                    }, children: [_jsx(ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), _jsx("span", { style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] })] }) })), _jsxs("div", { style: {
+                            }, children: _jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Service Account Json" }), _jsxs("div", { children: [_jsx("input", { type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", ref: myInputRef }), _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: 12,
+                                                    alignItems: 'center',
+                                                }, children: [_jsx(ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), _jsx("span", { style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] }) }) })), _jsxs("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',

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

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { SchemaDetails } from '../../utils/schema';
 import { ConnectionError, ConnectionType } from '../../utils/databases';
-export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }: {
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, state, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
@@ -11,5 +11,6 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
     propogateSchemaDetails: (schemaDetails?: SchemaDetails) => void;
     clientId: string;
     parentRef: any;
+    state: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectSchema.d.ts.map

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,OAAc,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,sBAAsB,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC;CAChB,2CAiSA"}
+{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAUnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,sBAAsB,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ,2CAubA"}

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

@@ -1,12 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ButtonPrimitive } from '../../primitives';
+import { ButtonPrimitive, TextInputPrimitive } from '../../primitives';
 import DropdownMenuWithLabel from '../../components/DropDownMenuWithLabel';
-import { getFKInfo, getOrgInfo, getSchemaTableInfo, getTableInfo, getTablesBySchema, } from '../../api/ConnectionClient';
-export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }) {
+import { getFKInfo, getOrgInfo, getSchemaTableInfo, getSqlViewData, getTableInfo, getTablesBySchema, processCustomerOrgViewQuery, } from '../../api/ConnectionClient';
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, state, }) {
     const [schemaDetails, setSchemaDetails] = useState(allSchemaInfo);
     const [schemaError, setSchemaError] = useState(initialError);
     const [formError, setFormError] = useState({ show: false, message: '' });
+    const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
+    const [errorInfo, setErrorInfo] = useState({ status: false, msg: '' });
+    const [customerViewQuery, setCustomerViewQuery] = useState('');
+    const handleQuerySuccess = async (getSqlResults) => {
+        const processedResults = await processCustomerOrgViewQuery(customerViewQuery, allSchemaInfo?.selectedFields.schema || '', clientId);
+        if (processedResults.success === false) {
+            setErrorInfo({
+                status: true,
+                msg: processedResults.message || 'Failed to process the query.',
+            });
+            return;
+        }
+        setSchemaDetails({
+            ...schemaDetails,
+            // @ts-ignore
+            selectedFields: {
+                ...schemaDetails?.selectedFields,
+                table: processedResults.table,
+                organizationIdField: 'id',
+                customerNameField: 'name',
+                customerView: customerViewQuery,
+            },
+            customQueryFKs: processedResults.fkInfo,
+            customQueryOrganizations: getSqlResults.rows,
+        });
+    };
     return (_jsxs("div", { style: { ...containerStyle }, id: "connect-database-form", children: [_jsx("h1", { style: header1Style, children: "Select Organization Table" }), _jsx("h2", { style: header2Style, children: "Select which table you use for organizations (your customers). Quill uses this table to partition data by organization." }), _jsxs("div", { style: {
                     marginTop: 16,
                     width: '100%',
@@ -60,92 +86,141 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
                             else {
                                 setSchemaError(suspectedSchema);
                             }
-                        } }))] }), schemaDetails?.tables && (_jsxs("div", { children: [_jsx("div", { style: { gap: 16 }, id: "database-details-form", children: _jsxs("div", { 
-                            // style={{
-                            //   display: 'flex',
-                            //   flexWrap: 'wrap',
-                            //   width: '100%',
-                            //   gap: '16px',
-                            // }}
-                            style: {
-                                display: 'grid',
-                                gridTemplateColumns: 'repeat(3, 1fr)',
-                                gap: '20px',
-                                justifyContent: 'space-between',
-                                marginTop: '8px',
-                            }, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
-                                        const columns = await getTableInfo(clientId, schemaDetails?.selectedFields?.schema, e);
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            columns: columns.columns,
-                                            foreignKeys: [],
-                                            organizations: [],
-                                            selectedFields: {
-                                                schema: schemaDetails?.selectedFields?.schema,
-                                                table: e,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
-                                        const fkStrings = await getFKInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
-                                        if (schemaDetails?.selectedFields.customerNameField) {
-                                            const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
+                        } }))] }), schemaDetails?.tables && (_jsxs("div", { children: [_jsxs("div", { style: { gap: 16 }, id: "database-details-form", children: [_jsxs("div", { 
+                                // style={{
+                                //   display: 'flex',
+                                //   flexWrap: 'wrap',
+                                //   width: '100%',
+                                //   gap: '16px',
+                                // }}
+                                style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: 'repeat(3, 1fr)',
+                                    gap: '20px',
+                                    justifyContent: 'space-between',
+                                    marginTop: '8px',
+                                }, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
+                                            const columns = await getTableInfo(clientId, schemaDetails?.selectedFields?.schema, e);
                                             setSchemaDetails({
                                                 ...schemaDetails,
-                                                organizations: organizations,
+                                                columns: columns.columns,
+                                                foreignKeys: [],
+                                                organizations: [],
+                                                selectedFields: {
+                                                    schema: schemaDetails?.selectedFields?.schema,
+                                                    table: e,
+                                                },
+                                            });
+                                        }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                            const fkStrings = await getFKInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
+                                            if (schemaDetails?.selectedFields.customerNameField) {
+                                                const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
+                                                setSchemaDetails({
+                                                    ...schemaDetails,
+                                                    organizations: organizations,
+                                                    selectedFields: {
+                                                        ...schemaDetails?.selectedFields,
+                                                        organizationIdField: e,
+                                                    },
+                                                });
+                                            }
+                                            setSchemaDetails({
+                                                ...schemaDetails,
+                                                foreignKeys: fkStrings,
                                                 selectedFields: {
                                                     ...schemaDetails?.selectedFields,
                                                     organizationIdField: e,
                                                 },
                                             });
-                                        }
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            foreignKeys: fkStrings,
-                                            selectedFields: {
-                                                ...schemaDetails?.selectedFields,
-                                                organizationIdField: e,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
-                                        if (schemaDetails?.selectedFields.organizationIdField) {
-                                            const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
+                                        }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                            if (schemaDetails?.selectedFields.organizationIdField) {
+                                                const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
+                                                setSchemaDetails({
+                                                    ...schemaDetails,
+                                                    organizations: organizations,
+                                                    selectedFields: {
+                                                        ...schemaDetails?.selectedFields,
+                                                        customerNameField: e,
+                                                    },
+                                                });
+                                            }
+                                            else {
+                                                setSchemaDetails({
+                                                    ...schemaDetails,
+                                                    selectedFields: {
+                                                        ...schemaDetails?.selectedFields,
+                                                        customerNameField: e,
+                                                    },
+                                                });
+                                            }
+                                        }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
+                                            [], setSelected: async (e) => {
+                                            const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
                                             setSchemaDetails({
                                                 ...schemaDetails,
-                                                organizations: organizations,
                                                 selectedFields: {
                                                     ...schemaDetails?.selectedFields,
-                                                    customerNameField: e,
+                                                    defaultOrg: orgObj,
                                                 },
                                             });
-                                        }
-                                        else {
+                                        }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
                                             setSchemaDetails({
                                                 ...schemaDetails,
                                                 selectedFields: {
                                                     ...schemaDetails?.selectedFields,
-                                                    customerNameField: e,
+                                                    foreignKey: e,
                                                 },
                                             });
-                                        }
-                                    }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
-                                        [], setSelected: async (e) => {
-                                        const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            selectedFields: {
-                                                ...schemaDetails?.selectedFields,
-                                                defaultOrg: orgObj,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
-                                        setSchemaDetails({
-                                            ...schemaDetails,
-                                            selectedFields: {
-                                                ...schemaDetails?.selectedFields,
-                                                foreignKey: e,
-                                            },
-                                        });
-                                    }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }) }), _jsxs("div", { style: {
+                                        }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), _jsxs("div", { style: {
+                                    ...header1Style,
+                                    textAlign: 'center',
+                                    fontSize: 14,
+                                    color: '#565656',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    paddingTop: 24,
+                                    paddingBottom: 0,
+                                }, children: [_jsx("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } }), _jsx("div", { style: { padding: 12 }, children: "or" }), _jsx("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: "#6e6e6e" }, children: "Customer Organization View" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [_jsx(TextInputPrimitive, { onChange: (e) => {
+                                                            setCustomerViewQuery(e.target.value);
+                                                        }, value: customerViewQuery }), _jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
+                                                            setRunQueryButtonLabel('Querying...');
+                                                            const getSqlResults = await getSqlViewData(clientId, customerViewQuery, environmentDetails.type, state.queryEndpoint);
+                                                            if (!getSqlResults.success) {
+                                                                setErrorInfo({
+                                                                    status: true,
+                                                                    msg: getSqlResults.error,
+                                                                });
+                                                            }
+                                                            else {
+                                                                setErrorInfo({ status: false, msg: '' });
+                                                                handleQuerySuccess(getSqlResults);
+                                                            }
+                                                            setRunQueryButtonLabel('Run query');
+                                                        }, 
+                                                        // dont let the font wrap
+                                                        style: { whiteSpace: 'nowrap' } })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.customQueryOrganizations?.map((orgObj) => orgObj.name) || [], setSelected: async (e) => {
+                                                    const orgObj = schemaDetails?.customQueryOrganizations?.find((orgObj) => orgObj.name === e);
+                                                    setSchemaDetails({
+                                                        ...schemaDetails,
+                                                        selectedFields: {
+                                                            ...schemaDetails?.selectedFields,
+                                                            defaultOrg: orgObj,
+                                                        },
+                                                    });
+                                                }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.customQueryFKs || [], setSelected: async (e) => {
+                                                    setSchemaDetails({
+                                                        ...schemaDetails,
+                                                        selectedFields: {
+                                                            ...schemaDetails?.selectedFields,
+                                                            foreignKey: e,
+                                                        },
+                                                    });
+                                                }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), errorInfo.status ? (_jsx("h2", { style: {
+                                            ...header2Style,
+                                            color: 'red',
+                                            paddingTop: '12px',
+                                        }, children: errorInfo.msg })) : (_jsx("div", {}))] })] }), _jsxs("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',

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

@@ -1 +1 @@
-{"version":3,"file":"CreateSqlViews.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/CreateSqlViews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAa3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAK7E,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,KAAK,GACN,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,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,2CAiWA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,2CAiDA"}
+{"version":3,"file":"CreateSqlViews.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/CreateSqlViews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAW3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAQvD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,KAAK,GACN,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,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,2CA+aA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,2CAkDA"}