@quillsql/admin 1.7.0 → 1.7.2

package/dist/esm/Admin.js

@@ -1,652 +0,0 @@
-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,
-ChartEditor, ReportBuilder, useDashboardInternal, 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 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, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`,
-    backgroundColor: '#FFFFFF',
-    primaryTextColor: '#364153',
-    secondaryTextColor: '#6C727F',
-    chartLabelFontFamily: `Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`,
-    chartLabelColor: '#666666',
-    chartTickColor: '#CCCCCC',
-    chartColors: ['#6269E9', '#E14F62', '#55B5A6', '#E9A23B', '#D0ACCF'],
-    borderColor: '#E5E7EB',
-    labelFontWeight: 500,
-    fontSize: 14,
-    borderWidth: 1,
-    primaryButtonColor: '#212121',
-    primaryButtonTextColor: '#FFFFFF',
-    hoverBackgroundColor: '#F4F4F5',
-    hoverPrimaryButtonColor: '#384151E6',
-};
-export function getPostgresBasicType(column) {
-    let format;
-    // first check if column.dataTypeID exists
-    if (column.dataTypeID) {
-        switch (column.dataTypeID) {
-            case 20: // int8
-            case 21: // int2
-            case 23: // int4
-            case 700: // float4
-            case 701: // float8
-            case 1700: // numeric
-                format = 'number';
-                break;
-            case 1082: // date
-            case 1083: // time
-            case 1184: // timestamptz
-            case 1114: // timestamp
-                format = 'date';
-                break;
-            case 1043: // varchar
-            default:
-                format = 'string';
-        }
-    }
-    else if (column.fieldType) {
-        // if column.dataTypeID doesn't exist, check column.fieldType
-        switch (column.fieldType) {
-            case 'int8':
-            case 'int2':
-            case 'int4':
-            case 'float4':
-            case 'float8':
-            case 'numeric':
-                format = 'number';
-                break;
-            case 'date':
-            case 'time':
-            case 'timestamptz':
-            case 'timestamp':
-                format = 'date';
-                break;
-            // case 'json':
-            // case 'jsonb':
-            // case 'json[]':
-            // case 'jsonb[]':
-            //   format = 'object';
-            //   break;
-            case 'varchar':
-            default:
-                format = 'string';
-        }
-    }
-    return format;
-}
-export function TableCell({ table, clickTableCellHeader, clickTableCellBody, hoverActions, isLoading, reloadAction, }) {
-    const { state } = useAdmin();
-    return (_jsxs("div", { className: `table-cell-${table._id}`, style: {
-            flex: 1,
-            // 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: state.theme?.fontFamily,
-                                    color: state.theme?.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: state.theme?.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,
-                                fontFamily: state.theme?.fontFamily,
-                                color: state.theme?.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',
-                        padding: '1em',
-                        overflow: 'auto',
-                        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 QuillReportDetail({ reportId, isOpen, setIsOpen, deleteReport, handleSave, ModalComponent = MemoizedModal, fallbackData, }) {
-    const { state, dispatch, getToken, eventTracking, quillFetchWithToken } = useAdmin();
-    const { reload } = useDashboardInternal(state.selectedDashboard);
-    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 [isPromoteReportModalOpen, setIsPromoteReportModalOpen] = useState(false);
-    const handleResize = useCallback(() => {
-        const screenSize = window.innerWidth;
-        const isEditQuery = state.activeQuery && state.activeEditItem;
-        if (isOpenChartBuilder && !isEditQuery && screenSize < 1200) {
-            setModalWidth(undefined); // use dynamic width of contents
-        }
-        else {
-            setModalWidth(window.innerWidth - 80);
-        }
-        setModalHeight(window.innerHeight - 80);
-    }, [isOpenChartBuilder, state.activeQuery, state.activeEditItem]);
-    useEffect(() => {
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [handleResize]);
-    const handleSetIsOpen = (isOpen) => {
-        if (!isOpen) {
-            dispatch({
-                type: 'SET_ACTIVE_QUERY',
-                payload: '',
-            });
-            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-        }
-        setIsOpenChartBuilder(isOpen);
-        setIsOpen(isOpen);
-    };
-    const handleDuplicateReport = async () => {
-        if (!state.client?.clientId) {
-            console.error('No client in state');
-            return;
-        }
-        const clientId = state.client.clientId;
-        // self-promote
-        try {
-            const respJson = await quillFetchWithToken({
-                client: {
-                    queryEndpoint: state.queryEndpoint,
-                    clientId,
-                    queryHeaders: state.queryHeaders,
-                    withCredentials: !!state.withCredentials,
-                },
-                task: 'promote-item',
-                metadata: {
-                    clientId,
-                    fromClientId: clientId,
-                    toClientId: clientId,
-                    dashboardName: data?.dashboardName,
-                    itemId: reportId,
-                    skipWarning: true,
-                },
-                adminMode: true,
-            });
-            if (respJson?.error) {
-                alert(respJson?.error);
-                return;
-            }
-            const respData = respJson?.data;
-            if (respData.error) {
-                alert(respData.error);
-                return;
-            }
-            alert('Report duplicated successfully.');
-            reload(state.selectedDashboard ?? undefined, true);
-        }
-        catch (error) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error promoting report',
-                errorMessage: error.message,
-                errorStack: error.stack,
-                errorData: {
-                    caller: 'PromoteReportModal',
-                    function: 'handlePromote',
-                },
-            });
-            console.error('Promotion failed:', error);
-        }
-    };
-    if ((!data && !fallbackData) || loading) {
-        return null;
-    }
-    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: [!isOpenChartBuilder &&
-                        !(state.activeEditItem && state.activeQuery) && (_jsxs("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 16,
-                            paddingLeft: 20,
-                        }, children: [_jsxs("button", { style: {
-                                    height: 36,
-                                    color: state.theme?.secondaryTextColor,
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: 6,
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                    fontFamily: state.theme?.fontFamily,
-                                    fontWeight: state.theme?.buttonFontWeight || 500,
-                                    fontSize: 14,
-                                    padding: '0px 12px',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 5,
-                                }, onClick: () => {
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked edit chart button in QuillReportDetail',
-                                        category: 'navigation',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                    setIsOpenChartBuilder(true);
-                                    dispatch({
-                                        type: 'SET_ACTIVE_QUERY',
-                                        payload: '',
-                                    });
-                                    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: state.theme?.secondaryTextColor,
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: 6,
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                    fontFamily: state.theme?.fontFamily,
-                                    fontWeight: state.theme?.buttonFontWeight || 500,
-                                    fontSize: 14,
-                                    padding: '0px 12px',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 5,
-                                }, onClick: async () => {
-                                    if (state.activeQuery && state.activeEditItem) {
-                                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                                        return;
-                                    }
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked edit query button in QuillReportDetail',
-                                        category: 'navigation',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                    dispatch({
-                                        type: 'SET_ACTIVE_QUERY',
-                                        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,
-                                    });
-                                }, 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: state.theme?.secondaryTextColor,
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: 6,
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                    fontFamily: state.theme?.fontFamily,
-                                    fontWeight: state.theme?.buttonFontWeight || 500,
-                                    fontSize: 14,
-                                    padding: '0px 12px',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 4,
-                                }, onClick: () => {
-                                    setIsPromoteReportModalOpen(true);
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked promote report button in QuillReportDetail',
-                                        category: 'navigation',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                }, 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: state.theme?.secondaryTextColor,
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: 6,
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                    fontFamily: state.theme?.fontFamily,
-                                    fontWeight: state.theme?.buttonFontWeight || 500,
-                                    fontSize: 14,
-                                    padding: '0px 12px',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 4,
-                                }, onClick: () => {
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked duplicate report button in QuillReportDetail',
-                                        category: 'navigation',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                    handleDuplicateReport();
-                                }, 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: "M15.75 2.25a3 3 0 0 0-3 3v4.5a3 3 0 0 0 3 3h4.5a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-4.5ZM9.75 9.75a3 3 0 0 0-3 3v4.5a3 3 0 0 0 3 3h4.5a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-4.5ZM3 6a3 3 0 0 0-3 3v4.5a3 3 0 0 0 3 3h4.5a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3H3Z", clipRule: "evenodd" }) }), "Duplicate"] }), _jsxs("button", { style: {
-                                    height: 36,
-                                    color: state.theme?.secondaryTextColor,
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: 6,
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                    fontFamily: state.theme?.fontFamily,
-                                    fontWeight: state.theme?.buttonFontWeight || 500,
-                                    fontSize: 14,
-                                    padding: '0px 12px',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 4,
-                                }, onClick: async () => {
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked delete report button in QuillReportDetail',
-                                        category: 'interaction',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                    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% - 36px)', // full height minus button container
-                            flexGrow: 1,
-                        }, children: _jsxs("div", { style: {
-                                width: '100%',
-                                height: '100%',
-                                overflowX: 'hidden',
-                                overflowY: 'auto',
-                            }, 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, onRequestAddVirtualTable } = useAdmin();
-    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) &&
-        !(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%',
-            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, onRequestAddVirtualTable: onRequestAddVirtualTable })) : (_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, onRequestAddVirtualTable: onRequestAddVirtualTable })) })] }));
-}
-export function ReportWrapper({ ModalComponent, isOpen, setIsOpen, reloadDashboard, }) {
-    const { state, getToken, eventTracking } = useAdmin();
-    const handleSave = (reportAction) => {
-        reloadDashboard(reportAction);
-    };
-    return (_jsx(QuillReportDetail, { reportId: state.reportId, isOpen: isOpen, setIsOpen: setIsOpen, deleteReport: async (reportId) => {
-            const success = await deleteReport(reportId, state, getToken, eventTracking);
-            if (success) {
-                handleSave({ report: { id: reportId }, action: 'delete' });
-            }
-            return success;
-        }, handleSave: handleSave, ModalComponent: ModalComponent, fallbackData: state.report }));
-}
-export const deleteReport = async (reportId, state, getToken, eventTracking) => {
-    if (!state.client) {
-        return false;
-    }
-    if (!confirm('Are you sure?')) {
-        return false;
-    }
-    eventTracking?.addBreadcrumb?.({
-        message: 'Confirmed delete report button in QuillReportDetail',
-        category: 'interaction',
-        level: 'info',
-        timestamp: Date.now(),
-    });
-    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;
-};