@quillsql/admin 1.5.2 → 1.6.0

package/dist/esm/modals/ReorderDashboardModal.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { useEffect, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
@@ -7,18 +7,14 @@ import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordi
 import { CSS } from '@dnd-kit/utilities';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, TouchSensor, } from '@dnd-kit/core';
 import { Chart } from '@quillsql/react';
+import { LoadingSpinner } from '../components/UiComponents';
 export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }) {
-    // const [client] = useContext(ClientContext);
-    const [dashboardItems, setDashboardItems] = useState([]);
+    const { state } = useAdmin();
+    const [sections, setSections] = useState([]);
+    const [metrics, setMetrics] = useState({});
+    const [charts, setCharts] = useState({});
+    const [tables, setTables] = useState({});
     const [loading, setLoading] = useState(false);
-    const [doesDashboardHaveTables, setDoesDashboardHaveTables] = useState(false);
-    const [doesDashboardHaveCharts, setDoesDashboardHaveCharts] = useState(false);
-    const [doesDashboardHaveMetrics, setDoesDashboardHaveMetrics] = useState(false);
-    const [itemMap, setItemMap] = useState(null);
-    const [metrics, setMetrics] = useState([]);
-    const [charts, setCharts] = useState([]);
-    const [tables, setTables] = useState([]);
-    const { state, dispatch } = useAdmin();
     useEffect(() => {
         async function getDashboardItems() {
             const { _id, environment } = state.client;
@@ -37,41 +33,23 @@ export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSav
                 },
             });
             const responseData = await response.json();
-            let flattened = [];
-            for (let key in responseData.sections) {
-                flattened = flattened.concat(responseData.sections[key]);
-            }
-            setDashboardItems(flattened);
-            setMetrics(flattened.filter((elem) => elem.chartType === 'metric'));
-            setTables(flattened.filter((elem) => elem.chartType === 'table'));
-            setCharts(flattened.filter((elem) => !['metric', 'table'].includes(elem.chartType)));
+            const sections = responseData.sections;
+            setSections(Object.keys(sections));
+            const isMetric = (elem) => elem.chartType === 'metric';
+            const isChart = (elem) => !['metric', 'table'].includes(elem.chartType);
+            const isTable = (elem) => elem.chartType === 'table';
+            setMetrics(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isMetric)])));
+            setCharts(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isChart)])));
+            setTables(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isTable)])));
             setLoading(false);
         }
         if (selectedDashboard && state.client) {
             getDashboardItems();
         }
     }, [selectedDashboard, state.client]);
-    useEffect(() => {
-        const itemMap = new Map();
-        dashboardItems.forEach((item) => {
-            if (item.chartType === 'table') {
-                setDoesDashboardHaveTables(true);
-            }
-            else if (item.chartType === 'metric') {
-                setDoesDashboardHaveMetrics(true);
-            }
-            else {
-                setDoesDashboardHaveCharts(true);
-            }
-            itemMap.set(item._id, item);
-        });
-        setItemMap(itemMap);
-    }, [dashboardItems]);
     const handleSaveChanges = async () => {
         if (!client)
             return;
-        if (!dashboardItems.length)
-            return;
         try {
             const response = await fetch(`${QUILL_SERVER}/dashorder/`, {
                 method: 'POST',
@@ -80,7 +58,11 @@ export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSav
                 },
                 body: JSON.stringify({
                     publicKey: client._id,
-                    orderArray: [...metrics, ...charts, ...tables],
+                    orderArray: [
+                        ...Object.values(metrics).flat(),
+                        ...Object.values(charts).flat(),
+                        ...Object.values(tables).flat(),
+                    ],
                 }),
             });
             if (!response.ok) {
@@ -102,7 +84,7 @@ export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSav
             flexDirection: 'column',
             width: 'calc(100vw - 80px)',
             height: 'calc(100vh - 80px)',
-        }, children: [_jsx("h1", { style: { fontSize: 22, fontWeight: 600, width: '100%' }, children: "Reorder Items" }), loading ? _jsx("div", { children: "Loading..." }) : null, _jsx("div", { style: {
+        }, children: [_jsx("h1", { style: { fontSize: 22, fontWeight: 600, width: '100%' }, children: "Reorder Items" }), loading ? _jsx(LoadingSpinner, {}) : null, _jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 20,
@@ -110,7 +92,18 @@ export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSav
                     width: '100%',
                     height: 'calc(100% - 20px)',
                     zIndex: 100,
-                }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: dashboardItems.length > 0 && itemMap.size > 0 && (_jsxs(_Fragment, { children: [doesDashboardHaveMetrics && (_jsx(ReorderableGrid, { type: 'metrics', items: metrics, setItems: setMetrics })), doesDashboardHaveCharts && (_jsx(ReorderableGrid, { type: 'charts', items: charts, setItems: setCharts })), doesDashboardHaveTables && (_jsx(ReorderableGrid, { type: 'tables', items: tables, setItems: setTables }))] })) }) }), _jsx("div", { style: {
+                }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: sections
+                        .sort((a, b) => a.length - b.length)
+                        .map((sectionName, sectionIndex) => (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 20,
+                        }, children: [sectionName && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx("h1", { style: {
+                                        fontSize: 22,
+                                        fontWeight: 'bold',
+                                        textAlign: 'left',
+                                        marginTop: sectionIndex > 0 ? 20 : 0,
+                                    }, children: sectionName }) })), metrics[sectionName]?.length > 0 && (_jsx(ReorderableGrid, { type: 'metrics', section: sectionName, items: metrics[sectionName], setItems: setMetrics })), charts[sectionName]?.length > 0 && (_jsx(ReorderableGrid, { type: 'charts', section: sectionName, items: charts[sectionName], setItems: setCharts })), tables[sectionName]?.length > 0 && (_jsx(ReorderableGrid, { type: 'tables', section: sectionName, items: tables[sectionName], setItems: setTables }))] }))) }) }), _jsx("div", { style: {
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'row',
@@ -154,13 +147,15 @@ const SortableItem = (props) => {
                                     fontSize: 18,
                                     fontWeight: '500',
                                     flexGrow: 1,
-                                }, children: props.value }), _jsx(HandleButton, {})] }), _jsx(Chart, { chartId: props.id, containerStyle: {
+                                }, children: props.value }), _jsx(HandleButton, {})] }), _jsx(Chart, { reportId: props.id, containerStyle: {
                             padding: 10,
                             height: props.chartType === 'metric' ? 80 : 250,
                             width: 'calc(100% - 20px)',
                         } })] }) }) }));
 };
-function ReorderableGrid({ type, items, setItems }) {
+function ReorderableGrid({ type, section, items, setItems }) {
+    if (!items)
+        return null;
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }), useSensor(TouchSensor, {
@@ -171,10 +166,12 @@ function ReorderableGrid({ type, items, setItems }) {
         if (!active || !over)
             return;
         if (active.id !== over.id) {
-            setItems((itemList) => {
-                const oldIndex = itemList.findIndex((item) => item._id === active.id);
-                const newIndex = itemList.findIndex((item) => item._id === over.id);
-                return arrayMove(itemList, oldIndex, newIndex);
+            setItems((items) => {
+                const list = items[section];
+                const oldIndex = list.findIndex((item) => item._id === active.id);
+                const newIndex = list.findIndex((item) => item._id === over.id);
+                const newOrder = arrayMove(list, oldIndex, newIndex);
+                return { ...items, [section]: newOrder };
             });
         }
     };

package/dist/esm/modals/index.d.ts

@@ -1,5 +1,4 @@
 export { default as PromoteDashModal } from './PromoteDashModal';
-export { default as EditDashboardsModal } from './EditDashboardsModal';
 export { default as PromoteViewModal } from './PromoteViewModal';
 export { default as ReorderDashboardModal } from './ReorderDashboardModal';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/modals/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/esm/modals/index.js

@@ -1,4 +1,3 @@
 export { default as PromoteDashModal } from './PromoteDashModal';
-export { default as EditDashboardsModal } from './EditDashboardsModal';
 export { default as PromoteViewModal } from './PromoteViewModal';
 export { default as ReorderDashboardModal } from './ReorderDashboardModal';

package/dist/esm/primitives/ButtonPrimitive.d.ts

@@ -7,6 +7,8 @@ type ButtonPrimitiveProps = {
     style?: React.CSSProperties;
     variant?: 'primary' | 'secondary' | 'danger';
 };
-declare const ButtonPrimitive: React.FC<ButtonPrimitiveProps>;
+declare const ButtonPrimitive: React.FC<ButtonPrimitiveProps & {
+    isLoading?: boolean;
+}>;
 export default ButtonPrimitive;
 //# sourceMappingURL=ButtonPrimitive.d.ts.map

package/dist/esm/primitives/ButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAoFF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/ButtonPrimitive.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme as defaultTheme } from '../Admin';
-const ButtonPrimitive = ({ onClick, label, theme = defaultTheme, style, variant = 'primary', }) => {
+import { LoadingSpinner } from '../components/UiComponents';
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultTheme, style, variant = 'primary', }) => {
     if (variant === 'danger') {
         return (_jsxs("button", { style: {
                 height: 36,
@@ -18,7 +19,7 @@ const ButtonPrimitive = ({ onClick, label, theme = defaultTheme, style, variant
                 paddingLeft: 20,
                 paddingRight: 20,
                 ...style,
-            }, onClick: onClick, className: "quill--danger-button", children: [_jsx("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), label] }));
+            }, onClick: onClick, className: "quill--danger-button", children: [_jsx("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), isLoading ? (_jsx("div", { style: { padding: '32px 0px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
     }
     return (_jsxs("button", { style: {
             height: 36,
@@ -32,6 +33,7 @@ const ButtonPrimitive = ({ onClick, label, theme = defaultTheme, style, variant
             fontFamily: theme?.fontFamily,
             fontWeight: theme?.buttonFontWeight || 600,
             border: 'none',
+            whiteSpace: 'nowrap',
             fontSize: 14,
             paddingLeft: 20,
             paddingRight: 20,
@@ -42,6 +44,6 @@ const ButtonPrimitive = ({ onClick, label, theme = defaultTheme, style, variant
                 }
                 .quill-button:hover {
                     background: rgba(0,0,0,0.75);
-                }` }), label] }));
+                }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
 };
 export default ButtonPrimitive;

package/dist/esm/primitives/TogglePrimitive.js

@@ -4,8 +4,8 @@ const TogglePrimitive = ({ value, onClick }) => {
         container: {
             display: 'inline-block',
             position: 'relative',
-            width: '70px',
-            height: '38px',
+            width: '50px',
+            height: '30px',
             borderRadius: '24px',
             backgroundColor: value ? '#212121' : '#ccc',
             cursor: 'pointer',
@@ -14,9 +14,9 @@ const TogglePrimitive = ({ value, onClick }) => {
         circle: {
             position: 'absolute',
             top: '3px',
-            left: value ? '35px' : '3px',
-            width: '32px',
-            height: '32px',
+            left: value ? '23px' : '3px',
+            width: '24px',
+            height: '24px',
             borderRadius: '50%',
             backgroundColor: '#FFF',
             transition: 'left 0.4s',

package/dist/esm/public_components/CreateEnvironment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAqMA"}
+{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAsMA"}

package/dist/esm/public_components/CreateEnvironment.js

@@ -117,7 +117,7 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
                     setCreateEnvSteps(updatedSteps);
                     setAllSchemaInfo(schemaDetails);
                     openStep('createSQLViews');
-                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
+                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId, state: state })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
                     openStep('connectSchema');
                     setInitialError(undefined);
                 } })), createEnvSteps.createSQLViews.open ? (_jsx(CreateSQLViews, { containerStyle: {

package/dist/esm/public_components/DashboardBuilder.d.ts.map

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

package/dist/esm/public_components/DashboardBuilder.js

@@ -7,7 +7,6 @@ import { ReportBuilder, SQLEditor } from '@quillsql/react';
 import { QUILL_SERVER } from '../utils/constants';
 import Banner from '../components/Banner';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
-import { ButtonPrimitive } from '../primitives';
 const modeToggleOptions = ['SQL Editor', 'Report Builder'];
 export default function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
     const parentRef = useRef(null);
@@ -155,7 +154,7 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                         borderLeftWidth: 0,
                         borderRightWidth: 0,
                         borderStyle: 'solid',
-                        borderColor: state.theme.borderColor,
+                        borderColor: state.theme?.borderColor,
                         paddingBottom: 20,
                         // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
                         //   paddingRight: '50px',
@@ -232,7 +231,12 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                         // and don't refetch when switching back and forth.
                         height: toggleMode === 'Report Builder' ? '100%' : 0,
                         overflow: 'hidden',
-                    }, children: _jsx(ReportBuilder, { admin: true, initialTableName: state.tables.length > 0 && state.tables[0].name, onAddToDashboardComplete: () => {
+                    }, children: _jsx(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) {
@@ -240,14 +244,41 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                                     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_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 }) }), sqlEditor && !state.databaseTypeMismatch.show && (_jsx("div", { style: {
+                        })?.name, containerStyle: {
+                            height: '100%',
+                            width: '100%',
+                        } }) }), sqlEditor && !state.databaseTypeMismatch.show && (_jsx("div", { style: {
                         height: toggleMode === 'SQL Editor' ? '100%' : 0,
                         overflow: 'hidden',
-                    }, children: _jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
+                    }, children: _jsx(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) {
@@ -255,6 +286,10 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                                     type: 'SET_ACTIVE_COMPONENT',
                                     payload: 'Dashboards',
                                 });
+                                dispatch({
+                                    type: 'SET_SELECTED_DASHBOARD',
+                                    payload: dashboard,
+                                });
                                 state.navigateToDashboardManager();
                             }
                         }, containerStyle: {
@@ -264,5 +299,5 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                             // paddingTop: 25,
                         }, organizationName: state.organizations.find((org) => {
                             return (org.id && String(org.id) === String(state.organizationId));
-                        })?.name, ButtonComponent: ButtonPrimitive }) }))] }) }));
+                        })?.name }) }))] }) }));
 }

package/dist/esm/public_components/DashboardManager.d.ts.map

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

package/dist/esm/public_components/DashboardManager.js

@@ -2,43 +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: {
@@ -58,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(() => {
@@ -88,7 +81,7 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
     useEffect(() => {
         let isSubscribed = true;
         if (isSubscribed) {
-            getDashNames();
+            getDashNames(state.selectedDashboard?.name || '');
         }
         return () => {
             isSubscribed = false;
@@ -143,21 +136,10 @@ 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,
-    ]);
+    }, [state.selectedDashboard, state.organizationId, state.client]);
     return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -183,7 +165,7 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                             borderLeftWidth: 0,
                             borderRightWidth: 0,
                             borderStyle: 'solid',
-                            borderColor: state.theme.borderColor,
+                            borderColor: state.theme?.borderColor,
                             paddingBottom: 20,
                             // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
                             //   paddingRight: '50px',
@@ -208,17 +190,18 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                                                             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: dashboard,
+                                                            payload: selectedDashboard,
                                                         });
-                                                    }, dashboard: state.selectedDashboard ? state.selectedDashboard : '', theme: state.theme, onClickNewDashboard: () => {
+                                                    }, dashboard: state.selectedDashboard
+                                                        ? state.selectedDashboard.name
+                                                        : '', 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',
@@ -263,64 +246,45 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                                                                 paddingLeft: 12,
                                                                 borderRadius: 4,
                                                                 cursor: 'pointer',
-                                                            }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag ? null : (_jsx(Dashboard, { name: state.selectedDashboard, containerStyle: { padding: 25 }, 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) => {
+                                                            }, 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);
-                                }, 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();
+                                }, onSave: async (dashName) => {
+                                    await getDashNames(dashName);
                                     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) => {
+                                    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: (name) => {
-                                    dispatch({ type: 'SET_SELECTED_DASHBOARD', payload: name });
+                                }, onSave: (dashboard) => {
+                                    dispatch({
+                                        type: 'SET_SELECTED_DASHBOARD',
+                                        payload: dashboard,
+                                    });
                                     dispatch({
                                         type: 'SET_DASHBOARDS',
-                                        payload: [...state.dashboards, { name }],
+                                        payload: [...state.dashboards, { ...dashboard }],
                                     });
                                     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: () => {
+                                    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();
-                                }, 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 })] }))] }), _jsx(ReportWrapper, { isOpen: state.activeComponent === 'Report', setIsOpen: (isOpen) => {
+                                    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();
+                    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,2CA8VA"}
+{"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"}