@quillsql/admin 1.6.1 → 1.6.3

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

@@ -3,25 +3,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ConnectDatabase;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const primitives_1 = require("../../primitives");
 const DatabaseSelector_1 = __importDefault(require("../../components/DatabaseSelector"));
 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, 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 ClipboardButton_1 = __importDefault(require("../../components/ClipboardButton"));
+const ExternalLink_1 = __importDefault(require("../../components/ExternalLink"));
+const QuillTab_1 = __importDefault(require("../../components/QuillTab"));
+const QuillMultiSelectWithCombo_1 = require("../../components/QuillMultiSelectWithCombo");
+const CardSection_1 = __importDefault(require("../../components/CardSection"));
+// import InputLabel from '../../components/InputLabel';
+const AdminProvider_1 = require("../../AdminProvider");
+function ConnectDatabase({ containerStyle, header1Style, header2Style, environmentDetails, setEnvironmentDetails, fetchSchemasLoading, onConnectDatabase, }) {
+    const { state, getToken } = (0, AdminProvider_1.useAdmin)();
+    const [error, setError] = (0, react_1.useState)(undefined);
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    const [clientId, setClientId] = (0, react_1.useState)(environmentDetails.client.clientId);
     const [fileLabel, setFileLabel] = (0, react_1.useState)('No file chosen');
-    const [databaseConnectionDetails, setConnectionDetails] = (0, react_1.useState)(environmentDetails);
+    const [allSchemas, setAllSchemas] = (0, react_1.useState)([]);
+    const [selectedSchemas, setSelectedSchemas] = (0, react_1.useState)(environmentDetails.client.schemaNames ?? []);
+    const credentialTabOptions = [
+        { label: 'Database Credentials', value: 'Database Credentials' },
+        { label: 'Connection String', value: 'Connection String' },
+    ];
+    const usesConnectionString = ['postgresql', 'mysql'];
+    const [credentialTab, setCredentialTab] = (0, react_1.useState)(environmentDetails.connection.connectionString &&
+        usesConnectionString.includes(environmentDetails.connection.type.toLowerCase())
+        ? 'Connection String'
+        : 'Database Credentials');
+    const [databaseConnectionDetails, setConnectionDetails] = (0, react_1.useState)(environmentDetails.connection);
     const onDatabaseSelect = (database) => {
-        setShowError(false);
+        setError(undefined);
         setConnectionDetails((0, databases_1.getDatabaseConnectionFormat)(database));
+        setCredentialTab('Database Credentials');
     };
     const myInputRef = (0, react_1.useRef)(null);
     const handleButtonClick = () => {
@@ -30,6 +47,16 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
             myInputRef.current.click();
         }
     };
+    // Save the connection details to session storage so it can be restored if the user navigates away
+    (0, react_1.useEffect)(() => {
+        if (databaseConnectionDetails.type === 'BigQuery')
+            return;
+        // Redact sensitive information
+        const savedConnectionDetails = { ...databaseConnectionDetails };
+        savedConnectionDetails.connectionString = '';
+        savedConnectionDetails.password = '';
+        sessionStorage.setItem('connectionDetails', JSON.stringify(savedConnectionDetails));
+    }, [databaseConnectionDetails]);
     const handleFileChange = (e) => {
         // read file
         const file = e.target.files?.[0];
@@ -54,101 +81,108 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
         };
         reader.readAsText(file);
     };
+    const isButtonDisabled = (0, react_1.useMemo)(() => {
+        if (databaseConnectionDetails.connectionString) {
+            return false;
+        }
+        const typedDetails = databaseConnectionDetails;
+        switch (databaseConnectionDetails.type) {
+            case 'PostgreSQL':
+            case 'MySQL':
+            case 'Snowflake':
+            case 'ClickHouse':
+            case 'MSSQL':
+                return (!typedDetails.user ||
+                    !typedDetails.password ||
+                    !typedDetails.host ||
+                    !(typedDetails.databaseName ||
+                        typedDetails.type.toLowerCase() === 'clickhouse') ||
+                    !(typedDetails.port ||
+                        (typedDetails.warehouse &&
+                            typedDetails.type === 'Snowflake')));
+            case 'BigQuery':
+                return !databaseConnectionDetails.jsonString;
+            default:
+                return true;
+        }
+    }, [databaseConnectionDetails, selectedSchemas]);
+    const updateConnectionString = (connectionString) => {
+        setConnectionDetails((prevDetails) => {
+            const updatedDetails = {
+                ...prevDetails,
+                connectionString: connectionString,
+            };
+            for (const key in updatedDetails) {
+                if (key !== 'type' && key !== 'connectionString') {
+                    updatedDetails[key] = '';
+                }
+            }
+            return updatedDetails;
+        });
+    };
+    const nextStep = async () => {
+        if (!clientId) {
+            return;
+        }
+        try {
+            setIsConnecting(true);
+            await (0, ConnectionClient_1.setSchemaNames)(state.queryEndpoint, clientId, selectedSchemas, getToken);
+            const databaseSchema = await (0, ConnectionClient_1.getTableColumnsBySchema)(state.queryEndpoint, clientId, getToken, selectedSchemas).then((res) => res.columnsByTable);
+            setEnvironmentDetails(databaseConnectionDetails, databaseSchema, selectedSchemas, clientId);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+        finally {
+            setTimeout(() => {
+                setIsConnecting(false);
+            }, 1000);
+        }
+    };
     const testConnectionAndFormClient = async () => {
-        setShowError(false);
+        setError(undefined);
         const connectionString = (0, databases_1.formConnectionString)(databaseConnectionDetails);
-        const result = await (0, ConnectionClient_1.testConnectionString)(connectionString, databaseConnectionDetails.type, clientId);
+        setIsConnecting(true);
+        const result = await (0, ConnectionClient_1.testConnectionString)(state.queryEndpoint, connectionString, databaseConnectionDetails.type, getToken, clientId);
         if (result.success) {
             try {
+                setConnectionDetails({
+                    ...databaseConnectionDetails,
+                    connectionString: connectionString,
+                });
                 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
-                await (0, delay_1.delay)(1000);
-                if ('selectedFields' in suspectedSchema) {
-                    setConnectButtonMessage('Connected ✅');
-                    await (0, delay_1.delay)(2000);
-                    setEnvironmentDetails(databaseConnectionDetails, suspectedSchema, undefined, result.clientId);
-                }
-                else {
-                    setConnectButtonMessage('Connected ✅');
-                    await (0, delay_1.delay)(2000);
-                    setEnvironmentDetails(databaseConnectionDetails, undefined, suspectedSchema, result.clientId);
+                setSelectedSchemas([]);
+                if (!result.schemas?.length) {
+                    setError('No schemas returned from database');
+                    setIsConnecting(false);
+                    return;
                 }
+                setAllSchemas(result.schemas);
+                onConnectDatabase?.(result.clientId);
             }
             catch (e) {
-                setConnectButtonMessage('Connect');
-                setShowError(true);
+                setError("Couldn't connect to database");
+            }
+            finally {
+                setIsConnecting(false);
             }
         }
         else {
-            setConnectButtonMessage('Connect');
-            setShowError(true);
+            setError(result.error);
+            setIsConnecting(false);
         }
     };
-    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.jsxs)("div", { style: { ...containerStyle, minWidth: 840 }, id: "connect-database-form", children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsx)("h1", { style: header1Style, children: "Connect Database" }), clientId && !!selectedSchemas?.length && ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", width: "24px", height: "24px", children: (0, jsx_runtime_1.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" }) }))] }), (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, userSelect: 'none' }, children: databases_1.DATABASE_DEFAULT_INFO.map((database) => {
                             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,
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            padding: '6px 12px',
-                            marginTop: '20px',
-                            marginBottom: '18px',
-                            borderRadius: 6,
-                            cursor: 'pointer',
-                        }, onClick: () => {
-                            navigator.clipboard.writeText('34.133.137.225');
-                            setCopied(true);
-                            setTimeout(() => setCopied(false), 1500);
-                        }, className: "quill-active", children: [(0, jsx_runtime_1.jsx)("style", { children: `.quill-active { background: #fff; border: 1px solid #e7e7e7; } 
-        .quill-active:hover { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7 }
-        .quill-active:active { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #9DC4F8; outline: 2px solid #9DC4F8; }
-        ` }), (0, jsx_runtime_1.jsx)("div", { style: { ...header2Style, color: '#212121', marginBottom: '0px' }, children: (0, jsx_runtime_1.jsx)("h2", { style: {
-                                        WebkitUserSelect: 'none',
-                                        MozUserSelect: 'none',
-                                        msUserSelect: 'none',
-                                        userSelect: 'none',
-                                    }, children: "Whitelist Quill's IP" }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: '6px',
-                                    cursor: 'pointer',
-                                    marginLeft: '12px',
-                                }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                        }) })] }), databaseConnectionDetails && ((0, jsx_runtime_1.jsxs)("div", { children: [databaseConnectionDetails.type !== 'BigQuery' ? ((0, jsx_runtime_1.jsxs)("div", { children: [['MySQL', 'PostgreSQL'].includes(databaseConnectionDetails.type) && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 16, marginBottom: 24 }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
                                             ...header2Style,
-                                            color: '#212121',
-                                            marginBottom: '0px',
-                                        }, children: "34.133.137.225" }), (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" })] })] })] }), copied && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                            fontSize: 13,
-                            fontWeight: 600,
-                            color: '#565656',
-                            marginLeft: 16,
-                            display: 'flex',
-                            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 !== '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: {
+                                            fontWeight: 600,
+                                            marginBottom: 8,
+                                        }, children: "Connection Method" }), (0, jsx_runtime_1.jsx)(QuillTab_1.default, { width: "486px", modeToggleOptions: credentialTabOptions, toggleMode: credentialTab, setToggleMode: setCredentialTab })] })), credentialTab === 'Database Credentials' ? ((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',
@@ -158,7 +192,7 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
                                     // 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: {
+                                            return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": `quill-input-${key}`, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
                                                             ...header2Style,
                                                             fontWeight: '600',
                                                         }, children: key
@@ -169,25 +203,104 @@ function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnviro
                                                             setConnectionDetails({
                                                                 ...databaseConnectionDetails,
                                                                 [key]: e.target.value,
+                                                                connectionString: '',
                                                             });
                                                         }, value: value, disabled: key === 'type', password: key === 'password' ? true : false })] }, key));
-                                    }) }) })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 790 }, children: (0, jsx_runtime_1.jsx)("div", { id: "database-details-form", style: {
+                                    }) }) })) : ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "quill-input-connectionString", children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
+                                            updateConnectionString(e.target.value);
+                                        }, value: databaseConnectionDetails.connectionString })] }))] })) : ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 790 }, children: (0, jsx_runtime_1.jsx)("div", { id: "database-details-form-bq", style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(1, 1fr)',
                                 gap: '20px',
                                 justifyContent: 'space-between',
                                 marginTop: '16px',
-                            }, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Service Account Json" }), (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: {
+                            }, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: '600' }, children: "Service Account Json" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { title: "Upload JSON", type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", "data-testid": "quill-input-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: {
+                                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "quill-file-label", style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] }) }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            borderRadius: 6,
+                            padding: 12,
+                            background: '#f5f5f5',
+                            marginBottom: 18,
+                            marginTop: 18,
+                            fontSize: 14,
+                        }, children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600 }, children: "IP Allowlist" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                }, children: ["Ensure Quill's IP is allowed to connect to your database", ' ', (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: databaseConnectionDetails.type.toLowerCase() === 'bigquery'
+                                            ? 'https://cloud.google.com/access-context-manager/docs/overview#ip-address'
+                                            : databaseConnectionDetails.type.toLowerCase() === 'mysql'
+                                                ? 'https://dev.mysql.com/doc/refman/8.0/en/grant.html'
+                                                : databaseConnectionDetails.type.toLowerCase() ===
+                                                    'snowflake'
+                                                    ? 'https://docs.snowflake.com/en/user-guide/network-policies#working-with-network-rules'
+                                                    : databaseConnectionDetails.type.toLowerCase() ===
+                                                        'sqlserver'
+                                                        ? 'https://learn.microsoft.com/en-us/sql/tools/configuration-manager/tcp-ip-properties-ip-addresses-tab?view=sql-server-ver16'
+                                                        : databaseConnectionDetails.type.toLowerCase() ===
+                                                            'clickhouse'
+                                                            ? 'https://clickhouse.com/docs/cloud/security/setting-ip-filters/'
+                                                            : 'https://www.postgresql.org/docs/current/auth-pg-hba-conf.html' })] }), (0, jsx_runtime_1.jsx)(ClipboardButton_1.default, { text: "34.133.137.225", containerStyle: {
+                                    marginTop: 12,
+                                } })] }), (0, jsx_runtime_1.jsx)("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: testConnectionAndFormClient })] })] }))] }));
+                        }, "data-testid": "quill-connect-button", children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Connect', onClick: testConnectionAndFormClient, disabled: isButtonDisabled, isLoading: isConnecting }) })] })), (0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: !!error, onClose: () => setError(undefined), style: {
+                    width: 420,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Failed to Connect" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                        color: 'red',
+                                        fontWeight: 600,
+                                        fontFamily: 'monospace',
+                                        border: '1px solid #e0e0e0',
+                                        padding: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: '#f5f5f5',
+                                        marginBottom: 8,
+                                    }, children: error }), (0, jsx_runtime_1.jsx)("strong", { children: "Double check" }), (0, jsx_runtime_1.jsxs)("ul", { style: { paddingLeft: 16 }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+              .error-bullet {
+                list-style-type: disc;
+                margin-left: 20px;
+              }
+            ` }), (0, jsx_runtime_1.jsx)("li", { className: "error-bullet", children: "The database type is correct" }), (0, jsx_runtime_1.jsx)("li", { className: "error-bullet", children: "The connection string/credentials are valid" }), (0, jsx_runtime_1.jsx)("li", { className: "error-bullet", children: "Quill's IP Address is allowed to connect" }), (0, jsx_runtime_1.jsx)("li", { className: "error-bullet", children: "Your database is running" })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Close", onClick: () => setError(undefined) }) })] }) }), (0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: !!allSchemas?.length, onClose: () => setAllSchemas([]), style: {
+                    minWidth: '350px',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Connection Successful" }), (0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: 15,
+                                fontWeight: 500,
+                                color: '#6e6e6e',
+                                marginTop: -12,
+                            }, children: "Which schemas should Quill have access to?" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, "data-testid": "quill-schema-select", children: (0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { width: 250, options: allSchemas.map((schema) => ({
+                                    label: schema,
+                                    value: schema,
+                                })), value: selectedSchemas, onChange: (e) => setSelectedSchemas(e.target.value
+                                    .filter((x) => x !== null)
+                                    .map((x) => x.toString())) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: [(0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Go Back", onClick: () => setAllSchemas([]) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-looks-good-button", children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Looks Good", onClick: nextStep, disabled: !selectedSchemas?.length, isLoading: isConnecting || fetchSchemasLoading }) })] })] }) })] }));
 }
-exports.default = ConnectDatabase;

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

@@ -1,16 +1,20 @@
 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, state, }: {
+import { ConnectionType } from '../../utils/databases';
+import { ColumnsByTable } from '../../utils/table';
+import { State } from '../../AdminProvider';
+import { TenantInit } from '../../utils/schema';
+export default function ConnectSchema({ containerStyle, header1Style, databaseSchema, connection, tenantInit, onTenantCreation, clientId, selectedSchemas, state, label, returnToConnectDatabase, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
-    allSchemaInfo?: SchemaDetails;
-    environmentDetails?: ConnectionType;
-    initialError?: ConnectionError;
-    propogateSchemaDetails: (schemaDetails?: SchemaDetails) => void;
+    databaseSchema: ColumnsByTable[];
+    connection: ConnectionType;
+    tenantInit: Partial<TenantInit>;
+    onTenantCreation: (tenantInit: TenantInit) => void;
     clientId: string;
-    parentRef: any;
-    state: any;
+    selectedSchemas: string[];
+    state: State;
+    label: string;
+    returnToConnectDatabase: () => void;
 }): 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,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"}
+{"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"}