@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/primitives/TogglePrimitive.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TogglePrimitive = ({ value, onClick }) => {
+const TogglePrimitive = ({ value, onClick, style, disabled, }) => {
     const toggleStyle = {
         container: {
+            transformOrigin: 'top left',
             display: 'inline-block',
             position: 'relative',
-            width: '50px',
-            height: '30px',
+            width: '30px',
+            height: '18px',
             borderRadius: '24px',
             backgroundColor: value ? '#212121' : '#ccc',
             cursor: 'pointer',
             transition: 'background-color 0.4s',
+            opacity: disabled ? 0.5 : 1,
+            ...style,
         },
         circle: {
             position: 'absolute',
             top: '3px',
-            left: value ? '23px' : '3px',
-            width: '24px',
-            height: '24px',
+            left: value ? '15px' : '3px',
+            width: '12px',
+            height: '12px',
             borderRadius: '50%',
             backgroundColor: '#FFF',
             transition: 'left 0.4s',
@@ -33,7 +36,7 @@ const TogglePrimitive = ({ value, onClick }) => {
             color: '#FFF',
         },
     };
-    return (_jsxs("div", { style: toggleStyle.container, onClick: onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle between dark and light mode", children: [_jsx("div", { style: toggleStyle.circle }), value ? (_jsx("div", { style: {
+    return (_jsxs("div", { style: toggleStyle.container, onClick: disabled ? () => { } : onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle", children: [_jsx("div", { style: toggleStyle.circle }), value ? (_jsx("div", { style: {
                     ...toggleStyle.icon,
                     left: '35px',
                     color: '#FFC107',

package/dist/esm/primitives/index.d.ts

@@ -2,6 +2,6 @@ export { default as TextInputPrimitive } from './TextInputPrimitive';
 export { default as ButtonPrimitive } from './ButtonPrimitive';
 export { default as SecondaryButtonPrimitive } from './SecondaryButtonPrimitive';
 export { default as ModalPrimitive } from './ModalPrimitive';
-export { default as SelectPrimitive } from './SelectPrimitive';
 export { default as HeaderPrimitive } from './HeaderPrimitive';
+export { default as CheckboxPrimitive } from './CheckboxPrimitive';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/primitives/index.js

@@ -2,5 +2,5 @@ export { default as TextInputPrimitive } from './TextInputPrimitive';
 export { default as ButtonPrimitive } from './ButtonPrimitive';
 export { default as SecondaryButtonPrimitive } from './SecondaryButtonPrimitive';
 export { default as ModalPrimitive } from './ModalPrimitive';
-export { default as SelectPrimitive } from './SelectPrimitive';
 export { default as HeaderPrimitive } from './HeaderPrimitive';
+export { default as CheckboxPrimitive } from './CheckboxPrimitive';

package/dist/esm/public_components/ChartQueryBuilder.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { QuillReport } from '@quillsql/react';
+export default function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }: {
+    activeComponent: string;
+    onExit?: (report?: QuillReport) => void;
+    containerStyle?: CSSProperties;
+    destinationDashboard: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartQueryBuilder.d.ts.map

package/dist/esm/public_components/ChartQueryBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartQueryBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/ChartQueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AAUzB,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,MAAM,EACN,cAAc,EACd,oBAAoB,GACrB,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,2CAkOA"}

package/dist/esm/public_components/ChartQueryBuilder.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+import { EnvSelectPopover, OrgSelect } from '../components';
+import { ReportBuilder, SQLEditor, useDashboard, } from '@quillsql/react';
+import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
+import QuillTab from '../components/QuillTab';
+import XMarkIcon from '../icons/XMarkIcon';
+import PlaceholderPrimitive from '../primitives/PlaceholderPrimitive';
+import { useDashboardManager } from '../hooks/useDashboardManager';
+import { onlySingleDatabaseTenant } from '../utils/tenants';
+import { ButtonPrimitive } from '../primitives';
+import { SAVED_QUERIES_DASHBOARD } from '../utils/constants';
+export default function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }) {
+    const parentRef = useRef(null);
+    const { state, dispatch, clientLoading, setClient } = useAdmin();
+    const [query, setQuery] = useState(state.activeQuery);
+    const [toggleMode, setToggleMode] = useState(activeComponent);
+    const { setSelectedDashboard } = useDashboardManager();
+    const { reload } = useDashboard(SAVED_QUERIES_DASHBOARD);
+    const modeToggleOptions = [
+        { label: 'SQL Editor', value: 'SQL Editor' },
+        { label: 'Report Builder', value: 'Report Builder' },
+    ];
+    const submitReport = (report) => {
+        onExit && onExit(report);
+        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+        setSelectedDashboard(report.dashboardName);
+    };
+    const submitSavedQuery = (report) => {
+        reload(SAVED_QUERIES_DASHBOARD, true, { report, action: 'upsert' });
+        onExit && onExit(report);
+        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SavedQueries' });
+    };
+    // useEffect(() => {
+    //   if (state.activeQuery) {
+    //     setIsEditActive(true);
+    //   } else {
+    //     setIsEditActive(false);
+    //   }
+    // }, [state.activeQuery]);
+    useEffect(() => {
+        setQuery(state.activeQuery);
+    }, [state.activeQuery]);
+    useEffect(() => {
+        setToggleMode(activeComponent);
+    }, [activeComponent]);
+    return (_jsx("div", { style: {
+            height: '100%',
+            ...containerStyle,
+        }, ref: parentRef, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        backgroundColor: 'white',
+                        zIndex: 1,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        flexDirection: 'row',
+                        paddingTop: 12,
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        paddingLeft: '30px',
+                        paddingRight: '30px',
+                        borderBottomWidth: 1,
+                        borderTopWidth: 0,
+                        borderLeftWidth: 0,
+                        borderRightWidth: 0,
+                        borderStyle: 'solid',
+                        borderColor: state.theme?.borderColor,
+                        paddingBottom: 20,
+                    }, children: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: 12,
+                                    alignItems: 'flex-end',
+                                }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
+                                                setClient(client, true);
+                                            }, theme: state.theme, parentRef: parentRef, isLoading: clientLoading }) }), state.client?.name !== undefined &&
+                                        !state.databaseTypeMismatch.show &&
+                                        !onlySingleDatabaseTenant(state.client) && (_jsx(OrgSelect, { isLoading: clientLoading })), _jsx(QuillTab, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, width: "250px" })] }), onExit && (_jsx("button", { type: "button", onClick: () => {
+                                    onExit();
+                                }, style: {
+                                    height: 40,
+                                    width: 40,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    background: 'white',
+                                    border: '1px solid #e7e7e7',
+                                    borderRadius: '4px',
+                                }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, "aria-hidden": "true" }) }))] }) }), state.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), clientLoading ? (_jsxs("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        flexGrow: 1,
+                        gap: 32,
+                        padding: 32,
+                    }, children: [_jsx(PlaceholderPrimitive, { containerStyle: { width: '12%' } }), _jsx(PlaceholderPrimitive, { containerStyle: { maxHeight: 300 } })] })) : toggleMode === 'Report Builder' ? (_jsx(ReportBuilder, { reportId: state.activeSavedQueryReportId ?? '', isAdminEnabled: true, onSubmitCreateReport: submitReport, onSubmitEditReport: submitReport, onSubmitSaveQuery: submitSavedQuery, containerStyle: {
+                        height: 'calc(100vh - 146px)',
+                        width: '100%',
+                    }, ButtonComponent: ({ onClick, label, isLoading, disabled }) => {
+                        if (label === 'Save changes' && state.activeSavedQueryReportId) {
+                            return (_jsx(ButtonPrimitive, { onClick: onClick, label: 'Add to dashboard', isLoading: isLoading, disabled: disabled }));
+                        }
+                        return (_jsx(ButtonPrimitive, { onClick: onClick, label: label, isLoading: isLoading, disabled: disabled }));
+                    }, destinationDashboard: destinationDashboard, chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
+                        ? false
+                        : true })) : (_jsx(SQLEditor, { isAdminEnabled: true, showTableFormatOptions: true, showAccessControlOptions: true, showDateFieldOptions: true, defaultQuery: query, addToDashboardButtonLabel: 'Add to dashboard', chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, 
+                    // report={state.activeQuery ? state.activeEditItem : undefined}
+                    onAddToDashboardComplete: submitReport, onSaveQueryComplete: submitSavedQuery, containerStyle: {
+                        height: '100%',
+                        width: '100%',
+                        overflow: 'hidden',
+                        // paddingRight: 25,
+                        // paddingTop: 25,
+                    }, destinationDashboard: destinationDashboard }))] }) }));
+}

package/dist/esm/public_components/CreateEnvironment.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
-export default function CreateEnvironment({ navigateToDashboardManager, containerStyle, }: {
+export default function CreateEnvironment({ onOnboardComplete, containerStyle, }: {
     navigateToDashboardManager?: () => void;
+    onOnboardComplete?: (client: any) => void;
     containerStyle?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CreateEnvironment.d.ts.map

package/dist/esm/public_components/CreateEnvironment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAsMA"}
+{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,aAAa,EAOd,MAAM,OAAO,CAAC;AAsCf,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAoUA"}

package/dist/esm/public_components/CreateEnvironment.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
+import React, { useCallback, useMemo, useState, } from 'react';
 import ConnectDatabase from '../forms/client_onboard/ConnectDatabase';
 import StepDisplay from '../components/StepDisplay';
 import ConnectSchema from '../forms/client_onboard/ConnectSchema';
 import { useAdmin } from '../AdminProvider';
 import { getDatabaseConnectionFormat, } from '../utils/databases';
-import CreateSQLViews from '../forms/client_onboard/CreateSqlViews';
-import { getTableSchema } from '../api/ConnectionClient';
+import CreateVirtualTables from '../forms/client_onboard/CreateVirtualTables';
+import { getTableColumnsBySchema } from '../api/ConnectionClient';
+import { quillFetch } from '../utils/dataFetcher';
 const header1Style = {
     fontWeight: '600',
     fontSize: '18px',
@@ -15,42 +17,101 @@ const header1Style = {
 };
 const header2Style = {
     fontWeight: '500',
-    fontSize: '14px',
+    fontSize: '13px',
     color: '#595959',
-    marginBottom: '6px',
+    marginBottom: '4px',
 };
-export default function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
+export default function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     const parentRef = React.useRef(null);
-    const { state, dispatch } = useAdmin();
+    const { state, dispatch, setClient, getToken, quillFetchWithToken } = useAdmin();
     const domainName = state.domainName;
     const [createEnvSteps, setCreateEnvSteps] = useState({
         connectDB: {
             label: 'Connect Database',
-            completed: false,
             open: true,
         },
         connectSchema: {
-            label: 'Connect Schema',
-            completed: false,
+            label: 'Configure Organization Table',
             open: false,
         },
-        createSQLViews: {
-            label: 'Create SQL Views',
-            completed: false,
+        createVirtualTables: {
+            label: 'Create Virtual Tables',
             open: false,
         },
     });
-    const [clientId, setClientId] = useState('');
-    const [environmentDetails, setEnvironmentDetails] = useState(getDatabaseConnectionFormat('PostgreSQL'));
-    const [allSchemaInfo, setAllSchemaInfo] = useState(undefined);
-    const [initialError, setInitialError] = useState();
-    const [columnsByTable, setColumnsByTable] = useState([]);
+    const [connection, setConnection] = useState(getDatabaseConnectionFormat('PostgreSQL'));
+    const [newClient, setNewClient] = useState({});
+    const [databaseSchema, setDatabaseSchema] = useState(undefined);
+    const [sqlTables, setSqlTables] = useState([]);
+    const [onboardingCompleteIsLoading, setOnboardingCompleteIsLoading] = useState(false);
+    const environmentDetails = useMemo(() => ({
+        client: newClient,
+        connection: connection,
+        databaseSchema: databaseSchema,
+    }), [newClient, connection, databaseSchema]);
+    const [tenantInit, setTenantInit] = useState({});
+    const [fetchSchemasLoading, setFetchSchemasLoading] = useState(false);
+    const onConnectDatabase = useCallback(async (clientId) => {
+        setTenantInit({});
+        setSqlTables([]);
+        if (newClient.clientId) {
+            await quillFetch({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: newClient.clientId,
+                    withCredentials: false,
+                },
+                task: 'clear-onboarding-state',
+                metadata: {
+                    clientId: newClient.clientId,
+                },
+                getToken,
+            });
+        }
+        setNewClient({
+            clientId,
+        });
+    }, [state.queryEndpoint, getToken]);
+    const setEnvironmentDetails = useCallback(async (connectionInfo, schema, selectedSchemaNames, clientId) => {
+        setFetchSchemasLoading(true);
+        setConnection(connectionInfo);
+        setDatabaseSchema(schema);
+        setNewClient({
+            ...newClient,
+            clientId,
+            databaseType: connectionInfo.type,
+            schemaNames: selectedSchemaNames,
+            domainName,
+        });
+        // FIXME: Error handling
+        try {
+            dispatch({
+                type: 'SET_DATABASE_SCHEMA',
+                payload: { schema: [], id: clientId, loading: true },
+            });
+            await getTableColumnsBySchema(state.queryEndpoint, clientId, getToken, selectedSchemaNames)
+                .then((schema) => {
+                dispatch({
+                    type: 'SET_DATABASE_SCHEMA',
+                    payload: {
+                        schema: schema.columnsByTable,
+                        id: state.client.id,
+                        loading: false,
+                    },
+                });
+                openStep('connectSchema');
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+        setFetchSchemasLoading(false);
+    }, [newClient, connection, databaseSchema]);
     const openStep = (step) => {
         const updatedSteps = { ...createEnvSteps };
-        if (step === 'connectSchema' &&
-            updatedSteps.connectDB.completed === false) {
-            return;
-        }
         Object.keys(updatedSteps).forEach((key) => {
             if (key === step) {
                 updatedSteps[key].open = true;
@@ -61,17 +122,44 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
         });
         setCreateEnvSteps(updatedSteps);
     };
-    useEffect(() => {
-        if (navigateToDashboardManager) {
-            dispatch({
-                type: 'SET_NAVIGATE_TO_DASHBOARD_MANAGER',
-                payload: navigateToDashboardManager,
-            });
-        }
-        else {
-            console.warn('navigateToDashboardManager is undefined');
+    const finishOnboarding = async () => {
+        setOnboardingCompleteIsLoading(true);
+        const response = await quillFetchWithToken({
+            client: {
+                queryEndpoint: state.queryEndpoint,
+                clientId: newClient.clientId,
+                withCredentials: !!state.withCredentials,
+                queryHeaders: state.queryHeaders,
+            },
+            task: 'finish-onboarding',
+            metadata: {
+                client: {
+                    ...newClient,
+                    allTenantTypes: undefined,
+                },
+                domainName: domainName,
+                clientId: newClient.clientId,
+            },
+            adminMode: true,
+        });
+        if (response.status !== 'success') {
+            setOnboardingCompleteIsLoading(false);
+            throw new Error(response.message);
         }
-    }, [navigateToDashboardManager]);
+        setClient(response.data.client);
+        sessionStorage.removeItem('quill-adminState');
+        sessionStorage.setItem('quill-client', JSON.stringify(response.data.client));
+        dispatch({
+            type: 'SET_SELECTED_DASHBOARD_NAME',
+            payload: {
+                dashboard: null,
+                reportId: undefined,
+            },
+        });
+        onOnboardComplete?.(response.data.client);
+        // setOnboardingCompleteIsLoading(false);
+    };
+    const isTestMode = process.env.TEST_MODE === 'true';
     return (_jsxs("div", { ref: parentRef, style: {
             ...containerStyle,
             display: 'flex',
@@ -79,60 +167,52 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
             alignItems: 'center',
             gap: 12,
             paddingTop: 24,
-        }, children: [createEnvSteps.connectDB.open ? (_jsx(ConnectDatabase, { containerStyle: {
+            paddingBottom: 12,
+        }, children: [isTestMode && (_jsx("div", { id: "quill-client-id", "data-testid": "quill-client-id", "data-create-env-steps": JSON.stringify(createEnvSteps), "data-new-client": JSON.stringify(newClient), "data-database-schema": JSON.stringify(databaseSchema), "data-sql-tables": JSON.stringify(sqlTables), "data-tenant-init": JSON.stringify(tenantInit), "data-connection": JSON.stringify(connection), "data-state": JSON.stringify(state), "data-environment-details": JSON.stringify(environmentDetails), style: { display: 'none' }, children: newClient.clientId })), createEnvSteps.connectDB.open ? (_jsx(ConnectDatabase, { containerStyle: {
                     padding: '24px',
-                    // width: '50%',
-                    // minWidth: 800,
                     borderRadius: 6,
                     border: '1px solid #e7e7e7',
                     boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
-                }, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: (connectionInfo, initialSchemaRequest, initialSchemaRequestError, clientId) => {
-                    setEnvironmentDetails(connectionInfo);
-                    if (initialSchemaRequestError) {
-                        setInitialError(initialSchemaRequestError);
-                    }
-                    if (initialSchemaRequest) {
-                        setClientId(clientId);
-                        setAllSchemaInfo(initialSchemaRequest);
-                    }
-                    const updatedSteps = { ...createEnvSteps };
-                    updatedSteps.connectDB.completed = true;
-                    setCreateEnvSteps(updatedSteps);
-                    openStep('connectSchema');
-                }, envClientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
+                }, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: setEnvironmentDetails, fetchSchemasLoading: fetchSchemasLoading, onConnectDatabase: onConnectDatabase })) : (_jsx(StepDisplay, { label: "Connect Database", completed: !!connection.connectionString && !!newClient?.schemaNames?.length, header1Style: header1Style, onClick: () => {
                     openStep('connectDB');
-                    setInitialError(undefined);
-                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { parentRef: parentRef, containerStyle: {
+                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { containerStyle: {
                     padding: '24px',
                     // width: '50%',
+                    minWidth: 650,
                     borderRadius: 6,
-                    maxWidth: 900,
+                    maxWidth: 1200,
                     border: '1px solid #e7e7e7',
                     boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
-                }, header1Style: header1Style, header2Style: header2Style, propogateSchemaDetails: async (schemaDetails) => {
-                    const updatedSteps = { ...createEnvSteps };
-                    updatedSteps.connectSchema.completed = true;
-                    const tableSchemas = await getTableSchema(clientId, schemaDetails?.tables, schemaDetails?.selectedFields?.schema);
-                    setColumnsByTable(tableSchemas);
-                    setCreateEnvSteps(updatedSteps);
-                    setAllSchemaInfo(schemaDetails);
-                    openStep('createSQLViews');
-                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId, state: state })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
-                    openStep('connectSchema');
-                    setInitialError(undefined);
-                } })), createEnvSteps.createSQLViews.open ? (_jsx(CreateSQLViews, { containerStyle: {
-                    // padding: '20px',
-                    // width: '90%',
+                }, header1Style: header1Style, header2Style: header2Style, tenantInit: tenantInit, onTenantCreation: async (tenantInit) => {
+                    setTenantInit(tenantInit);
+                    setNewClient({
+                        ...newClient,
+                        ownerTenantFields: [tenantInit.ownerTenant.tenantField],
+                        allTenantTypes: [tenantInit.ownerTenant],
+                    });
+                    openStep('createVirtualTables');
+                }, returnToConnectDatabase: () => {
+                    setNewClient({
+                        ...newClient,
+                        schemaNames: [],
+                    });
+                    setTenantInit({});
+                    setSqlTables([]);
+                    openStep('connectDB');
+                }, databaseSchema: databaseSchema, connection: connection, clientId: newClient.clientId, selectedSchemas: newClient.schemaNames, state: state, label: 'Filter Data By Tenant' })) : (_jsx(StepDisplay, { label: "Filter Data By Tenant", completed: !!tenantInit?.ownerTenant, header1Style: header1Style, onClick: () => {
+                    if (!!connection.connectionString &&
+                        !!newClient?.schemaNames?.length) {
+                        openStep('connectSchema');
+                    }
+                } })), createEnvSteps.createVirtualTables.open ? (_jsx(CreateVirtualTables, { containerStyle: {
                     borderRadius: 6,
                     border: '1px solid #e7e7e7',
                     boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.07)',
                     height: 'calc(100vh - 59px)',
                     width: 'calc(100vw - 200px)',
-                }, header1Style: header1Style, header2Style: header2Style, columnsByTable: columnsByTable, environmentDetails: environmentDetails, allSchemaInfo: allSchemaInfo, completeOnboarding: (client) => {
-                    dispatch({ type: 'SET_CLIENT', payload: client });
-                    dispatch({ type: 'UPDATE_CLIENTS', payload: client });
-                    if (navigateToDashboardManager) {
-                        navigateToDashboardManager();
+                }, header1Style: header1Style, header2Style: header2Style, databaseSchema: databaseSchema, environmentDetails: connection, completeOnboarding: finishOnboarding, state: state, client: newClient, tenantInit: tenantInit, isLoading: onboardingCompleteIsLoading, sqlTables: sqlTables, setSqlTables: setSqlTables })) : (_jsx(StepDisplay, { label: "Create Virtual Tables", completed: false, header1Style: header1Style, onClick: () => {
+                    if (tenantInit?.ownerTenant) {
+                        openStep('createVirtualTables');
                     }
-                }, domainName: domainName, clientId: clientId, state: state })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
+                } }))] }));
 }

package/dist/esm/public_components/DashboardManager.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-export default function DashboardManager({ navigateToDashboardBuilder, containerStyle, }: {
-    navigateToDashboardBuilder?: () => void;
+export default function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }: {
+    navigateToVirtualTableManager?: () => void;
     containerStyle?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DashboardManager.d.ts.map

package/dist/esm/public_components/DashboardManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AA0BnE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAofA"}
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AAuChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA6yBA"}