@quillsql/admin 1.6.0 → 1.6.2

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

@@ -1,22 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { ButtonPrimitive, TextInputPrimitive } from '../../primitives';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { ButtonPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, } from '../../primitives';
 import DatabaseSelector from '../../components/DatabaseSelector';
 import { DATABASE_DEFAULT_INFO, formConnectionString, getDatabaseConnectionFormat, } from '../../utils/databases';
-import { getSchemaTableInfo, testConnectionString, } from '../../api/ConnectionClient';
-import { delay } from '../../utils/delay';
-export default function ConnectDatabase({ containerStyle, header1Style, header2Style, setEnvironmentDetails, environmentDetails, envClientId = '', }) {
-    // SPECIAL FIELDS FOR BIG QUERY ONLY
-    const [companyTag, setCompanyTag] = useState('');
-    const [showError, setShowError] = useState(false);
-    const [connectButtonMessage, setConnectButtonMessage] = useState('Connect');
-    const [copied, setCopied] = useState(false);
-    const [clientId, setClientId] = useState(envClientId);
+import { getTableColumnsBySchema, setSchemaNames, testConnectionString, } from '../../api/ConnectionClient';
+import ClipboardButton from '../../components/ClipboardButton';
+import ExternalLink from '../../components/ExternalLink';
+import QuillTab from '../../components/QuillTab';
+import { QuillMultiSelectComponentWithCombo } from '../../components/QuillMultiSelectWithCombo';
+import CardSection from '../../components/CardSection';
+// import InputLabel from '../../components/InputLabel';
+import { useAdmin } from '../../AdminProvider';
+export default function ConnectDatabase({ containerStyle, header1Style, header2Style, environmentDetails, setEnvironmentDetails, fetchSchemasLoading, onConnectDatabase, }) {
+    const { state, getToken } = useAdmin();
+    const [error, setError] = useState(undefined);
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [clientId, setClientId] = useState(environmentDetails.client.clientId);
     const [fileLabel, setFileLabel] = useState('No file chosen');
-    const [databaseConnectionDetails, setConnectionDetails] = useState(environmentDetails);
+    const [allSchemas, setAllSchemas] = useState([]);
+    const [selectedSchemas, setSelectedSchemas] = 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] = useState(environmentDetails.connection.connectionString &&
+        usesConnectionString.includes(environmentDetails.connection.type.toLowerCase())
+        ? 'Connection String'
+        : 'Database Credentials');
+    const [databaseConnectionDetails, setConnectionDetails] = useState(environmentDetails.connection);
     const onDatabaseSelect = (database) => {
-        setShowError(false);
+        setError(undefined);
         setConnectionDetails(getDatabaseConnectionFormat(database));
+        setCredentialTab('Database Credentials');
     };
     const myInputRef = useRef(null);
     const handleButtonClick = () => {
@@ -25,6 +41,16 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
             myInputRef.current.click();
         }
     };
+    // Save the connection details to session storage so it can be restored if the user navigates away
+    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];
@@ -49,100 +75,108 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
         };
         reader.readAsText(file);
     };
+    const isButtonDisabled = 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 setSchemaNames(state.queryEndpoint, clientId, selectedSchemas, getToken);
+            const databaseSchema = await 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 () => {
+        setError(undefined);
         const connectionString = formConnectionString(databaseConnectionDetails);
-        const result = await testConnectionString(connectionString, databaseConnectionDetails.type, clientId);
+        setIsConnecting(true);
+        const result = await testConnectionString(state.queryEndpoint, connectionString, databaseConnectionDetails.type, getToken, clientId);
         if (result.success) {
             try {
+                setConnectionDetails({
+                    ...databaseConnectionDetails,
+                    connectionString: connectionString,
+                });
                 setClientId(result.clientId);
-                const suspectedSchema = await 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 delay(1000);
-                if ('selectedFields' in suspectedSchema) {
-                    setConnectButtonMessage('Connected ✅');
-                    await delay(2000);
-                    setEnvironmentDetails(databaseConnectionDetails, suspectedSchema, undefined, result.clientId);
-                }
-                else {
-                    setConnectButtonMessage('Connected ✅');
-                    await 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 (_jsxs("div", { style: { ...containerStyle }, id: "connect-database-form", children: [_jsx("h1", { style: header1Style, children: "Connect Database" }), _jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: '#565656' }, children: "Database type" }), _jsx("div", { style: { display: 'flex', gap: 10 }, children: DATABASE_DEFAULT_INFO.map((database) => {
+    return (_jsxs("div", { style: { ...containerStyle, minWidth: 840 }, id: "connect-database-form", children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                }, children: [_jsx("h1", { style: header1Style, children: "Connect Database" }), clientId && !!selectedSchemas?.length && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", width: "24px", height: "24px", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", clipRule: "evenodd" }) }))] }), _jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600, color: '#565656' }, children: "Database type" }), _jsx("div", { style: { display: 'flex', gap: 10, userSelect: 'none' }, children: DATABASE_DEFAULT_INFO.map((database) => {
                             return (_jsx(DatabaseSelector, { onDatabaseSelect: onDatabaseSelect, databaseType: databaseConnectionDetails?.type || '', containerStyle: { marginBottom: '12px' }, label: database.label, value: database.value, imageUrl: database.imageUrl }, database.label));
-                        }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_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: [_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; }
-        ` }), _jsx("div", { style: { ...header2Style, color: '#212121', marginBottom: '0px' }, children: _jsx("h2", { style: {
-                                        WebkitUserSelect: 'none',
-                                        MozUserSelect: 'none',
-                                        msUserSelect: 'none',
-                                        userSelect: 'none',
-                                    }, children: "Whitelist Quill's IP" }) }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: '6px',
-                                    cursor: 'pointer',
-                                    marginLeft: '12px',
-                                }, children: [_jsx("h2", { style: {
+                        }) })] }), databaseConnectionDetails && (_jsxs("div", { children: [databaseConnectionDetails.type !== 'BigQuery' ? (_jsxs("div", { children: [['MySQL', 'PostgreSQL'].includes(databaseConnectionDetails.type) && (_jsxs("div", { style: { marginTop: 16, marginBottom: 24 }, children: [_jsx("h2", { style: {
                                             ...header2Style,
-                                            color: '#212121',
-                                            marginBottom: '0px',
-                                        }, children: "34.133.137.225" }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [_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" }), _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 && (_jsxs("div", { style: {
-                            fontSize: 13,
-                            fontWeight: 600,
-                            color: '#565656',
-                            marginLeft: 16,
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                        }, children: [_jsx("div", { children: "\u2705" }), " ", _jsx("div", { children: "Copied to clipboard" })] }))] }), databaseConnectionDetails && (_jsxs("div", { children: [databaseConnectionDetails.type !== 'BigQuery' ? (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), _jsx(TextInputPrimitive, { onChange: (e) => {
-                                            setConnectionDetails({
-                                                ...databaseConnectionDetails,
-                                                connectionString: e.target.value,
-                                            });
-                                        }, value: databaseConnectionDetails.connectionString })] }), _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' } })] }), _jsx("div", { id: "database-details-form", children: _jsx("div", { style: {
+                                            fontWeight: 600,
+                                            marginBottom: 8,
+                                        }, children: "Connection Method" }), _jsx(QuillTab, { width: "486px", modeToggleOptions: credentialTabOptions, toggleMode: credentialTab, setToggleMode: setCredentialTab })] })), credentialTab === 'Database Credentials' ? (_jsx("div", { id: "database-details-form", children: _jsx("div", { style: {
                                         display: 'grid',
                                         gridTemplateColumns: 'repeat(3, 1fr)',
                                         gap: '20px',
@@ -152,7 +186,7 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                                     // get a list of types in the databaseConnectionDetails object and create a form for each
                                     Object.entries(databaseConnectionDetails).map(([key, value]) => {
                                         if (key !== 'connectionString' && key !== 'type')
-                                            return (_jsxs("div", { children: [_jsx("h2", { style: {
+                                            return (_jsxs("div", { "data-testid": `quill-input-${key}`, children: [_jsx("h2", { style: {
                                                             ...header2Style,
                                                             fontWeight: '600',
                                                         }, children: key
@@ -163,33 +197,104 @@ export default function ConnectDatabase({ containerStyle, header1Style, header2S
                                                             setConnectionDetails({
                                                                 ...databaseConnectionDetails,
                                                                 [key]: e.target.value,
+                                                                connectionString: '',
                                                             });
-                                                        }, 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));
+                                    }) }) })) : (_jsxs("div", { "data-testid": "quill-input-connectionString", children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "Connection String" }), _jsx(TextInputPrimitive, { onChange: (e) => {
+                                            updateConnectionString(e.target.value);
+                                        }, value: databaseConnectionDetails.connectionString })] }))] })) : (_jsx("div", { style: { minWidth: 790 }, children: _jsx("div", { id: "database-details-form-bq", style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(1, 1fr)',
                                 gap: '20px',
                                 justifyContent: 'space-between',
                                 marginTop: '16px',
-                            }, children: [_jsxs("div", { children: [_jsx("h2", { style: {
-                                                ...header2Style,
-                                                fontWeight: '600',
-                                            }, children: "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", { title: "Upload JSON", type: "file", accept: ".json", onChange: handleFileChange, style: { display: 'none' }, id: "fileInput", "data-testid": "quill-input-fileInput", ref: myInputRef }), _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: 12,
+                                                    alignItems: 'center',
+                                                }, children: [_jsx(ButtonPrimitive, { onClick: handleButtonClick, label: 'Upload JSON' }), _jsx("span", { "data-testid": "quill-file-label", style: { ...header2Style, fontWeight: '600' }, children: fileLabel })] })] })] }) }) })), _jsxs("div", { style: {
+                            borderRadius: 6,
+                            padding: 12,
+                            background: '#f5f5f5',
+                            marginBottom: 18,
+                            marginTop: 18,
+                            fontSize: 14,
+                        }, children: [_jsx("h2", { style: { ...header2Style, fontWeight: 600 }, children: "IP Allowlist" }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                }, children: ["Ensure Quill's IP is allowed to connect to your database", ' ', _jsx(ExternalLink, { href: databaseConnectionDetails.type.toLowerCase() === 'bigquery'
+                                            ? 'https://cloud.google.com/access-context-manager/docs/overview#ip-address'
+                                            : databaseConnectionDetails.type.toLowerCase() === 'mysql'
+                                                ? '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' })] }), _jsx(ClipboardButton, { text: "34.133.137.225", containerStyle: {
+                                    marginTop: 12,
+                                } })] }), _jsx("div", { style: {
                             width: '100%',
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
                             marginTop: '24px',
-                        }, children: [showError ? (_jsx("h2", { style: { ...header2Style, color: 'red' }, children: "Couldn't connect to database." })) : (_jsx("div", {})), _jsx(ButtonPrimitive, { label: connectButtonMessage, onClick: testConnectionAndFormClient })] })] }))] }));
+                        }, "data-testid": "quill-connect-button", children: _jsx(ButtonPrimitive, { label: 'Connect', onClick: testConnectionAndFormClient, disabled: isButtonDisabled, isLoading: isConnecting }) })] })), _jsx(ModalPrimitive, { isOpen: !!error, onClose: () => setError(undefined), style: {
+                    width: 420,
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [_jsx(CardSection, { children: "Failed to Connect" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx("div", { style: {
+                                        color: 'red',
+                                        fontWeight: 600,
+                                        fontFamily: 'monospace',
+                                        border: '1px solid #e0e0e0',
+                                        padding: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: '#f5f5f5',
+                                        marginBottom: 8,
+                                    }, children: error }), _jsx("strong", { children: "Double check" }), _jsxs("ul", { style: { paddingLeft: 16 }, children: [_jsx("style", { children: `
+              .error-bullet {
+                list-style-type: disc;
+                margin-left: 20px;
+              }
+            ` }), _jsx("li", { className: "error-bullet", children: "The database type is correct" }), _jsx("li", { className: "error-bullet", children: "The connection string/credentials are valid" }), _jsx("li", { className: "error-bullet", children: "Quill's IP Address is allowed to connect" }), _jsx("li", { className: "error-bullet", children: "Your database is running" })] })] }), _jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: _jsx(ButtonPrimitive, { label: "Close", onClick: () => setError(undefined) }) })] }) }), _jsx(ModalPrimitive, { isOpen: !!allSchemas?.length, onClose: () => setAllSchemas([]), style: {
+                    minWidth: '350px',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [_jsx(CardSection, { children: "Connection Successful" }), _jsx("h2", { style: {
+                                fontSize: 15,
+                                fontWeight: 500,
+                                color: '#6e6e6e',
+                                marginTop: -12,
+                            }, children: "Which schemas should Quill have access to?" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, "data-testid": "quill-schema-select", children: _jsx(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())) }) }), _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: [_jsx(SecondaryButtonPrimitive, { label: "Go Back", onClick: () => setAllSchemas([]) }), _jsx("div", { "data-testid": "quill-looks-good-button", children: _jsx(ButtonPrimitive, { label: "Looks Good", onClick: nextStep, disabled: !selectedSchemas?.length, isLoading: isConnecting || fetchSchemasLoading }) })] })] }) })] }));
 }

package/dist/esm/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/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;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"}