@quillsql/admin 1.4.0 → 1.6.0

package/dist/esm/public_components/DashboardManager.js

@@ -2,42 +2,37 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
 import { OrgSelect, EnvSelectPopover, DashboardSelectPopover, } from '../components';
-import { EditDashboardsModal, PromoteDashModal, ReorderDashboardModal, } from '../modals';
+import { PromoteDashModal, ReorderDashboardModal } from '../modals';
 import { Dashboard, useDashboard } from '@quillsql/react';
-import { EditFiltersModal, AddFilterModal, AddDashboardModal, ReportWrapper, } from '../Admin';
+import { ReportWrapper } from '../Admin';
 import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, SelectPrimitive, TextInputPrimitive, } from '../primitives';
 import { NewDashboardModal } from '../modals/NewDashboardModal';
 import { QUILL_SERVER } from '../utils/constants';
 import EmptyDashboardComponent from '../components/EmptyDashboardComponent';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
+import { MemoizedModal } from '../components/UiComponents';
+import { QuillSelectComponent } from '../components/QuillSelect';
+import { EditFiltersModal } from '../modals/EditFiltersModal';
 export default function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
     const { state, dispatch } = useAdmin();
     const parentRef = useRef(null);
     const [initialLoad, setInitialLoad] = useState(true);
     const [dashboards, setDashboards] = useState([]);
     const [reloadFlag, setReloadFlag] = useState(false);
-    const [selectedEditDashboard, setSelectedEditDashboard] = useState('');
     const [selectedReorderDashboard, setSelectedReorderDashboard] = useState('');
-    const [addFilterModalIsOpen, setAddFilterModalIsOpen] = useState(false);
-    const [isAddDashboardModalOpen, setIsAddDashboardModalOpen] = useState(false);
     const [newDashboardModalIsOpen, setNewDashboardModalIsOpen] = useState(false);
     const [editFilterModalIsOpen, setEditFilterModalIsOpen] = useState(false);
-    const { reload: reloadDashboard } = useDashboard(state.selectedDashboard);
+    const { reload: reloadDashboard } = useDashboard(state.selectedDashboard?.name);
     const [isReorderDashboardModalOpen, setIsReorderDashboardModalOpen] = useState(false);
     const [dashboardData, setDashboardData] = useState(null);
-    // const [activeComponent, setActiveComponent] = useContext(
-    //     ActiveComponentContext
-    // );
-    const [isEditDashboardModalOpen, setIsEditDashboardModalOpen] = useState(false);
     const [isPromoteDashModalOpen, setIsPromoteDashModalOpen] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
     // A useless flag that just turns itself off.
     useEffect(() => {
         if (reloadFlag) {
             setReloadFlag(false);
         }
     }, [reloadFlag]);
-    async function getDashNames() {
+    async function getDashNames(dashboardName) {
         const response = await fetch(`${state.queryEndpoint}`, {
             method: 'POST',
             headers: {
@@ -57,20 +52,19 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
         const data = await response.json();
         setInitialLoad(false);
         if (!data.data.dashboardNames || !data.data.dashboardNames.length) {
+            dispatch({ type: 'SET_DASHBOARDS', payload: [] });
             return;
         }
-        const dashNames = data.data.dashboardNames.map((elem) => {
-            if (!elem) {
-                return { name: 'null' };
-            }
-            return { name: elem };
+        let selectedDashboard = data.data.dashboards.find((dash) => {
+            return dash.name === dashboardName;
         });
-        dispatch({ type: 'SET_DASHBOARDS', payload: dashNames });
+        if (!selectedDashboard) {
+            selectedDashboard = data.data.dashboards[0];
+        }
+        dispatch({ type: 'SET_DASHBOARDS', payload: data.data.dashboards });
         dispatch({
             type: 'SET_SELECTED_DASHBOARD',
-            payload: dashNames.some((dash) => dash.name === state.selectedDashboard)
-                ? state.selectedDashboard
-                : dashNames[0].name,
+            payload: selectedDashboard,
         });
     }
     useEffect(() => {
@@ -87,7 +81,7 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
     useEffect(() => {
         let isSubscribed = true;
         if (isSubscribed) {
-            getDashNames();
+            getDashNames(state.selectedDashboard?.name || '');
         }
         return () => {
             isSubscribed = false;
@@ -109,13 +103,15 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                         ...state.queryHeaders,
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({ metadata: {
+                    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;
@@ -140,183 +136,155 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
             }
             setData(responseData);
         }
-        if (state.selectedEditDashboard) {
-            getDashboardData(state.selectedEditDashboard, (data) => {
-                dispatch({ type: 'SET_EDIT_DASHBOARD_DATA', payload: data });
-            });
-            return;
-        }
         if (state.selectedDashboard && state.client) {
-            getDashboardData(state.selectedDashboard, setDashboardData);
+            getDashboardData(state.selectedDashboard.name, setDashboardData);
         }
-    }, [
-        state.selectedDashboard,
-        state.selectedEditDashboard,
-        state.organizationId,
-        state.client,
-    ]);
-    if (state.activeComponent == 'Report') {
-        return (_jsx(ReportWrapper, { ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, ModalComponent: ModalPrimitive, SelectComponent: SelectPrimitive, OrganizationSelectComponent: OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials }));
-    }
-    return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: '0px',
-                position: 'relative',
-            }, ref: parentRef, children: [_jsx("div", { style: {
-                        //   width: 'calc(100vw - 30px)',
-                        display: 'flex',
-                        position: 'sticky',
-                        backgroundColor: 'white',
-                        zIndex: 3,
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        flexDirection: 'row',
-                        paddingTop: 12,
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingLeft: '30px',
-                        paddingRight: '30px',
-                        borderBottomWidth: 1,
-                        borderTopWidth: 0,
-                        borderLeftWidth: 0,
-                        borderRightWidth: 0,
-                        borderStyle: 'solid',
-                        borderColor: state.theme.borderColor,
-                        paddingBottom: 20,
-                        // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
-                        //   paddingRight: '50px',
-                        //   position: 'absolute'
-                        //   // zIndex: 10
-                    }, children: _jsxs("div", { style: {
-                            width: '100%',
+    }, [state.selectedDashboard, state.organizationId, state.client]);
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingTop: '0px',
+                    position: 'relative',
+                }, ref: parentRef, children: [_jsx("div", { style: {
+                            //   width: 'calc(100vw - 30px)',
                             display: 'flex',
+                            position: 'sticky',
+                            backgroundColor: 'white',
+                            zIndex: 3,
+                            left: 0,
+                            right: 0,
+                            top: 0,
                             flexDirection: 'row',
-                            alignItems: 'flex-end',
+                            paddingTop: 12,
+                            alignItems: 'center',
                             justifyContent: 'space-between',
-                        }, children: [_jsxs("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                                                    fontSize: '14px',
-                                                    paddingTop: '0px',
-                                                    marginTop: '0px',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                    color: state.theme.secondaryTextColor,
-                                                    userSelect: 'none',
-                                                }, children: "Dashboard" }), _jsx(DashboardSelectPopover, { dashboards: state.dashboards.length
-                                                    ? state.dashboards.map((elem) => {
-                                                        return { value: elem.name, label: elem.name };
-                                                    })
-                                                    : [], setDashboard: (dashboard) => {
-                                                    dispatch({
-                                                        type: 'SET_SELECTED_DASHBOARD',
-                                                        payload: dashboard,
-                                                    });
-                                                }, dashboard: state.selectedDashboard ? state.selectedDashboard : '', theme: state.theme, onClickNewDashboard: () => {
-                                                    setNewDashboardModalIsOpen(true);
-                                                }, setSelectedEditDashboard: (d) => {
-                                                    dispatch({
-                                                        type: 'SET_SELECTED_EDIT_DASHBOARD',
-                                                        payload: d,
-                                                    });
-                                                    setEditFilterModalIsOpen(true);
-                                                } })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                                                    fontSize: '14px',
-                                                    paddingTop: '0px',
-                                                    marginTop: '0px',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                    color: state.theme.secondaryTextColor,
-                                                    fontFamily: state.theme.fontFamily,
-                                                    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: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && (_jsx(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 ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && (_jsx("div", { style: {
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                    }, children: _jsxs("div", { style: {
-                                            height: 80,
-                                            width: 260,
-                                            borderRadius: 6,
-                                            marginTop: 100,
+                            paddingLeft: '30px',
+                            paddingRight: '30px',
+                            borderBottomWidth: 1,
+                            borderTopWidth: 0,
+                            borderLeftWidth: 0,
+                            borderRightWidth: 0,
+                            borderStyle: 'solid',
+                            borderColor: state.theme?.borderColor,
+                            paddingBottom: 20,
+                            // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
+                            //   paddingRight: '50px',
+                            //   position: 'absolute'
+                            //   // zIndex: 10
+                        }, children: _jsxs("div", { style: {
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'flex-end',
+                                justifyContent: 'space-between',
+                            }, children: [_jsxs("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                                                        fontSize: '14px',
+                                                        paddingTop: '0px',
+                                                        marginTop: '0px',
+                                                        marginBottom: '4px',
+                                                        fontWeight: '600',
+                                                        color: state.theme.secondaryTextColor,
+                                                        userSelect: 'none',
+                                                    }, children: "Dashboard" }), _jsx(DashboardSelectPopover, { dashboards: state.dashboards.length
+                                                        ? state.dashboards.map((elem) => {
+                                                            return { value: elem.name, label: elem.name };
+                                                        })
+                                                        : [], setDashboard: (dashboard) => {
+                                                        const selectedDashboard = state.dashboards.find((dash) => {
+                                                            return dash.name === dashboard;
+                                                        });
+                                                        dispatch({
+                                                            type: 'SET_SELECTED_DASHBOARD',
+                                                            payload: selectedDashboard,
+                                                        });
+                                                    }, dashboard: state.selectedDashboard
+                                                        ? state.selectedDashboard.name
+                                                        : '', theme: state.theme, onClickNewDashboard: () => {
+                                                        setNewDashboardModalIsOpen(true);
+                                                    }, setSelectedEditDashboard: (d) => {
+                                                        setEditFilterModalIsOpen(true);
+                                                    } })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                                                        fontSize: '14px',
+                                                        paddingTop: '0px',
+                                                        marginTop: '0px',
+                                                        marginBottom: '4px',
+                                                        fontWeight: '600',
+                                                        color: state.theme.secondaryTextColor,
+                                                        fontFamily: state.theme.fontFamily,
+                                                        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: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && (_jsx(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 ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && (_jsx("div", { style: {
+                                            width: '100%',
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'center',
-                                            justifyContent: 'center',
-                                            gap: 20,
-                                        }, className: "hover-dash-rect", onClick: () => {
-                                            setNewDashboardModalIsOpen(true);
-                                        }, children: [_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; } ` }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    width: 260,
-                                                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_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" }), _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" })] }), _jsx("div", { style: {
-                                                            fontSize: 14,
-                                                            fontWeight: 500,
-                                                            color: '#565656',
-                                                            // border: '1px solid #e7e7e7',
-                                                            paddingTop: 8,
-                                                            paddingBottom: 8,
-                                                            paddingRight: 12,
-                                                            paddingLeft: 12,
-                                                            borderRadius: 4,
-                                                            cursor: 'pointer',
-                                                        }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag ? null : (_jsx(Dashboard, { name: state.selectedDashboard, containerStyle: {
-                                        paddingRight: 25,
-                                        paddingLeft: 25,
-                                        paddingTop: 30,
-                                    }, onClickDashboardItem: (elem) => {
-                                        dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
-                                        dispatch({
-                                            type: 'SET_ACTIVE_COMPONENT',
-                                            payload: 'Report',
-                                        });
-                                    }, EmptyDashboardComponent: EmptyDashboardComponent }))] }), _jsx(EditDashboardsModal, { clientId: state.client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, openEditFilterModal: (dashboardName) => {
-                                dispatch({
-                                    type: 'SET_SELECTED_EDIT_DASHBOARD',
-                                    payload: dashboardName,
-                                });
-                                setEditFilterModalIsOpen(true);
-                                // setIsEditDashboardModalOpen(false);
-                            }, openAddDashboardModal: () => {
-                                setIsAddDashboardModalOpen(true);
-                                // setIsEditDashboardModalOpen(false);
-                            }, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, HeaderComponent: HeaderPrimitive, setDashboardData: setDashboardData, dashboards: state.dashboards, getDashNames: getDashNames }), _jsx(PromoteDashModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteDashModalOpen, setIsOpen: setIsPromoteDashModalOpen, ModalComponent: ModalPrimitive, dashboards: state.dashboards, selectedDashboard: state.selectedDashboard, theme: state.theme, ButtonComponent: ButtonPrimitive }), _jsx(EditFiltersModal, { selectedDashboard: state.selectedDashboard, dashboardData: state.editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
-                                setAddFilterModalIsOpen(true);
-                                // setEditFilterModalIsOpen(false);
-                            }, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, onSave: async () => {
-                                await getDashNames();
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, onSave: (name) => {
-                                dispatch({ type: 'SET_SELECTED_DASHBOARD', payload: name });
-                                dispatch({
-                                    type: 'SET_DASHBOARDS',
-                                    payload: [...state.dashboards, { name }],
-                                });
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard }), _jsx(AddFilterModal, { selectedDashboard: state.selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, openAddDashboardModal: () => {
-                                setIsAddDashboardModalOpen(true);
-                                // setAddFilterModalIsOpen(false);
-                            } }), _jsx(AddDashboardModal, { selectedDashboard: state.selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, dashNames: state.dashboards, 
-                            // @ts-ignore
-                            openAddFilterModal: () => {
-                                setAddFilterModalIsOpen(true);
-                                // setIsAddDashboardModalOpen(false);
-                            }, organizationId: state.organizationId, getDashNames: getDashNames })] }))] }) }));
+                                        }, children: _jsxs("div", { style: {
+                                                height: 80,
+                                                width: 260,
+                                                borderRadius: 6,
+                                                marginTop: 100,
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: 20,
+                                            }, className: "hover-dash-rect", onClick: () => {
+                                                setNewDashboardModalIsOpen(true);
+                                            }, children: [_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; } ` }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        width: 260,
+                                                    }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_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" }), _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" })] }), _jsx("div", { style: {
+                                                                fontSize: 14,
+                                                                fontWeight: 500,
+                                                                color: '#565656',
+                                                                // border: '1px solid #e7e7e7',
+                                                                paddingTop: 8,
+                                                                paddingBottom: 8,
+                                                                paddingRight: 12,
+                                                                paddingLeft: 12,
+                                                                borderRadius: 4,
+                                                                cursor: 'pointer',
+                                                            }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag
+                                        ? null
+                                        : (state.dashboards.length || initialLoad) && (_jsx(Dashboard, { name: state.selectedDashboard?.name, containerStyle: { padding: 25 }, onClickReport: (elem) => {
+                                                dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
+                                                dispatch({
+                                                    type: 'SET_ACTIVE_COMPONENT',
+                                                    payload: 'Report',
+                                                });
+                                            }, EmptyDashboardComponent: EmptyDashboardComponent }))] }), state.selectedDashboard && (_jsx(PromoteDashModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteDashModalOpen, setIsOpen: setIsPromoteDashModalOpen, ModalComponent: ModalPrimitive, dashboards: state.dashboards, selectedDashboard: state.selectedDashboard?.name, theme: state.theme, ButtonComponent: ButtonPrimitive })), state.selectedDashboard && (_jsx(EditFiltersModal, { selectedDashboard: state.selectedDashboard, dashboardData: state.selectedDashboard, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openEditOrderModal: (dashboardName) => {
+                                    setSelectedReorderDashboard(dashboardName);
+                                    setIsReorderDashboardModalOpen(true);
+                                }, onSave: async (dashName) => {
+                                    await getDashNames(dashName);
+                                    setReloadFlag(true);
+                                    reloadDashboard(dashName);
+                                }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: QuillSelectComponent, dashNames: state.dashboards })), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
+                                    setSelectedReorderDashboard(dashboardName);
+                                    setIsReorderDashboardModalOpen(true);
+                                }, onSave: (dashboard) => {
+                                    dispatch({
+                                        type: 'SET_SELECTED_DASHBOARD',
+                                        payload: dashboard,
+                                    });
+                                    dispatch({
+                                        type: 'SET_DASHBOARDS',
+                                        payload: [...state.dashboards, { ...dashboard }],
+                                    });
+                                    setReloadFlag(true);
+                                    reloadDashboard(state.selectedDashboard?.name);
+                                }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: QuillSelectComponent, dashNames: state.dashboards }), _jsx(ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
+                                    setReloadFlag(true);
+                                    reloadDashboard(state.selectedDashboard?.name);
+                                }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard })] }))] }), _jsx(ReportWrapper, { isOpen: state.activeComponent === 'Report', setIsOpen: (isOpen) => {
+                    dispatch({
+                        type: 'SET_ACTIVE_COMPONENT',
+                        payload: isOpen ? 'Report' : 'Dashboards',
+                    });
+                }, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, ModalComponent: MemoizedModal, SelectComponent: SelectPrimitive, OrganizationSelectComponent: OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials, reloadDashboard: () => {
+                    setReloadFlag(true);
+                    reloadDashboard(state.selectedDashboard?.name);
+                } })] }));
 }

package/dist/esm/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;AA0BnE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAqUA"}
+{"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"}