@quillsql/admin 1.7.1 → 1.7.2

package/dist/cjs/public_components/VirtualTableManager.js

@@ -1,829 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = VirtualTableManager;
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const primitives_1 = require("../primitives");
-const useAdmin_1 = require("../hooks/useAdmin");
-const components_1 = require("../components");
-const Admin_1 = require("../Admin");
-const CreateEditVirtualTable_1 = __importDefault(require("../forms/virtual_tables/CreateEditVirtualTable"));
-const dataEditor_1 = require("../utils/dataEditor");
-const ConnectionClient_1 = require("../api/ConnectionClient");
-const UiComponents_1 = require("../components/UiComponents");
-const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
-const TogglePrimitive_1 = __importDefault(require("../primitives/TogglePrimitive"));
-const SegmentedControl_1 = require("../components/SegmentedControl");
-const SqlTextEditor_1 = __importDefault(require("../components/SqlTextEditor"));
-const react_3 = require("@quillsql/react");
-const modals_1 = require("../modals");
-const prism_react_renderer_1 = require("prism-react-renderer");
-const EditEnvironmentModal_1 = require("../modals/EditEnvironmentModal");
-const EmptyVirtualTablesComponent_1 = __importDefault(require("../components/EmptyVirtualTablesComponent"));
-const QuillSelectWithCombo_1 = require("../components/QuillSelectWithCombo");
-const tenants_1 = require("../utils/tenants");
-const useDatabaseSchema_1 = require("../hooks/useDatabaseSchema");
-const InputLabel_1 = __importDefault(require("../components/InputLabel"));
-const useDashboardManager_1 = require("../hooks/useDashboardManager");
-const CreateEnvironmentModal_1 = __importDefault(require("../modals/CreateEnvironmentModal"));
-const columnProcessing_1 = require("../utils/columnProcessing");
-function VirtualTableManager({ containerStyle, virtualTable, }) {
-    const { data: tables, isLoading: areTablesLoading, reloadAll, refreshSome, loadingTables, } = (0, react_3.useVirtualTables)();
-    const { reloadFilteredReports } = (0, react_3.useReports)();
-    const { setSelectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
-    const [editModalIsOpen, setEditModalIsOpen] = (0, react_2.useState)(false);
-    const [editQueryView, setEditQueryView] = (0, react_2.useState)(false);
-    const [editVirtualTableId, setEditVirtualTableId] = (0, react_2.useState)('');
-    const [editName, setEditName] = (0, react_2.useState)('');
-    const [editError, setEditError] = (0, react_2.useState)();
-    const [editVirtualTableQuery, setEditVirtualTableQuery] = (0, react_2.useState)('');
-    const [isPromoteViewModalOpen, setIsPromoteViewModalOpen] = (0, react_2.useState)(false);
-    const [editVirtualTableOwnerTenantFields, setEditVirtualTableOwnerTenantFields,] = (0, react_2.useState)([]);
-    const [editEnvironmentModalIsOpen, setEditEnvironmentModalIsOpen] = (0, react_2.useState)(false);
-    // const [allTableData, setAllTableData] = useState<ColumnsByTable[]>([]);
-    const [referencedTablesMap, setReferencedTablesMap] = (0, react_2.useState)({});
-    const [referenceFiltersMap, setReferenceFiltersMap] = (0, react_2.useState)({});
-    // const [schemaIsLoading, setSchemaIsLoading] = useState(false);
-    const { schema: allTableData, isLoading: schemaIsLoading } = (0, useDatabaseSchema_1.useDatabaseSchema)();
-    const [customFieldInfo, setCustomFieldInfo] = (0, react_2.useState)(undefined);
-    const [initialVirtualTable, setInitialVirtualTable] = (0, react_2.useState)(undefined);
-    const [submittingVirtualTable, setSubmittingVirtualTable] = (0, react_2.useState)(false);
-    const [noCustomerField, setNoCustomerField] = (0, react_2.useState)(false);
-    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = (0, react_2.useState)(false);
-    const parentRef = (0, react_2.useRef)(null);
-    const envHeaderRef = (0, react_2.useRef)(null);
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = (0, useAdmin_1.useAdmin)();
-    const closeEditModal = () => {
-        setEditModalIsOpen(false);
-        setEditName('');
-        setEditVirtualTableQuery('');
-        setCustomFieldInfo(undefined);
-    };
-    const clickTableCell = (table, suppressModal = false) => {
-        setEditName(table.name);
-        setEditVirtualTableQuery(table.viewQuery);
-        setEditVirtualTableOwnerTenantFields(table.ownerTenantFields ?? []);
-        setEditVirtualTableId(table._id);
-        setInitialVirtualTable(table);
-        setEditError(table.broken ? (table.error ?? 'Invalid query') : undefined);
-        setCustomFieldInfo(table.customFieldInfo);
-        !suppressModal && setEditModalIsOpen(true);
-        eventTracking?.addBreadcrumb?.({
-            message: 'Clicked table cell in VirtualTableManager',
-            data: {
-                table: table.name,
-                suppressModal: suppressModal,
-            },
-            category: 'interaction',
-            level: 'info',
-            timestamp: Date.now(),
-        });
-    };
-    const reloadTables = async (tables) => {
-        const tempClient = {
-            name: state.client.name,
-            queryEndpoint: state.queryEndpoint ?? '',
-            queryHeaders: state.queryHeaders ?? undefined,
-            publicKey: state.client._id,
-            clientId: state.client._id,
-            withCredentials: state.client.withCredentials,
-            userId: state.client.userId,
-        };
-        const { schema: schemaData } = tables
-            ? await refreshSome(tempClient, tables)
-            : await reloadAll(tempClient, 'svm');
-        dispatch({ type: 'SET_TABLES', payload: schemaData });
-        if (virtualTable) {
-            const table = schemaData.find((table) => table.name === virtualTable);
-            if (table) {
-                setInitialVirtualTable(table);
-                setEditQueryView(true);
-            }
-        }
-    };
-    const getReferencedTablesMap = async () => {
-        const data = await quillFetchWithToken({
-            client: {
-                queryEndpoint: state.queryEndpoint,
-                clientId: state.client._id,
-                withCredentials: !!state.withCredentials,
-                queryHeaders: state.queryHeaders,
-            },
-            task: 'referenced-tables-map',
-            metadata: {
-                clientId: state.client._id,
-                databaseType: state.client.databaseType,
-            },
-            adminMode: true,
-        });
-        setReferencedTablesMap(data.data.referencedTablesMap);
-        setReferenceFiltersMap(data.data.referenceFiltersMap);
-    };
-    (0, react_2.useEffect)(() => {
-        if (state.client.id) {
-            getReferencedTablesMap();
-        }
-    }, [state.client.id]);
-    const handleModalSubmit = async (submitRequest, query, ownerTenantFields, name, id, columns, customFieldInfo, override) => {
-        if (override) {
-            setNoCustomerField(true);
-        }
-        else {
-            setNoCustomerField(false);
-        }
-        try {
-            const table = tables?.find((table) => table._id === id);
-            const prevTableName = table ? table.name : undefined;
-            const trimmedName = name?.trim() || undefined;
-            let submitResponse;
-            let duplicateColumns = [];
-            switch (submitRequest) {
-                case 'add':
-                    if (!trimmedName) {
-                        alert('No name found');
-                        return;
-                    }
-                    if (tables?.map((table) => table.name).includes(trimmedName)) {
-                        alert('Name already exists');
-                        return;
-                    }
-                    // determine if there are duplicate names if there are then alert the user
-                    duplicateColumns = (0, columnProcessing_1.getDuplicateColumns)(columns);
-                    if (duplicateColumns.length > 0) {
-                        alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns.join('\n')}`);
-                        return;
-                    }
-                    if (!/^[a-z0-9_]+$/.test(trimmedName)) {
-                        alert('Names can only include lowercase letters, numbers, and underscores');
-                        return;
-                    }
-                    submitResponse = await (0, dataEditor_1.addVirtualTable)(trimmedName, query, customFieldInfo, state, ownerTenantFields, getToken, override);
-                    break;
-                case 'edit':
-                    if (!id) {
-                        return;
-                    }
-                    if (prevTableName && referencedTablesMap?.[prevTableName]) {
-                        // This condition is for only query edits
-                        if (editQueryView) {
-                            const errorColumns = [];
-                            referencedTablesMap[prevTableName].forEach((table) => {
-                                table.referencedColumns.forEach((column) => {
-                                    if (!columns?.find((col) => {
-                                        return col.field === column;
-                                    })) {
-                                        errorColumns.push(`Column '${column}' is referenced by "${table.reportName}" on the "${table.dashboardName}" dashboard`);
-                                    }
-                                });
-                            });
-                            if (errorColumns.length > 0) {
-                                if (!confirm(`Warning\n\n${errorColumns.join('\n')} \n\n${errorColumns.length > 1 ? 'They' : 'It'} will be deleted off of the referencing report${errorColumns.length > 1 ? 's' : ''}`))
-                                    return;
-                            }
-                        }
-                        else {
-                            const referencedTableInfo = referencedTablesMap[prevTableName].map((info) => {
-                                return `"${info.reportName}" on the "${info.dashboardName}" dashboard`;
-                            });
-                            if (referenceFiltersMap?.[prevTableName]) {
-                                const referencedFilterInfo = referenceFiltersMap[prevTableName].map((info) => {
-                                    return `${info.dashboardName} - ${info.filterField}`;
-                                });
-                                alert(`Warning\n\n'${prevTableName}' is referenced in the following dashboard filters: \n\n${referencedFilterInfo.join('\n')} \n\nPlease delete those filters before renaming this virtual table.`);
-                                return;
-                            }
-                            if (table && table.broken) {
-                                alert('Error\n\nThis virtual table has an invalid query. Please fix the query before renaming it.');
-                                return;
-                            }
-                            alert(`Warning\n\n'${prevTableName}' is referenced by: \n${referencedTableInfo.join('\n')} \n\nPlease delete those charts before renaming this virtual table.`);
-                            return;
-                        }
-                    }
-                    if (!trimmedName) {
-                        alert('No name found');
-                        return;
-                    }
-                    if (!/^[a-z0-9_]+$/.test(trimmedName)) {
-                        alert('Names can only include lowercase letters, numbers, and underscores');
-                        return;
-                    }
-                    // determine if there are duplicate names if there are then alert the user
-                    duplicateColumns = (0, columnProcessing_1.getDuplicateColumns)(columns);
-                    if (duplicateColumns.length > 0) {
-                        alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns.join('\n')}`);
-                        return;
-                    }
-                    // check if the tableName is present excluding the table with the same id
-                    if (tables
-                        ?.filter((table) => table._id !== id)
-                        .map((table) => table.name)
-                        .includes(trimmedName)) {
-                        alert('Name already exists');
-                        return;
-                    }
-                    submitResponse = await (0, dataEditor_1.editVirtualTable)(trimmedName, query, id, customFieldInfo, state, ownerTenantFields, getToken, override);
-                    reloadFilteredReports((report) => {
-                        if (report.referencedTables?.includes(prevTableName ?? '')) {
-                            return true;
-                        }
-                        else {
-                            return false;
-                        }
-                    });
-                    break;
-                case 'delete':
-                    if (prevTableName) {
-                        submitResponse = await deleteVirtualTable(id, name, prevTableName);
-                    }
-                    break;
-                default:
-                    setEditName('');
-                    setEditVirtualTableQuery(query);
-                    setEditVirtualTableId('');
-                    setEditVirtualTableOwnerTenantFields(ownerTenantFields);
-                    setEditModalIsOpen(true);
-                    return;
-            }
-            if (submitResponse?.status !== 'success') {
-                alert(`There was an error processing your ${submitRequest} request.`);
-                return;
-            }
-            await reloadTables();
-            closeEditModal();
-            setEditQueryView(false);
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error submitting virtual table',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'VirtualTableManager',
-                    function: 'handleModalSubmit',
-                },
-            });
-            console.error(e);
-        }
-    };
-    const deleteVirtualTable = async (id, name, prevTableName) => {
-        const isPlural = (referencedTablesMap?.[prevTableName]?.length ?? 0) > 1 ? 's' : '';
-        const filtersIsPlural = (referenceFiltersMap?.[prevTableName]?.length ?? 0) > 1 ? 's' : '';
-        if (!confirm('Delete "' + name + '"?'))
-            return;
-        if (!id) {
-            alert('No id found');
-            return;
-        }
-        // Determine if the table is referenced in other charts
-        if (referencedTablesMap?.[prevTableName]) {
-            const referencedTableInfo = referencedTablesMap[prevTableName].map((info) => {
-                return `${info.dashboardName} - ${info.reportName}`;
-            });
-            alert(`This table is referenced in the following dashboard${isPlural}/chart${isPlural}.\n\n${referencedTableInfo.join('\n')} \n\nPlease delete those charts before deleting this table.`);
-            return;
-        }
-        if (referenceFiltersMap?.[prevTableName]) {
-            const referencedFilterInfo = referenceFiltersMap[prevTableName].map((info) => {
-                return `${info.dashboardName} - ${info.filterField}`;
-            });
-            alert(`This table is referenced in the following dashboard filter${filtersIsPlural}.\n\n${referencedFilterInfo.join('\n')} \n\nPlease delete those filters before deleting this table.`);
-            return;
-        }
-        eventTracking?.addBreadcrumb?.({
-            message: 'Confirmed delete table in VirtualTableManager',
-            data: {
-                table: name,
-            },
-            category: 'interaction',
-            level: 'info',
-            timestamp: Date.now(),
-        });
-        const response = await (0, dataEditor_1.deleteVirtualTable)(id, state, getToken);
-        await reloadTables();
-        return response;
-    };
-    const handleEditAddView = async (request, query, ownerTenantFields, name, id, columns, override) => {
-        switch (request) {
-            case 'edit':
-                await handleModalSubmit('edit', query, ownerTenantFields, name, id, columns, undefined, override);
-                break;
-            default:
-                await handleModalSubmit('final-edit', query, ownerTenantFields, undefined, undefined, columns, undefined, override);
-                break;
-        }
-    };
-    if (showCreateEnvironmentModal) {
-        return ((0, jsx_runtime_1.jsx)(CreateEnvironmentModal_1.default, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                minHeight: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: '0px',
-                position: 'relative',
-            }, ref: parentRef, children: [(state.databaseTypeMismatch.show || !editQueryView) && ((0, jsx_runtime_1.jsx)("div", { ref: envHeaderRef, style: {
-                        //   width: 'calc(100vw - 30px)',
-                        display: 'flex',
-                        position: 'sticky',
-                        // position: "fixed",
-                        backgroundColor: 'white',
-                        zIndex: 1,
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        flexDirection: 'row',
-                        paddingTop: 12,
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingLeft: '30px',
-                        paddingRight: '30px',
-                        borderBottomWidth: 1,
-                        borderTopWidth: 0,
-                        borderLeftWidth: 0,
-                        borderRightWidth: 0,
-                        borderStyle: 'solid',
-                        borderColor: state.theme?.borderColor,
-                        paddingBottom: 20,
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'flex-end',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(components_1.EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
-                                        setSelectedDashboard(null);
-                                        setClient(client, true);
-                                    }, onSelectedEditEnvironment: () => {
-                                        setEditEnvironmentModalIsOpen(true);
-                                    }, onCreateNewEnvironment: () => {
-                                        setShowCreateEnvironmentModal(true);
-                                    }, theme: state.theme, parentRef: parentRef, isLoading: clientLoading }) }), !editQueryView && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    gap: 8,
-                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { onClick: () => {
-                                            eventTracking?.addBreadcrumb?.({
-                                                message: 'Clicked refresh tables button in VirtualTableManager',
-                                                category: 'interaction',
-                                                level: 'info',
-                                                timestamp: Date.now(),
-                                            });
-                                            reloadTables(tables);
-                                        }, label: "Refresh Tables" }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: () => {
-                                            setEditName('');
-                                            setEditVirtualTableQuery('');
-                                            setEditVirtualTableId('');
-                                            setInitialVirtualTable(undefined);
-                                            setEditQueryView(true);
-                                            eventTracking?.addBreadcrumb?.({
-                                                message: 'Clicked add virtual table button in VirtualTableManager',
-                                                category: 'interaction',
-                                                level: 'info',
-                                                timestamp: Date.now(),
-                                            });
-                                        }, label: "Add Virtual Table +" })] }))] }) })), clientLoading || areTablesLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                        display: 'grid',
-                        gridGap: 24,
-                        gridTemplateColumns: 'repeat(auto-fill,minmax(460px, 1fr))',
-                        padding: 25,
-                        width: '100%',
-                        ...containerStyle,
-                    }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                            height: '180px',
-                            width: '540px',
-                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                height: '100%',
-                                width: '80%',
-                                boxSizing: 'content-box',
-                                borderRadius: 8,
-                                overflow: 'hidden',
-                            }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }, i))) }, 'edit-view-query')) : state.databaseTypeMismatch.show ? ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!editQueryView ? (tables && tables.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyVirtualTablesComponent_1.default, { onClick: () => {
-                                setEditQueryView(true);
-                                eventTracking?.addBreadcrumb?.({
-                                    message: 'Clicked EmptyVirtualTablesComponent in VirtualTableManager',
-                                    category: 'interaction',
-                                    level: 'info',
-                                    timestamp: Date.now(),
-                                });
-                            } })) : ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'grid',
-                                gridGap: 24,
-                                gridTemplateColumns: 'repeat(auto-fill,minmax(460px, 1fr))',
-                                padding: 25,
-                                height: '100%',
-                                maxHeight: envHeaderRef.current
-                                    ? `calc(100vh - ${envHeaderRef.current?.getBoundingClientRect().bottom ?? 0}px)`
-                                    : '100%',
-                                overflow: 'scroll',
-                            }, children: tables && tables?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tables.map((table) => ((0, jsx_runtime_1.jsx)(Admin_1.TableCell, { table: table, clickTableCellHeader: clickTableCell, clickTableCellBody: () => {
-                                            clickTableCell(table, true);
-                                            setEditQueryView(true);
-                                            eventTracking?.addBreadcrumb?.({
-                                                message: 'Clicked table body in VirtualTableManager',
-                                                category: 'interaction',
-                                                level: 'info',
-                                                timestamp: Date.now(),
-                                            });
-                                        }, isLoading: loadingTables[table._id], reloadAction: (table) => reloadTables([table]), hoverActions: (table) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                gap: 8,
-                                            }, children: [(0, jsx_runtime_1.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',
-                                                        border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
-                                                    }, onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        eventTracking?.addBreadcrumb?.({
-                                                            message: 'Clicked edit query button in VirtualTableManager Table Cell',
-                                                            data: {
-                                                                table: table.name,
-                                                            },
-                                                            category: 'interaction',
-                                                            level: 'info',
-                                                            timestamp: Date.now(),
-                                                        });
-                                                        clickTableCell(table, true);
-                                                        setEditQueryView(true);
-                                                    }, className: "secondary-button-quill", children: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 12, width: 12, style: {
-                                                                marginLeft: 'auto',
-                                                                marginRight: 'auto',
-                                                            }, children: (0, jsx_runtime_1.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" }) })] }), (0, jsx_runtime_1.jsx)("button", { style: {
-                                                        height: 32,
-                                                        width: 32,
-                                                        color: state.theme?.secondaryTextColor,
-                                                        borderRadius: 6,
-                                                        outline: 'none',
-                                                        cursor: 'pointer',
-                                                        fontSize: 14,
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        alignItems: 'center',
-                                                        border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
-                                                    }, onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        eventTracking?.addBreadcrumb?.({
-                                                            message: 'Clicked table settings in VirtualTableManager Table Cell',
-                                                            data: {
-                                                                table: table.name,
-                                                            },
-                                                            category: 'interaction',
-                                                            level: 'info',
-                                                            timestamp: Date.now(),
-                                                        });
-                                                        clickTableCell(table);
-                                                    }, className: "secondary-button-quill", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 16, width: 16, style: {
-                                                            marginLeft: 'auto',
-                                                            marginRight: 'auto',
-                                                        }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z", clipRule: "evenodd" }) }) }), loadingTables[table._id] ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                        width: 32,
-                                                        height: 32,
-                                                        display: 'flex',
-                                                        justifyContent: 'center',
-                                                        alignItems: 'center',
-                                                    }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : ((0, jsx_runtime_1.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',
-                                                        border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
-                                                    }, className: "secondary-button-quill", onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        eventTracking?.addBreadcrumb?.({
-                                                            message: 'Clicked refresh table button in VirtualTableManager Table Cell',
-                                                            data: {
-                                                                table: table.name,
-                                                            },
-                                                            category: 'interaction',
-                                                            level: 'info',
-                                                            timestamp: Date.now(),
-                                                        });
-                                                        reloadTables([table]);
-                                                    }, children: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) })] })), (0, jsx_runtime_1.jsxs)("button", { style: {
-                                                        height: 32,
-                                                        width: 32,
-                                                        color: state.theme?.secondaryTextColor,
-                                                        border: `0 solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
-                                                        borderRadius: 6,
-                                                        outline: 'none',
-                                                        cursor: 'pointer',
-                                                        fontSize: 14,
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        alignItems: 'center',
-                                                    }, onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        eventTracking?.addBreadcrumb?.({
-                                                            message: 'Clicked delete table button in VirtualTableManager Table Cell',
-                                                            data: {
-                                                                table: table.name,
-                                                            },
-                                                            category: 'interaction',
-                                                            level: 'info',
-                                                            timestamp: Date.now(),
-                                                        });
-                                                        deleteVirtualTable(table._id, table.name, table.name);
-                                                    }, className: "secondary-button-quill", children: [(0, jsx_runtime_1.jsx)("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, style: {
-                                                                marginLeft: 'auto',
-                                                                marginRight: 'auto',
-                                                            }, children: (0, jsx_runtime_1.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" }) })] })] })) }, table._id))), (0, jsx_runtime_1.jsx)(EditEnvironmentModal_1.EditEnvironmentModal, { isOpen: editEnvironmentModalIsOpen, setIsOpen: setEditEnvironmentModalIsOpen, onSave: async () => {
-                                            window.location.reload();
-                                        }, ModalComponent: primitives_1.ModalPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, SelectComponent: QuillSelectWithCombo_1.QuillSelectComponentWithCombo, SecondaryButtonComponent: primitives_1.SecondaryButtonPrimitive, TextInputComponent: primitives_1.TextInputPrimitive, HeaderComponent: primitives_1.HeaderPrimitive }, state.client._id)] })) : (Array.from({ length: 4 }).map((_, i) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    height: '180px',
-                                    width: '540px',
-                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                        height: '100%',
-                                        width: '100%',
-                                        boxSizing: 'content-box',
-                                        borderRadius: 8,
-                                        overflow: 'hidden',
-                                    }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }, i)))) }, 'edit-view-query'))) : ((0, jsx_runtime_1.jsx)(CreateEditVirtualTable_1.default, { containerStyle: {}, initialVirtualTable: initialVirtualTable, closeEditVirtualTable: () => setEditQueryView(false), addEditVirtualTable: (request, query, ownerTenantFields, name, id, columns, override) => {
-                                handleEditAddView(request, query, ownerTenantFields, name, id, columns, override);
-                            }, allTableData: allTableData ?? [], schemaIsLoading: schemaIsLoading, client: state.client })), (0, jsx_runtime_1.jsx)(EditAddViewModal, { viewName: editName, viewQuery: editVirtualTableQuery, viewId: editVirtualTableId, viewOwnerTenantFields: editVirtualTableOwnerTenantFields, editModalIsOpen: editModalIsOpen, customFieldInfo: customFieldInfo, closeEditModal: closeEditModal, error: editError, submit: async (submitRequest, query, ownerTenantFields, name, id, columns, customFieldInfo, noCustomerField) => {
-                                if (submitRequest !== 'delete') {
-                                    setSubmittingVirtualTable(true);
-                                }
-                                await handleModalSubmit(submitRequest, query, ownerTenantFields, name, id, columns, customFieldInfo, noCustomerField);
-                                setSubmittingVirtualTable(false);
-                            }, state: state, onEditViewClick: () => setEditQueryView(true), isLoading: submittingVirtualTable, noCustomerField: noCustomerField, setIsPromoteViewModalOpen: setIsPromoteViewModalOpen }), (0, jsx_runtime_1.jsx)(modals_1.PromoteViewModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteViewModalOpen, setIsOpen: setIsPromoteViewModalOpen, ModalComponent: primitives_1.ModalPrimitive, HeaderComponent: primitives_1.HeaderPrimitive, ButtonComponent: primitives_1.ButtonPrimitive, view: editName })] }))] }) }));
-}
-function EditAddViewModal({ viewName, viewQuery, viewOwnerTenantFields, viewId, editModalIsOpen, customFieldInfo, error, closeEditModal, submit, state, onEditViewClick = () => { }, isLoading, noCustomerField, setIsPromoteViewModalOpen, }) {
-    const [name, setName] = (0, react_2.useState)(viewName);
-    const [query, setQuery] = (0, react_2.useState)(viewQuery);
-    const [id, setId] = (0, react_2.useState)(viewId);
-    const [useCustomField, setUseCustomField] = (0, react_2.useState)(customFieldInfo ? true : false);
-    const [customFieldType, setCustomFieldType] = (0, react_2.useState)(customFieldInfo ? customFieldInfo.type : 'eav');
-    const [customFieldQuery, setCustomFieldQuery] = (0, react_2.useState)(customFieldInfo ? customFieldInfo.query : '');
-    const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_2.useState)(false);
-    const [tableData, setTableData] = (0, react_2.useState)(undefined);
-    const [errorInfo, setErrorInfo] = (0, react_2.useState)({ show: false, message: '' });
-    const clientIsSingleTenant = (0, react_2.useMemo)(() => (0, tenants_1.onlySingleDatabaseTenant)(state.client), [state.client]);
-    const { getToken, eventTracking } = (0, useAdmin_1.useAdmin)();
-    (0, react_2.useEffect)(() => {
-        setCustomFieldQuery(customFieldInfo?.query || '');
-        setCustomFieldType(customFieldInfo?.type || 'eav');
-        setUseCustomField(customFieldInfo ? true : false);
-    }, [customFieldInfo]);
-    (0, react_2.useEffect)(() => {
-        setName(viewName);
-    }, [viewName]);
-    (0, react_2.useEffect)(() => {
-        setQuery(viewQuery);
-    }, [viewQuery]);
-    (0, react_2.useEffect)(() => {
-        setId(viewId);
-    }, [viewId]);
-    return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: editModalIsOpen, onClose: () => {
-            setUseCustomField(false);
-            setCustomFieldType('eav');
-            setCustomFieldQuery('');
-            setTableData(undefined);
-            setErrorInfo({ show: false, message: '' });
-            setName('');
-            closeEditModal();
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { height: '100%', overflow: 'scroll', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingBottom: '20px',
-                        // width: '100%'
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                fontSize: '24px',
-                                paddingTop: '0px',
-                                marginTop: '0px',
-                                marginBottom: '0px',
-                                fontWeight: 'bold',
-                                color: state.theme?.primaryTextColor,
-                                fontFamily: state.theme?.fontFamily,
-                            }, children: viewName ? 'Edit Virtual Table' : 'Add Virtual Table' }), (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedDeleteButton, { onClick: closeEditModal, style: undefined })] }), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { ref: (input) => editModalIsOpen && !viewName && input?.focus(), placeholder: "Enter view display name...", onChange: (e) => setName(e.target.value), value: name ? name : '' }), (0, jsx_runtime_1.jsx)("br", {}), viewOwnerTenantFields.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: "Dashboards may only query from virtual tables that share an owner with them. Virtual tables are required to return each of their owners' foreign keys as part of the query.", children: "Owners" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                flexDirection: 'row',
-                                display: 'flex',
-                                gap: 4,
-                            }, children: viewOwnerTenantFields
-                                ?.map((tenantField) => {
-                                return (state.client?.allTenantTypes?.find((t) => t.tenantField === tenantField)?.name || tenantField);
-                            })
-                                .map((tenantField) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    fontWeight: 300,
-                                    fontSize: 12,
-                                    fontFamily: state.theme?.fontFamily,
-                                    color: state.theme?.primaryTextColor,
-                                    padding: 2,
-                                    paddingLeft: 4,
-                                    paddingRight: 4,
-                                    border: '1px solid #E5E7EB',
-                                    borderRadius: 32,
-                                }, children: tenantField }, tenantField))) }), (0, jsx_runtime_1.jsx)("br", {})] })), error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: '#CA3A31' }, children: error }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Query" }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.Highlight, { theme: prism_react_renderer_1.themes.nightOwlLight, code: query || '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsxs)("pre", { className: className, style: {
-                            ...style,
-                            textAlign: 'left',
-                            padding: '1em',
-                            overflow: 'auto',
-                            height: 132,
-                            maxWidth: 460,
-                            borderRadius: 8,
-                            position: 'relative',
-                        }, children: [tokens.map((line, i) => ((0, react_1.createElement)("div", { ...getLineProps({ line }), key: i, style: {
-                                    wordWrap: 'normal',
-                                    whiteSpace: 'normal',
-                                } }, line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token }) }, key)))))), viewName && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: 'absolute',
-                                    bottom: '10px',
-                                    right: '10px',
-                                }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedSecondaryButton, { label: 'Edit Query ↗', onClick: () => {
-                                        closeEditModal();
-                                        onEditViewClick();
-                                    } }) }))] })) }), (0, jsx_runtime_1.jsx)("br", {}), state.client?.featureFlags?.customFieldsEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: '600',
-                                fontSize: '14px',
-                                marginBottom: '6px',
-                                color: state.theme?.secondaryTextColor,
-                                fontFamily: state.theme?.fontFamily,
-                            }, children: "Custom fields" }), (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: useCustomField, onClick: () => {
-                                setUseCustomField((useCustomField) => !useCustomField);
-                            }, style: {
-                                scale: 1.5,
-                            } }), (0, jsx_runtime_1.jsx)("br", {}), useCustomField && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { style: {
-                                        fontWeight: '600',
-                                        fontSize: '14px',
-                                        marginBottom: '6px',
-                                        marginTop: '20px',
-                                        color: state.theme?.secondaryTextColor,
-                                        fontFamily: state.theme?.fontFamily,
-                                    }, children: "Custom field type" }), (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { theme: state.theme, value: customFieldType?.toLowerCase(), onChange: (e) => {
-                                        setCustomFieldType(e);
-                                    }, left: { label: 'EAV', value: 'eav' }, right: { label: 'JSON', value: 'json' } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                        fontWeight: '600',
-                                        fontSize: '14px',
-                                        marginBottom: '6px',
-                                        color: state.theme?.secondaryTextColor,
-                                        fontFamily: state.theme?.fontFamily,
-                                    }, children: "Custom field query" }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                        fontWeight: '400',
-                                        fontSize: '14px',
-                                        marginBottom: '20px',
-                                        color: state.theme?.secondaryTextColor,
-                                        fontFamily: state.theme?.fontFamily,
-                                    }, children: customFieldType === 'eav'
-                                        ? `A table of custom fields. It must have these columns: ref_table, ref_id, ref_table_id_field, field, value, type${clientIsSingleTenant ? '' : `, ${state.client.customerFieldName.replaceAll('"', '')}`}.`
-                                        : `A table of custom fields. It must have these columns: ref_table, ref_column, field${clientIsSingleTenant ? '' : `, ${state.client.customerFieldName.replaceAll('"', '')}`}.` }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: customFieldQuery, setValue: (e) => {
-                                        setCustomFieldQuery(e);
-                                    }, setEditorMounted: () => { }, containerStyle: {
-                                        width: 800,
-                                    }, schema: [] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { label: 'Run query', onClick: async () => {
-                                        if (/limit\s+\d+\s*;?\s*$/i.test(customFieldQuery)) {
-                                            setErrorInfo({
-                                                show: true,
-                                                message: 'Error: Please remove the limit at the end of your query.',
-                                            });
-                                            return;
-                                        }
-                                        setErrorInfo({ show: false, message: '' });
-                                        setRunQueryButtonLoading(true);
-                                        const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(state.client._id, customFieldQuery, state.client.databaseType, state.queryEndpoint, getToken, eventTracking, state.queryHeaders);
-                                        if (!getSqlResults.success) {
-                                            setErrorInfo({
-                                                show: true,
-                                                message: getSqlResults.error,
-                                            });
-                                        }
-                                        else {
-                                            setErrorInfo({ show: false, message: '' });
-                                            setTableData(getSqlResults);
-                                        }
-                                        setRunQueryButtonLoading(false);
-                                    } }), (0, jsx_runtime_1.jsx)("br", {}), runQueryButtonLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        height: '250px',
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                    }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })), !errorInfo.show && tableData && !runQueryButtonLoading && ((0, jsx_runtime_1.jsx)(react_3.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
-                                        height: '250px',
-                                        maxWidth: '800px',
-                                        paddingTop: '20px',
-                                    }, hideCSVDownloadButton: true })), errorInfo.show && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontSize: 15,
-                                        fontWeight: '400',
-                                        paddingTop: '20px',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            padding: 30,
-                                            background: 'rgba(0,0,0,0.02)',
-                                            display: 'inline-block',
-                                            flex: 0,
-                                            borderRadius: 6,
-                                        }, children: errorInfo.message }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [viewName ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                marginTop: 20,
-                                gap: 8,
-                            }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { label: "Promote", onClick: () => {
-                                    setIsPromoteViewModalOpen(true);
-                                }, style: { color: 'black', backgroundColor: 'white' } }) })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'flex-end',
-                                marginTop: 20,
-                                gap: 8,
-                            }, children: [viewName && ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { onClick: () => submit('delete', query, viewOwnerTenantFields, name, id), label: "Delete", style: { color: 'red', backgroundColor: 'white' } })), (0, jsx_runtime_1.jsx)(UiComponents_1.QuillToolTip, { text: 'Please run custom field query', enabled: useCustomField && !tableData, textStyle: {
-                                        maxWidth: '200px',
-                                        whiteSpace: 'normal',
-                                    }, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { onClick: () => {
-                                            if (!name) {
-                                                alert('Please enter a name');
-                                                return;
-                                            }
-                                            let customFieldRefColumns = [];
-                                            if (useCustomField) {
-                                                const fields = tableData?.fields.map((field) => field.field);
-                                                const missingFields = [];
-                                                if (!fields) {
-                                                    alert('Custom field query is missing required columns');
-                                                    return;
-                                                }
-                                                if (customFieldType === 'eav') {
-                                                    // make sure the tableData has the required columns
-                                                    [
-                                                        'ref_table',
-                                                        'ref_id',
-                                                        'ref_table_id_field',
-                                                        'field',
-                                                        'value',
-                                                        'type',
-                                                        clientIsSingleTenant
-                                                            ? ''
-                                                            : state.client.customerFieldName.replaceAll('"', ''),
-                                                    ].forEach((requiredField) => {
-                                                        if (!fields.includes(requiredField) &&
-                                                            requiredField !== '') {
-                                                            missingFields.push(requiredField);
-                                                        }
-                                                    });
-                                                }
-                                                else {
-                                                    [
-                                                        'ref_table',
-                                                        'field',
-                                                        'ref_column',
-                                                        clientIsSingleTenant
-                                                            ? ''
-                                                            : state.client.customerFieldName.replaceAll('"', ''),
-                                                    ].forEach((requiredField) => {
-                                                        if (!fields.includes(requiredField) &&
-                                                            requiredField !== '') {
-                                                            missingFields.push(requiredField);
-                                                        }
-                                                    });
-                                                }
-                                                if (missingFields.length > 0) {
-                                                    alert(`Custom field query is missing required columns: ${missingFields.join(', ')}`);
-                                                    return;
-                                                }
-                                                if (customFieldType === 'json') {
-                                                    customFieldRefColumns = [
-                                                        ...new Set(tableData?.rows?.map((row) => {
-                                                            return row['ref_column'];
-                                                        })),
-                                                    ];
-                                                }
-                                            }
-                                            submit(viewName ? 'edit' : 'add', query, viewOwnerTenantFields, name, id, undefined, useCustomField
-                                                ? {
-                                                    type: customFieldType,
-                                                    query: customFieldQuery,
-                                                    refColumns: customFieldRefColumns,
-                                                }
-                                                : undefined, noCustomerField);
-                                        }, disabled: !name || (useCustomField && !tableData), label: viewName ? 'Save changes' : 'Create virtual table', isLoading: isLoading }) })] })] })] }) }));
-}