@quillsql/admin 1.6.1 → 1.6.3

package/dist/cjs/modals/PromoteReportModal.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PromoteReportModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+const react_2 = require("@quillsql/react");
+function PromoteReportModal({ ModalComponent, HeaderComponent, ButtonComponent, SelectComponent, CheckboxComponent, isOpen, setIsOpen, reportId, currentClientId, currentDashboardName, }) {
+    const { state, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    const { dashboards } = (0, react_2.useDashboards)();
+    const [selectedClientId, setSelectedClientId] = (0, react_1.useState)(currentClientId);
+    const [dashboardName, setDashboardName] = (0, react_1.useState)(null);
+    const [autoPromoteVirtualTables, setAutoPromoteVirtualTables] = (0, react_1.useState)(true);
+    const [dashboardNameMap, setDashboardNameMap] = (0, react_1.useState)({ [currentClientId]: dashboards?.map((d) => d.name) || [] });
+    const getDashboardNames = async (clientId) => {
+        const { data } = await quillFetchWithToken({
+            client: {
+                queryEndpoint: state.queryEndpoint,
+                queryHeaders: state.queryHeaders,
+                clientId,
+                withCredentials: !!state.withCredentials,
+            },
+            task: 'dashnames',
+            metadata: {
+                clientId,
+            },
+            adminMode: true,
+        });
+        setDashboardNameMap((prev) => ({
+            ...prev,
+            [clientId]: data.dashboardNames || [],
+        }));
+    };
+    const handlePromote = async (skipWarning = false) => {
+        if (!selectedClientId) {
+            return;
+        }
+        try {
+            const respJson = await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: currentClientId,
+                    queryHeaders: state.queryHeaders,
+                    withCredentials: !!state.withCredentials,
+                },
+                task: 'promote-item',
+                metadata: {
+                    clientId: currentClientId,
+                    fromClientId: currentClientId,
+                    toClientId: selectedClientId,
+                    dashboardName: dashboardName,
+                    itemId: reportId,
+                    skipWarning,
+                    addMissingTables: autoPromoteVirtualTables,
+                },
+                adminMode: true,
+            });
+            if (respJson?.error) {
+                alert(respJson?.error);
+                return;
+            }
+            const data = respJson?.data;
+            if (data.error) {
+                alert(data.error);
+                return;
+            }
+            else if (data.tableErrors?.length > 0) {
+                alert(`Could not promote report:\n\n${data.tableErrors
+                    .map((error) => {
+                    return `Error promoting virtual table ${error.table}: ${error.error}`;
+                })
+                    .join('\n\n')}`);
+                return;
+            }
+            else if (!skipWarning && data.warning) {
+                if (confirm(`${data.warning}\n\nContinue?`)) {
+                    handlePromote(true);
+                }
+                return;
+            }
+            alert('Report promoted successfully.');
+        }
+        catch (error) {
+            console.error('Promotion failed:', error);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
+            setIsOpen(false);
+        }, setIsOpen: setIsOpen, width: 500, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+                maxHeight: 600,
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Promote Report" }), (0, jsx_runtime_1.jsx)("div", { id: "promote-report-description", style: { marginBottom: 16 }, children: "Copy this report to another dashboard." }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 12,
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { options: state.clients.map((client) => {
+                                        return { label: client.name, value: client._id };
+                                    }), onChange: (e) => {
+                                        const id = e.target.value;
+                                        setSelectedClientId(id);
+                                        if (id && !dashboardNameMap[id]) {
+                                            getDashboardNames(id);
+                                        }
+                                    }, value: selectedClientId, theme: state.theme, width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { options: (dashboardNameMap[selectedClientId || ''] || [])
+                                        .filter((name) => selectedClientId !== currentClientId ||
+                                        name !== currentDashboardName)
+                                        .map((name) => {
+                                        return { label: name, value: name };
+                                    }), onChange: (e) => {
+                                        const name = e.target.value;
+                                        setDashboardName(name);
+                                    }, isLoading: dashboardNameMap[selectedClientId || ''] === undefined, value: dashboardName, theme: state.theme, width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                gap: 12,
+                            }, children: [(0, jsx_runtime_1.jsx)(CheckboxComponent, { label: "Add missing tables", isChecked: autoPromoteVirtualTables, onChange: () => {
+                                        setAutoPromoteVirtualTables(!autoPromoteVirtualTables);
+                                    }, labelStyle: {
+                                        color: '#666666',
+                                        fontSize: '13px',
+                                        fontWeight: 400,
+                                    } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                                        handlePromote();
+                                        setIsOpen(false);
+                                    }, label: "Promote Report", disabled: !selectedClientId || !dashboardName, width: 160 })] })] })] }) }));
+}

package/dist/cjs/modals/PromoteViewModal.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-interface PromoteViewModalProps {
+interface PromoteVirtualTableProps {
     ModalComponent: React.ComponentType<any>;
+    HeaderComponent: React.ComponentType<any>;
+    ButtonComponent: React.ComponentType<any>;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
     clientId: string;
     client: any;
-    views: any[];
+    view: string;
     clients: any[];
-    parentRef: any;
 }
-export default function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, parentRef, }: PromoteViewModalProps): import("react/jsx-runtime").JSX.Element;
+export default function PromoteVirtualTableModal({ ModalComponent, HeaderComponent, ButtonComponent, isOpen, setIsOpen, clientId, client, clients, view, }: PromoteVirtualTableProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PromoteViewModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":";AAOA,UAAU,qBAAqB;IAC7B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,GAAG,CAAC;CAChB;AAgED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,2CAuGvB"}
+{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,cAAc,EACd,eAAe,EACf,eAAe,EACf,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,GACL,EAAE,wBAAwB,2CA2H1B"}

package/dist/cjs/modals/PromoteViewModal.js

@@ -1,118 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PromoteVirtualTableModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Admin_1 = require("../Admin");
-const components_1 = require("../components");
 const react_1 = require("react");
-const constants_1 = require("../utils/constants");
-const QuillSelect_1 = require("../components/QuillSelect");
-const createStyles = (theme) => ({
-    modalContent: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    modalHeader: {
-        fontWeight: '600',
-        fontSize: 20,
-        paddingBottom: 4,
-        color: theme.primaryTextColor,
-    },
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        gap: '5px',
-        marginTop: 20,
-    },
-    multiContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: '20px',
-        marginTop: 20,
-    },
-    header: {
-        fontSize: theme.fontSize,
-        paddingTop: '0px',
-        marginTop: '0px',
-        marginBottom: '0px',
-        fontWeight: theme.labelFontWeight,
-        color: theme.primaryTextColor,
-    },
-    text: {
-        fontSize: theme.fontSize,
-        paddingTop: '0px',
-        marginTop: '0px',
-        marginBottom: '4px',
-        fontWeight: theme.labelFontWeight,
-        color: theme.secondaryTextColor,
-    },
-    group: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        gap: '5px',
-    },
-    button: {
-        flexGrow: 1,
-        fontSize: theme.fontSize,
-        fontWeight: '600',
-        padding: '10px 20px',
-        marginTop: 20,
-        backgroundColor: theme.primaryButtonColor,
-        borderRadius: '5px',
-        color: theme.primaryButtonTextColor,
-        width: '40px',
-    },
-});
-function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, parentRef, }) {
-    const [modalSelectedView, setModalSelectedView] = (0, react_1.useState)(views[0]);
-    const [selectedToClient, setSelectedToClient] = (0, react_1.useState)(clients[0]);
-    const modalRef = (0, react_1.useRef)(null);
+const QuillSelectWithCombo_1 = require("../components/QuillSelectWithCombo");
+const AdminProvider_1 = require("../AdminProvider");
+function PromoteVirtualTableModal({ ModalComponent, HeaderComponent, ButtonComponent, isOpen, setIsOpen, clientId, client, clients, view, }) {
+    const { state, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    const [selectedClientId, setClientId] = (0, react_1.useState)(undefined);
     (0, react_1.useEffect)(() => {
-        setModalSelectedView(views[0]);
-        setSelectedToClient(clients[0]);
-    }, [views, clients]);
-    const styles = createStyles(Admin_1.theme);
-    const handlePromote = async () => {
+        setClientId(clients[0].id);
+    }, [clients]);
+    const handlePromote = async (skipWarning = false) => {
+        if (!selectedClientId) {
+            return;
+        }
         try {
-            const response = await fetch(`${constants_1.QUILL_SERVER}/promote_view/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer ',
+            const respJson = await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    queryHeaders: state.queryHeaders,
+                    clientId,
+                    withCredentials: !!state.withCredentials,
                 },
-                body: JSON.stringify({
-                    viewName: modalSelectedView.name,
+                task: 'promote-view',
+                metadata: {
+                    clientId,
+                    viewName: view,
                     fromClientId: clientId,
-                    toClientId: selectedToClient._id,
-                }),
+                    toClientId: selectedClientId,
+                    skipWarning,
+                },
+                adminMode: true,
             });
-            if (!response.ok) {
-                throw new Error('API request failed');
+            if (respJson?.error) {
+                alert(respJson?.error);
+                return;
+            }
+            const data = respJson?.data;
+            if (data.error) {
+                alert(data.error);
+                return;
             }
-            const data = await response.json();
+            else if (!skipWarning && data.warning) {
+                if (confirm(`${data.warning}\n\nContinue?`)) {
+                    handlePromote(true);
+                }
+                return;
+            }
+            alert('Virtual Table promoted successfully.');
         }
         catch (error) {
             console.error('Promotion failed:', error);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Promote Changes', width: 500, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
+            setIsOpen(false);
+        }, setIsOpen: setIsOpen, title: 'Promote Changes', width: 500, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
-                padding: '20px',
                 boxSizing: 'border-box',
                 maxHeight: 600,
-            }, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { options: views.map((v) => ({ label: v.name, value: v })), onChange: setModalSelectedView, value: modalSelectedView, theme: Admin_1.theme, label: "SQL View:" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From:" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: Admin_1.theme, disabled: true }) })] }), (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { options: clients.map((c) => ({ label: c.name, value: c })), onChange: setSelectedToClient, value: selectedToClient, theme: Admin_1.theme, label: "To:" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Promote Virtual Table" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: 12,
+                        marginTop: 12,
+                    }, children: [(0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { options: [{ label: client.name, value: clientId }], onChange: () => { }, value: clientId, disabled: true, width: 200, label: "From:" }), (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { options: clients
+                                .filter((c) => c._id !== clientId)
+                                .map((c) => ({ label: c.name, value: c._id })), onChange: (e) => {
+                                setClientId(e.target.value);
+                            }, value: selectedClientId, width: 200, label: "To:" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
-                        justifyContent: 'flex-start',
+                        justifyContent: 'flex-end',
                         alignItems: 'center',
-                        width: 200,
-                    }, children: (0, jsx_runtime_1.jsx)("button", { style: styles.button, onClick: () => {
+                        marginTop: 12,
+                    }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
                             handlePromote();
                             setIsOpen(false);
-                        }, children: "Promote SQL View" }) })] }) }));
+                        }, label: "Promote Virtual Table", disabled: !selectedClientId, width: 160 }) })] }) }));
 }
-exports.default = PromoteViewModal;

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

@@ -1,4 +1,4 @@
-export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }: {
+export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, }: {
     isOpen: any;
     setIsOpen: any;
     client: any;
@@ -6,6 +6,5 @@ export default function ReorderDashboardModal({ isOpen, setIsOpen, client, onSav
     ModalComponent: any;
     ButtonComponent: any;
     selectedDashboard: any;
-    organizationId: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReorderDashboardModal.d.ts.map

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

@@ -1 +1 @@
-{"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,2CAqLA"}
+{"version":3,"file":"ReorderDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/ReorderDashboardModal.tsx"],"names":[],"mappings":"AAyBA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EACf,iBAAiB,GAClB;;;;;;;;CAAA,2CA6LA"}

package/dist/cjs/modals/ReorderDashboardModal.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ReorderDashboardModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = require("react");
@@ -10,8 +11,9 @@ const utilities_1 = require("@dnd-kit/utilities");
 const core_1 = require("@dnd-kit/core");
 const react_2 = require("@quillsql/react");
 const UiComponents_1 = require("../components/UiComponents");
-function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }) {
-    const { state } = (0, AdminProvider_1.useAdmin)();
+// TODO: DEPRECATED
+function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, }) {
+    const { state, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
     const [sections, setSections] = (0, react_1.useState)([]);
     const [metrics, setMetrics] = (0, react_1.useState)({});
     const [charts, setCharts] = (0, react_1.useState)({});
@@ -19,23 +21,30 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
     const [loading, setLoading] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         async function getDashboardItems() {
-            const { _id, environment } = state.client;
             setLoading(true);
-            const url = new URL(`${constants_1.QUILL_SERVER}/dashconfig`);
-            // Add query parameters to the URL
-            url.search = new URLSearchParams({
-                publicKey: _id,
-                orgId: organizationId,
-                name: selectedDashboard,
-            }).toString();
-            const response = await fetch(url, {
-                method: 'GET',
-                headers: {
-                    environment: environment || undefined,
+            const responseData = await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: state.client.id,
+                    queryHeaders: state.queryHeaders,
+                    withCredentials: !!state.withCredentials,
                 },
+                task: 'dashboard',
+                metadata: {
+                    name: selectedDashboard,
+                    clientId: state.client.id,
+                    databaseType: state.client.databaseType,
+                    useNewNodeSql: true,
+                    tenants: state.selectedTenantField === constants_1.SINGLE_TENANT
+                        ? [constants_1.SINGLE_TENANT]
+                        : state.currentTenantIdentity,
+                    flags: state.selectedTenantField === constants_1.SINGLE_TENANT
+                        ? state.selectedTenantValues
+                        : undefined,
+                },
+                adminMode: true,
             });
-            const responseData = await response.json();
-            const sections = responseData.sections;
+            const sections = responseData.data.sections;
             setSections(Object.keys(sections));
             const isMetric = (elem) => elem.chartType === 'metric';
             const isChart = (elem) => !['metric', 'table'].includes(elem.chartType);
@@ -53,6 +62,7 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
         if (!client)
             return;
         try {
+            // THIS IS DEPRECATED BECAUSE THE COMPONENT ISN'T USED
             const response = await fetch(`${constants_1.QUILL_SERVER}/dashorder/`, {
                 method: 'POST',
                 headers: {
@@ -66,6 +76,7 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
                         ...Object.values(tables).flat(),
                     ],
                 }),
+                credentials: state.withCredentials ? 'include' : 'omit',
             });
             if (!response.ok) {
                 const errorData = await response.json();
@@ -80,7 +91,7 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
             console.error(error.message);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: {
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), style: {
             gap: 20,
             display: 'flex',
             flexDirection: 'column',
@@ -112,7 +123,6 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
                     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 = {
@@ -152,9 +162,13 @@ const SortableItem = (props) => {
                                     flexGrow: 1,
                                 }, children: props.value }), (0, jsx_runtime_1.jsx)(HandleButton, {})] }), (0, jsx_runtime_1.jsx)(react_2.Chart, { reportId: props.id, containerStyle: {
                             padding: 10,
-                            height: props.chartType === 'metric' ? 80 : 250,
+                            height: props.chartType === 'metric'
+                                ? 80
+                                : props.chartType === 'table'
+                                    ? 420
+                                    : 250,
                             width: 'calc(100% - 20px)',
-                        } })] }) }) }));
+                        }, hideFilters: true, hideDateRangeFilter: true })] }) }) }));
 };
 function ReorderableGrid({ type, section, items, setItems }) {
     if (!items)

package/dist/cjs/modals/SavedQueriesModal.d.ts

@@ -0,0 +1,7 @@
+export default function SavedQueriesModal({ ModalComponent, isOpen, setIsOpen, }: {
+    ModalComponent: any;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    clientId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SavedQueriesModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedQueriesModal.d.ts","sourceRoot":"","sources":["../../../src/modals/SavedQueriesModal.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,MAAM,EACN,SAAS,GACV,EAAE;IACD,cAAc,EAAE,GAAG,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;CAClB,2CA0FA"}

package/dist/cjs/modals/SavedQueriesModal.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SavedQueriesModal;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+const react_3 = require("@quillsql/react");
+const primitives_1 = require("../primitives");
+const report_1 = require("../utils/report");
+const UiComponents_1 = require("../components/UiComponents");
+const prism_react_renderer_1 = require("prism-react-renderer");
+function SavedQueriesModal({ ModalComponent, isOpen, setIsOpen, }) {
+    const parentRef = (0, react_2.useRef)(null);
+    const { dispatch } = (0, AdminProvider_1.useAdmin)();
+    const [modalWidth, setModalWidth] = (0, react_2.useState)(200);
+    const [modalHeight, setModalHeight] = (0, react_2.useState)(200);
+    const handleResize = (0, react_2.useCallback)(() => {
+        const screenSize = window.innerWidth;
+        if (screenSize < 1200) {
+            setModalWidth(undefined); // use dynamic width of contents
+        }
+        else {
+            setModalWidth(window.innerWidth - 80);
+        }
+        setModalHeight(window.innerHeight - 80);
+    }, []);
+    (0, react_2.useEffect)(() => {
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    const dashboardSectionComponent = (0, react_2.useMemo)(() => {
+        return ({ children }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, 300px)',
+                // gridTemplateRows: 'repeat(auto-fill, 130px)',
+                gap: 20,
+                marginTop: -20,
+            }, children: children }));
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: parentRef, children: (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: "Saved Queries", width: modalWidth, height: modalHeight, children: (0, jsx_runtime_1.jsx)(react_3.Dashboard, { name: `quill-saved-queries`, containerStyle: { paddingLeft: 20, paddingRight: 20 }, EmptyDashboardComponent: () => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        border: '1px #e7e7e7 solid',
+                        borderRadius: 6,
+                        gap: 12,
+                        padding: 20,
+                        marginLeft: 20,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        maxWidth: 300,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                fontSize: 14,
+                                fontWeight: 500,
+                                color: 'rgb(54, 65, 83)',
+                            }, children: "No saved queries yet." }), (0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Create saved query \u2197", onClick: () => {
+                                dispatch({
+                                    type: 'SET_ACTIVE_COMPONENT',
+                                    payload: 'SQL Editor',
+                                });
+                            } })] })), DashboardSectionComponent: dashboardSectionComponent, TableComponent: ({ report }) => (0, jsx_runtime_1.jsx)(SavedQueryTile, { report: report }) }) }) }));
+}
+function SavedQueryTile({ report }) {
+    const { state, dispatch, getToken } = (0, AdminProvider_1.useAdmin)();
+    const [isOpenableByReportBuilder, setIsOpenableByReportBuilder] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        async function getIsOpenableByReportBuilder() {
+            const hello = await (0, report_1.parseQuillReportToQuillReportInternal)(report, state.client, state.tables, getToken);
+            if (hello.adminError) {
+                return;
+            }
+            setIsOpenableByReportBuilder(true);
+        }
+        getIsOpenableByReportBuilder();
+    }, []);
+    const handleOpenReportInReportBuilder = async () => {
+        dispatch({
+            type: 'SET_ACTIVE_COMPONENT',
+            payload: 'Report Builder',
+        });
+        dispatch({
+            type: 'SET_ACTIVE_SAVED_QUERY_REPORT_ID',
+            payload: report?.id,
+        });
+    };
+    const handleOpenReportInSQLEditor = async () => {
+        dispatch({
+            type: 'SET_ACTIVE_COMPONENT',
+            payload: 'SQL Editor',
+        });
+        dispatch({
+            type: 'SET_ACTIVE_QUERY',
+            payload: report?.queryString,
+        });
+    };
+    if (!report.queryString) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            border: '1px #e7e7e7 solid',
+            borderRadius: 6,
+            gap: 12,
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 16,
+                    fontWeight: 600,
+                    color: 'rgb(54, 65, 83)',
+                }, children: report.name }), (0, jsx_runtime_1.jsx)(SavedQuerySQL, { query: report.queryString }), !isOpenableByReportBuilder ? ((0, jsx_runtime_1.jsx)(UiComponents_1.QuillToolTip, { containerStyle: { display: 'contents' }, text: "Query was created in the SQL Editor so it can't be opened in the Report Builder", enabled: true, children: (0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Open in Report Builder \u2197", disabled: true, onClick: handleOpenReportInReportBuilder }) })) : ((0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Open in Report Builder \u2197", onClick: handleOpenReportInReportBuilder })), (0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Open in SQL Editor \u2197", onClick: handleOpenReportInSQLEditor })] }));
+}
+function SavedQuerySQL({ query }) {
+    return ((0, jsx_runtime_1.jsx)(prism_react_renderer_1.Highlight, { theme: prism_react_renderer_1.themes.nightOwlLight, code: query, language: "tsx", children: ({ className, tokens, style, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
+                ...style,
+                // textAlign: 'left',
+                padding: '1em',
+                height: 90,
+                // width: '100%',
+                // width: 900,
+                borderRadius: 8,
+                overflow: 'auto',
+                border: '1px solid #e7e7e7',
+            }, children: tokens.map((line, i) => ((0, react_1.createElement)("div", { ...getLineProps({ line }), key: i, style: {
+                // wordWrap: 'normal',
+                // whiteSpace: 'normal',
+                } }, line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token }) }, key)))))) })) }));
+}

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

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

package/dist/cjs/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,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,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/cjs/modals/index.js

@@ -3,9 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReorderDashboardModal = exports.PromoteViewModal = exports.PromoteDashModal = void 0;
-var PromoteDashModal_1 = require("./PromoteDashModal");
-Object.defineProperty(exports, "PromoteDashModal", { enumerable: true, get: function () { return __importDefault(PromoteDashModal_1).default; } });
+exports.ReorderDashboardModal = exports.PromoteViewModal = void 0;
 var PromoteViewModal_1 = require("./PromoteViewModal");
 Object.defineProperty(exports, "PromoteViewModal", { enumerable: true, get: function () { return __importDefault(PromoteViewModal_1).default; } });
 var ReorderDashboardModal_1 = require("./ReorderDashboardModal");

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { QuillTheme } from '../Admin';
-type ButtonPrimitiveProps = {
+export type ButtonPrimitiveProps = {
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     label: string;
     theme?: QuillTheme;
     style?: React.CSSProperties;
     variant?: 'primary' | 'secondary' | 'danger';
+    disabled?: boolean;
+    type?: 'submit' | 'button' | 'reset';
 };
 declare const ButtonPrimitive: React.FC<ButtonPrimitiveProps & {
     isLoading?: boolean;