@quillsql/admin 1.6.0 → 1.6.2

package/dist/cjs/primitives/TogglePrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe;WAAiC,GAAG;aAAW,GAAG;6CAiEtE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,eAAe,yCAKlB;IACD,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAoEA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/primitives/TogglePrimitive.js

@@ -1,24 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("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',
@@ -35,7 +38,7 @@ const TogglePrimitive = ({ value, onClick }) => {
             color: '#FFF',
         },
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: toggleStyle.container, onClick: onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle between dark and light mode", children: [(0, jsx_runtime_1.jsx)("div", { style: toggleStyle.circle }), value ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: toggleStyle.container, onClick: disabled ? () => { } : onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle", children: [(0, jsx_runtime_1.jsx)("div", { style: toggleStyle.circle }), value ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     ...toggleStyle.icon,
                     left: '35px',
                     color: '#FFC107',

package/dist/cjs/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/cjs/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/cjs/primitives/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderPrimitive = exports.SelectPrimitive = exports.ModalPrimitive = exports.SecondaryButtonPrimitive = exports.ButtonPrimitive = exports.TextInputPrimitive = void 0;
+exports.CheckboxPrimitive = exports.HeaderPrimitive = exports.ModalPrimitive = exports.SecondaryButtonPrimitive = exports.ButtonPrimitive = exports.TextInputPrimitive = void 0;
 var TextInputPrimitive_1 = require("./TextInputPrimitive");
 Object.defineProperty(exports, "TextInputPrimitive", { enumerable: true, get: function () { return __importDefault(TextInputPrimitive_1).default; } });
 var ButtonPrimitive_1 = require("./ButtonPrimitive");
@@ -12,7 +12,7 @@ var SecondaryButtonPrimitive_1 = require("./SecondaryButtonPrimitive");
 Object.defineProperty(exports, "SecondaryButtonPrimitive", { enumerable: true, get: function () { return __importDefault(SecondaryButtonPrimitive_1).default; } });
 var ModalPrimitive_1 = require("./ModalPrimitive");
 Object.defineProperty(exports, "ModalPrimitive", { enumerable: true, get: function () { return __importDefault(ModalPrimitive_1).default; } });
-var SelectPrimitive_1 = require("./SelectPrimitive");
-Object.defineProperty(exports, "SelectPrimitive", { enumerable: true, get: function () { return __importDefault(SelectPrimitive_1).default; } });
 var HeaderPrimitive_1 = require("./HeaderPrimitive");
 Object.defineProperty(exports, "HeaderPrimitive", { enumerable: true, get: function () { return __importDefault(HeaderPrimitive_1).default; } });
+var CheckboxPrimitive_1 = require("./CheckboxPrimitive");
+Object.defineProperty(exports, "CheckboxPrimitive", { enumerable: true, get: function () { return __importDefault(CheckboxPrimitive_1).default; } });

package/dist/cjs/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/cjs/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/cjs/public_components/ChartQueryBuilder.js

@@ -0,0 +1,131 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ChartQueryBuilder;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+const components_1 = require("../components");
+const react_2 = require("@quillsql/react");
+const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
+const QuillTab_1 = __importDefault(require("../components/QuillTab"));
+const XMarkIcon_1 = __importDefault(require("../icons/XMarkIcon"));
+const PlaceholderPrimitive_1 = __importDefault(require("../primitives/PlaceholderPrimitive"));
+const useDashboardManager_1 = require("../hooks/useDashboardManager");
+const tenants_1 = require("../utils/tenants");
+const primitives_1 = require("../primitives");
+const constants_1 = require("../utils/constants");
+function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }) {
+    const parentRef = (0, react_1.useRef)(null);
+    const { state, dispatch, clientLoading, setClient } = (0, AdminProvider_1.useAdmin)();
+    const [query, setQuery] = (0, react_1.useState)(state.activeQuery);
+    const [toggleMode, setToggleMode] = (0, react_1.useState)(activeComponent);
+    const { setSelectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
+    const { reload } = (0, react_2.useDashboard)(constants_1.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(constants_1.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]);
+    (0, react_1.useEffect)(() => {
+        setQuery(state.activeQuery);
+    }, [state.activeQuery]);
+    (0, react_1.useEffect)(() => {
+        setToggleMode(activeComponent);
+    }, [activeComponent]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: '100%',
+            ...containerStyle,
+        }, ref: parentRef, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: 12,
+                                    alignItems: 'flex-end',
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(components_1.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 &&
+                                        !(0, tenants_1.onlySingleDatabaseTenant)(state.client) && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { isLoading: clientLoading })), (0, jsx_runtime_1.jsx)(QuillTab_1.default, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, width: "250px" })] }), onExit && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(XMarkIcon_1.default, { style: { width: '20px', height: '20px' }, "aria-hidden": "true" }) }))] }) }), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), clientLoading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        flexGrow: 1,
+                        gap: 32,
+                        padding: 32,
+                    }, children: [(0, jsx_runtime_1.jsx)(PlaceholderPrimitive_1.default, { containerStyle: { width: '12%' } }), (0, jsx_runtime_1.jsx)(PlaceholderPrimitive_1.default, { containerStyle: { maxHeight: 300 } })] })) : toggleMode === 'Report Builder' ? ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: onClick, label: 'Add to dashboard', isLoading: isLoading, disabled: disabled }));
+                        }
+                        return ((0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: onClick, label: label, isLoading: isLoading, disabled: disabled }));
+                    }, destinationDashboard: destinationDashboard, chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
+                        ? false
+                        : true })) : ((0, jsx_runtime_1.jsx)(react_2.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/cjs/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/cjs/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/cjs/public_components/CreateEnvironment.js

@@ -15,26 +15,39 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CreateEnvironment;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
 const react_1 = __importStar(require("react"));
 const ConnectDatabase_1 = __importDefault(require("../forms/client_onboard/ConnectDatabase"));
 const StepDisplay_1 = __importDefault(require("../components/StepDisplay"));
 const ConnectSchema_1 = __importDefault(require("../forms/client_onboard/ConnectSchema"));
 const AdminProvider_1 = require("../AdminProvider");
 const databases_1 = require("../utils/databases");
-const CreateSqlViews_1 = __importDefault(require("../forms/client_onboard/CreateSqlViews"));
+const CreateVirtualTables_1 = __importDefault(require("../forms/client_onboard/CreateVirtualTables"));
 const ConnectionClient_1 = require("../api/ConnectionClient");
+const dataFetcher_1 = require("../utils/dataFetcher");
 const header1Style = {
     fontWeight: '600',
     fontSize: '18px',
@@ -43,42 +56,101 @@ const header1Style = {
 };
 const header2Style = {
     fontWeight: '500',
-    fontSize: '14px',
+    fontSize: '13px',
     color: '#595959',
-    marginBottom: '6px',
+    marginBottom: '4px',
 };
-function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
+function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     const parentRef = react_1.default.useRef(null);
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch, setClient, getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
     const domainName = state.domainName;
     const [createEnvSteps, setCreateEnvSteps] = (0, react_1.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] = (0, react_1.useState)('');
-    const [environmentDetails, setEnvironmentDetails] = (0, react_1.useState)((0, databases_1.getDatabaseConnectionFormat)('PostgreSQL'));
-    const [allSchemaInfo, setAllSchemaInfo] = (0, react_1.useState)(undefined);
-    const [initialError, setInitialError] = (0, react_1.useState)();
-    const [columnsByTable, setColumnsByTable] = (0, react_1.useState)([]);
+    const [connection, setConnection] = (0, react_1.useState)((0, databases_1.getDatabaseConnectionFormat)('PostgreSQL'));
+    const [newClient, setNewClient] = (0, react_1.useState)({});
+    const [databaseSchema, setDatabaseSchema] = (0, react_1.useState)(undefined);
+    const [sqlTables, setSqlTables] = (0, react_1.useState)([]);
+    const [onboardingCompleteIsLoading, setOnboardingCompleteIsLoading] = (0, react_1.useState)(false);
+    const environmentDetails = (0, react_1.useMemo)(() => ({
+        client: newClient,
+        connection: connection,
+        databaseSchema: databaseSchema,
+    }), [newClient, connection, databaseSchema]);
+    const [tenantInit, setTenantInit] = (0, react_1.useState)({});
+    const [fetchSchemasLoading, setFetchSchemasLoading] = (0, react_1.useState)(false);
+    const onConnectDatabase = (0, react_1.useCallback)(async (clientId) => {
+        setTenantInit({});
+        setSqlTables([]);
+        if (newClient.clientId) {
+            await (0, dataFetcher_1.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 = (0, react_1.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 (0, ConnectionClient_1.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;
@@ -89,17 +161,44 @@ function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
         });
         setCreateEnvSteps(updatedSteps);
     };
-    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
             ...containerStyle,
             display: 'flex',
@@ -107,61 +206,52 @@ function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
             alignItems: 'center',
             gap: 12,
             paddingTop: 24,
-        }, children: [createEnvSteps.connectDB.open ? ((0, jsx_runtime_1.jsx)(ConnectDatabase_1.default, { containerStyle: {
+            paddingBottom: 12,
+        }, children: [isTestMode && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ConnectDatabase_1.default, { 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 })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
+                }, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: setEnvironmentDetails, fetchSchemasLoading: fetchSchemasLoading, onConnectDatabase: onConnectDatabase })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Connect Database", completed: !!connection.connectionString && !!newClient?.schemaNames?.length, header1Style: header1Style, onClick: () => {
                     openStep('connectDB');
-                    setInitialError(undefined);
-                } })), createEnvSteps.connectSchema.open ? ((0, jsx_runtime_1.jsx)(ConnectSchema_1.default, { parentRef: parentRef, containerStyle: {
+                } })), createEnvSteps.connectSchema.open ? ((0, jsx_runtime_1.jsx)(ConnectSchema_1.default, { 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 (0, ConnectionClient_1.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 })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
-                    openStep('connectSchema');
-                    setInitialError(undefined);
-                } })), createEnvSteps.createSQLViews.open ? ((0, jsx_runtime_1.jsx)(CreateSqlViews_1.default, { 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' })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Filter Data By Tenant", completed: !!tenantInit?.ownerTenant, header1Style: header1Style, onClick: () => {
+                    if (!!connection.connectionString &&
+                        !!newClient?.schemaNames?.length) {
+                        openStep('connectSchema');
+                    }
+                } })), createEnvSteps.createVirtualTables.open ? ((0, jsx_runtime_1.jsx)(CreateVirtualTables_1.default, { 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 })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Create Virtual Tables", completed: false, header1Style: header1Style, onClick: () => {
+                    if (tenantInit?.ownerTenant) {
+                        openStep('createVirtualTables');
                     }
-                }, domainName: domainName, clientId: clientId, state: state })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
+                } }))] }));
 }
-exports.default = CreateEnvironment;

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