@quillsql/admin 1.3.7 → 1.3.8

package/dist/cjs/components/UiComponents.js

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSpinner = exports.MemoizedDeleteButton = exports.MemoizedModal = exports.MemoizedPopover = exports.MemoizedText = exports.MemoizedLabel = exports.MemoizedHeader = exports.MemoizedSelect = exports.MemoizedSecondaryButton = exports.MemoizedButton = exports.MemoizedTextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+//@ts-nocheck
+const react_1 = require("react");
+const assets_1 = require("../assets");
+const react_2 = require("@quillsql/react");
+const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
+    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: width }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .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;
+    }` }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+                    fontFamily: theme?.fontFamily,
+                    width: width ? 'calc(100% - 24px)' : '180px',
+                } })] }));
+};
+exports.MemoizedTextInput = MemoizedTextInput;
+const MemoizedButton = ({ label, onClick, primary = true, style = {}, width = 'auto', }) => {
+    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
+    return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily, ...style, width: width }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .quill-button {
+        background-color: ${primary ? '#212121' : 'white'};
+        color: ${primary ? 'white' : '#212121'};
+        height: 40px;
+       border: 1px solid transparent;
+       font-weight: 500;
+       border-radius: 6px;
+       box-sizing: content-box;
+       padding-left: 16px;
+       padding-right: 16px;
+       overflow: hidden;
+       font-size: 15px;
+       cursor: pointer;
+    }
+    .quill-button:hover {
+      background-color: rgba(56, 65, 81, 0.9);
+      border-radius: 6px;
+      overflow: hidden;
+    }` }), label] }));
+};
+exports.MemoizedButton = MemoizedButton;
+const MemoizedSecondaryButton = ({ label, onClick }) => {
+    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
+    return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .quill-secondary-button {
+        background-color: #F5F5F6;
+        background-color: white;
+        color: #212121';
+        color: rgba(56, 65, 81, 0.75);
+        height: 40px;
+       border: 1px solid transparent;
+       font-weight: 500;
+       border-radius: 6px;
+       padding-left: 16px;
+       border: 1px solid #e7e7e7;
+       padding-right: 16px;
+       box-sizing: content-box;
+       font-size: 15px;
+       cursor: pointer;
+    }
+    .quill-secondary-button:hover {
+      background-color: rgba(56, 65, 81, 0.09);
+    }` }), label] }));
+};
+exports.MemoizedSecondaryButton = MemoizedSecondaryButton;
+const MemoizedSelect = ({ value, onChange, options, disabled = false, label, }) => {
+    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: 'relative',
+            maxWidth: 206,
+        }, children: [(0, jsx_runtime_1.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;
+    }` }), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                    height: '20px',
+                    width: '20px',
+                    flex: 'none',
+                    position: 'absolute',
+                    right: 8,
+                    top: 11,
+                    color: '#6C727F',
+                }, "aria-hidden": "true" })] }));
+};
+exports.MemoizedSelect = MemoizedSelect;
+const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
+        fontSize: 16,
+        fontWeight: 600,
+        color: '#384151',
+        userSelect: 'none',
+        margin: 0,
+        padding: 0,
+    }, children: children }));
+exports.MemoizedHeader = MemoizedHeader;
+const MemoizedLabel = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: '#575E6A',
+        userSelect: 'none',
+        paddingBottom: 5,
+    }, children: children }));
+exports.MemoizedLabel = MemoizedLabel;
+const MemoizedText = ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: {
+        fontSize: 12,
+        fontWeight: 400,
+        margin: 0,
+        color: '#575E6A',
+        userSelect: 'none',
+    }, children: children }));
+exports.MemoizedText = MemoizedText;
+const useOnClickOutside = (ref, handler) => {
+    (0, react_1.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]);
+};
+function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
+    const modalRef = (0, react_1.useRef)(null);
+    useOnClickOutside(modalRef, (e) => {
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = parentRef
+            ? parentRef.current?.contains(e.target)
+            : false;
+        if (isTriggerElem) {
+            handleCloseModal();
+        }
+    });
+    const handleCloseModal = () => {
+        setIsOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [showTrigger && ((0, jsx_runtime_1.jsx)(exports.MemoizedSecondaryButton, { onClick: (e) => {
+                    setIsOpen((isOpen) => !isOpen);
+                    if (onClick) {
+                        onClick(e);
+                    }
+                }, label: label })), isOpen && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        background: 'white',
+                        position: 'absolute',
+                        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+                        border: '1px solid #e7e7e7',
+                        boxSizing: 'content-box',
+                        zIndex: 1,
+                        top: showTrigger ? 12 : 0,
+                        borderRadius: 6,
+                        padding: 20,
+                        overflow: 'scroll',
+                        ...style,
+                    }, children: children }) }))] }));
+}
+exports.MemoizedPopover = MemoizedPopover;
+function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
+    if (!isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'fixed',
+                    top: '0',
+                    right: '0',
+                    bottom: '0',
+                    left: '0',
+                    zIndex: '50',
+                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                    backdropFilter: 'blur(5px)',
+                }, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    // position: "absolute",
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    zIndex: '50',
+                    // width: "100%",
+                    maxWidth: 1024,
+                    maxHeight: '90vh',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                    background: 'white',
+                    borderRadius: 8,
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    borderColor: '#e7e7e7',
+                    overflow: 'hidden',
+                    // zIndex: 1000,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        // width: "80%",
+                        maxHeight: '90vh',
+                        overflowY: 'scroll',
+                        // maxWidth: "700px",
+                        backgroundColor: '#ffffff',
+                        // padding: "20px",
+                        // borderRadius: "8px",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        position: 'relative',
+                        fontFamily: theme?.fontFamily,
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-modal-header", style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                        fontSize: 18,
+                                        fontWeight: '600',
+                                        marginLeft: 20,
+                                        // width: '90%',
+                                        textAlign: 'left',
+                                        paddingTop: 18,
+                                        color: theme?.primaryTextColor,
+                                    }, children: title }), (0, jsx_runtime_1.jsx)(exports.MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
+}
+exports.MemoizedModal = MemoizedModal;
+const MemoizedDeleteButton = ({ onClick, style }) => ((0, jsx_runtime_1.jsxs)("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
+        height: 42,
+        width: 42,
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 6,
+        ...style,
+    }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+  .quill-delete-button {
+      background-color: white;
+  }
+  .quill-delete-button:hover {
+    background-color: rgba(56, 65, 81, 0.03);
+  }` }), (0, jsx_runtime_1.jsx)(assets_1.XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
+exports.MemoizedDeleteButton = MemoizedDeleteButton;
+const LoadingSpinner = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "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: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }));
+exports.LoadingSpinner = LoadingSpinner;

package/dist/cjs/forms/client_onboard/ConnectDatabase.d.ts

@@ -1,11 +1,12 @@
 import { CSSProperties } from 'react';
 import { ConnectionError, ConnectionType } from '../../utils/databases';
 import { SchemaDetails } from '../../utils/schema';
-export default function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, }: {
+export default function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, envClientId, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
     environmentDetails?: ConnectionType;
-    setEnvironmentDetails: (connectionInfo?: ConnectionType, schemaDetails?: SchemaDetails, schemaError?: ConnectionError) => void;
+    setEnvironmentDetails: (connectionInfo?: ConnectionType, schemaDetails?: SchemaDetails, schemaError?: ConnectionError, clientId?: string) => void;
+    envClientId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectDatabase.d.ts.map

package/dist/cjs/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,EAAY,MAAM,OAAO,CAAC;AAGvD,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,GACnB,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,KAC1B,IAAI,CAAC;CACX,2CAwRA"}
+{"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"}

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

@@ -10,20 +10,57 @@ const DatabaseSelector_1 = __importDefault(require("../../components/DatabaseSel
 const databases_1 = require("../../utils/databases");
 const ConnectionClient_1 = require("../../api/ConnectionClient");
 const delay_1 = require("../../utils/delay");
-function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, }) {
+function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, envClientId = '', }) {
+    // SPECIAL FIELDS FOR BIG QUERY ONLY
+    const [companyTag, setCompanyTag] = (0, react_1.useState)('');
     const [showError, setShowError] = (0, react_1.useState)(false);
     const [connectButtonMessage, setConnectButtonMessage] = (0, react_1.useState)('Connect');
     const [copied, setCopied] = (0, react_1.useState)(false);
+    const [clientId, setClientId] = (0, react_1.useState)(envClientId);
+    const [fileLabel, setFileLabel] = (0, react_1.useState)('No file chosen');
     const [databaseConnectionDetails, setConnectionDetails] = (0, react_1.useState)(environmentDetails);
     const onDatabaseSelect = (database) => {
+        setShowError(false);
         setConnectionDetails((0, databases_1.getDatabaseConnectionFormat)(database));
     };
-    const testConnection = async () => {
+    const myInputRef = (0, react_1.useRef)(null);
+    const handleButtonClick = () => {
+        // current property is a reference to the actual DOM element
+        if (myInputRef.current) {
+            myInputRef.current.click();
+        }
+    };
+    const handleFileChange = (e) => {
+        // read file
+        const file = e.target.files?.[0];
+        if (!file) {
+            return 'No file selected';
+        }
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            try {
+                const obj = JSON.parse(event.target.result);
+                const jsonString = JSON.stringify(obj, null, 2); // stringify with pretty print
+                setConnectionDetails({
+                    ...databaseConnectionDetails, // Cast databaseConnectionDetails to ConnectionType
+                    jsonString: jsonString,
+                });
+                setFileLabel(file.name);
+            }
+            catch (err) {
+                console.log('Error parsing JSON file', err);
+                setFileLabel('Error parsing JSON file');
+            }
+        };
+        reader.readAsText(file);
+    };
+    const testConnectionAndFormClient = async () => {
         const connectionString = (0, databases_1.formConnectionString)(databaseConnectionDetails);
-        const result = await (0, ConnectionClient_1.testConnectionString)(connectionString);
-        if (result) {
+        const result = await (0, ConnectionClient_1.testConnectionString)(connectionString, databaseConnectionDetails.type, clientId);
+        if (result.success) {
             try {
-                const suspectedSchema = await (0, ConnectionClient_1.getSchemaTableInfo)(connectionString, 'public');
+                setClientId(result.clientId);
+                const suspectedSchema = await (0, ConnectionClient_1.getSchemaTableInfo)(result.clientId, 'public', databaseConnectionDetails.type);
                 setConnectButtonMessage('Connecting');
                 // Stop the next code from running for a second
                 // This is to show the connecting message
@@ -31,12 +68,12 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
                 if ('selectedFields' in suspectedSchema) {
                     setConnectButtonMessage('Connected ✅');
                     await (0, delay_1.delay)(2000);
-                    setEnvironmentDetails(databaseConnectionDetails, suspectedSchema, undefined);
+                    setEnvironmentDetails(databaseConnectionDetails, suspectedSchema, undefined, result.clientId);
                 }
                 else {
                     setConnectButtonMessage('Connected ✅');
                     await (0, delay_1.delay)(2000);
-                    setEnvironmentDetails(databaseConnectionDetails, undefined, suspectedSchema);
+                    setEnvironmentDetails(databaseConnectionDetails, undefined, suspectedSchema, result.clientId);
                 }
             }
             catch (e) {
@@ -50,7 +87,7 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: { ...containerStyle }, id: "connect-database-form", children: [(0, jsx_runtime_1.jsx)("h1", { style: header1Style, children: "Connect Database" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 12 }, children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600, color: '#565656' }, children: "Database type" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 10 }, children: databases_1.DATABASE_DEFAULT_INFO.map((database) => {
-                            return ((0, jsx_runtime_1.jsx)(DatabaseSelector_1.default, { onDatabaseSelect: onDatabaseSelect, containerStyle: { marginBottom: '12px' }, label: database.label, value: database.value, imageUrl: database.imageUrl }, database.label));
+                            return ((0, jsx_runtime_1.jsx)(DatabaseSelector_1.default, { onDatabaseSelect: onDatabaseSelect, databaseType: databaseConnectionDetails?.type || '', containerStyle: { marginBottom: '12px' }, label: database.label, value: database.value, imageUrl: database.imageUrl }, database.label));
                         }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                             // width: '100%',
                             maxWidth: 330,
@@ -95,49 +132,70 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 6,
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: "\u2705" }), " ", (0, jsx_runtime_1.jsx)("div", { children: "Copied to clipboard" })] }))] }), databaseConnectionDetails && ((0, jsx_runtime_1.jsxs)("div", { children: [databaseConnectionDetails.type === 'PostgreSQL' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
-                                        setConnectionDetails({
-                                            ...databaseConnectionDetails,
-                                            connectionString: e.target.value,
-                                        });
-                                    }, value: databaseConnectionDetails.connectionString })] }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            ...header1Style,
-                            textAlign: 'center',
-                            fontSize: 14,
-                            color: '#565656',
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            paddingTop: 24,
-                            paddingBottom: 0,
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: "or" }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } })] }), (0, jsx_runtime_1.jsx)("div", { id: "database-details-form", children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: "\u2705" }), " ", (0, jsx_runtime_1.jsx)("div", { children: "Copied to clipboard" })] }))] }), databaseConnectionDetails && ((0, jsx_runtime_1.jsxs)("div", { children: [databaseConnectionDetails.type !== 'BigQuery' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
+                                            setConnectionDetails({
+                                                ...databaseConnectionDetails,
+                                                connectionString: e.target.value,
+                                            });
+                                        }, value: databaseConnectionDetails.connectionString })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    ...header1Style,
+                                    textAlign: 'center',
+                                    fontSize: 14,
+                                    color: '#565656',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    paddingTop: 24,
+                                    paddingBottom: 0,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: "or" }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } })] }), (0, jsx_runtime_1.jsx)("div", { id: "database-details-form", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                                            ...header2Style,
+                                                            fontWeight: '600',
+                                                        }, children: key
+                                                            .split(/(?=[A-Z])/)
+                                                            .map((word) => word.charAt(0).toUpperCase() +
+                                                            word.slice(1))
+                                                            .join(' ') }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
+                                                            setConnectionDetails({
+                                                                ...databaseConnectionDetails,
+                                                                [key]: e.target.value,
+                                                            });
+                                                        }, value: value, disabled: key === 'type' })] }, key));
+                                    }) }) })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 790 }, children: (0, jsx_runtime_1.jsxs)("div", { id: "database-details-form", style: {
                                 display: 'grid',
-                                gridTemplateColumns: 'repeat(3, 1fr)',
+                                gridTemplateColumns: 'repeat(1, 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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: {
-                                                    ...header2Style,
-                                                    fontWeight: '600',
-                                                }, children: key
-                                                    .split(/(?=[A-Z])/)
-                                                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                                                    .join(' ') }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
-                                                    setConnectionDetails({
-                                                        ...databaseConnectionDetails,
-                                                        [key]: e.target.value,
-                                                    });
-                                                }, value: value, disabled: key === 'type' })] }, key));
-                            }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                                ...header2Style,
+                                                fontWeight: '600',
+                                            }, children: "Project ID" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
+                                                setConnectionDetails({
+                                                    ...databaseConnectionDetails,
+                                                    companyTag: e.target.value,
+                                                });
+                                                setCompanyTag(e.target.value);
+                                            }, value: companyTag })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Submit File" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", ref: myInputRef }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        gap: 12,
+                                                        alignItems: 'center',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), (0, jsx_runtime_1.jsx)("span", { style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] })] }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
                             marginTop: '24px',
-                        }, children: [showError ? ((0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, color: 'red' }, children: "Couldn't connect to database." })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: connectButtonMessage, onClick: testConnection })] })] }))] }));
+                        }, children: [showError ? ((0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, color: 'red' }, children: "Couldn't connect to database." })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: connectButtonMessage, onClick: testConnectionAndFormClient })] })] }))] }));
 }
 exports.default = ConnectDatabase;

package/dist/cjs/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, }: {
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
@@ -9,5 +9,7 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
     environmentDetails?: ConnectionType;
     initialError?: ConnectionError;
     propogateSchemaDetails: (schemaDetails?: SchemaDetails) => void;
+    clientId: string;
+    parentRef: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectSchema.d.ts.map

package/dist/cjs/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,EAAuB,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AASnD,OAAO,EACL,eAAe,EACf,cAAc,EAEf,MAAM,uBAAuB,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,GACb,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;CACjE,2CA6RA"}
+{"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"}

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

@@ -8,8 +8,7 @@ const react_1 = require("react");
 const primitives_1 = require("../../primitives");
 const DropDownMenuWithLabel_1 = __importDefault(require("../../components/DropDownMenuWithLabel"));
 const ConnectionClient_1 = require("../../api/ConnectionClient");
-const databases_1 = require("../../utils/databases");
-function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, }) {
+function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }) {
     const [schemaDetails, setSchemaDetails] = (0, react_1.useState)(allSchemaInfo);
     const [schemaError, setSchemaError] = (0, react_1.useState)(initialError);
     const [formError, setFormError] = (0, react_1.useState)({ show: false, message: '' });
@@ -21,8 +20,8 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                     gap: '16px',
                     alignItems: 'flex-end',
                     paddingBottom: '16px',
-                }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.schemas || schemaError?.schemas || [], setSelected: async (e) => {
-                            const tables = await (0, ConnectionClient_1.getTablesBySchema)((0, databases_1.formConnectionString)(environmentDetails), e);
+                }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.schemas || schemaError?.schemas || [], setSelected: async (e) => {
+                            const tables = await (0, ConnectionClient_1.getTablesBySchema)(clientId, e);
                             if (tables) {
                                 setFormError({ show: false, message: '' });
                                 setSchemaError(undefined);
@@ -58,7 +57,7 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                 });
                             }
                         }, selected: schemaDetails?.selectedFields?.schema || schemaError?.schemaName, label: 'Schema' }), schemaError?.schemas.length === 0 && ((0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Re-fetch", onClick: async () => {
-                            const suspectedSchema = await (0, ConnectionClient_1.getSchemaTableInfo)((0, databases_1.formConnectionString)(environmentDetails), 'public');
+                            const suspectedSchema = await (0, ConnectionClient_1.getSchemaTableInfo)(clientId, 'public', environmentDetails.type);
                             if ('selectedFields' in suspectedSchema) {
                                 setSchemaError(undefined);
                                 setSchemaDetails(suspectedSchema);
@@ -79,8 +78,8 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                 gap: '20px',
                                 justifyContent: 'space-between',
                                 marginTop: '8px',
-                            }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.tables || [], setSelected: async (e) => {
-                                        const columns = await (0, ConnectionClient_1.getTableInfo)((0, databases_1.formConnectionString)(environmentDetails), schemaDetails?.selectedFields?.schema, e);
+                            }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
+                                        const columns = await (0, ConnectionClient_1.getTableInfo)(clientId, schemaDetails?.selectedFields?.schema, e);
                                         setSchemaDetails({
                                             ...schemaDetails,
                                             columns: columns.columns,
@@ -91,10 +90,10 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                                 table: e,
                                             },
                                         });
-                                    }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.columns || [], setSelected: async (e) => {
-                                        const fkStrings = await (0, ConnectionClient_1.getFKInfo)((0, databases_1.formConnectionString)(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
+                                    }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                        const fkStrings = await (0, ConnectionClient_1.getFKInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
                                         if (schemaDetails?.selectedFields.customerNameField) {
-                                            const organizations = await (0, ConnectionClient_1.getOrgInfo)((0, databases_1.formConnectionString)(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
+                                            const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
                                             setSchemaDetails({
                                                 ...schemaDetails,
                                                 organizations: organizations,
@@ -112,9 +111,9 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                                 organizationIdField: e,
                                             },
                                         });
-                                    }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.columns || [], setSelected: async (e) => {
+                                    }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
                                         if (schemaDetails?.selectedFields.organizationIdField) {
-                                            const organizations = await (0, ConnectionClient_1.getOrgInfo)((0, databases_1.formConnectionString)(environmentDetails), schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
+                                            const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
                                             setSchemaDetails({
                                                 ...schemaDetails,
                                                 organizations: organizations,
@@ -133,7 +132,7 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                                 },
                                             });
                                         }
-                                    }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
+                                    }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
                                         [], setSelected: async (e) => {
                                         const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
                                         setSchemaDetails({
@@ -143,7 +142,7 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
                                                 defaultOrg: orgObj,
                                             },
                                         });
-                                    }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
+                                    }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
                                         setSchemaDetails({
                                             ...schemaDetails,
                                             selectedFields: {

package/dist/cjs/forms/client_onboard/CreateSqlViews.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { ColumnsByTable } from '../../utils/table';
 import { SchemaDetails } from '../../utils/schema';
 import { ConnectionType } from '../../utils/databases';
-export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, }: {
+export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
@@ -11,5 +11,14 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
     allSchemaInfo?: SchemaDetails;
     domainName: string | undefined;
     completeOnboarding: (client: any) => void;
+    clientId: string;
+    state: any;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }: {
+    isOpen: boolean;
+    setIsOpen: (e: boolean) => void;
+    override: (e: boolean) => Promise<void>;
+    foreignKey: string | undefined;
+    tableName: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CreateSqlViews.d.ts.map