@quillsql/admin 1.4.0 → 1.5.2

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

@@ -10,7 +10,6 @@ const AdminProvider_1 = require("../../AdminProvider");
 const ConnectionClient_1 = require("../../api/ConnectionClient");
 const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"));
 const UiComponents_1 = require("../../components/UiComponents");
-const react_3 = require("@quillsql/react");
 const CreateSqlViews_1 = require("../client_onboard/CreateSqlViews");
 const DynamicBanner_1 = __importDefault(require("../../components/DynamicBanner"));
 function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent = () => (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}), Button = UiComponents_1.MemoizedButton, TextInput = UiComponents_1.MemoizedTextInput, Header = UiComponents_1.MemoizedHeader, allTableData, schemaIsLoading, }) {
@@ -82,6 +81,15 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
         }
         setRunQueryButtonLabel('Run query');
         setErrorInfo({ show: false, message: '' });
+        // stringify all rows that are either jsonb or json
+        resp.rows = resp.rows.map((row) => {
+            for (const key in row) {
+                if (typeof row[key] === 'object') {
+                    row[key] = JSON.stringify(row[key]);
+                }
+            }
+            return row;
+        });
         setTableData(resp);
         setViewAddable(true);
         setRanViewQuery(query);
@@ -116,12 +124,14 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
                             }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                         paddingLeft: '20px',
                                         paddingRight: '30px',
-                                    }, children: (0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Search...", onChange: (e) => {
+                                    }, children: (0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Search...", 
+                                        // @ts-ignore
+                                        onChange: (e) => {
                                             setTableSearchQuery(e);
                                             setDisplayedTableData(allTableData.filter((table) => table.tableName
                                                 .toLowerCase()
                                                 .includes(e.toLowerCase().trim())));
-                                        }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), (0, jsx_runtime_1.jsx)(react_3.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 gap: 20,
                                 flexDirection: 'column',
@@ -136,10 +146,13 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
                                         justifyContent: 'space-between',
                                         gap: 20,
                                         width: '100%',
-                                    }, children: [(0, jsx_runtime_1.jsx)(TextInput, { onChange: (e) => {
+                                    }, children: [(0, jsx_runtime_1.jsx)(TextInput
+                                        // @ts-ignore
+                                        , { 
+                                            // @ts-ignore
+                                            onChange: (e) => {
                                                 setAIPrompt(e);
                                             }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '95%' }), (0, jsx_runtime_1.jsx)(Button, { label: askAIButton, onClick: handleRunSqlPrompt, width: "100px" })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: editViewQuery, setValue: (e) => {
-                                        setErrorInfo({ show: false, message: '' });
                                         setEditViewQuery(e);
                                     } }), (0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: runQueryButtonLabel, onClick: handleRunQuery }) }), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                         fontSize: 15,
@@ -156,6 +169,6 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
-                                    }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
+                                    }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
 }
 exports.default = CreateEditSqlView;

package/dist/cjs/modals/NewDashboardModal.js

@@ -104,7 +104,7 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
         const body = {
             newDashboardName: selectedDashboardName,
             filters: updatedFilters,
-            dateFilter: {
+            dateFilter: showDateFilter && {
                 ...newDateFilter,
                 comparison: isDateComparison,
                 primaryRange: initialRange,

package/dist/cjs/modals/ReorderDashboardModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/ReorderDashboardModal.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf;;;;;;;;;CAAA,2CAiMA"}
+{"version":3,"file":"ReorderDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/ReorderDashboardModal.tsx"],"names":[],"mappings":"AA0BA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf;;;;;;;;;CAAA,2CAuKA"}

package/dist/cjs/modals/ReorderDashboardModal.js

@@ -4,18 +4,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = require("react");
 const AdminProvider_1 = require("../AdminProvider");
-const Admin_1 = require("../Admin");
 const constants_1 = require("../utils/constants");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const core_1 = require("@dnd-kit/core");
+const react_2 = require("@quillsql/react");
 function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }) {
     // const [client] = useContext(ClientContext);
     const [dashboardItems, setDashboardItems] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
-    const [chartType, setChartType] = (0, react_1.useState)('metric');
     const [doesDashboardHaveTables, setDoesDashboardHaveTables] = (0, react_1.useState)(false);
     const [doesDashboardHaveCharts, setDoesDashboardHaveCharts] = (0, react_1.useState)(false);
     const [doesDashboardHaveMetrics, setDoesDashboardHaveMetrics] = (0, react_1.useState)(false);
-    const [orderArray, setOrderArray] = (0, react_1.useState)([]);
     const [itemMap, setItemMap] = (0, react_1.useState)(null);
+    const [metrics, setMetrics] = (0, react_1.useState)([]);
+    const [charts, setCharts] = (0, react_1.useState)([]);
+    const [tables, setTables] = (0, react_1.useState)([]);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     (0, react_1.useEffect)(() => {
         async function getDashboardItems() {
@@ -40,6 +44,9 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
                 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)));
             setLoading(false);
         }
         if (selectedDashboard && state.client) {
@@ -62,66 +69,174 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
         });
         setItemMap(itemMap);
     }, [dashboardItems]);
-    const closeModal = () => {
-        setIsOpen(false);
+    const handleSaveChanges = async () => {
+        if (!client)
+            return;
+        if (!dashboardItems.length)
+            return;
+        try {
+            const response = await fetch(`${constants_1.QUILL_SERVER}/dashorder/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    publicKey: client._id,
+                    orderArray: [...metrics, ...charts, ...tables],
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(`Error: ${errorData.error || 'Unknown error'}`);
+            }
+            await response.json();
+            onSave();
+            setIsOpen(false);
+        }
+        catch (error) {
+            console.error('An unknown error occurred in ReorderDashboardModal');
+            console.error(error.message);
+        }
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                position: 'relative',
-                minWidth: 700,
-                maxWidth: 700,
-                minHeight: 700,
-                zIndex: 100,
-                // overflowY: "scroll",
-            }, children: [loading ? (0, jsx_runtime_1.jsx)("div", { children: 'Loading...' }) : null, dashboardItems.length > 0 && itemMap.size > 0 && ((0, jsx_runtime_1.jsx)(Admin_1.ReorderableList, { itemMap: itemMap, client: client, initialItems: dashboardItems.filter((elem) => chartType === 'chart'
-                        ? elem.chartType !== 'metric' && elem.chartType !== 'table'
-                        : elem.chartType === chartType), ButtonComponent: ButtonComponent, closeModal: closeModal, onSave: onSave })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        height: 80,
-                        background: 'white',
-                        width: 700,
-                        position: 'absolute',
-                        top: -20,
-                        left: 0,
-                        right: 20,
-                        paddingTop: 20,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 22, fontWeight: 600 }, children: "Reorder items" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                background: '#f7f7f7',
-                                borderRadius: 6,
-                                height: 32,
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                paddingLeft: 4,
-                                paddingRight: 4,
-                            }, children: [doesDashboardHaveMetrics && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'metric' ? 'white' : undefined,
-                                        color: chartType === 'metric' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'metric' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('metric'), children: "Metrics" })), doesDashboardHaveCharts && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'chart' ? 'white' : undefined,
-                                        color: chartType === 'chart' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'chart' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('chart'), children: "Charts" })), doesDashboardHaveTables && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'table' ? 'white' : undefined,
-                                        color: chartType === 'table' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'table' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('table'), children: "Tables" }))] })] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: {
+            gap: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'calc(100vw - 80px)',
+            height: 'calc(100vh - 80px)',
+        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 22, fontWeight: 600, width: '100%' }, children: "Reorder Items" }), loading ? (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }) : null, (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 20,
+                    overflowY: 'auto',
+                    width: '100%',
+                    height: 'calc(100% - 20px)',
+                    zIndex: 100,
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: dashboardItems.length > 0 && itemMap.size > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [doesDashboardHaveMetrics && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'metrics', items: metrics, setItems: setMetrics })), doesDashboardHaveCharts && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'charts', items: charts, setItems: setCharts })), doesDashboardHaveTables && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'tables', items: tables, setItems: setTables }))] })) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'right',
+                }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSaveChanges, label: "Save changes" }) })] }));
 }
 exports.default = ReorderDashboardModal;
+const SortableItem = (props) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: props.id });
+    const style = {
+        transform: utilities_1.CSS.Translate.toString(transform),
+        transition,
+        display: 'flex',
+        width: props.chartType === 'table' ? '100%' : '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: '10px',
+        border: '1px solid #E7E7E7',
+        boxShadow: '0px 2px 8px 0px rgba(56, 65, 81, 0.08)',
+        cursor: 'grab',
+        userSelect: 'none',
+        background: 'white',
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, style: style, ...attributes, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                cursor: 'pointer',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }, ...listeners, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    padding: 20,
+                    width: '100%',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            paddingBottom: props.chartType === 'table' ? 10 : 0,
+                        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                    fontSize: 18,
+                                    fontWeight: '500',
+                                    flexGrow: 1,
+                                }, children: props.value }), (0, jsx_runtime_1.jsx)(HandleButton, {})] }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: props.id, containerStyle: {
+                            padding: 10,
+                            height: props.chartType === 'metric' ? 80 : 250,
+                            width: 'calc(100% - 20px)',
+                        } })] }) }) }));
+};
+function ReorderableGrid({ type, items, setItems }) {
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }), (0, core_1.useSensor)(core_1.TouchSensor, {
+        activationConstraint: '',
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        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 (0, sortable_1.arrayMove)(itemList, oldIndex, newIndex);
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)("div", { style: type === 'tables'
+                ? {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 20,
+                }
+                : {
+                    boxSizing: 'content-box',
+                    width: '100%',
+                    listStyleType: 'none',
+                    display: 'grid',
+                    gap: 20,
+                    gridTemplateColumns: `repeat(auto-fill,minmax(400px, 1fr))`,
+                    gridTemplateRows: `repeat(${170}px)`,
+                }, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item._id), strategy: sortable_1.rectSortingStrategy, children: items.map((item) => ((0, jsx_runtime_1.jsx)(SortableItem, { handle: true, id: item._id, chartType: items.find((itm) => itm._id === item._id)?.chartType ?? 'chart', value: items.find((itm) => itm._id === item._id)?.name ?? item._id }, item._id))) }) }) }));
+}
+function HandleButton() {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            gap: 2,
+            flexDirection: 'row',
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 8,
+            paddingRight: 8,
+            borderRadius: 4,
+        }, className: "handle", children: [(0, jsx_runtime_1.jsx)("style", { children: `.handle{background:white;} .handle:hover{background:rgba(0,0,0,0.03);}` }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] })] }));
+}

package/dist/cjs/primitives/ModalPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/primitives/ModalPrimitive.js

@@ -34,8 +34,6 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     maxHeight: '90vh',
                     minWidth: 462,
                     display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
                     transform: 'translateX(-50%) translateY(-50%)',
                     background: 'white',
                     borderRadius: 8,
@@ -43,6 +41,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
                     padding: 30,
+                    overflow: 'auto',
                     ...style,
                 }, children: children })] }));
 };

package/dist/cjs/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;AAS5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CA0TA"}
+{"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"}

package/dist/cjs/public_components/DashboardBuilder.js

@@ -12,6 +12,8 @@ const react_2 = require("@quillsql/react");
 const constants_1 = require("../utils/constants");
 const Banner_1 = __importDefault(require("../components/Banner"));
 const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
+const primitives_1 = require("../primitives");
+const modeToggleOptions = ['SQL Editor', 'Report Builder'];
 function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
     const parentRef = (0, react_1.useRef)(null);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
@@ -32,6 +34,7 @@ function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEdito
     const [fields, setFields] = (0, react_1.useState)([]);
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
+    const [toggleMode, setToggleMode] = (0, react_1.useState)('SQL Editor');
     (0, react_1.useEffect)(() => {
         if (state.activeQuery) {
             setIsEditActive(true);
@@ -169,18 +172,57 @@ function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEdito
                             alignItems: 'flex-end',
                             justifyContent: 'space-between',
                             width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                            fontSize: '14px',
-                                            paddingTop: '0px',
-                                            marginTop: '0px',
-                                            marginBottom: '4px',
-                                            fontWeight: '600',
-                                            color: state.theme.secondaryTextColor,
-                                            fontFamily: state.theme.fontFamily,
-                                            userSelect: 'none',
-                                        }, children: "Environment" }), (0, jsx_runtime_1.jsx)(components_1.EnvSelectPopover, { setEnvironment: (env) => {
-                                            dispatch({ type: 'SET_ENVIRONMENT', payload: env });
-                                        }, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => {
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                                    fontSize: '14px',
+                                                    paddingTop: '0px',
+                                                    marginTop: '0px',
+                                                    marginBottom: '4px',
+                                                    fontWeight: '600',
+                                                    color: state.theme.secondaryTextColor,
+                                                    fontFamily: state.theme.fontFamily,
+                                                    userSelect: 'none',
+                                                }, children: "Environment" }), (0, jsx_runtime_1.jsx)(components_1.EnvSelectPopover, { setEnvironment: (env) => {
+                                                    dispatch({ type: 'SET_ENVIRONMENT', payload: env });
+                                                }, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', marginTop: 'auto', height: 38 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                borderRadius: '0.25rem',
+                                                borderStyle: 'none',
+                                                outlineStyle: 'none',
+                                                background: '#F9FAFB',
+                                                paddingLeft: 3,
+                                                paddingRight: 3,
+                                                paddingTop: 4,
+                                                paddingBottom: 4,
+                                            }, children: modeToggleOptions.map((label) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setToggleMode(label), style: {
+                                                    borderRadius: '0.25rem',
+                                                    borderWidth: '1px',
+                                                    fontSize: '14px',
+                                                    outlineStyle: 'none',
+                                                    transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+                                                    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                                                    transitionDuration: '300ms',
+                                                    margin: '0px',
+                                                    paddingTop: '0.375rem',
+                                                    paddingBottom: '0.375rem',
+                                                    paddingLeft: '0.75rem',
+                                                    paddingRight: '0.75rem',
+                                                    ...(label === toggleMode
+                                                        ? {
+                                                            fontWeight: 600,
+                                                            backgroundColor: '#ffffff',
+                                                            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                                                            color: '#212121',
+                                                            borderColor: '#e7e7e7',
+                                                        }
+                                                        : {
+                                                            borderColor: 'transparent',
+                                                            fontWeight: 500,
+                                                            backgroundColor: 'transparent',
+                                                            color: '#606572',
+                                                        }),
+                                                }, children: label }, label))) }) })] }), !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => {
                                     dispatch({ type: 'SET_ENVIRONMENT', payload: env });
                                 }, organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => {
                                     dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId });
@@ -190,23 +232,43 @@ function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEdito
                             return;
                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                    } })), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), sqlEditor && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(react_2.SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
-                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                        if (state.navigateToDashboardManager) {
-                            dispatch({
-                                type: 'SET_ACTIVE_COMPONENT',
-                                payload: 'Dashboards',
-                            });
-                            state.navigateToDashboardManager();
-                        }
-                    }, containerStyle: {
-                        height: 'calc(100% - 96px)',
-                        width: '100%',
-                        // paddingRight: 25,
-                        // paddingTop: 25,
-                    }, organizationName: state.organizations.find((org) => {
-                        return (org.id && String(org.id) === String(state.organizationId));
-                    })?.name }))] }) }));
+                    } })), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        // Toggle the height of the container so they both stay in the DOM
+                        // and don't refetch when switching back and forth.
+                        height: toggleMode === 'Report Builder' ? '100%' : 0,
+                        overflow: 'hidden',
+                    }, children: (0, jsx_runtime_1.jsx)(react_2.ReportBuilder, { admin: true, initialTableName: state.tables.length > 0 && state.tables[0].name, onAddToDashboardComplete: () => {
+                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                            if (state.navigateToDashboardManager) {
+                                dispatch({
+                                    type: 'SET_ACTIVE_COMPONENT',
+                                    payload: 'Dashboards',
+                                });
+                                state.navigateToDashboardManager();
+                            }
+                        }, organizationName: state.organizations.find((org) => {
+                            return (org.id && String(org.id) === String(state.organizationId));
+                        })?.name }) }), sqlEditor && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        height: toggleMode === 'SQL Editor' ? '100%' : 0,
+                        overflow: 'hidden',
+                    }, children: (0, jsx_runtime_1.jsx)(react_2.SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
+                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                            if (state.navigateToDashboardManager) {
+                                dispatch({
+                                    type: 'SET_ACTIVE_COMPONENT',
+                                    payload: 'Dashboards',
+                                });
+                                state.navigateToDashboardManager();
+                            }
+                        }, containerStyle: {
+                            height: '100%',
+                            width: '100%',
+                            // paddingRight: 25,
+                            // paddingTop: 25,
+                        }, organizationName: state.organizations.find((org) => {
+                            return (org.id && String(org.id) === String(state.organizationId));
+                        })?.name, ButtonComponent: primitives_1.ButtonPrimitive }) }))] }) }));
 }
 exports.default = DashboardBuilder;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAgCnE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAkkBA"}
+{"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"}