@quillsql/admin 1.6.0 → 1.6.1

package/dist/cjs/public_components/DashboardBuilder.js

@@ -6,34 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AdminProvider_1 = require("../AdminProvider");
-const Admin_1 = require("../Admin");
 const components_1 = require("../components");
 const react_2 = require("@quillsql/react");
-const constants_1 = require("../utils/constants");
 const Banner_1 = __importDefault(require("../components/Banner"));
 const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
 const modeToggleOptions = ['SQL Editor', 'Report Builder'];
 function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
     const parentRef = (0, react_1.useRef)(null);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
-    const [customerId, setCustomerId] = (0, react_1.useState)('');
     const [isEditActive, setIsEditActive] = (0, react_1.useState)(false);
-    const [checked, setChecked] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)('');
-    const [userTyping, setUserTyping] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
-    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
-    const [dashboardNames, setDashboardNames] = (0, react_1.useState)([]);
-    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)(state.activeQuery);
-    const [rows, setRows] = (0, react_1.useState)([]);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
     const [toggleMode, setToggleMode] = (0, react_1.useState)('SQL Editor');
+    const [selectedOrgName, setSelectedOrgName] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
         if (state.activeQuery) {
             setIsEditActive(true);
@@ -57,75 +41,14 @@ function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEdito
         setQuery(state.activeQuery);
     }, [state.activeQuery]);
     (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getDashNames() {
-            // If you need to retrieve the JSON data from the response:
-            const response = await fetch(`${state.queryEndpoint}`, {
-                method: 'POST',
-                headers: {
-                    ...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 data = await response.json();
-            const dashNames = data.data.dashboardNames.filter((elem) => elem !== null);
-            setDashboardNames(dashNames);
-            setSelectedDashboardName(dashNames[0]);
-        }
-        if (isSubscribed) {
-            getDashNames();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [state.environment]);
-    // const navigate = useNavigate();
-    const handleRunQuery = async () => {
-        const { _id } = state.client;
-        try {
-            const response = await fetch(`${constants_1.QUILL_SERVER}/dashquery?orgId=${state.organizationId || ''}&publicKey=${_id}`, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: state.environment,
-                    'Content-Type': 'application/json', // Important when sending JSON
-                },
-                body: JSON.stringify({
-                    query,
-                }),
-            });
-            const responseData = await response.json();
-            if (responseData && responseData.errorMessage) {
-                setErrorMessage('Failed to run SQL query: ' + responseData.errorMessage);
-                setRows([]);
-                setColumns([]);
-                setFields([]);
-                return;
-            }
-            setErrorMessage('');
-            setRows(responseData.rows);
-            setColumns(responseData.fields.map((elem) => (0, Admin_1.convertPostgresColumn)(elem)));
-            setFields(responseData.fields);
+        const selectedOrg = state.organizations.find((org) => {
+            const orgId = org.id ? org.id : org.ID;
+            return orgId && String(orgId) === String(state.organizationId);
+        });
+        if (selectedOrg) {
+            setSelectedOrgName(selectedOrg.name ? selectedOrg.name : selectedOrg.NAME);
         }
-        catch (e) {
-            console.log('ERROR: ', e);
-            return;
-        }
-    };
-    const handleAddToDashboard = () => {
-        setIsOpen(true);
-    };
-    const newRows = (0, react_1.useMemo)(() => {
-        return JSON.parse(JSON.stringify(rows));
-    }, [rows]);
+    }, [state.organizations, state.organizationId]);
     /* all your useState and useContext calls and your useEffect hooks */
     // MMTODO: idk if this is needed
     // const handleSetOrganization = (org) => {
@@ -231,79 +154,67 @@ function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEdito
                             return;
                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                    } })), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), (0, jsx_runtime_1.jsx)("div", { style: {
-                        // Toggle the height of the container so they both stay in the DOM
-                        // and don't refetch when switching back and forth.
-                        height: toggleMode === 'Report Builder' ? '100%' : 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.ReportBuilder, { isAdminEnabled: true, 
-                        // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
-                        onSubmitCreateReport: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
+                    } })), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), toggleMode === 'Report Builder' ? ((0, jsx_runtime_1.jsx)(react_2.ReportBuilder, { isAdminEnabled: true, 
+                    // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
+                    onSubmitCreateReport: (report) => {
+                        const dashboard = state.dashboards.find((dash) => {
+                            return dash.name === report.dashboardName;
+                        });
+                        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_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                            if (state.navigateToDashboardManager) {
-                                dispatch({
-                                    type: 'SET_ACTIVE_COMPONENT',
-                                    payload: 'Dashboards',
-                                });
-                                dispatch({
-                                    type: 'SET_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, onSubmitEditReport: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
+                            dispatch({
+                                type: 'SET_SELECTED_DASHBOARD',
+                                payload: dashboard,
                             });
-                            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_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, organizationName: state.organizations.find((org) => {
-                            return (org.id && String(org.id) === String(state.organizationId));
-                        })?.name, containerStyle: {
-                            height: '100%',
-                            width: '100%',
-                        } }) }), sqlEditor && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)("div", { style: {
-                        height: toggleMode === 'SQL Editor' ? '100%' : 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.SQLEditor, { isChartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', report: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
+                            state.navigateToDashboardManager();
+                        }
+                    }, onSubmitEditReport: (report) => {
+                        const dashboard = state.dashboards.find((dash) => {
+                            return dash.name === report.dashboardName;
+                        });
+                        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_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                            if (state.navigateToDashboardManager) {
-                                dispatch({
-                                    type: 'SET_ACTIVE_COMPONENT',
-                                    payload: 'Dashboards',
-                                });
-                                dispatch({
-                                    type: 'SET_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, containerStyle: {
-                            height: '100%',
-                            width: '100%',
-                            // paddingRight: 25,
-                            // paddingTop: 25,
-                        }, organizationName: state.organizations.find((org) => {
-                            return (org.id && String(org.id) === String(state.organizationId));
-                        })?.name }) }))] }) }));
+                            dispatch({
+                                type: 'SET_SELECTED_DASHBOARD',
+                                payload: dashboard,
+                            });
+                            state.navigateToDashboardManager();
+                        }
+                    }, organizationName: selectedOrgName, containerStyle: {
+                        height: '100%',
+                        width: '100%',
+                    } })) : ((0, jsx_runtime_1.jsx)(react_2.SQLEditor, { isChartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', report: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: (report) => {
+                        const dashboard = state.dashboards.find((dash) => {
+                            return dash.name === report.dashboardName;
+                        });
+                        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_SELECTED_DASHBOARD',
+                                payload: dashboard,
+                            });
+                            state.navigateToDashboardManager();
+                        }
+                    }, containerStyle: {
+                        height: '100%',
+                        width: '100%',
+                        // paddingRight: 25,
+                        // paddingTop: 25,
+                    }, organizationName: selectedOrgName }))] }) }));
 }
 exports.default = DashboardBuilder;

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,EAA+B,MAAM,OAAO,CAAC;AA2BnE,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+hBA"}

package/dist/cjs/public_components/DashboardManager.js

@@ -12,7 +12,6 @@ const react_2 = require("@quillsql/react");
 const Admin_1 = require("../Admin");
 const primitives_1 = require("../primitives");
 const NewDashboardModal_1 = require("../modals/NewDashboardModal");
-const constants_1 = require("../utils/constants");
 const EmptyDashboardComponent_1 = __importDefault(require("../components/EmptyDashboardComponent"));
 const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
 const UiComponents_1 = require("../components/UiComponents");
@@ -21,15 +20,14 @@ const EditFiltersModal_1 = require("../modals/EditFiltersModal");
 function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const parentRef = (0, react_1.useRef)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
-    const [dashboards, setDashboards] = (0, react_1.useState)([]);
     const [reloadFlag, setReloadFlag] = (0, react_1.useState)(false);
     const [selectedReorderDashboard, setSelectedReorderDashboard] = (0, react_1.useState)('');
     const [newDashboardModalIsOpen, setNewDashboardModalIsOpen] = (0, react_1.useState)(false);
     const [editFilterModalIsOpen, setEditFilterModalIsOpen] = (0, react_1.useState)(false);
     const { reload: reloadDashboard } = (0, react_2.useDashboard)(state.selectedDashboard?.name);
     const [isReorderDashboardModalOpen, setIsReorderDashboardModalOpen] = (0, react_1.useState)(false);
-    const [dashboardData, setDashboardData] = (0, react_1.useState)(null);
     const [isPromoteDashModalOpen, setIsPromoteDashModalOpen] = (0, react_1.useState)(false);
     // A useless flag that just turns itself off.
     (0, react_1.useEffect)(() => {
@@ -92,59 +90,6 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
             isSubscribed = false;
         };
     }, [state.environment, state.client]);
-    // MMTODO: Idk if this is needed
-    // const handleSetOrganization = (org) => {
-    //     setOrganization(null);
-    //     setTimeout(() => setOrganization(org), 50);
-    // };
-    // MMTODO: Not sure if this actually does anything
-    (0, react_1.useEffect)(() => {
-        async function getDashboardData(dashboard, setData) {
-            let responseData;
-            if (state.queryEndpoint) {
-                const response = await fetch(state.queryEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        ...state.queryHeaders,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        metadata: {
-                            orgId: state.organizationId || '*',
-                            task: 'config',
-                            name: dashboard,
-                            clientId: state.client._id,
-                            databaseType: state.client.databaseType,
-                        },
-                    }),
-                    credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-                });
-                responseData = (await response.json()).data;
-            }
-            else {
-                const url = new URL(`${constants_1.QUILL_SERVER}/dashconfig`);
-                // Setting the search parameters for the URL
-                url.search = new URLSearchParams({
-                    orgId: state.organizationId,
-                    publicKey: state.client._id,
-                    name: dashboard,
-                }).toString();
-                const response2 = await fetch(url, {
-                    method: 'GET',
-                    headers: {
-                        Authorization: 'Bearer ', // Ensure you append your token after 'Bearer ' if needed
-                        environment: state.environment,
-                    },
-                });
-                // If you need to retrieve the JSON data from the response:
-                responseData = await response2.json();
-            }
-            setData(responseData);
-        }
-        if (state.selectedDashboard && state.client) {
-            getDashboardData(state.selectedDashboard.name, setDashboardData);
-        }
-    }, [state.selectedDashboard, state.organizationId, state.client]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -182,7 +127,12 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                 flexDirection: 'row',
                                 alignItems: 'flex-end',
                                 justifyContent: 'space-between',
-                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                        gap: 16,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'flex-end',
+                                    }, children: [!!state.dashboards.length && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                                                         fontSize: '14px',
                                                         paddingTop: '0px',
                                                         marginTop: '0px',
@@ -195,6 +145,7 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                                             return { value: elem.name, label: elem.name };
                                                         })
                                                         : [], setDashboard: (dashboard) => {
+                                                        setReloadFlag(true);
                                                         const selectedDashboard = state.dashboards.find((dash) => {
                                                             return dash.name === dashboard;
                                                         });
@@ -217,14 +168,59 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                                         color: state.theme.secondaryTextColor,
                                                         fontFamily: state.theme.fontFamily,
                                                         userSelect: 'none',
-                                                    }, children: "Environment" }), (0, jsx_runtime_1.jsx)(components_1.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: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { parentRef: parentRef, environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, theme: state.theme, organizationId: state.organizationId, setOrganizationId: (id) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: id }) }))] }) }), state.databaseTypeMismatch.show ? ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    }, children: "Environment" }), (0, jsx_runtime_1.jsx)(components_1.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: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        // width: '100%',
+                                                        maxWidth: 330,
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        justifyContent: 'space-between',
+                                                        alignItems: 'center',
+                                                        padding: '6px 12px',
+                                                        borderRadius: 6,
+                                                        height: 37,
+                                                        cursor: 'pointer',
+                                                    }, onClick: () => {
+                                                        navigator.clipboard.writeText(state.client._id);
+                                                        setCopied(true);
+                                                        setTimeout(() => setCopied(false), 1500);
+                                                    }, className: "quill-active", children: [(0, jsx_runtime_1.jsx)("style", { children: `.quill-active { background: #fff; border: 1px solid #e7e7e7; } 
+        .quill-active:hover { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7 }
+        .quill-active:active { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #9DC4F8; outline: 2px solid #9DC4F8; }
+        ` }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                color: '#212121',
+                                                                marginBottom: '0px',
+                                                            }, children: (0, jsx_runtime_1.jsx)("h1", { style: {
+                                                                    fontSize: '14px',
+                                                                    fontWeight: '600',
+                                                                    color: state.theme.secondaryTextColor,
+                                                                    fontFamily: state.theme.fontFamily,
+                                                                    userSelect: 'none',
+                                                                }, children: "Copy Public Key" }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                alignItems: 'center',
+                                                                gap: '6px',
+                                                                cursor: 'pointer',
+                                                                marginLeft: '12px',
+                                                            }, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" })] }) })] }), copied && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        fontSize: 13,
+                                                        fontWeight: 600,
+                                                        color: '#565656',
+                                                        marginLeft: 16,
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                        gap: 6,
+                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { children: "\u2705" }), " ", (0, jsx_runtime_1.jsx)("div", { children: "Copied" })] }))] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { parentRef: parentRef, environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, theme: state.theme, organizationId: state.organizationId, setOrganizationId: (id) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: id }) }))] }) }), state.databaseTypeMismatch.show ? ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             width: '100%',
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'center',
                                         }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                height: 80,
-                                                width: 260,
                                                 borderRadius: 6,
                                                 marginTop: 100,
                                                 display: 'flex',
@@ -232,16 +228,17 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 gap: 20,
-                                            }, className: "hover-dash-rect", onClick: () => {
-                                                setNewDashboardModalIsOpen(true);
-                                            }, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .hover-dash-rect { background: white; border: 1px dashed #e7e7e7; } .hover-dash-rect:hover { background: white; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7; } ` }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                padding: 16,
+                                                border: '1px solid #e7e7e7',
+                                                boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                         display: 'flex',
                                                         flexDirection: 'row',
                                                         alignItems: 'center',
                                                         justifyContent: 'center',
                                                         width: 260,
                                                     }, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                                fontSize: 14,
+                                                                fontSize: 16,
                                                                 fontWeight: 500,
                                                                 color: '#565656',
                                                                 // border: '1px solid #e7e7e7',
@@ -251,10 +248,12 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                                                 paddingLeft: 12,
                                                                 borderRadius: 4,
                                                                 cursor: 'pointer',
-                                                            }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag
+                                                            }, className: "quill-hover-button", children: "No dashboards created yet." })] }), (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: 8 }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { label: 'Create dashboard', style: { fontSize: 14 }, onClick: () => {
+                                                            setNewDashboardModalIsOpen(true);
+                                                        } }) })] }) })), reloadFlag
                                         ? null
                                         : (state.dashboards.length || initialLoad) && ((0, jsx_runtime_1.jsx)(react_2.Dashboard, { name: state.selectedDashboard?.name, containerStyle: { padding: 25 }, onClickReport: (elem) => {
-                                                dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
+                                                dispatch({ type: 'SET_REPORT_ID', payload: elem.id });
                                                 dispatch({
                                                     type: 'SET_ACTIVE_COMPONENT',
                                                     payload: 'Report',
@@ -264,12 +263,12 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                     setIsReorderDashboardModalOpen(true);
                                 }, onSave: async (dashName) => {
                                     await getDashNames(dashName);
+                                    await reloadDashboard(dashName, true);
                                     setReloadFlag(true);
-                                    reloadDashboard(dashName);
                                 }, client: state.client, ModalComponent: primitives_1.ModalPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, TextInputComponent: primitives_1.TextInputPrimitive, HeaderComponent: primitives_1.HeaderPrimitive, SelectComponent: QuillSelect_1.QuillSelectComponent, dashNames: state.dashboards })), (0, jsx_runtime_1.jsx)(NewDashboardModal_1.NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
                                     setSelectedReorderDashboard(dashboardName);
                                     setIsReorderDashboardModalOpen(true);
-                                }, onSave: (dashboard) => {
+                                }, onSave: async (dashboard) => {
                                     dispatch({
                                         type: 'SET_SELECTED_DASHBOARD',
                                         payload: dashboard,
@@ -278,19 +277,19 @@ function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
                                         type: 'SET_DASHBOARDS',
                                         payload: [...state.dashboards, { ...dashboard }],
                                     });
+                                    await reloadDashboard(state.selectedDashboard?.name, true);
                                     setReloadFlag(true);
-                                    reloadDashboard(state.selectedDashboard?.name);
-                                }, client: state.client, ModalComponent: primitives_1.ModalPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, TextInputComponent: primitives_1.TextInputPrimitive, HeaderComponent: primitives_1.HeaderPrimitive, SelectComponent: QuillSelect_1.QuillSelectComponent, dashNames: state.dashboards }), (0, jsx_runtime_1.jsx)(modals_1.ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
+                                }, client: state.client, ModalComponent: primitives_1.ModalPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, TextInputComponent: primitives_1.TextInputPrimitive, HeaderComponent: primitives_1.HeaderPrimitive, SelectComponent: QuillSelect_1.QuillSelectComponent, dashNames: state.dashboards }), (0, jsx_runtime_1.jsx)(modals_1.ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: async () => {
+                                    await reloadDashboard(state.selectedDashboard?.name, true);
                                     setReloadFlag(true);
-                                    reloadDashboard(state.selectedDashboard?.name);
                                 }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: primitives_1.ModalPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, selectedDashboard: selectedReorderDashboard })] }))] }), (0, jsx_runtime_1.jsx)(Admin_1.ReportWrapper, { isOpen: state.activeComponent === 'Report', setIsOpen: (isOpen) => {
                     dispatch({
                         type: 'SET_ACTIVE_COMPONENT',
                         payload: isOpen ? 'Report' : 'Dashboards',
                     });
-                }, ButtonComponent: primitives_1.ButtonPrimitive, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, ModalComponent: UiComponents_1.MemoizedModal, SelectComponent: primitives_1.SelectPrimitive, OrganizationSelectComponent: components_1.OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials, reloadDashboard: () => {
+                }, ButtonComponent: primitives_1.ButtonPrimitive, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, ModalComponent: UiComponents_1.MemoizedModal, SelectComponent: primitives_1.SelectPrimitive, OrganizationSelectComponent: components_1.OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials, reloadDashboard: async () => {
+                    await reloadDashboard(state.selectedDashboard?.name);
                     setReloadFlag(true);
-                    reloadDashboard(state.selectedDashboard?.name);
                 } })] }));
 }
 exports.default = DashboardManager;

package/dist/cjs/public_components/SQLViewManager.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+export declare const getDuplicateColumns: (columns?: any[]) => string[];
 export default function SQLViewManager({ containerStyle, }: {
     containerStyle?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/public_components/SQLViewManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLViewManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/SQLViewManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAyBnE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAgaA"}
+{"version":3,"file":"SQLViewManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/SQLViewManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAmCnE,eAAO,MAAM,mBAAmB,aAAc,GAAG,EAAE,aAalD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA8eA"}