@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/public_components/DashboardManager.js

@@ -1,97 +1,196 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
 import { OrgSelect, EnvSelectPopover, DashboardSelectPopover, } from '../components';
-import { PromoteDashModal, ReorderDashboardModal } from '../modals';
-import { Dashboard, useDashboard } from '@quillsql/react';
-import { ReportWrapper } from '../Admin';
-import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, SelectPrimitive, TextInputPrimitive, } from '../primitives';
+import { useDashboard, useDashboards } from '@quillsql/react';
+import { deleteReport, ReportWrapper } from '../Admin';
+import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, CheckboxPrimitive, } from '../primitives';
 import { NewDashboardModal } from '../modals/NewDashboardModal';
-import EmptyDashboardComponent from '../components/EmptyDashboardComponent';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
-import { MemoizedButton, MemoizedModal } from '../components/UiComponents';
+import { MemoizedButton, MemoizedModal, QuillErrorMessageComponent, } from '../components/UiComponents';
 import { QuillSelectComponent } from '../components/QuillSelect';
 import { EditFiltersModal } from '../modals/EditFiltersModal';
-export default function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
-    const { state, dispatch } = useAdmin();
+import ChartQueryBuilder from './ChartQueryBuilder';
+import { EditEnvironmentModal } from '../modals/EditEnvironmentModal';
+import { PromoteDashboardModal } from '../modals/PromoteDashboardModal';
+import { SAVED_QUERIES_DASHBOARD } from '../utils/constants';
+import { QuillSelectComponentWithCombo } from '../components/QuillSelectWithCombo';
+import { useDashboardManager } from '../hooks/useDashboardManager';
+import equal from 'fast-deep-equal';
+import { Popover } from '../primitives/PopoverPrimitive';
+import CodePreview from '../modals/CodePreview';
+import SavedQueriesModal from '../modals/SavedQueriesModal';
+import { InternalDashboard } from '../components/InternalDashboard/InternalDashboard';
+export default function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }) {
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = useAdmin();
     const parentRef = useRef(null);
-    const [copied, setCopied] = useState(false);
-    const [initialLoad, setInitialLoad] = useState(true);
-    const [reloadFlag, setReloadFlag] = useState(false);
-    const [selectedReorderDashboard, setSelectedReorderDashboard] = useState('');
+    const envSelectPopoverRef = useRef(null);
+    const dashboardSelectPopoverRef = useRef(null);
+    // const [selectedReorderDashboard, setSelectedReorderDashboard] = useState('');
     const [newDashboardModalIsOpen, setNewDashboardModalIsOpen] = useState(false);
     const [editFilterModalIsOpen, setEditFilterModalIsOpen] = useState(false);
-    const { reload: reloadDashboard } = useDashboard(state.selectedDashboard?.name);
-    const [isReorderDashboardModalOpen, setIsReorderDashboardModalOpen] = useState(false);
-    const [isPromoteDashModalOpen, setIsPromoteDashModalOpen] = useState(false);
-    // A useless flag that just turns itself off.
+    const [promoteModalIsOpen, setPromoteModalIsOpen] = useState(false);
+    const [editEnvironmentModalIsOpen, setEditEnvironmentModalIsOpen] = useState(false);
+    //FIXME: we don't want to lift up this state
+    const [userFilters, setUserFilters] = useState([]);
+    const { data: dashboardConfig, reload: reloadDashboard } = useDashboard(state.selectedDashboard, userFilters);
+    const { dashboards, isLoading: dashboardsLoading } = useDashboards();
+    const { setSelectedDashboard } = useDashboardManager();
+    // const [editMode, setEditMode] = useState(true);
+    const [autoPromoteVirtualTables, setAutoPromoteVirtualTables] = useState(true);
     useEffect(() => {
-        if (reloadFlag) {
-            setReloadFlag(false);
-        }
-    }, [reloadFlag]);
-    async function getDashNames(dashboardName) {
-        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,
-                },
-            }),
-        });
-        // If you need to retrieve the JSON data from the response:
-        const data = await response.json();
-        setInitialLoad(false);
-        if (!data.data.dashboardNames || !data.data.dashboardNames.length) {
-            dispatch({ type: 'SET_DASHBOARDS', payload: [] });
-            return;
-        }
-        let selectedDashboard = data.data.dashboards.find((dash) => {
-            return dash.name === dashboardName;
-        });
-        if (!selectedDashboard) {
-            selectedDashboard = data.data.dashboards[0];
-        }
-        dispatch({ type: 'SET_DASHBOARDS', payload: data.data.dashboards });
-        dispatch({
-            type: 'SET_SELECTED_DASHBOARD',
-            payload: selectedDashboard,
-        });
-    }
-    useEffect(() => {
-        if (navigateToDashboardBuilder) {
+        if (navigateToVirtualTableManager) {
             dispatch({
-                type: 'SET_NAVIGATE_TO_DASHBOARD_BUILDER',
-                payload: navigateToDashboardBuilder,
+                type: 'SET_NAVIGATE_TO_VIRTUAL_TABLE_BUILDER',
+                payload: navigateToVirtualTableManager,
             });
         }
         else {
             console.warn('navigateToDashboardBuilder is not defined');
         }
     }, []);
-    useEffect(() => {
-        let isSubscribed = true;
-        if (isSubscribed) {
-            getDashNames(state.selectedDashboard?.name || '');
+    const handleClickReport = useCallback((elem) => {
+        dispatch({ type: 'SET_REPORT_ID', payload: elem.id });
+        dispatch({
+            type: 'SET_ACTIVE_COMPONENT',
+            payload: 'Report',
+        });
+    }, [dispatch]);
+    const hoverActions = (data) => {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 4,
+            }, children: _jsxs("button", { style: {
+                    height: 36,
+                    color: state.theme?.secondaryTextColor,
+                    border: '1px solid #e7e7e7',
+                    borderRadius: 6,
+                    outline: 'none',
+                    cursor: 'pointer',
+                    fontFamily: state.theme?.fontFamily,
+                    fontWeight: state.theme?.buttonFontWeight || 500,
+                    fontSize: 14,
+                    padding: '0px 12px',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }, onClick: async (event) => {
+                    event.stopPropagation();
+                    if (await deleteReport(data.id, state, getToken)) {
+                        reloadDashboard(undefined, false, {
+                            report: { id: data.id },
+                            action: 'delete',
+                        });
+                    }
+                }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, children: _jsx("path", { fillRule: "evenodd", d: "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z", clipRule: "evenodd" }) })] }) }));
+    };
+    const handlePromote = async (selectedToClient, skipWarning = false) => {
+        try {
+            const respJson = await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: state.client._id,
+                    withCredentials: !!state.withCredentials,
+                    queryHeaders: state.queryHeaders,
+                },
+                task: 'promote-dashboard',
+                metadata: {
+                    clientId: state.client._id,
+                    dashboardName: state.selectedDashboard,
+                    fromClientId: state.client._id,
+                    toClientId: selectedToClient._id,
+                    skipWarning,
+                    addMissingTables: autoPromoteVirtualTables,
+                },
+                adminMode: true,
+            });
+            if (respJson?.error) {
+                alert(respJson?.error);
+                return;
+            }
+            const data = respJson?.data;
+            let alertMsg = 'Dashboard promoted successfully.';
+            if (data.error) {
+                alert(data.error);
+                return;
+            }
+            else if (!skipWarning && data.warning) {
+                if (confirm(`${data.warning}\n\nContinue?`)) {
+                    handlePromote(selectedToClient, true);
+                }
+                return;
+            }
+            if (data.logs?.length > 0) {
+                alertMsg += `\n\n${data.logs.join('\n\n')}`;
+            }
+            if (data.hints?.removedFilters) {
+                const plural = data.hints.removedFilters.length > 1;
+                alertMsg += `${alertMsg ? '\n\n' : ''}The following filter${plural ? 's were' : ' was'} removed because they are not compatible with the virtual tables in the target client: ${data.hints.removedFilters.join(', ')}`;
+            }
+            if (data.hints?.failedTables) {
+                alertMsg += `${alertMsg ? '\n\n' : ''}`;
+                const failedTableMessages = [];
+                Object.entries(data.hints.failedTables).forEach(([key, value]) => {
+                    const plural = value.affected.length > 1;
+                    failedTableMessages.push(`${autoPromoteVirtualTables ? `Couldn't promote virtual table ${key}: (${value.error})` : `Missing virtual table ${key}`}\nAffected item${plural ? 's' : ''} ${value.affected.join(', ')}`);
+                });
+                alertMsg += failedTableMessages.join('\n\n');
+            }
+            if (alertMsg) {
+                alert(alertMsg);
+            }
+            setPromoteModalIsOpen(false);
+            setEditFilterModalIsOpen(false);
+            // setSelectedDashboard(null); // Keep the current selected dashboard (copied into new client)
+            dispatch({
+                type: 'SET_REPORT_ID',
+                payload: undefined,
+            });
+            setClient(selectedToClient);
+        }
+        catch (error) {
+            console.error('Promotion failed:', error);
+            alert('Could not promote this dashboard.');
         }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [state.environment, state.client]);
-    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: {
+    };
+    return (_jsxs("div", { style: containerStyle, children: [(state.activeComponent === 'Report Builder' ||
+                state.activeComponent === 'SQL Editor') && (_jsx(ChartQueryBuilder, { activeComponent: state.activeComponent, destinationDashboard: state.selectedDashboard ??
+                    dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.[0]
+                        ?.name ??
+                    '', onExit: (report) => {
+                    dispatch({
+                        type: 'SET_ACTIVE_COMPONENT',
+                        payload: 'Dashboards',
+                    });
+                    dispatch({
+                        type: 'SET_REPORT_ID',
+                        payload: undefined,
+                    });
+                    dispatch({
+                        type: 'SET_ACTIVE_QUERY',
+                        payload: '',
+                    });
+                    dispatch({
+                        type: 'SET_ACTIVE_SAVED_QUERY_REPORT_ID',
+                        payload: '',
+                    });
+                    // quill-saved-queries is a hidden dashboard
+                    if (report?.dashboardName === SAVED_QUERIES_DASHBOARD) {
+                        reloadDashboard(SAVED_QUERIES_DASHBOARD, false, report ? { report, action: 'upsert' } : undefined);
+                    }
+                    else {
+                        reloadDashboard(state.selectedDashboard || undefined, false, report ? { report, action: 'upsert' } : undefined);
+                    }
+                } })), !(state.activeComponent === 'Report Builder' ||
+                state.activeComponent === 'SQL Editor') && (_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     paddingTop: '0px',
                     position: 'relative',
+                    minHeight: '100%',
                 }, ref: parentRef, children: [_jsx("div", { style: {
-                            //   width: 'calc(100vw - 30px)',
                             display: 'flex',
                             position: 'sticky',
                             backgroundColor: 'white',
@@ -112,10 +211,6 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                             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',
@@ -127,90 +222,98 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'flex-end',
-                                    }, 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) => {
-                                                        setReloadFlag(true);
-                                                        const selectedDashboard = state.dashboards.find((dash) => {
-                                                            return dash.name === dashboard;
-                                                        });
+                                        marginRight: 12,
+                                    }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, ref: envSelectPopoverRef, children: _jsx(EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
+                                                    setSelectedDashboard(null);
+                                                    setClient(client, true);
+                                                }, onSelectedEditEnvironment: () => {
+                                                    setEditEnvironmentModalIsOpen(true);
+                                                }, theme: state.theme, parentRef: envSelectPopoverRef, isLoading: clientLoading }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, ref: dashboardSelectPopoverRef, children: _jsx(DashboardSelectPopover, { dashboards: dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.length
+                                                    ? dashboards
+                                                        .map((elem) => {
+                                                        return elem.name;
+                                                    })
+                                                        .filter((name) => name !== SAVED_QUERIES_DASHBOARD)
+                                                    : [], setDashboard: (dashboard) => {
+                                                    setSelectedDashboard(dashboard);
+                                                    dispatch({
+                                                        type: 'SET_REPORT_ID',
+                                                        payload: undefined,
+                                                    });
+                                                }, dashboard: state.selectedDashboard ?? null, theme: state.theme, onClickNewDashboard: () => {
+                                                    setNewDashboardModalIsOpen(true);
+                                                }, setSelectedEditDashboard: (dashboard) => {
+                                                    if (state.selectedDashboard !== dashboard) {
+                                                        setSelectedDashboard(dashboard);
                                                         dispatch({
-                                                            type: 'SET_SELECTED_DASHBOARD',
-                                                            payload: selectedDashboard,
+                                                            type: 'SET_REPORT_ID',
+                                                            payload: undefined,
                                                         });
-                                                    }, 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) })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                            }, children: [_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: [_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; }
-        ` }), _jsx("div", { style: {
-                                                                color: '#212121',
-                                                                marginBottom: '0px',
-                                                            }, children: _jsx("h1", { style: {
-                                                                    fontSize: '14px',
-                                                                    fontWeight: '600',
-                                                                    color: state.theme.secondaryTextColor,
-                                                                    fontFamily: state.theme.fontFamily,
-                                                                    userSelect: 'none',
-                                                                }, children: "Copy Public Key" }) }), _jsx("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                alignItems: 'center',
-                                                                gap: '6px',
-                                                                cursor: 'pointer',
-                                                                marginLeft: '12px',
-                                                            }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [_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" }), _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 && (_jsxs("div", { style: {
-                                                        fontSize: 13,
-                                                        fontWeight: 600,
-                                                        color: '#565656',
-                                                        marginLeft: 16,
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        alignItems: 'center',
-                                                        gap: 6,
-                                                    }, children: [_jsx("div", { children: "\u2705" }), " ", _jsx("div", { children: "Copied" })] }))] })] }), !!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: {
+                                                    }
+                                                    setEditFilterModalIsOpen(true);
+                                                }, parentRef: dashboardSelectPopoverRef, isLoading: clientLoading || dashboardsLoading }) }), state.client?.name !== undefined &&
+                                            !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { isLoading: clientLoading }))] }), !!(dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)
+                                    ?.length && !(clientLoading || dashboardsLoading)) && (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                                if (!state.selectedDashboard) {
+                                                    return;
+                                                }
+                                                dispatch({
+                                                    type: 'SET_ACTIVE_COMPONENT',
+                                                    payload: 'CodePreview',
+                                                });
+                                            }, label: "Embed Preview" }), _jsx(Popover, { content: _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 12,
+                                                    minWidth: 170,
+                                                }, children: [_jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                                            if (!state.selectedDashboard) {
+                                                                return;
+                                                            }
+                                                            dispatch({
+                                                                type: 'SET_ACTIVE_COMPONENT',
+                                                                payload: 'Report Builder',
+                                                            });
+                                                        }, label: "Report Builder \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                                            if (!state.selectedDashboard) {
+                                                                return;
+                                                            }
+                                                            dispatch({
+                                                                type: 'SET_ACTIVE_COMPONENT',
+                                                                payload: 'SQL Editor',
+                                                            });
+                                                        }, label: "SQL Editor \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
+                                                            if (!state.selectedDashboard) {
+                                                                return;
+                                                            }
+                                                            dispatch({
+                                                                type: 'SET_ACTIVE_COMPONENT',
+                                                                payload: 'SavedQueries',
+                                                            });
+                                                        }, label: "Saved Queries \u2197" })] }), trigger: _jsx(ButtonPrimitive
+                                            // onClick={() => {
+                                            //   if (!state.selectedDashboard) {
+                                            //     return;
+                                            //   }
+                                            //   dispatch({
+                                            //     type: 'SET_ACTIVE_COMPONENT',
+                                            //     payload: 'Query Builder',
+                                            //   });
+                                            // }}
+                                            , { 
+                                                // onClick={() => {
+                                                //   if (!state.selectedDashboard) {
+                                                //     return;
+                                                //   }
+                                                //   dispatch({
+                                                //     type: 'SET_ACTIVE_COMPONENT',
+                                                //     payload: 'Query Builder',
+                                                //   });
+                                                // }}
+                                                onClick: () => { }, label: "Add Chart +" }) })] }))] }) }), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexGrow: 1 }, children: [!dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)
+                                        ?.length &&
+                                        !clientLoading &&
+                                        !dashboardsLoading && (_jsx("div", { style: {
                                             width: '100%',
                                             display: 'flex',
                                             flexDirection: 'column',
@@ -236,7 +339,6 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                                                                 fontSize: 16,
                                                                 fontWeight: 500,
                                                                 color: '#565656',
-                                                                // border: '1px solid #e7e7e7',
                                                                 paddingTop: 8,
                                                                 paddingBottom: 8,
                                                                 paddingRight: 12,
@@ -245,45 +347,102 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                                                                 cursor: 'pointer',
                                                             }, className: "quill-hover-button", children: "No dashboards created yet." })] }), _jsx("div", { style: { paddingBottom: 8 }, children: _jsx(MemoizedButton, { label: 'Create dashboard', style: { fontSize: 14 }, onClick: () => {
                                                             setNewDashboardModalIsOpen(true);
-                                                        } }) })] }) })), 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 });
+                                                        } }) })] }) })), clientLoading ||
+                                        dashboardsLoading ||
+                                        dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)
+                                            .length ? (_jsx("div", { style: { width: '100%', position: 'relative' }, children: _jsx(InternalDashboard, { name: state.selectedDashboard ?? '', containerStyle: { padding: 25, width: '100%' }, onClickReport: handleClickReport, hoverActions: hoverActions, onUserFiltersUpdated: setUserFilters, parentLoading: clientLoading || dashboardsLoading, onManageDashboard: () => {
+                                                setEditFilterModalIsOpen(true);
+                                            } }) })) : null] }), !clientLoading && !dashboardsLoading && (_jsxs(_Fragment, { children: [_jsx(EditEnvironmentModal, { isOpen: editEnvironmentModalIsOpen, setIsOpen: setEditEnvironmentModalIsOpen, onSave: async () => {
+                                            await reloadDashboard(state.selectedDashboard ?? undefined);
+                                        }, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SelectComponent: QuillSelectComponentWithCombo, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive }, state.client._id), state.selectedDashboard && editFilterModalIsOpen && (_jsx(EditFiltersModal, { selectedDashboardName: state.selectedDashboard, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, 
+                                        // openEditOrderModal={(dashboardName: string): void => {
+                                        //   setSelectedReorderDashboard(dashboardName);
+                                        //   setIsReorderDashboardModalOpen(true);
+                                        // }}
+                                        openPromoteModal: () => setPromoteModalIsOpen(true), onSave: async (name) => {
+                                            dispatch({
+                                                type: 'SET_SELECTED_DASHBOARD_NAME',
+                                                payload: {
+                                                    dashboard: name,
+                                                },
+                                            });
+                                            // dispatch({
+                                            //   type: 'SET_SELECTED_TENANT_VALUES',
+                                            //   payload: undefined,
+                                            // });
+                                            // dispatch({
+                                            //   type: 'SET_SELECTED_DASHBOARD_TENANT_IDS',
+                                            //   payload: undefined,
+                                            // });
+                                            // reloadDashboard(name ?? undefined, true);
+                                        }, ModalComponent: ModalPrimitive, ButtonComponent: MemoizedButton, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: QuillSelectComponent, ErrorComponent: QuillErrorMessageComponent, dashNames: dashboards ?? [] }, state.selectedDashboard + state.client._id)), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, onSave: async (name, owner) => {
+                                            if (!(dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.length ?? 0) ||
+                                                ((dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.length ?? 0) === 1 &&
+                                                    dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.[0]?.name === name)) {
                                                 dispatch({
-                                                    type: 'SET_ACTIVE_COMPONENT',
-                                                    payload: 'Report',
+                                                    type: 'SET_CLIENTS',
+                                                    // Set the dashboard name we just created as the default dashboard
+                                                    payload: [
+                                                        ...state.clients.map((client) => {
+                                                            return {
+                                                                ...client,
+                                                                defaultDashboard: client.id === state.client.id
+                                                                    ? { name, owner }
+                                                                    : client.defaultDashboard,
+                                                            };
+                                                        }),
+                                                    ],
+                                                });
+                                                dispatch({
+                                                    type: 'SET_CLIENT',
+                                                    payload: {
+                                                        ...state.client,
+                                                        defaultDashboard: { name, owner },
+                                                    },
                                                 });
-                                            }, 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);
-                                    await reloadDashboard(dashName, true);
-                                    setReloadFlag(true);
-                                }, 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: async (dashboard) => {
-                                    dispatch({
-                                        type: 'SET_SELECTED_DASHBOARD',
-                                        payload: dashboard,
-                                    });
-                                    dispatch({
-                                        type: 'SET_DASHBOARDS',
-                                        payload: [...state.dashboards, { ...dashboard }],
-                                    });
-                                    await reloadDashboard(state.selectedDashboard?.name, true);
-                                    setReloadFlag(true);
-                                }, 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: async () => {
-                                    await reloadDashboard(state.selectedDashboard?.name, true);
-                                    setReloadFlag(true);
-                                }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard })] }))] }), _jsx(ReportWrapper, { isOpen: state.activeComponent === 'Report', setIsOpen: (isOpen) => {
+                                            }
+                                            setSelectedDashboard(name);
+                                        }, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: QuillSelectComponent, dashNames: dashboards }), _jsx(PromoteDashboardModal, { isOpen: promoteModalIsOpen, setIsOpen: setPromoteModalIsOpen, autoPromoteVirtualTables: autoPromoteVirtualTables, setAutoPromoteVirtualTables: setAutoPromoteVirtualTables, ModalComponent: ModalPrimitive, ButtonComponent: MemoizedButton, SelectComponent: QuillSelectComponent, HeaderComponent: HeaderPrimitive, CheckboxComponent: CheckboxPrimitive, ErrorComponent: QuillErrorMessageComponent, handlePromote: async (selectedToClient) => {
+                                            await handlePromote(selectedToClient);
+                                        } })] }))] }))] })), !clientLoading &&
+                !dashboardsLoading &&
+                state.activeComponent === 'Report' && (_jsx(ReportWrapper, { isOpen: !clientLoading &&
+                    !dashboardsLoading &&
+                    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: async () => {
-                    await reloadDashboard(state.selectedDashboard?.name);
-                    setReloadFlag(true);
+                }, ModalComponent: MemoizedModal, reloadDashboard: async (reportAction) => {
+                    // hard reload the dashboard if the flags on the changed report don't match the previous ones
+                    const oldReport = Object.values(dashboardConfig?.sections ?? {})
+                        .flat()
+                        .find((report) => report.id === reportAction?.report?.id);
+                    const hardReload = reportAction?.report &&
+                        oldReport &&
+                        (!equal(oldReport.flags ?? {}, reportAction.report.flags ?? {}) ||
+                            !equal(oldReport.filterMap ?? {}, reportAction.report.filterMap ?? {}));
+                    if (hardReload) {
+                        dispatch({ type: 'SET_REPORT_ID', payload: null });
+                        dispatch({
+                            type: 'SET_ACTIVE_COMPONENT',
+                            payload: 'Dashboards',
+                        });
+                    }
+                    await reloadDashboard(state.selectedDashboard ?? undefined, hardReload, reportAction);
+                } })), state.activeComponent === 'CodePreview' && (_jsx(CodePreview, { ModalComponent: MemoizedModal, isOpen: !clientLoading &&
+                    !dashboardsLoading &&
+                    state.activeComponent === 'CodePreview', setIsOpen: (isOpen) => {
+                    dispatch({
+                        type: 'SET_ACTIVE_COMPONENT',
+                        payload: isOpen ? 'Report' : 'Dashboards',
+                    });
+                } })), _jsx(SavedQueriesModal, { ModalComponent: MemoizedModal, clientId: state.client.id, isOpen: !clientLoading &&
+                    !dashboardsLoading &&
+                    state.activeComponent === 'SavedQueries', setIsOpen: (isOpen) => {
+                    dispatch({
+                        type: 'SET_ACTIVE_COMPONENT',
+                        payload: isOpen ? 'SavedQueries' : 'Dashboards',
+                    });
                 } })] }));
 }