@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/Admin.js

@@ -1,175 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { QuillProvider, useQuill, ChartEditor, ReportBuilder, } from '@quillsql/react';
-import prismTheme from 'prism-react-renderer/themes/nightOwlLight';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import { DashboardManager } from './components';
-import { AdminProvider, useAdmin } from './AdminProvider';
-import { HeaderPrimitive, ModalPrimitive, SelectPrimitive, TextInputPrimitive, } from './primitives';
-import { MemoizedButton, MemoizedSecondaryButton, } from './components/UiComponents';
-import DashboardBuilder from './public_components/DashboardBuilder';
-import SQLViewManager from './public_components/SQLViewManager';
-import { QUILL_SERVER } from './utils/constants';
+import { 
+// QuillProvider,
+ChartEditor, ReportBuilder, useQuill, } from '@quillsql/react';
+import { Highlight, themes } from 'prism-react-renderer';
+// import { DashboardManager } from './components';
+import { 
+// AdminProvider,
+useAdmin, } from './AdminProvider';
+// import {
+//   HeaderPrimitive,
+//   ModalPrimitive,
+//   TextInputPrimitive,
+// } from './primitives';
+import { LoadingSpinner, MemoizedButton,
+// MemoizedSecondaryButton,
+// TextInputComponentProps,
+ } from './components/UiComponents';
+// import ChartQueryBuilder from './public_components/ChartQueryBuilder';
+// import VirtualTableManager from './public_components/VirtualTableManager';
 import { MemoizedModal } from './components/UiComponents';
 import { SQLEditor } from '@quillsql/react';
-import { hasColumnAlias } from './utils/table';
-// chartColors: ["#6269E9", "#E14F62"],
+import QuillTab from './components/QuillTab';
+import { parseQuillReportToQuillReportInternal } from './utils/report';
+import { useDashboardManager } from './hooks/useDashboardManager';
+import PromoteReportModal from './modals/PromoteReportModal';
+import { CheckboxPrimitive, HeaderPrimitive, ModalPrimitive, } from './primitives';
+import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
+import { quillFetch } from './utils/dataFetcher';
 export const defaultTheme = {
-    fontFamily: 'Inter; Helvetica',
-    backgroundColor: '#FFFFFF',
-    primaryTextColor: '#364153',
-    secondaryTextColor: '#6C727F',
-    chartLabelFontFamily: 'Inter; Helvetica',
-    chartLabelColor: '#666666',
-    chartTickColor: '#CCCCCC',
-    chartColors: ['#6269E9', '#E14F62', '#55B5A6', '#E9A23B', '#D0ACCF'],
-    borderColor: '#E5E7EB',
-    primaryButtonColor: '#364153',
-    borderWidth: 1,
-    labelFontWeight: 500,
-    fontSize: 14,
-};
-export default function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
-    return (_jsx(AdminProvider, { publicKey: publicKey, children: _jsx(Navigation, { theme: theme, publicKey: publicKey, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, 
-            // @ts-ignore
-            TextInputComponent: TextInputComponent || TextInputPrimitive, ButtonComponent: ButtonComponent, 
-            // @ts-ignore
-            HeaderComponent: HeaderComponent || HeaderPrimitive, SecondaryButtonComponent: SecondaryButtonComponent, 
-            // @ts-ignore
-            ModalComponent: ModalComponent || ModalPrimitive, environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, 
-            // @ts-ignore
-            SelectComponent: SelectComponent || SelectPrimitive }) }));
-}
-function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, queryEndpoint, queryHeaders, environment, withCredentials, }) {
-    const { state, dispatch } = useAdmin();
-    // MMTODO: Idk if this is needed
-    // useEffect(() => {
-    //     setEnvironmentContext(environment);
-    // }, [environment]);
-    if (!state.client) {
-        return null;
-    }
-    const renderComponentBasedOnName = () => {
-        switch (state.activeComponent) {
-            case 'Dashboards':
-                return (_jsx(DashboardManager
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
-            case 'SQL editor':
-                return _jsx(DashboardBuilder, {});
-            case 'SQL views':
-                return _jsx(SQLViewManager, {});
-            default:
-                return (_jsx(DashboardManager
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
-        }
-    };
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            width: '100vw',
-        }, children: [_jsxs("nav", { style: {
-                    zIndex: 2,
-                    height: '70px',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    backgroundColor: 'white',
-                    padding: '0',
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    borderBottomWidth: 1,
-                    borderTopWidth: 0,
-                    borderLeftWidth: 0,
-                    borderRightWidth: 0,
-                    borderStyle: 'solid',
-                    borderColor: theme.borderColor,
-                }, children: [_jsx("div", { style: {
-                            paddingTop: '18px',
-                            paddingLeft: '14px',
-                            paddingBottom: '18px',
-                            width: 230,
-                        }, children: _jsxs("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_2489_282)", children: _jsx("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2489_282", children: _jsx("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsx("button", { style: {
-                                    color: '#212121',
-                                    backgroundColor: state.activeComponent === 'Dashboards'
-                                        ? '#2121210A'
-                                        : 'transparent',
-                                    padding: '8px 12px',
-                                    height: '38px',
-                                    marginBottom: '4px',
-                                    fontWeight: 'bold',
-                                    fontSize: '0.875rem',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.3s',
-                                    border: 'none',
-                                    outline: 'none',
-                                }, 
-                                // onClick={() => setActiveComponent("Dashboards")}
-                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' }), children: "Dashboards" }), _jsx("button", { style: {
-                                    color: '#212121',
-                                    backgroundColor: state.activeComponent === 'SQL editor'
-                                        ? '#2121210A'
-                                        : 'transparent',
-                                    padding: '8px 12px',
-                                    height: '38px',
-                                    marginBottom: '4px',
-                                    fontWeight: 'bold',
-                                    fontSize: '0.875rem',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.3s',
-                                    border: 'none',
-                                    outline: 'none',
-                                }, 
-                                // onClick={() => setActiveComponent("SQL editor")}
-                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL editor' }), children: "SQL editor" }), _jsx("button", { style: {
-                                    color: '#212121',
-                                    backgroundColor: state.activeComponent === 'SQL views'
-                                        ? '#2121210A'
-                                        : 'transparent',
-                                    padding: '8px 12px',
-                                    height: '38px',
-                                    marginBottom: '4px',
-                                    fontWeight: 'bold',
-                                    fontSize: '0.875rem',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.3s',
-                                    border: 'none',
-                                    outline: 'none',
-                                }, 
-                                // onClick={() => setActiveComponent("SQL views")}
-                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL views' }), children: "SQL views" })] }), _jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            minHeight: '50px',
-                            justifyContent: 'flex-end',
-                            alignItems: 'center',
-                            paddingRight: '8px',
-                            width: 230,
-                        }, children: UserManagementComponent && _jsx(UserManagementComponent, {}) })] }), _jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    width: '100%',
-                    // marginTop: activeComponent !== 'Report' ? '70px' : undefined
-                }, children: _jsx(QuillProvider
-                // organizationId={'2'}
-                // publicKey={client?._id}
-                , { 
-                    // organizationId={'2'}
-                    // publicKey={client?._id}
-                    organizationId: state.organizationId, queryEndpoint: queryEndpoint || '', withCredentials: withCredentials, queryHeaders: queryHeaders || {}, publicKey: state.client._id, environment: state.environment, theme: theme, children: renderComponentBasedOnName() }) })] }));
-}
-export const theme = {
     fontFamily: 'Inter; Helvetica',
     backgroundColor: '#FFFFFF',
     primaryTextColor: '#364153',
@@ -186,35 +46,6 @@ export const theme = {
     primaryButtonTextColor: '#FFFFFF',
     hoverBackgroundColor: '#F4F4F5',
 };
-export function convertPostgresColumn(column) {
-    let format;
-    switch (column.dataTypeID) {
-        case 20: // int8
-        case 21: // int2
-        case 23: // int4
-            format = 'whole_number';
-            break;
-        case 700: // float4
-        case 701: // float8
-        case 1700: // numeric
-            format = 'two_decimal_places';
-            break;
-        case 1082: // date
-        case 1083: // time
-        case 1184: // timestamptz
-        case 1114: // timestamp
-            format = 'MMM_dd_yyyy';
-            break;
-        case 1043: // varchar
-        default:
-            format = 'string';
-    }
-    return {
-        label: column.name,
-        field: column.name,
-        format: format,
-    };
-}
 export function getPostgresBasicType(column) {
     let format;
     // first check if column.dataTypeID exists
@@ -256,6 +87,12 @@ export function getPostgresBasicType(column) {
             case 'timestamp':
                 format = 'date';
                 break;
+            // case 'json':
+            // case 'jsonb':
+            // case 'json[]':
+            // case 'jsonb[]':
+            //   format = 'object';
+            //   break;
             case 'varchar':
             default:
                 format = 'string';
@@ -263,42 +100,165 @@ export function getPostgresBasicType(column) {
     }
     return format;
 }
-export function TableCell({ table, clickTableCell, }) {
-    const handleClickTableCell = () => {
-        clickTableCell(table);
-    };
-    return (_jsxs("div", { onClick: handleClickTableCell, style: {
-            marginBottom: '54px',
+export function TableCell({ table, clickTableCellHeader, clickTableCellBody, hoverActions, isLoading, reloadAction, }) {
+    const { state } = useAdmin();
+    return (_jsxs("div", { className: `table-cell-${table._id}`, style: {
             flex: 1,
-            minWidth: '540px',
-            maxWidth: '540px',
-            cursor: 'pointer',
-        }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsx("h3", { style: { color: '#384151' }, children: table.displayName }) }), _jsx(Highlight, { ...defaultProps, theme: prismTheme, code: table?.viewQuery || '', language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, style: {
+            // width: '460px',
+            borderRadius: 8,
+            border: '1px solid #E5E7EB',
+            boxShadow: '0px 2px 8px 0px rgba(56, 65, 81, 0.08)',
+            position: 'relative',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    padding: '0.5em 0.5em 0.5em 1em',
+                    borderBottom: '1px solid #E5E7EB',
+                    borderTopLeftRadius: 8,
+                    borderTopRightRadius: 8,
+                    cursor: 'pointer',
+                }, onClick: () => {
+                    clickTableCellHeader(table);
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            cursor: 'pointer',
+                        }, children: [_jsx("h3", { style: {
+                                    fontFamily: defaultTheme?.fontFamily,
+                                    color: defaultTheme?.primaryTextColor,
+                                    boxSizing: 'content-box',
+                                    fontSize: 16,
+                                    height: 32,
+                                    alignContent: 'center',
+                                    marginTop: 'auto',
+                                    marginBottom: 'auto',
+                                    fontWeight: '500',
+                                    textOverflow: 'ellipsis',
+                                    padding: 0,
+                                    whiteSpace: 'nowrap',
+                                    display: 'block',
+                                    maxWidth: '100%',
+                                    overflow: 'hidden',
+                                }, children: table.name }), table.broken ? (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    gap: 2,
+                                    color: customError(table.error).severity === 'error'
+                                        ? '#CA3A31'
+                                        : '#FFA500',
+                                }, children: [_jsx("h3", { style: {
+                                            fontSize: 14,
+                                        }, children: customError(table.error).error }), isLoading ? (_jsx("div", { style: {
+                                            width: 32,
+                                            height: 32,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }, children: _jsx(LoadingSpinner, {}) })) : (_jsxs("button", { style: {
+                                            height: 32,
+                                            width: 32,
+                                            color: defaultTheme?.secondaryTextColor,
+                                            borderRadius: 6,
+                                            outline: 'none',
+                                            cursor: 'pointer',
+                                            fontSize: 14,
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                        }, className: "secondary-button-quill", onClick: (event) => {
+                                            event.stopPropagation();
+                                            reloadAction && reloadAction(table);
+                                        }, children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", strokeWidth: 1.5, height: 16, width: 16, style: {
+                                                    marginLeft: 'auto',
+                                                    marginRight: 'auto',
+                                                }, children: _jsx("path", { fillRule: "evenodd", d: "M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z", clipRule: "evenodd" }) })] }))] })) : (_jsxs(_Fragment, { children: [isLoading && (_jsx("div", { style: {
+                                            width: 32,
+                                            height: 32,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }, className: `table-cell-${table._id}-loading`, children: _jsx(LoadingSpinner, {}) })), hoverActions && (_jsx("div", { className: `table-cell-${table._id}-actions`, children: hoverActions(table) }))] }))] }), (table.ownerTenantFields?.length ?? 0) > 0 && (_jsx("div", { style: {
+                            flexDirection: 'row',
+                            display: 'flex',
+                            gap: 4,
+                        }, children: table.ownerTenantFields
+                            ?.map((tenantField) => {
+                            return (state.client?.allTenantTypes?.find((t) => t.tenantField === tenantField)?.name || tenantField);
+                        })
+                            .map((tenantField) => (_jsx("div", { style: {
+                                fontWeight: 300,
+                                fontSize: 10,
+                                color: defaultTheme?.primaryTextColor,
+                                padding: 2,
+                                paddingLeft: 4,
+                                paddingRight: 4,
+                                border: '1px solid #E5E7EB',
+                                borderRadius: 32,
+                            }, children: tenantField }, tenantField))) }))] }), _jsx(Highlight, { theme: themes.nightOwlLight, code: table?.viewQuery || '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, onClick: () => {
+                        clickTableCellBody(table);
+                    }, style: {
                         ...style,
                         textAlign: 'left',
-                        margin: '1em 0',
-                        padding: '0.5em',
+                        padding: '1em',
                         overflow: 'auto',
-                        maxHeight: 120,
-                        maxWidth: 520,
-                        // lineHeight: "1.3em",
-                        // height: "1.3em",
-                    }, children: tokens.map((line, i) => (_jsx("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => (_jsx("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) })] }, table._id));
+                        height: (table.ownerTenantFields?.length ?? 0) > 0 ? 132 : 153,
+                        width: '100%',
+                        borderBottomLeftRadius: 8,
+                        borderBottomRightRadius: 8,
+                        cursor: 'pointer',
+                    }, children: tokens.map((line, i) => (_createElement("div", { ...getLineProps({ line }), key: i, style: {
+                            wordWrap: 'normal',
+                            whiteSpace: 'normal',
+                        } }, line.map((token, key) => (_jsx("span", { ...getTokenProps({ token }) }, key)))))) })) }), hoverActions && (_jsx("style", { children: `
+          .table-cell-${table._id}-actions {
+            display: none;
+            pointer-events: none;
+          }
+          .table-cell-${table._id}-loading {
+            display: block;
+          }
+          .table-cell-${table._id}:hover .table-cell-${table._id}-loading {
+            display: none !important;
+          }
+          .table-cell-${table._id}:hover .table-cell-${table._id}-actions {
+            display: block;
+            pointer-events: all;
+          }
+        ` }))] }));
 }
+const customError = (error) => {
+    if (error === 'connect ETIMEDOUT') {
+        return { severity: 'warning', error: 'Query timed out' };
+    }
+    else if (error === 'read ECONNRESET' || error === 'socket hang up') {
+        return { severity: 'warning', error: 'Connection lost' };
+    }
+    else {
+        return { severity: 'error', error: 'Query failed' };
+    }
+};
 const FakeModal = ({ children }) => (_jsx("div", { style: { height: '100%' }, children: children }));
 const FakeSQLEditorModal = ({ children, isOpen, }) => {
     if (!isOpen)
         return null;
     return _jsx("div", { style: { height: '100%' }, children: children });
 };
-function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, handleSave, updateQuery, OrganizationSelectComponent, ModalComponent = MemoizedModal, NavigateToDashboardBuilder, }) {
-    const { state, dispatch } = useAdmin();
-    const { data, loading, error } = useQuill(reportId);
+function QuillReportDetail({ reportId, isOpen, setIsOpen, deleteReport, handleSave, ModalComponent = MemoizedModal, fallbackData, }) {
+    const { state, dispatch, getToken } = useAdmin();
+    const { data, loading } = useQuill(reportId, {
+        rowsPerPage: 10,
+        rowsPerRequest: 100,
+    });
     const parentRef = useRef(null);
     const [modalWidth, setModalWidth] = useState(200);
     const [modalHeight, setModalHeight] = useState(200);
     const [isOpenChartBuilder, setIsOpenChartBuilder] = useState(false);
-    const [selectedOrgName, setSelectedOrgName] = useState('');
+    const [isPromoteReportModalOpen, setIsPromoteReportModalOpen] = useState(false);
     const handleResize = useCallback(() => {
         const screenSize = window.innerWidth;
         const isEditQuery = state.activeQuery && state.activeEditItem;
@@ -317,15 +277,6 @@ function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQue
             window.removeEventListener('resize', handleResize);
         };
     }, [handleResize]);
-    useEffect(() => {
-        const selectedOrg = state.organizations.find((org) => {
-            const orgId = org.id ? org.id : org.ID;
-            return orgId && String(orgId) === String(state.organizationId);
-        });
-        if (selectedOrg) {
-            setSelectedOrgName(selectedOrg.name ? selectedOrg.name : selectedOrg.NAME);
-        }
-    }, [state.organizations, state.organizationId]);
     const handleSetIsOpen = (isOpen) => {
         if (!isOpen) {
             dispatch({
@@ -337,29 +288,32 @@ function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQue
         setIsOpenChartBuilder(isOpen);
         setIsOpen(isOpen);
     };
-    if (!data || loading) {
+    if ((!data && !fallbackData) || loading) {
         return null;
     }
-    return (_jsx("div", { ref: parentRef, children: _jsx(ModalComponent, { isOpen: isOpen, setIsOpen: handleSetIsOpen, title: data.name || 'Report Detail', width: modalWidth, height: modalHeight, children: _jsxs("div", { style: {
+    return (_jsx("div", { ref: parentRef, children: _jsx(ModalComponent, { isOpen: isOpen, setIsOpen: handleSetIsOpen, title: isOpenChartBuilder || (state.activeQuery && state.activeEditItem)
+                ? 'Editing ' + (data?.name || fallbackData?.name || 'Report Detail')
+                : data?.name || fallbackData?.name || 'Report Detail', width: modalWidth, height: modalHeight, children: _jsxs("div", { style: {
                     width: '100%',
                     height: 'calc(100% - 52px)', // full height minus header height
                     display: 'flex',
                     flexDirection: 'column',
                     flexGrow: 1,
-                }, children: [_jsxs("div", { style: {
+                }, children: [!isOpenChartBuilder &&
+                        !(state.activeEditItem && state.activeQuery) && (_jsxs("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 16,
-                            padding: 15,
+                            paddingLeft: 20,
                         }, children: [_jsxs("button", { style: {
                                     height: 36,
-                                    color: theme?.secondaryTextColor,
+                                    color: defaultTheme?.secondaryTextColor,
                                     border: '1px solid #e7e7e7',
                                     borderRadius: 6,
                                     outline: 'none',
                                     cursor: 'pointer',
-                                    fontFamily: theme?.fontFamily,
-                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontFamily: defaultTheme?.fontFamily,
+                                    fontWeight: defaultTheme?.buttonFontWeight || 500,
                                     fontSize: 14,
                                     padding: '0px 12px',
                                     display: 'flex',
@@ -367,7 +321,7 @@ function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQue
                                     alignItems: 'center',
                                     gap: 5,
                                 }, onClick: () => {
-                                    setIsOpenChartBuilder((showEditChart) => !showEditChart);
+                                    setIsOpenChartBuilder(true);
                                     dispatch({
                                         type: 'SET_ACTIVE_QUERY',
                                         payload: '',
@@ -375,20 +329,20 @@ function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQue
                                     dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
                                 }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 15, width: 15, children: [_jsx("path", { d: "M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7.004 7.004 0 0 1 5.933 5.933c.078.547-.378.997-.93.997h-5Z" }), _jsx("path", { d: "M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7.002 7.002 0 0 1 6.003-6.93Z" })] }), "Edit chart"] }), _jsxs("button", { style: {
                                     height: 36,
-                                    color: theme?.secondaryTextColor,
+                                    color: defaultTheme?.secondaryTextColor,
                                     border: '1px solid #e7e7e7',
                                     borderRadius: 6,
                                     outline: 'none',
                                     cursor: 'pointer',
-                                    fontFamily: theme?.fontFamily,
-                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontFamily: defaultTheme?.fontFamily,
+                                    fontWeight: defaultTheme?.buttonFontWeight || 500,
                                     fontSize: 14,
                                     padding: '0px 12px',
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: 5,
-                                }, onClick: () => {
+                                }, onClick: async () => {
                                     if (state.activeQuery && state.activeEditItem) {
                                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
@@ -396,215 +350,194 @@ function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQue
                                     }
                                     dispatch({
                                         type: 'SET_ACTIVE_QUERY',
-                                        payload: data.queryString,
+                                        payload: data?.queryString || fallbackData?.queryString,
+                                    });
+                                    const editItem = data?.queryString
+                                        ? await parseQuillReportToQuillReportInternal(data, state.client, state.tables, getToken)
+                                        : fallbackData;
+                                    dispatch({
+                                        type: 'SET_ACTIVE_EDIT_ITEM',
+                                        payload: editItem,
                                     });
-                                    dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: data });
                                 }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 12, width: 12, children: _jsx("path", { d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" }) }), "Edit query"] }), _jsxs("button", { style: {
                                     height: 36,
-                                    color: theme?.secondaryTextColor,
+                                    color: defaultTheme?.secondaryTextColor,
                                     border: '1px solid #e7e7e7',
                                     borderRadius: 6,
                                     outline: 'none',
                                     cursor: 'pointer',
-                                    fontFamily: theme?.fontFamily,
-                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontFamily: defaultTheme?.fontFamily,
+                                    fontWeight: defaultTheme?.buttonFontWeight || 500,
                                     fontSize: 14,
                                     padding: '0px 12px',
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: 4,
-                                }, onClick: deleteReport, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, children: _jsx("path", { fillRule: "evenodd", d: "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z", clipRule: "evenodd" }) }), "Delete"] })] }), _jsx("div", { style: {
+                                }, onClick: () => {
+                                    setIsPromoteReportModalOpen(true);
+                                }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 14, width: 14, children: _jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06l-3.22-3.22V16.5a.75.75 0 0 1-1.5 0V4.81L8.03 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5ZM3 15.75a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z", clipRule: "evenodd" }) }), "Promote"] }), _jsxs("button", { style: {
+                                    height: 36,
+                                    color: defaultTheme?.secondaryTextColor,
+                                    border: '1px solid #e7e7e7',
+                                    borderRadius: 6,
+                                    outline: 'none',
+                                    cursor: 'pointer',
+                                    fontFamily: defaultTheme?.fontFamily,
+                                    fontWeight: defaultTheme?.buttonFontWeight || 500,
+                                    fontSize: 14,
+                                    padding: '0px 12px',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                }, onClick: async () => {
+                                    if (await deleteReport(reportId)) {
+                                        setIsOpen(false);
+                                    }
+                                }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, children: _jsx("path", { fillRule: "evenodd", d: "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z", clipRule: "evenodd" }) }), "Delete"] })] })), _jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
-                            height: 'calc(100% - 66px)', // full height minus button container
+                            height: 'calc(100% - 36px)', // full height minus button container
                             flexGrow: 1,
-                        }, children: _jsx("div", { style: {
+                        }, children: _jsxs("div", { style: {
                                 width: '100%',
                                 height: '100%',
                                 overflowX: 'hidden',
                                 overflowY: 'auto',
-                            }, children: state.activeEditItem && state.activeQuery ? (_jsx(QueryEditor, { onSave: handleSave })) : (_jsx(ChartEditor, { isOpen: isOpenChartBuilder, setIsOpen: setIsOpenChartBuilder, reportId: reportId, isAdmin: true, organizationName: selectedOrgName, onDelete: deleteReport, onAddToDashboardComplete: (report) => {
-                                    const dashboard = state.dashboards.find((dash) => {
-                                        return dash.name === report.dashboardName;
-                                    });
-                                    dispatch({
-                                        type: 'SET_SELECTED_DASHBOARD',
-                                        payload: dashboard,
-                                    });
-                                    handleSave();
-                                }, isHorizontalView: true, ModalComponent: FakeModal, ButtonComponent: MemoizedButton })) }) })] }) }) }));
+                            }, children: [state.activeEditItem && state.activeQuery ? (_jsx(QueryEditor, { onSave: (report) => {
+                                        handleSave({ report, action: 'upsert' });
+                                    } })) : data ? (_jsx(ChartEditor, { isOpen: isOpenChartBuilder, setIsOpen: setIsOpenChartBuilder, reportId: reportId, isAdmin: true, onDelete: () => deleteReport(reportId), onAddToDashboardComplete: (report) => {
+                                        handleSave({ report: report, action: 'upsert' });
+                                    }, isHorizontalView: true, ModalComponent: FakeModal, ButtonComponent: MemoizedButton, onClickChartError: (errorResult) => {
+                                        if (state.navigateToVirtualTableBuilder) {
+                                            state.navigateToVirtualTableBuilder(errorResult);
+                                            setIsOpenChartBuilder(false);
+                                            setIsOpen(false);
+                                            dispatch({
+                                                type: 'SET_ACTIVE_QUERY',
+                                                payload: '',
+                                            });
+                                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                                        }
+                                    }, destinationDashboard: data.dashboardName })) : null, _jsx(PromoteReportModal, { ModalComponent: ModalPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: MemoizedButton, SelectComponent: QuillSelectComponentWithCombo, CheckboxComponent: CheckboxPrimitive, isOpen: isPromoteReportModalOpen, setIsOpen: setIsPromoteReportModalOpen, reportId: reportId, currentClientId: state.client._id, currentDashboardName: state.selectedDashboard || '' })] }) })] }) }) }));
 }
 function QueryEditor({ onSave }) {
     const { state, dispatch } = useAdmin();
-    const [selectedOrgName, setSelectedOrgName] = useState('');
-    useEffect(() => {
-        const selectedOrg = state.organizations.find((org) => {
-            const orgId = org.id ? org.id : org.ID;
-            return orgId && String(orgId) === String(state.organizationId);
-        });
-        if (selectedOrg) {
-            setSelectedOrgName(selectedOrg.name ? selectedOrg.name : selectedOrg.NAME);
-        }
-    }, [state.organizations, state.organizationId]);
-    if (state.activeEditItem &&
-        state.activeEditItem.referencedTables &&
-        state.activeEditItem.referencedTables.length === 1 &&
+    const modeToggleOptions = [
+        { label: 'SQL Editor', value: 'SQL Editor' },
+        { label: 'Report Builder', value: 'Report Builder' },
+    ];
+    const initialToggleMode = state.activeEditItem &&
         state.activeQuery &&
         !state.activeQuery.match(/^\s*with\s/i) &&
-        !hasColumnAlias(state.activeEditItem.columns, state.activeEditItem.referencedColumns[state.activeEditItem.referencedTables[0]] || undefined)) {
-        return (_jsx(ReportBuilder, { isAdminEnabled: true, 
-            // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
-            reportId: state.activeEditItem.id, 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 });
-                dispatch({
-                    type: 'SET_SELECTED_DASHBOARD',
-                    payload: dashboard,
-                });
-                onSave(); // refresh the dashboard in the background
-            }, organizationName: selectedOrgName, isChartBuilderHorizontalView: true, 
-            // @ts-ignore
-            ChartBuilderModalComponent: FakeSQLEditorModal, containerStyle: {
-                height: '100%',
-                width: '100%',
-            } }));
-    }
-    return (_jsx(SQLEditor, { isChartBuilderHorizontalView: true, isChartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: state.activeQuery, 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 });
-            dispatch({
-                type: 'SET_SELECTED_DASHBOARD',
-                payload: dashboard,
-            });
-            onSave(); // refresh the dashboard in the background
-        }, containerStyle: {
+        !(state.activeEditItem.adminError || state.activeEditItem.error)
+        ? 'Report Builder'
+        : 'SQL Editor';
+    const [toggleMode, setToggleMode] = useState(initialToggleMode);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const { setSelectedDashboard } = useDashboardManager();
+    return (_jsxs("div", { style: {
             height: '100%',
-            width: '100%',
-        }, organizationName: selectedOrgName, 
-        // @ts-ignore
-        ModalComponent: FakeSQLEditorModal, ButtonComponent: MemoizedButton }));
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [!isChartBuilderOpen && (_jsx("div", { id: "quill-edit-banner", style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    borderBottom: '1px solid #e7e7e7',
+                    padding: '10px',
+                }, children: _jsx("div", { style: { display: 'flex', marginTop: 'auto' }, children: _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            borderRadius: '0.25rem',
+                            borderStyle: 'none',
+                            outlineStyle: 'none',
+                            background: '#F9FAFB',
+                            padding: 4,
+                        }, children: _jsx(QuillTab, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, disabledTooltip: initialToggleMode === 'Report Builder'
+                                ? undefined
+                                : (state.activeEditItem?.error ??
+                                    state.activeEditItem?.adminError ??
+                                    'The Report Builder only supports queries created in the Report Builder'), width: '250px' }) }) }) })), _jsx("div", { style: { flexGrow: 1, paddingBottom: 8, overflowY: 'auto' }, children: toggleMode === 'Report Builder' ? (_jsx(ReportBuilder, { isAdminEnabled: true, destinationDashboard: state.activeEditItem.dashboardName, 
+                    // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
+                    reportId: state.activeEditItem?.id, onSubmitEditReport: (report) => {
+                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        setSelectedDashboard(report.dashboardName);
+                        onSave(report); // refresh the dashboard in the background
+                    }, onDiscardChanges: () => {
+                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        setIsChartBuilderOpen(false);
+                    }, onSaveChanges: () => {
+                        setIsChartBuilderOpen(true);
+                    }, onCloseChartBuilder: () => {
+                        setIsChartBuilderOpen(false);
+                    }, isChartBuilderHorizontalView: true, 
+                    // @ts-ignore
+                    ChartBuilderModalComponent: FakeSQLEditorModal, containerStyle: {
+                        height: '100%',
+                        width: '100%',
+                    }, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
+                        ? false
+                        : true })) : (_jsx(SQLEditor, { isChartBuilderHorizontalView: true, isAdminEnabled: true, defaultQuery: state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', report: state.activeQuery ? state.activeEditItem : undefined, destinationDashboard: state.activeEditItem.dashboardName, onDiscardChanges: () => {
+                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        setIsChartBuilderOpen(false);
+                    }, onSaveChanges: () => {
+                        setIsChartBuilderOpen(true);
+                    }, onCloseChartBuilder: () => {
+                        setIsChartBuilderOpen(false);
+                    }, runQueryOnMount: true, onAddToDashboardComplete: (report) => {
+                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        setSelectedDashboard(report.dashboardName);
+                        onSave(report); // refresh the dashboard in the background
+                    }, containerStyle: {
+                        height: '100%',
+                        width: '100%',
+                    }, 
+                    // @ts-ignore
+                    ModalComponent: FakeSQLEditorModal, ButtonComponent: MemoizedButton, isChartBuilderEnabled: true })) })] }));
 }
-export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, isOpen, setIsOpen, reloadDashboard, }) {
-    const { state, dispatch } = useAdmin();
-    const [isEditQueryOpen, setIsEditQueryOpen] = useState(false);
-    const updateQuery = async (dashboardItemId, query) => {
-        if (!state.client || !dashboardItemId || !query) {
-            return;
-        }
-        let responseData;
-        if (queryEndpoint) {
-            const response = await fetch(queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    ...queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        task: 'edit_query',
-                        id: state.reportId,
-                        databaseType: state.client.databaseType,
-                        query,
-                        orgId: organizationId || '*',
-                    },
-                }),
-                credentials: withCredentials ? 'include' : 'omit',
-            });
-            responseData = await response.json();
-        }
-        else {
-            const url = `${QUILL_SERVER}/updatequery/${state.client._id}/${organizationId}/`;
-            const requestBody = {
-                dashboardItemId,
-                query,
-            };
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer ',
-                    environment: state.environment,
-                },
-                body: JSON.stringify(requestBody),
-            });
-            responseData = await response.json();
-        }
-        if (responseData) {
-            if (responseData.error) {
-                alert(`Failed to save query. ${typeof responseData.error === 'string'
-                    ? responseData.error
-                    : responseData.error?.routine === 'errorMissingColumn'
-                        ? "A column was referenced that doesn't exist."
-                        : responseData.error?.routine
-                            ? responseData.error?.routine
-                            : 'Error parsing SQL query'}`);
-                return;
-            }
-            setIsEditQueryOpen(false);
-        }
+export function ReportWrapper({ ModalComponent, isOpen, setIsOpen, reloadDashboard, }) {
+    const { state, getToken } = useAdmin();
+    const handleSave = (reportAction) => {
+        reloadDashboard(reportAction);
     };
-    const deleteReport = async () => {
-        if (!state.reportId) {
-            return;
-        }
-        if (!state.client) {
-            return;
-        }
-        if (!confirm('Are you sure?')) {
-            return;
-        }
-        let responseData;
-        if (queryEndpoint) {
-            const response = await fetch(queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    ...queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        orgId: organizationId || '*',
-                        task: 'delete',
-                        dashboardItemId: state.reportId,
-                        clientId: state.client._id,
-                        databaseType: state.client.databaseType,
-                    },
-                }),
-                credentials: withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-            responseData = await response.json(); // If the server returns JSON data
-        }
-        else {
-            const url = `${QUILL_SERVER}/deletedash/${state.client._id}/${organizationId}/`;
-            const requestBody = {
-                dashboardItemId: state.reportId,
-                databaseType: state.client.databaseType,
-            };
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    environment: state.environment,
-                },
-                body: JSON.stringify(requestBody),
-            });
-            // To get JSON data from the response:
-            responseData = await response.json();
-        }
-        if (responseData) {
-            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
-            reloadDashboard();
-        }
-    };
-    const handleSave = () => {
-        reloadDashboard();
-    };
-    return (_jsx(QuillReport, { reportId: state.reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, handleSave: handleSave, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
+    return (_jsx(QuillReportDetail, { reportId: state.reportId, isOpen: isOpen, setIsOpen: setIsOpen, deleteReport: async (reportId) => {
+            const success = await deleteReport(reportId, state, getToken);
+            if (success) {
+                handleSave({ report: { id: reportId }, action: 'delete' });
+            }
+            return success;
+        }, handleSave: handleSave, ModalComponent: ModalComponent, fallbackData: state.report }));
 }
+export const deleteReport = async (reportId, state, getToken) => {
+    if (!state.client) {
+        return false;
+    }
+    if (!confirm('Are you sure?')) {
+        return false;
+    }
+    await quillFetch({
+        client: {
+            queryEndpoint: state.queryEndpoint,
+            queryHeaders: state.queryHeaders,
+            withCredentials: !!state.withCredentials,
+            clientId: state.client._id,
+        },
+        task: 'delete',
+        metadata: {
+            dashboardItemId: reportId,
+            clientId: state.client._id,
+            databaseType: state.client.databaseType,
+        },
+        getToken,
+    });
+    return true;
+};