@quillsql/admin 1.3.7 → 1.3.8

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { ButtonPrimitive, ModalPrimitive, TextInputPrimitive, } from '../../primitives';
-import { SqlTextEditor, Table } from '@quillsql/react';
-import { createSQLView, getQueryFromAI, getSqlViewData, } from '../../api/ConnectionClient';
-import { formConnectionString } from '../../utils/databases';
+import { createSQLView, getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
 import SqlViewTile from '../../components/SqlViewTile';
-export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, }) {
+import SqlTextEditor from '../../components/SqlTextEditor';
+import { Table } from '@quillsql/react';
+export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }) {
     const [selectedTable, setSelectedTable] = useState(undefined);
     const [queryInfo, setQueryInfo] = useState({
         name: '',
@@ -23,7 +23,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
     const addSqlView = async (override) => {
         const results = await createSQLView(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
             return e.name;
-        }), override);
+        }), override, clientId);
         if (results.throwModal) {
             setShowFKModal(true);
             return;
@@ -47,7 +47,6 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
             ...containerStyle,
             display: 'flex',
             flexDirection: 'column',
-            overflow: 'hidden',
         }, id: "create-sql-view", children: [_jsxs("div", { style: {
                     padding: 20,
                     paddingBottom: 12,
@@ -76,7 +75,9 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                             setAIPrompt(e.target.value);
                                         }, placeholder: 'Describe a query...', value: aiPrompt }), _jsx(ButtonPrimitive, { label: askAIButton, onClick: async () => {
                                             setAskAIButton('Loading...');
-                                            const results = await getQueryFromAI(aiPrompt, columnsByTable);
+                                            const results = await getQueryFromAiWithConnection(aiPrompt, clientId, allSchemaInfo?.selectedFields.schema
+                                                ? [allSchemaInfo?.selectedFields.schema]
+                                                : undefined);
                                             setQueryInfo({ name: queryInfo.name, query: results });
                                             setAskAIButton('Ask AI');
                                         }, style: { width: '90px' } })] }), _jsx(SqlTextEditor, { value: queryInfo.query, setValue: (e) => {
@@ -91,8 +92,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                     height: 70,
                                 }, children: [_jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
                                             setRunQueryButtonLabel('Querying...');
-                                            const connectionString = formConnectionString(environmentDetails);
-                                            const getSqlResults = await getSqlViewData(connectionString, queryInfo.query);
+                                            const getSqlResults = await getSqlViewData(clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint);
                                             if (!getSqlResults.success) {
                                                 setErrorInfo({ status: true, msg: getSqlResults.error });
                                             }
@@ -110,7 +110,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                     paddingLeft: 16,
                                     paddingRight: 16,
                                     height: 'calc(100vh - 515px)',
-                                }, children: [_jsx(Table, { rows: tableData.rows, columns: tableData.columns, 
+                                }, children: [_jsx(Table, { rows: tableData.rows, columns: tableData.fields, 
                                         // height="400px"
                                         containerStyle: {
                                             height: 'calc(100vh - 589px)',
@@ -182,7 +182,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
                                         completeOnboarding(client);
                                     }, style: { width: 276 } }) })) : null] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addSqlView, foreignKey: allSchemaInfo?.selectedFields.foreignKey, tableName: allSchemaInfo?.selectedFields.table })] }));
 }
-function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }) {
+export function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }) {
     return (_jsx(ModalPrimitive, { isOpen: isOpen, close: () => {
             setIsOpen(false);
         }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '600px' }, children: [_jsx("h1", { style: {

package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ButtonComponentProps, TableComponentProps, TextInputComponentProps, HeaderProps } from '@quillsql/react';
+import { ColumnsByTable } from '../../utils/table';
+interface CreateEditSqlViewProps {
+    containerStyle: React.CSSProperties;
+    initialSqlView?: {
+        id: string;
+        name: string;
+        query: string;
+    };
+    Button?: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    TextInput?: (props: TextInputComponentProps) => JSX.Element;
+    TableComponent?: (props: TableComponentProps) => JSX.Element;
+    LoadingComponent?: () => JSX.Element;
+    Header?: (props: HeaderProps) => JSX.Element;
+    closeEditView: () => void;
+    addEditView: (request: string, query: string, name?: string, id?: string) => void;
+    allTableData: ColumnsByTable[];
+    schemaIsLoading: boolean;
+}
+export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, TableComponent, LoadingComponent, Button, TextInput, Header, allTableData, schemaIsLoading, }: CreateEditSqlViewProps): JSX.Element;
+export {};
+//# sourceMappingURL=CreateEditSqlView.d.ts.map

package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAwBzB,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAK3D,UAAU,sBAAsB;IAC9B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,KACR,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,wBAAwB,EACxB,cAAsB,EACtB,gBAA2C,EAC3C,MAAuB,EACvB,SAA6B,EAC7B,MAAuB,EACvB,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAsStC"}

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

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, } from '@quillsql/react';
+import { useEffect, useState } from 'react';
+import { useAdmin } from '../../AdminProvider';
+import { getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
+import SqlTextEditor from '../../components/SqlTextEditor';
+import { LoadingSpinner, MemoizedButton, MemoizedHeader, MemoizedTextInput, } from '../../components/UiComponents';
+import { SchemaListComponent } from '@quillsql/react';
+import { ForeignKeyModal } from '../client_onboard/CreateSqlViews';
+import DynamicBanner from '../../components/DynamicBanner';
+export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, TableComponent = Table, LoadingComponent = () => _jsx(LoadingSpinner, {}), Button = MemoizedButton, TextInput = MemoizedTextInput, Header = MemoizedHeader, allTableData, schemaIsLoading, }) {
+    const [name, setName] = useState(initialSqlView?.name || '');
+    const [editViewQuery, setEditViewQuery] = useState(initialSqlView?.query || '');
+    const [ranViewQuery, setRanViewQuery] = useState(initialSqlView?.query || '');
+    const [askAIButton, setAskAIButton] = useState('Ask AI');
+    const [aiPrompt, setAIPrompt] = useState('');
+    const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
+    const [viewAddable, setViewAddable] = useState(false);
+    const [showFKModal, setShowFKModal] = useState(false);
+    const [overrideFKCheck, setOverrideFKCheck] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [tableSearchQuery, setTableSearchQuery] = useState('');
+    const [displayedTableData, setDisplayedTableData] = useState(allTableData);
+    const [errorInfo, setErrorInfo] = useState({ show: false, message: '' });
+    const [tableData, setTableData] = useState(undefined);
+    const { state, dispatch } = useAdmin();
+    const addEditSqlView = async (override = false) => {
+        if (!override &&
+            tableData &&
+            !tableData.fields.find((col) => col.name === state.client.customerFieldName)) {
+            setShowFKModal(true);
+            return;
+        }
+        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined);
+    };
+    useEffect(() => {
+        setDisplayedTableData(allTableData);
+    }, [allTableData]);
+    const handleRunSqlPrompt = async () => {
+        setErrorInfo({ show: false, message: '' });
+        setViewAddable(false);
+        setAskAIButton('Loading...');
+        const results = await getQueryFromAiWithConnection(aiPrompt, state.client._id, state.client.schemaNames);
+        setOverrideFKCheck(false);
+        setEditViewQuery(results);
+        setAskAIButton('Ask AI');
+    };
+    const handleRunQuery = async () => {
+        const query = editViewQuery;
+        // If this query has a limit at the end alert the user
+        if (query.toLowerCase().includes(' limit ')) {
+            setErrorInfo({
+                show: true,
+                message: 'Error: Please remove the limit on you query.',
+            });
+            return;
+        }
+        setViewAddable(false);
+        setErrorInfo({ show: false, message: '' });
+        setTableData(undefined);
+        setIsLoading(true);
+        setRunQueryButtonLabel('Querying...');
+        setOverrideFKCheck(false);
+        if (editViewQuery.length === 0) {
+            setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
+            setRunQueryButtonLabel('Run query');
+            return;
+        }
+        const resp = await getSqlViewData(state.client._id, query, state.client.databaseType, state.queryEndpoint);
+        if (!resp.success) {
+            setErrorInfo({ show: true, message: resp.error });
+            setTableData(undefined);
+            setViewAddable(false);
+            setRunQueryButtonLabel('Run query');
+            setIsLoading(false);
+            return;
+        }
+        setRunQueryButtonLabel('Run query');
+        setErrorInfo({ show: false, message: '' });
+        setTableData(resp);
+        setViewAddable(true);
+        setRanViewQuery(query);
+        setIsLoading(false);
+    };
+    return (_jsx("div", { style: {
+            ...containerStyle,
+            gap: 6,
+            height: 'calc(100vh - 188px)',
+        }, children: _jsxs("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [_jsx(DynamicBanner, { header: initialSqlView
+                        ? `Edit "${initialSqlView.name}" view`
+                        : 'Create SQL View', message: initialSqlView
+                        ? `You are currently editing the '${initialSqlView.name}' sql view.`
+                        : '', onExit: closeEditView, style: {
+                        display: 'flex',
+                        paddingTop: '0.625rem',
+                        paddingBottom: '0.625rem',
+                        paddingLeft: '24px',
+                        paddingRight: '24px',
+                        alignItems: 'center',
+                        backgroundColor: initialSqlView ? '#111827' : '#ffffff',
+                    } }), _jsxs("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        height: '100%',
+                        flexDirection: 'row',
+                        paddingTop: '20px',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 20,
+                            }, children: [_jsx("div", { style: {
+                                        paddingLeft: '20px',
+                                        paddingRight: '30px',
+                                    }, children: _jsx(TextInput, { placeholder: "Search...", onChange: (e) => {
+                                            setTableSearchQuery(e);
+                                            setDisplayedTableData(allTableData.filter((table) => table.tableName
+                                                .toLowerCase()
+                                                .includes(e.toLowerCase().trim())));
+                                        }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), _jsxs("div", { style: {
+                                display: 'flex',
+                                gap: 20,
+                                flexDirection: 'column',
+                                width: 'calc(100% - 250px)',
+                                height: '100%',
+                                overflowX: 'hidden',
+                                paddingRight: '24px',
+                            }, children: [_jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'flex-start',
+                                        justifyContent: 'space-between',
+                                        gap: 20,
+                                        width: '100%',
+                                    }, children: [_jsx(TextInput, { onChange: (e) => {
+                                                setAIPrompt(e);
+                                            }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '95%' }), _jsx(Button, { label: askAIButton, onClick: handleRunSqlPrompt, width: "100px" })] }), _jsx(SqlTextEditor, { value: editViewQuery, setValue: (e) => {
+                                        setErrorInfo({ show: false, message: '' });
+                                        setEditViewQuery(e);
+                                    } }), _jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: runQueryButtonLabel, onClick: handleRunQuery }) }), errorInfo.show ? (_jsx("div", { style: {
+                                        fontSize: 15,
+                                        fontWeight: '400',
+                                    }, children: _jsx("div", { style: {
+                                            padding: 30,
+                                            background: 'rgba(0,0,0,0.02)',
+                                            display: 'inline-block',
+                                            flex: 0,
+                                            borderRadius: 6,
+                                        }, children: errorInfo.message }) })) : null, isLoading && (_jsx("div", { style: {
+                                        height: 'calc(100vh - 589px)',
+                                        width: '100%',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    }, children: _jsx(LoadingComponent, {}) })), tableData && (_jsx(TableComponent, { rows: tableData.rows, columns: tableData.fields, height: "360px" })), viewAddable && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
+}

package/dist/esm/modals/NewDashboardModal.js

@@ -20,7 +20,7 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
     const [selectedTable, setSelectedTable] = useState(null);
     const [field, setField] = useState('');
     useEffect(() => {
-        if (state.tables.length) {
+        if (state.tables?.length) {
             setSelectedTable(state.tables[0]);
             setField(state.tables[0].columns.map((elem) => elem.name)[0]);
         }

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,2CA0LA"}
+{"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,2CAqMA"}

package/dist/esm/public_components/CreateEnvironment.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React, { useEffect, 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 { formConnectionString, getDatabaseConnectionFormat, } from '../utils/databases';
+import { getDatabaseConnectionFormat, } from '../utils/databases';
 import CreateSQLViews from '../forms/client_onboard/CreateSqlViews';
 import { getTableSchema } from '../api/ConnectionClient';
 const header1Style = {
@@ -20,6 +20,7 @@ const header2Style = {
     marginBottom: '6px',
 };
 export default function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
+    const parentRef = React.useRef(null);
     const { state, dispatch } = useAdmin();
     const domainName = state.domainName;
     const [createEnvSteps, setCreateEnvSteps] = useState({
@@ -39,6 +40,7 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
             open: false,
         },
     });
+    const [clientId, setClientId] = useState('');
     const [environmentDetails, setEnvironmentDetails] = useState(getDatabaseConnectionFormat('PostgreSQL'));
     const [allSchemaInfo, setAllSchemaInfo] = useState(undefined);
     const [initialError, setInitialError] = useState();
@@ -70,7 +72,7 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
             console.warn('navigateToDashboardManager is undefined');
         }
     }, [navigateToDashboardManager]);
-    return (_jsxs("div", { style: {
+    return (_jsxs("div", { ref: parentRef, style: {
             ...containerStyle,
             display: 'flex',
             flexDirection: 'column',
@@ -84,22 +86,23 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
                     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) => {
+                }, 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');
-                } })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
+                }, envClientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
                     openStep('connectDB');
                     setInitialError(undefined);
-                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { containerStyle: {
+                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { parentRef: parentRef, containerStyle: {
                     padding: '24px',
                     // width: '50%',
                     borderRadius: 6,
@@ -109,12 +112,12 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
                 }, header1Style: header1Style, header2Style: header2Style, propogateSchemaDetails: async (schemaDetails) => {
                     const updatedSteps = { ...createEnvSteps };
                     updatedSteps.connectSchema.completed = true;
-                    const tableSchemas = await getTableSchema(formConnectionString(environmentDetails), schemaDetails?.tables);
+                    const tableSchemas = await getTableSchema(clientId, schemaDetails?.tables, schemaDetails?.selectedFields?.schema);
                     setColumnsByTable(tableSchemas);
                     setCreateEnvSteps(updatedSteps);
                     setAllSchemaInfo(schemaDetails);
                     openStep('createSQLViews');
-                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
+                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
                     openStep('connectSchema');
                     setInitialError(undefined);
                 } })), createEnvSteps.createSQLViews.open ? (_jsx(CreateSQLViews, { containerStyle: {
@@ -131,5 +134,5 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
                     if (navigateToDashboardManager) {
                         navigateToDashboardManager();
                     }
-                }, domainName: domainName })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
+                }, domainName: domainName, clientId: clientId, state: state })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
 }

package/dist/esm/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;AAQ5E,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,2CAmSA"}
+{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAS5E,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,2CA0TA"}

package/dist/esm/public_components/DashboardBuilder.js

@@ -6,6 +6,7 @@ import { EnvSelectPopover, OrgSelect } from '../components';
 import { SQLEditor } from '@quillsql/react';
 import { QUILL_SERVER } from '../utils/constants';
 import Banner from '../components/Banner';
+import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
 export default function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
     const parentRef = useRef(null);
     const { state, dispatch } = useAdmin();
@@ -50,22 +51,30 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
     }, [state.activeQuery]);
     useEffect(() => {
         let isSubscribed = true;
-        async function getCustomers() {
+        async function getDashNames() {
             // If you need to retrieve the JSON data from the response:
-            const response2 = await fetch(`${QUILL_SERVER}/dashnames/${state.client._id}/`, {
-                method: 'GET',
+            const response = await fetch(`${state.queryEndpoint}`, {
+                method: 'POST',
                 headers: {
-                    Authorization: `Bearer `,
-                    environment: state.environment,
+                    ...state.queryHeaders,
+                    'Content-Type': 'application/json',
                 },
+                body: JSON.stringify({
+                    metadata: {
+                        clientId: state.client._id,
+                        publicKey: state.client._id,
+                        task: 'dashboards',
+                        databaseType: state.client.databaseType,
+                    },
+                }),
             });
-            const response2Data = await response2.json();
-            const dashNames = response2Data.dashboardNames.filter((elem) => elem !== null);
+            const data = await response.json();
+            const dashNames = data.data.dashboardNames.filter((elem) => elem !== null);
             setDashboardNames(dashNames);
             setSelectedDashboardName(dashNames[0]);
         }
         if (isSubscribed) {
-            getCustomers();
+            getDashNames();
         }
         return () => {
             isSubscribed = false;
@@ -166,27 +175,32 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                                             userSelect: 'none',
                                         }, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => {
                                             dispatch({ type: 'SET_ENVIRONMENT', payload: env });
-                                        }, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), _jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => {
+                                        }, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => {
                                     dispatch({ type: 'SET_ENVIRONMENT', payload: env });
                                 }, organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => {
                                     dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId });
-                                }, theme: state.theme, parentRef: parentRef })] }) }), isEditActive && (_jsx(Banner, { onExit: () => {
+                                }, theme: state.theme, parentRef: parentRef }))] }) }), isEditActive && (_jsx(Banner, { onExit: () => {
                         const msg = 'Are you sure you want to exit edit mode? Your changes will not be saved.';
                         if (!confirm(msg))
                             return;
                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                    } })), sqlEditor && (_jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
+                    } })), state.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), sqlEditor && !state.databaseTypeMismatch.show && (_jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
                         if (state.navigateToDashboardManager) {
-                            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+                            dispatch({
+                                type: 'SET_ACTIVE_COMPONENT',
+                                payload: 'Dashboards',
+                            });
                             state.navigateToDashboardManager();
                         }
                     }, containerStyle: {
-                        height: 'calc(100% - 138px)',
+                        height: 'calc(100% - 96px)',
                         width: '100%',
-                        paddingRight: 25,
-                        paddingTop: 25,
-                    } }))] }) }));
+                        // paddingRight: 25,
+                        // paddingTop: 25,
+                    }, organizationName: state.organizations.find((org) => {
+                        return (org.id && String(org.id) === String(state.organizationId));
+                    })?.name }))] }) }));
 }

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;AA+BnE,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,2CA+iBA"}
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAgCnE,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,2CAykBA"}