@quillsql/admin 1.6.0 → 1.6.1

package/dist/cjs/forms/sql_views/CreateEditSqlView.js

@@ -12,7 +12,11 @@ const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"
 const UiComponents_1 = require("../../components/UiComponents");
 const CreateSqlViews_1 = require("../client_onboard/CreateSqlViews");
 const DynamicBanner_1 = __importDefault(require("../../components/DynamicBanner"));
-function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent = () => (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}), Button = UiComponents_1.MemoizedButton, TextInput = UiComponents_1.MemoizedTextInput, Header = UiComponents_1.MemoizedHeader, allTableData, schemaIsLoading, }) {
+const SQLViewManager_1 = require("../../public_components/SQLViewManager");
+const columnProcessing_1 = require("../../utils/columnProcessing");
+const astProcessing_1 = require("../../utils/astProcessing");
+const constants_1 = require("../../utils/constants");
+function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, setProvider, provider, SecondaryButtonComponent, LoadingComponent = () => (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}), Button = UiComponents_1.MemoizedButton, TextInput = UiComponents_1.MemoizedTextInput, Header = UiComponents_1.MemoizedHeader, allTableData, schemaIsLoading, }) {
     const [name, setName] = (0, react_2.useState)(initialSqlView?.name || '');
     const [editViewQuery, setEditViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
     const [ranViewQuery, setRanViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
@@ -24,6 +28,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
     const [overrideFKCheck, setOverrideFKCheck] = (0, react_2.useState)(false);
     const [isLoading, setIsLoading] = (0, react_2.useState)(false);
     const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
+    const [editorMounted, setEditorMounted] = (0, react_2.useState)(false);
     const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(allTableData);
     const [errorInfo, setErrorInfo] = (0, react_2.useState)({ show: false, message: '' });
     const [tableData, setTableData] = (0, react_2.useState)(undefined);
@@ -51,15 +56,17 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
     };
     const handleClickSchemaItem = async (event) => {
         const name = event.target.textContent;
-        if (editViewQuery && editViewQuery.length > 0) {
-            await navigator.clipboard.writeText(name || '');
+        if (!name) {
+            return;
         }
-        else {
-            setEditViewQuery(`SELECT * FROM ${name}`);
+        const newQuery = `SELECT * FROM ${(0, columnProcessing_1.processColumnReference)(name, state.client.databaseType)};`;
+        if (!editViewQuery || editViewQuery.length === 0) {
+            setEditViewQuery(newQuery);
         }
+        await navigator.clipboard.writeText(newQuery);
     };
-    const handleRunQuery = async () => {
-        const query = editViewQuery;
+    const handleRunQuery = async (overrideQuery) => {
+        const query = overrideQuery ? overrideQuery : editViewQuery;
         // If this query has a limit at the end alert the user
         if (/limit\s+\d+\s*;?\s*$/i.test(query)) {
             setErrorInfo({
@@ -74,7 +81,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
         setIsLoading(true);
         setRunQueryButtonLoading(true);
         setOverrideFKCheck(false);
-        if (editViewQuery.length === 0) {
+        if (query.length === 0) {
             setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
             setRunQueryButtonLoading(false);
             return;
@@ -93,13 +100,39 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
         // stringify all rows that are either jsonb or json
         resp.rows = resp.rows.map((row) => {
             for (const key in row) {
-                if (typeof row[key] === 'object') {
+                if (row[key] !== null && typeof row[key] === 'object') {
                     row[key] = JSON.stringify(row[key]);
                 }
             }
             return row;
         });
-        setTableData(resp);
+        const duplicateColumns = (0, SQLViewManager_1.getDuplicateColumns)(resp.fields);
+        if (duplicateColumns.length > 0) {
+            let parsedAST = resp.ast;
+            if (Array.isArray(resp.ast)) {
+                parsedAST = [0];
+            }
+            const tableNames = parsedAST.from.map((table) => {
+                const db = table.db ? `${table.db}.` : '';
+                return `${db}${table.table}`;
+            });
+            const newAst = (0, astProcessing_1.processJoinASTWithDuplicateColumns)(duplicateColumns, tableNames, allTableData, parsedAST);
+            const response = await fetch(`${constants_1.QUILL_SERVER}/sqlify`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    ast: { ...newAst },
+                    publicKey: state.client._id,
+                }),
+            });
+            const jsonResponse = await response.json();
+            setEditViewQuery(jsonResponse.query);
+            await handleRunQuery(jsonResponse.query);
+            return;
+        }
+        setTableData({ fields: resp.fields, rows: resp.rows });
         setViewAddable(true);
         setRanViewQuery(query);
         setIsLoading(false);
@@ -107,7 +140,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             ...containerStyle,
             gap: 6,
-            height: 'calc(100vh - 188px)',
+            height: 'calc(100vh - 130px)',
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(DynamicBanner_1.default, { header: initialSqlView
                         ? `Edit "${initialSqlView.name}" view`
                         : 'Create SQL View', message: initialSqlView
@@ -143,35 +176,53 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
                                 gap: 20,
                                 flexDirection: 'column',
                                 width: 'calc(100% - 250px)',
-                                height: '100%',
+                                maxHeight: '100%',
                                 overflowX: 'hidden',
                                 paddingRight: '24px',
                             }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'flex-start',
-                                        justifyContent: 'space-between',
+                                        overflow: 'auto',
                                         gap: 20,
-                                        width: '100%',
-                                    }, children: [(0, jsx_runtime_1.jsx)(TextInput, { onChange: (e) => {
-                                                setAIPrompt(e.target.value);
-                                            }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '100%' }), (0, jsx_runtime_1.jsx)(Button, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: handleRunSqlPrompt })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: editViewQuery, setValue: (e) => {
-                                        setEditViewQuery(e);
-                                    } }), (0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: 'Run query', isLoading: runQueryButtonLoading, onClick: handleRunQuery }) }), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontSize: 15,
-                                        fontWeight: '400',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            padding: 30,
-                                            background: 'rgba(0,0,0,0.02)',
-                                            display: 'inline-block',
-                                            flex: 0,
-                                            borderRadius: 6,
-                                        }, children: errorInfo.message }) })) : null, isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        height: 'calc(100vh - 589px)',
-                                        width: '100%',
                                         display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                    }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
+                                        flexDirection: 'column',
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'flex-start',
+                                                justifyContent: 'space-between',
+                                                gap: 20,
+                                                width: '100%',
+                                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { onChange: (e) => {
+                                                        setAIPrompt(e.target.value);
+                                                    }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '100%' }), (0, jsx_runtime_1.jsx)(Button, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: handleRunSqlPrompt })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: editViewQuery, setValue: (e) => {
+                                                setEditViewQuery(e);
+                                            }, setEditorMounted: (didMount) => {
+                                                setEditorMounted(didMount);
+                                            }, setPreviousProvier: (provider) => {
+                                                setProvider(provider);
+                                            }, previousProvider: provider, schema: displayedTableData, databaseType: state.client.databaseType }), editorMounted && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: 'Run query', onClick: () => {
+                                                    handleRunQuery();
+                                                } }) })), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                fontSize: 15,
+                                                fontWeight: '400',
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    padding: 30,
+                                                    background: 'rgba(0,0,0,0.02)',
+                                                    display: 'inline-block',
+                                                    flex: 0,
+                                                    borderRadius: 6,
+                                                }, children: errorInfo.message }) })) : null, isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                height: 'calc(100vh - 589px)',
+                                                width: '100%',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px', minHeight: 250 } }))] }), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => {
+                                            const duplicateColumns2 = (0, SQLViewManager_1.getDuplicateColumns)(tableData?.fields);
+                                            if (duplicateColumns2.length > 0) {
+                                                alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns2.join('\n')}`);
+                                                return;
+                                            }
+                                            addEditSqlView(false);
+                                        } }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
 }
 exports.default = CreateEditSqlView;

package/dist/cjs/modals/EditFiltersModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAeA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA8mBA"}
+{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA2nBA"}

package/dist/cjs/modals/EditFiltersModal.js

@@ -14,6 +14,7 @@ const InputLabel_1 = __importDefault(require("../components/InputLabel"));
 const CardSection_1 = __importDefault(require("../components/CardSection"));
 const TogglePrimitive_1 = __importDefault(require("../primitives/TogglePrimitive"));
 const SegmentedControl_1 = require("../components/SegmentedControl");
+const columnProcessing_1 = require("../utils/columnProcessing");
 function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
@@ -108,6 +109,12 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                         filter: `${newDateFilter.label} (Date filter)`,
                     });
                 }
+                if (chart.chartType === 'pie' && isDateComparison) {
+                    filterProblems.push({
+                        chart: chart.name,
+                        filter: `${newDateFilter.label} (Date comparison)`,
+                    });
+                }
             });
         }
         updatedFilters.forEach((filter) => {
@@ -124,7 +131,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
         }
         const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
         const body = {
-            newDashboardName: selectedDashboardName,
+            newDashboardName: selectedDashboardName.trim(),
             filters: updatedFilters,
             dateFilter: newDateFilter
                 ? {
@@ -133,7 +140,9 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                     primaryRange: initialRange,
                 }
                 : null,
-            name: selectedDashboard.name,
+            name: selectedDashboard.name
+                ? selectedDashboard.name.trim()
+                : selectedDashboardName.trim(),
             databaseType: state.client.databaseType,
         };
         const headers = {
@@ -173,6 +182,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                 body: JSON.stringify({
                     clientId: client._id,
                     databaseType: state.client.databaseType,
+                    dashboardName: selectedDashboard.name,
                 }),
             });
             setIsOpen(false);
@@ -297,7 +307,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                                                         ? state.tables
                                                             .find((table) => table.name === filter.table)
                                                             ?.columns.filter((column) => {
-                                                            return column.fieldType === 'varchar';
+                                                            return ((0, columnProcessing_1.convertFieldTypeToJSType)(column.fieldType) === 'string');
                                                         })
                                                             .map((column) => {
                                                             return {

package/dist/cjs/modals/NewDashboardModal.js

@@ -104,14 +104,14 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
         }
         const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
         const body = {
-            newDashboardName: selectedDashboardName,
+            newDashboardName: selectedDashboardName.trim(),
             filters: updatedFilters,
             dateFilter: showDateFilter && {
                 ...newDateFilter,
                 comparison: isDateComparison,
                 primaryRange: initialRange,
             },
-            name: selectedDashboardName,
+            name: selectedDashboardName.trim(),
         };
         const headers = {
             'Content-Type': 'application/json',

package/dist/cjs/modals/PromoteDashModal.js

@@ -47,7 +47,7 @@ const createStyles = (theme) => ({
         marginTop: '0px',
         marginBottom: '4px',
         fontWeight: theme.labelFontWeight,
-        color: theme.secondaryTextColor,
+        color: theme.primaryTextColor,
     },
     group: {
         display: 'flex',
@@ -107,7 +107,7 @@ function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client,
                             }), onChange: setModalSelectedDashboard, value: modalSelectedDashboard, theme: theme }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.group, children: (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { label: "To", options: clients
                                         .filter((c) => c.name !== client.name)
                                         .map((client) => {
-                                        return { label: client.name, value: client.name };
+                                        return { label: client.name, value: client };
                                     }), onChange: setSelectedToClient, value: selectedToClient, theme: theme }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         justifyContent: 'center',

package/dist/cjs/modals/PromoteViewModal.d.ts

@@ -7,7 +7,8 @@ interface PromoteViewModalProps {
     client: any;
     views: any[];
     clients: any[];
+    parentRef: any;
 }
-export default function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, }: PromoteViewModalProps): import("react/jsx-runtime").JSX.Element;
+export default function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, parentRef, }: PromoteViewModalProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PromoteViewModal.d.ts.map

package/dist/cjs/modals/PromoteViewModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":";AAKA,UAAU,qBAAqB;IAC7B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AA+DD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CAsGvB"}
+{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":";AAOA,UAAU,qBAAqB;IAC7B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,GAAG,CAAC;CAChB;AAgED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,2CAuGvB"}

package/dist/cjs/modals/PromoteViewModal.js

@@ -5,69 +5,72 @@ const Admin_1 = require("../Admin");
 const components_1 = require("../components");
 const react_1 = require("react");
 const constants_1 = require("../utils/constants");
+const QuillSelect_1 = require("../components/QuillSelect");
 const createStyles = (theme) => ({
     modalContent: {
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
     },
     modalHeader: {
-        fontWeight: "600",
+        fontWeight: '600',
         fontSize: 20,
         paddingBottom: 4,
         color: theme.primaryTextColor,
     },
     container: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        gap: "5px",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: '5px',
         marginTop: 20,
     },
     multiContainer: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: "20px",
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: '20px',
         marginTop: 20,
     },
     header: {
         fontSize: theme.fontSize,
-        paddingTop: "0px",
-        marginTop: "0px",
-        marginBottom: "0px",
+        paddingTop: '0px',
+        marginTop: '0px',
+        marginBottom: '0px',
         fontWeight: theme.labelFontWeight,
         color: theme.primaryTextColor,
     },
     text: {
         fontSize: theme.fontSize,
-        paddingTop: "0px",
-        marginTop: "0px",
-        marginBottom: "4px",
+        paddingTop: '0px',
+        marginTop: '0px',
+        marginBottom: '4px',
         fontWeight: theme.labelFontWeight,
         color: theme.secondaryTextColor,
     },
     group: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "start",
-        gap: "5px",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gap: '5px',
     },
     button: {
         flexGrow: 1,
         fontSize: theme.fontSize,
-        fontWeight: "600",
-        padding: "10px 20px",
+        fontWeight: '600',
+        padding: '10px 20px',
         marginTop: 20,
         backgroundColor: theme.primaryButtonColor,
-        borderRadius: "5px",
+        borderRadius: '5px',
         color: theme.primaryButtonTextColor,
+        width: '40px',
     },
 });
-function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, }) {
+function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, parentRef, }) {
     const [modalSelectedView, setModalSelectedView] = (0, react_1.useState)(views[0]);
     const [selectedToClient, setSelectedToClient] = (0, react_1.useState)(clients[0]);
+    const modalRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setModalSelectedView(views[0]);
         setSelectedToClient(clients[0]);
@@ -76,10 +79,10 @@ function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client,
     const handlePromote = async () => {
         try {
             const response = await fetch(`${constants_1.QUILL_SERVER}/promote_view/`, {
-                method: "POST",
+                method: 'POST',
                 headers: {
-                    "Content-Type": "application/json",
-                    Authorization: "Bearer ",
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ',
                 },
                 body: JSON.stringify({
                     viewName: modalSelectedView.name,
@@ -88,18 +91,25 @@ function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client,
                 }),
             });
             if (!response.ok) {
-                throw new Error("API request failed");
+                throw new Error('API request failed');
             }
             const data = await response.json();
         }
         catch (error) {
-            console.error("Promotion failed:", error);
+            console.error('Promotion failed:', error);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: styles.modalContent, children: (0, jsx_runtime_1.jsx)("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "SQL View:" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: views, setSelected: setModalSelectedView, selected: modalSelectedView, theme: Admin_1.theme }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From:" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: Admin_1.theme, disabled: true }) })] }), (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "To:" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: clients.filter((c) => c.name !== client.name), setSelected: setSelectedToClient, selected: selectedToClient, theme: Admin_1.theme }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Promote Changes', width: 500, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '20px',
+                boxSizing: 'border-box',
+                maxHeight: 600,
+            }, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { options: views.map((v) => ({ label: v.name, value: v })), onChange: setModalSelectedView, value: modalSelectedView, theme: Admin_1.theme, label: "SQL View:" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From:" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: Admin_1.theme, disabled: true }) })] }), (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { options: clients.map((c) => ({ label: c.name, value: c })), onChange: setSelectedToClient, value: selectedToClient, theme: Admin_1.theme, label: "To:" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'flex-start',
+                        alignItems: 'center',
+                        width: 200,
                     }, children: (0, jsx_runtime_1.jsx)("button", { style: styles.button, onClick: () => {
                             handlePromote();
                             setIsOpen(false);

package/dist/cjs/primitives/TextInputPrimitive.d.ts

@@ -7,6 +7,7 @@ interface TextInputPrimitiveProps {
     theme?: QuillTheme;
     disabled?: boolean;
     width?: string;
+    password?: boolean;
 }
 declare const TextInputPrimitive: React.FC<TextInputPrimitiveProps>;
 export default TextInputPrimitive;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/cjs/primitives/TextInputPrimitive.js

@@ -1,26 +1,41 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const Admin_1 = require("../Admin");
-const TextInputPrimitive = ({ onChange, value, placeholder, theme = Admin_1.theme, disabled = false, width = '250px', }) => {
-    return ((0, jsx_runtime_1.jsx)("input", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingLeft: '12px',
-            paddingRight: '12px',
-            fontWeight: 'medium',
-            height: 38,
-            minWidth: width,
-            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-            width: '100%',
-            backgroundColor: theme?.backgroundColor || 'white',
-            color: theme?.primaryTextColor,
-            borderWidth: '1px',
-            borderColor: theme?.borderColor || '#E7E7E7',
-            borderStyle: 'solid',
-            borderRadius: '6px',
-            fontSize: 14,
-        }, disabled: disabled, onChange: onChange, value: value, placeholder: placeholder }));
+const TextInputPrimitive = ({ onChange, value, placeholder, theme = Admin_1.theme, disabled = false, width = '250px', password = false, }) => {
+    const [showPassword, setShowPassword] = react_1.default.useState(!password);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("input", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingLeft: '12px',
+                    paddingRight: '12px',
+                    fontWeight: 'medium',
+                    height: 38,
+                    minWidth: width,
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    width: '100%',
+                    backgroundColor: theme?.backgroundColor || 'white',
+                    color: theme?.primaryTextColor,
+                    borderWidth: '1px',
+                    borderColor: theme?.borderColor || '#E7E7E7',
+                    borderStyle: 'solid',
+                    borderRadius: '6px',
+                    fontSize: 14,
+                }, type: showPassword ? 'text' : 'password', disabled: disabled, onChange: onChange, value: value, placeholder: placeholder }), password ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    right: '8px',
+                    bottom: '6px',
+                    cursor: 'pointer',
+                    backgroundColor: 'white',
+                    padding: '4px',
+                    boxSizing: 'content-box',
+                }, onClick: () => {
+                    setShowPassword(!showPassword);
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }) })) : null] }));
 };
 exports.default = TextInputPrimitive;

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({ navigateToDashboardManager, 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":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,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,2CAyMA"}

package/dist/cjs/public_components/CreateEnvironment.js

@@ -47,7 +47,7 @@ const header2Style = {
     color: '#595959',
     marginBottom: '6px',
 };
-function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
+function CreateEnvironment({ navigateToDashboardManager, onOnboardComplete, containerStyle, }) {
     const parentRef = react_1.default.useRef(null);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const domainName = state.domainName;
@@ -162,6 +162,9 @@ function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
                     if (navigateToDashboardManager) {
                         navigateToDashboardManager();
                     }
+                    if (onOnboardComplete) {
+                        onOnboardComplete(client);
+                    }
                 }, 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/DashboardBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAgcA"}
+{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAwUA"}