@quillsql/admin 1.7.0 → 1.7.2

package/dist/esm/components/Tenants/EditTenant.js

@@ -1,797 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState, } from 'react';
-import TextInputPrimitive from '../../primitives/TextInputPrimitive';
-import { useDatabaseSchema } from '../../hooks/useDatabaseSchema';
-import { getVirtualTableData } from '../../api/ConnectionClient';
-import { SchemaListComponent, SINGLE_TENANT, Table, } from '@quillsql/react';
-import { LoadingSpinner } from '../UiComponents';
-import InputLabel from '../InputLabel';
-import QuillTab from '../QuillTab';
-import { QuillSelectComponentWithCombo } from '../QuillSelectWithCombo';
-import CardSection from '../CardSection';
-import { useAdmin } from '../../AdminProvider';
-import { isNumberType, isStringType, processColumnReference, } from '../../utils/columnProcessing';
-import SqlTextEditor from '../SqlTextEditor';
-import { Highlight, themes } from 'prism-react-renderer';
-import { ModalPrimitive } from '../../primitives';
-const tooltipDictionary = {
-    'Tenant Division': 'How do you represent your customers in your database? If you only have one database per customer, choose "Database", otherwise choose "Row". You may not change this later.',
-    'Tenant Role': 'Owner tenants own dashboards and virtual tables, guaranteeing they are filtering the data contained within. Viewer tenants are only able to transform to owner tenants through custom mapping queries. Owners may not be deleted or converted into Viewers.',
-    'Tenant Table': "Which table is your customer information located in? If it's not all located in one table, use a custom query to join it together",
-    'Tenant ID Field': 'How do you uniquely identify each customer? This will be used when filtering data or mapping to the dashboard owner.',
-    'Foreign Key': "What is your tenant's ID field on other tables? For the dashboard owner, this field must be present in all virtual tables. For viewers, this field will be required in your mapping query to the owner. You may not change this later.",
-    'Tenant Name Field': 'A human readable label for each tenant ID. Does not necessarily need to be unique.',
-    'Tenant Flag Field': 'How would you like to tag reports that only certain tenants should see? This field must have a unique, 1:1 mapping to the Tenant ID (in most cases, this will be the same field as the Tenant ID).',
-    Mappings: "Define queries that return the foreign key for this tenant along with another predefined tenant type, allowing tenants to view each other's reports and data in a 1->many mapping",
-    'Tags List': 'Rather than deriving tags from rows in the database, database tenants can have arbitrary tags for showing/hiding reports. Enter as a comma separated list.',
-};
-export function EditTenant({ tenant, setTenant, setCreateNewTenant, onSubmitEditTenant, onValidateEditTenant, HeaderComponent, TextInputComponent, ButtonComponent, ModalComponent, SecondaryButtonComponent, isSubmitTenantLoading, client, queryEndpoint, hideDiscardChanges, isOnboarding, }) {
-    const [tenantName, setTenantName] = useState(tenant?.name ?? (!HeaderComponent ? 'Organization' : undefined));
-    const [tenantField, setTenantField] = useState(tenant?.tenantField !== 'QUILL_SINGLE_TENANT' ? tenant?.tenantField : '');
-    const [tenantTable, setTenantTable] = useState(tenant?.tenantTable);
-    const [tenantFlagField, setTenantFlagField] = useState(tenant?.tenantFlagField);
-    const [tenantIdField, setTenantIdField] = useState(tenant?.tenantIdField);
-    const [tenantNameField, setTenantNameField] = useState(tenant?.tenantLabelField);
-    const [tenantDefaultId, setTenantDefaultId] = useState(tenant?.defaultId);
-    const [tenantMappings, setTenantMappings] = useState(tenant?.mappings ?? {});
-    const [tenantScope, setTenantScope] = useState(tenant?.scope ?? 'row');
-    const [tenantRole, setTenantRole] = useState(client.ownerTenantFields.includes(tenant?.tenantField ?? '') ||
-        hideDiscardChanges
-        ? 'owner'
-        : 'viewer');
-    const [tenantFieldType, setTenantFieldType] = useState(tenant?.fieldType);
-    const [isDatabaseTablesLoading, setIsDatabaseTablesLoading] = useState(true);
-    const [tenantQuery, setTenantQuery] = useState(tenant?.tenantTableQuery);
-    const [tenantFlags, setTenantFlags] = useState(tenant?.flags?.join(', '));
-    const tenantFlagOptions = useMemo(() => {
-        return Array.from(new Set(tenantFlags
-            ?.split(',')
-            .map((tag) => tag.trim())
-            .filter((tag) => tag.length > 0) ?? [])).map((tag) => ({
-            label: tag,
-            value: tag,
-        }));
-    }, [tenantFlags]);
-    // const [databaseTables, setDatabaseTables] = useState<ColumnsByTable[]>([]);
-    const { schema: databaseTables, isLoading: isSchemaLoading } = useDatabaseSchema();
-    const [errorMessage, setErrorMessage] = useState(undefined);
-    const [currentTableObj, setCurrentTableObj] = useState(undefined);
-    const [mappingToEdit, setMappingToEdit] = useState();
-    const [isEditingTenantQuery, setIsEditingTenantQuery] = useState(false);
-    const [returnedTenantIds, setReturnedTenantIds] = useState([]);
-    const [showFlagWarning, setShowFlagWarning] = useState(false);
-    const { getToken, quillFetchWithToken, eventTracking } = useAdmin();
-    const formIssue = useMemo(() => {
-        if (!tenantName) {
-            return 'Must have a unique name';
-        }
-        if (tenantScope === 'row' && !tenantField) {
-            return 'Must have a foreign key';
-        }
-        if (tenantScope === 'row' && !tenantTable && !tenantQuery) {
-            return 'Must have a table';
-        }
-        if (tenantScope === 'row' && !tenantFlagField) {
-            return 'Must have a tag field';
-        }
-        if (tenantScope === 'row' && !tenantIdField) {
-            return 'Must have an ID field';
-        }
-        if (tenantScope === 'row' && !tenantNameField) {
-            return 'Must have a name field';
-        }
-        if (tenantScope === 'row' && tenantField === 'QUILL_SINGLE_TENANT') {
-            return 'Tenant field cannot be QUILL_SINGLE_TENANT';
-        }
-        if (tenantScope === 'row' && tenantField === 'QUILL_ALL_TENANTS') {
-            return 'Tenant field cannot be QUILL_ALL_TENANTS';
-        }
-    }, [
-        tenantName,
-        tenantField,
-        tenantTable,
-        tenantQuery,
-        tenantFlagField,
-        tenantIdField,
-        tenantNameField,
-        tenantScope,
-    ]);
-    const onDeleteMapping = (mapping) => {
-        setTenantMappings((prev) => {
-            const newMappings = { ...prev };
-            delete newMappings[mapping];
-            return newMappings;
-        });
-    };
-    const setSelectedTenantTable = useCallback((table) => {
-        if (table === tenantTable)
-            return;
-        setTenantTable(table);
-        const tableObj = databaseTables?.find((t) => t.tableName === table);
-        setCurrentTableObj(tableObj);
-        if (tableObj?.columns.some((col) => col.columnName === 'id')) {
-            setTenantIdField('id');
-            setTenantFlagField('id');
-        }
-        else if (!tableObj?.columns.some((col) => col.columnName === tenantIdField)) {
-            setTenantIdField(undefined);
-            if (!tableObj?.columns.some((col) => col.columnName === tenantFlagField)) {
-                setTenantFlagField(undefined);
-            }
-        }
-        if (tableObj?.columns.some((col) => col.columnName === 'name')) {
-            setTenantNameField('name');
-        }
-        else if (!tableObj?.columns.some((col) => col.columnName === tenantNameField)) {
-            setTenantNameField(undefined);
-        }
-    }, [
-        databaseTables,
-        tenantTable,
-        tenantIdField,
-        tenantFlagField,
-        tenantNameField,
-    ]);
-    useEffect(() => {
-        async function fetchTables() {
-            if (!tenantQuery) {
-                setCurrentTableObj(databaseTables?.find((table) => table.tableName === tenantTable));
-            }
-            else {
-                const resp = await getVirtualTableData(client._id, tenantQuery, client.databaseType, queryEndpoint, getToken, eventTracking, client.queryHeaders);
-                if (resp.status === 'error') {
-                    throw new Error(resp.error);
-                }
-                setCurrentTableObj({
-                    columns: resp.fields.map((field) => ({
-                        columnName: field.name,
-                        displayName: field.displayName,
-                        fieldType: field.fieldType,
-                        dataTypeId: field.dataTypeID,
-                        field: field.field,
-                    })),
-                });
-            }
-            setIsDatabaseTablesLoading(false);
-        }
-        if (!isSchemaLoading)
-            fetchTables();
-    }, [isSchemaLoading]);
-    const setCustomSQLQuery = useCallback(async (query) => {
-        const resp = await getVirtualTableData(client._id, query, client.databaseType, queryEndpoint, getToken, eventTracking, client.queryHeaders);
-        if (resp.status === 'error') {
-            throw new Error(resp.error);
-        }
-        if (!resp.success) {
-            throw new Error(resp.message ?? resp.error);
-        }
-        setTenantTable(undefined);
-        setTenantQuery(query);
-        setCurrentTableObj({
-            columns: resp.fields.map((field) => ({
-                columnName: field.name,
-                displayName: field.displayName,
-                fieldType: field.fieldType,
-                dataTypeId: field.dataTypeID,
-                field: field.field,
-            })),
-        });
-        if (resp.fields.some((field) => field.name === 'id')) {
-            setTenantIdField('id');
-            setTenantFlagField('id');
-        }
-        else {
-            setTenantIdField(undefined);
-        }
-        if (resp.fields.some((field) => field.name === 'name')) {
-            setTenantNameField('name');
-        }
-        else {
-            setTenantNameField(undefined);
-        }
-        setIsEditingTenantQuery(false);
-    }, [setTenantQuery, setIsEditingTenantQuery]);
-    const handleSubmitMappingEdit = async (mappingQuery, toTenant, mode) => {
-        if (!mappingQuery?.length) {
-            return;
-        }
-        if (mode === 'validate') {
-            try {
-                const resp = await quillFetchWithToken({
-                    client: {
-                        queryEndpoint,
-                        clientId: client._id,
-                        withCredentials: false,
-                        queryHeaders: client.queryHeaders,
-                    },
-                    task: 'validate-tenant-mapping',
-                    metadata: {
-                        query: mappingQuery,
-                        fromTenantField: tenantField,
-                        toTenantField: toTenant,
-                        clientId: client._id,
-                    },
-                    adminMode: true,
-                });
-                if (resp.error) {
-                    throw new Error(resp.error);
-                }
-                return resp.queries.queryResults[0];
-            }
-            catch (e) {
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error validating tenant mapping',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'EditTenant',
-                        function: 'handleSubmitMappingEdit',
-                    },
-                });
-                throw e;
-            }
-        }
-        else if (mode === 'save') {
-            let newMappings = { ...tenantMappings };
-            if (mappingToEdit && mappingToEdit !== toTenant) {
-                delete newMappings[mappingToEdit];
-            }
-            newMappings = {
-                ...newMappings,
-                [toTenant]: {
-                    query: mappingQuery,
-                },
-            };
-            setTenantMappings(newMappings);
-            setMappingToEdit(undefined);
-        }
-    };
-    const handleEditTenant = async (submit = false) => {
-        if (!tenantName?.length) {
-            setErrorMessage('Tenant name is required');
-        }
-        if (tenantScope === 'row' && !tenantField?.length) {
-            setErrorMessage('Tenant field is required');
-        }
-        try {
-            if (tenantScope === 'row' && tenantName && tenantField) {
-                const validateTenant = {
-                    ...tenant,
-                    name: tenantName,
-                    tenantField,
-                    scope: tenantScope,
-                    tenantFlagField: tenantFlagField?.trim(),
-                    tenantIdField,
-                    tenantLabelField: tenantNameField,
-                    mappings: tenantMappings,
-                    defaultId: tenantDefaultId,
-                    fieldType: tenantFieldType,
-                    clientId: client.id,
-                    role: tenantRole,
-                };
-                if (tenantQuery) {
-                    validateTenant.tenantTableQuery = tenantQuery;
-                    delete validateTenant.tenantTable;
-                }
-                else {
-                    validateTenant.tenantTable = tenantTable;
-                    delete validateTenant.tenantTableQuery;
-                }
-                if (submit) {
-                    await onSubmitEditTenant(validateTenant, !tenant || isOnboarding, isOnboarding);
-                    return;
-                }
-                else {
-                    const response = await onValidateEditTenant(validateTenant, isOnboarding);
-                    if (!response.some((r) => r.id === tenantDefaultId)) {
-                        setTenantDefaultId(undefined);
-                    }
-                    setReturnedTenantIds(response);
-                    if (typeof response?.[0]?.id === 'string') {
-                        setTenantFieldType('string');
-                    }
-                    else if (typeof response?.[0]?.id === 'number') {
-                        setTenantFieldType('number');
-                    }
-                }
-            }
-            else if (tenantScope === 'database' && tenantName) {
-                await onSubmitEditTenant({
-                    name: tenantName,
-                    tenantField: SINGLE_TENANT,
-                    flags: Array.from(new Set(tenantFlags?.split(',').map((f) => f.trim()))),
-                    defaultId: tenantDefaultId,
-                    scope: tenantScope,
-                    mappings: undefined,
-                    clientId: client.id,
-                    role: tenantRole,
-                }, !tenant || isOnboarding, isOnboarding);
-            }
-        }
-        catch (e) {
-            console.log('error', e);
-            eventTracking?.logError?.({
-                type: 'bug',
-                severity: 'high',
-                message: 'Error editing tenant',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'EditTenant',
-                    function: 'handleEditTenant',
-                },
-            });
-            setErrorMessage(e.message);
-        }
-    };
-    if (isDatabaseTablesLoading) {
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [HeaderComponent && (_jsx(HeaderComponent, { label: tenant ? 'Edit Tenant' : 'Create tenant' })), _jsx("div", { style: {
-                        minHeight: 200,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: 400,
-                    }, children: _jsx(LoadingSpinner, {}) })] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 20,
-                    width: '100%',
-                    height: '100%',
-                    maxHeight: '100%',
-                }, children: [HeaderComponent && (_jsx(HeaderComponent, { label: tenant ? 'Edit Tenant' : 'Create Tenant' })), _jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, "data-testid": "quill-input-tenant-name", children: [_jsx(InputLabel, { children: "Name" }), _jsx(TextInputComponent, { width: "230px", value: tenantName ?? '', onChange: (e) => setTenantName(e.target.value) })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: 486 }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Division'], children: "Tenant Division" }), _jsx(QuillTab, { width: "486px", modeToggleOptions: [
-                                    { value: 'row', label: 'Row level' },
-                                    { value: 'database', label: 'Database level' },
-                                    // { value: 'schema', label: 'Schema level' },
-                                ], toggleMode: tenantScope, setToggleMode: (mode) => setTenantScope(mode), disabled: !!tenant && !isOnboarding })] }), !hideDiscardChanges && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: 486 }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Role'], children: "Tenant Role" }), _jsx(QuillTab, { width: "486px", modeToggleOptions: [
-                                    { value: 'owner', label: 'Owner' },
-                                    { value: 'viewer', label: 'Viewer' },
-                                ], toggleMode: tenantRole, setToggleMode: (mode) => setTenantRole(mode), disabled: !!tenant && tenantRole === 'owner' && !isOnboarding })] })), tenantScope === 'row' ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [tenantQuery && (_jsxs(_Fragment, { children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Table'], children: "Tenant Table" }), _jsx(CustomSQLQueryCard, { query: tenantQuery, SecondaryButtonComponent: SecondaryButtonComponent, setIsEditingTenantQuery: setIsEditingTenantQuery, setTenantQuery: setTenantQuery, style: {
-                                            width: 486,
-                                        } })] })), _jsx(TenantQueryForm, { creatingTenant: !tenant, customQuery: tenantQuery, schema: databaseTables ?? [], currentTableObj: currentTableObj, tenantField: tenantField, setTenantField: setTenantField, tenantTable: tenantTable, setTenantTable: setSelectedTenantTable, tenantFlagField: tenantFlagField, setTenantFlagField: setTenantFlagField, tenantIdField: tenantIdField, setTenantIdField: setTenantIdField, tenantNameField: tenantNameField, setTenantNameField: setTenantNameField, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, setIsEditingTenantQuery: setIsEditingTenantQuery, isOnboarding: isOnboarding }), client.allTenantTypes.filter((t) => t.scope === 'row' && t.tenantField !== tenant?.tenantField).length >= 1 &&
-                                tenantField &&
-                                tenantFlagField &&
-                                tenantIdField &&
-                                tenantNameField && (_jsxs("div", { style: { marginTop: 20 }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Mappings'], children: "Mappings" }), Object.keys(tenantMappings).map((key) => (_jsx(MappingCard, { mappingField: key, SecondaryButtonComponent: SecondaryButtonComponent, setMappingToEdit: setMappingToEdit, onDelete: onDeleteMapping }, key))), Object.keys(tenantMappings).length <
-                                        client.allTenantTypes.filter((t) => t.scope === 'row' &&
-                                            t.tenantField !== tenant?.tenantField).length &&
-                                        tenantField &&
-                                        tenantFlagField &&
-                                        tenantIdField &&
-                                        tenantNameField && (_jsx("div", { style: { marginTop: 8 }, children: _jsx(SecondaryButtonComponent, { label: "Add Mapping", disabled: !tenantField, onClick: () => {
-                                                const firstUnusedKey = client.allTenantTypes.find((tenant) => !tenantMappings[tenant.tenantField] &&
-                                                    tenant.tenantField !== tenantField &&
-                                                    tenant.scope === 'row');
-                                                if (firstUnusedKey) {
-                                                    setTenantMappings((prev) => ({
-                                                        ...prev,
-                                                        [firstUnusedKey.tenantField]: { query: '' },
-                                                    }));
-                                                    if (errorMessage ===
-                                                        'You must have a unique foreign key to create a mapping') {
-                                                        setErrorMessage(undefined);
-                                                    }
-                                                    setMappingToEdit(firstUnusedKey.tenantField);
-                                                }
-                                                else if (client.allTenantTypes.some((t) => t.tenantField === tenantField)) {
-                                                    setErrorMessage('You must have a unique foreign key to create a mapping');
-                                                }
-                                            } }) }))] }))] })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tags List'], children: "Tags List" }), _jsx("div", { "data-testid": "quill-input-tenant-flags", children: _jsx(TextInputComponent, { width: "230px", value: tenantFlags ?? '', onChange: (e) => {
-                                                setTenantFlags(e.target.value);
-                                                setTenantDefaultId(undefined);
-                                            }, placeholder: "tag1, tag2, tag3..." }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { children: "Default Tag" }), _jsx("div", { "data-testid": "quill-select-default-tenant-flag", children: _jsx(QuillSelectComponentWithCombo, { width: 230, value: tenantDefaultId?.toString(), onChange: (e) => setTenantDefaultId(e.target.value), options: tenantFlagOptions, hideEmptyOption: true }) })] })] })), _jsx("div", { style: { color: 'red', fontSize: 12 }, children: errorMessage?.length && errorMessage }), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: 16,
-                            justifyContent: 'flex-end',
-                        }, "data-testid": "quill-save-changes-button", children: [!hideDiscardChanges && (_jsx(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => {
-                                    setTenant(undefined);
-                                    setCreateNewTenant(false);
-                                }, style: { minHeight: 40 } })), _jsx(ButtonComponent, { label: "Save Changes", onClick: () => {
-                                    if (tenantFlagField !== tenant?.tenantFlagField &&
-                                        !!tenant?.tenantFlagField &&
-                                        !isOnboarding) {
-                                        setShowFlagWarning(true);
-                                    }
-                                    else {
-                                        handleEditTenant(false);
-                                    }
-                                }, isLoading: isSubmitTenantLoading, disabled: !!formIssue, tooltipText: formIssue })] })] }), _jsx(ModalComponent, { isOpen: isEditingTenantQuery, onClose: () => setIsEditingTenantQuery(false), style: {
-                    minWidth: '500px',
-                }, children: _jsx(CustomSQLQueryModal, { customSQLQuery: tenantQuery ?? '', setCustomSQLQuery: setCustomSQLQuery, databaseTables: databaseTables ?? [], databaseType: client.databaseType, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, onClose: () => setIsEditingTenantQuery(false) }) }), _jsx(ModalComponent, { isOpen: mappingToEdit ? true : false, onClose: () => {
-                    Object.keys(tenantMappings).forEach((key) => {
-                        if (!tenantMappings[key]?.query) {
-                            onDeleteMapping(key);
-                        }
-                    });
-                    setMappingToEdit(undefined);
-                }, style: {
-                    minWidth: '500px',
-                }, children: _jsx(MappingForm, { currentMapping: tenantMappings, client: client, toTenant: mappingToEdit ?? '', fromTenant: tenantField ?? '', mappingQuery: mappingToEdit ? tenantMappings[mappingToEdit]?.query : '', handleSubmitMappingEdit: handleSubmitMappingEdit, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, onClose: (mappingTo) => {
-                        Object.keys(tenantMappings).forEach((key) => {
-                            if (!tenantMappings[key]?.query &&
-                                (!mappingTo || key !== mappingTo)) {
-                                onDeleteMapping(key);
-                            }
-                        });
-                        setMappingToEdit(undefined);
-                    }, databaseTables: databaseTables ?? [], databaseType: client.databaseType }) }), _jsx(ModalComponent, { isOpen: showFlagWarning, onClose: () => setShowFlagWarning(false), style: {
-                    minWidth: '300px',
-                }, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 20,
-                        maxWidth: 450,
-                    }, children: [HeaderComponent && _jsx(HeaderComponent, { label: "Warning" }), _jsxs("div", { children: [_jsx("strong", { children: "You have changed the field you use to tag reports. " }), "All reports that are currently tagged only for this tenant will become unreachable until you switch the field back."] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'flex-end',
-                                gap: 16,
-                            }, children: [_jsx(SecondaryButtonComponent, { label: "Cancel", onClick: () => setShowFlagWarning(false) }), _jsx(ButtonComponent, { label: "Continue", isLoading: isSubmitTenantLoading, onClick: () => {
-                                        handleEditTenant(false).then(() => setShowFlagWarning(false));
-                                    } })] })] }) }), _jsx(ModalComponent, { isOpen: returnedTenantIds.length > 0, onClose: () => setReturnedTenantIds([]), style: {
-                    minWidth: '500px',
-                }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, "data-testid": "quill-tenant-ids-modal", children: [_jsx(CardSection, { children: "Tenant IDs" }), _jsx(Table, { containerStyle: {
-                                minHeight: 260,
-                                height: 75 + Math.min(returnedTenantIds?.length ?? 10, 5) * 37,
-                            }, rows: returnedTenantIds ?? [], columns: [
-                                { label: 'ID', field: 'id' },
-                                { label: 'Label', field: 'label' },
-                                { label: 'Flag', field: 'flag' },
-                            ] }), _jsxs("div", { children: [_jsx(InputLabel, { children: "Default Tenant ID" }), _jsx("div", { "data-testid": "quill-select-default-tenant-id-field", children: _jsx(QuillSelectComponentWithCombo, { value: tenantDefaultId?.toString(), onChange: (e) => setTenantDefaultId(tenantFieldType === 'number'
-                                            ? parseInt(e.target.value)
-                                            : e.target.value), options: returnedTenantIds.map((tenant) => ({
-                                            label: tenant.label,
-                                            value: tenant.id.toString(),
-                                        })), width: 230, hideEmptyOption: true }) })] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'flex-end',
-                                gap: 16,
-                            }, children: [_jsx(SecondaryButtonComponent, { label: "Go Back", onClick: () => setReturnedTenantIds([]) }), _jsx(ButtonComponent, { label: "Looks Good", onClick: () => {
-                                        setReturnedTenantIds([]);
-                                        handleEditTenant(true);
-                                    }, disabled: !tenantDefaultId })] })] }) })] }));
-}
-function CustomSQLQueryModal({ customSQLQuery, setCustomSQLQuery, databaseTables, databaseType, ButtonComponent, SecondaryButtonComponent, onClose, }) {
-    const { state, eventTracking } = useAdmin();
-    const [localQuery, setLocalQuery] = useState(customSQLQuery);
-    const [tableSearchQuery, setTableSearchQuery] = useState('');
-    const [displayedTableData, setDisplayedTableData] = useState(databaseTables);
-    const [loading, setLoading] = useState(false);
-    const [errorMessage, setErrorMessage] = useState(undefined);
-    const onSave = useCallback(async () => {
-        setLoading(true);
-        try {
-            await setCustomSQLQuery(localQuery);
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug',
-                severity: 'high',
-                message: 'Error saving custom SQL query',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'CustomSQLQueryModal',
-                    function: 'onSave',
-                },
-            });
-            setErrorMessage(e.message);
-        }
-        setLoading(false);
-    }, [localQuery, setCustomSQLQuery]);
-    const handleClickSchemaItem = async (event) => {
-        const name = event.target.textContent;
-        if (!name) {
-            return;
-        }
-        const newQuery = `SELECT * FROM ${processColumnReference(name, databaseType.toLowerCase())};`;
-        if (!localQuery || localQuery.length === 0) {
-            setLocalQuery(newQuery);
-        }
-        await navigator.clipboard.writeText(newQuery);
-    };
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'stretch',
-            height: 300 + 20 * Math.ceil((errorMessage?.length ?? 0) / 60),
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 20,
-                    maxWidth: '350px',
-                }, children: [_jsx("div", { style: {
-                            paddingLeft: '20px',
-                            paddingRight: '30px',
-                        }, children: _jsx(TextInputPrimitive, { placeholder: "Filter tables...", onChange: (e) => {
-                                setTableSearchQuery(e.target.value);
-                                setDisplayedTableData(databaseTables.filter((table) => {
-                                    return (table.tableName
-                                        ?.toLowerCase()
-                                        ?.includes(e.target.value.toLowerCase().trim()) ||
-                                        table.columns.some((col) => col.field
-                                            ?.toLowerCase()
-                                            ?.includes(e.target.value.toLowerCase().trim())));
-                                }));
-                            }, value: tableSearchQuery, width: '100%' }) }), _jsx("div", { style: { overflow: 'scroll', minHeight: 0 }, children: _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingSpinner, loading: false, width: '100%', onClick: handleClickSchemaItem }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx(InputLabel, { children: "Custom SQL Query" }), _jsx(SqlTextEditor, { containerStyle: {
-                            width: 460,
-                            marginBottom: 10,
-                            marginTop: 10,
-                        }, value: localQuery, setValue: (e) => {
-                            setLocalQuery(e);
-                        }, setEditorMounted: () => { }, schema: databaseTables, databaseType: databaseType }), errorMessage && (_jsx("div", { style: {
-                            color: 'red',
-                            fontSize: 12,
-                            width: 460,
-                            fontFamily: 'monospace',
-                        }, children: errorMessage })), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'flex-end',
-                            gap: 16,
-                        }, children: [_jsx(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => onClose() }), _jsx(ButtonComponent, { label: "Save Changes", isLoading: loading, onClick: onSave })] })] })] }));
-}
-function CustomSQLQueryCard({ query, SecondaryButtonComponent, setIsEditingTenantQuery, setTenantQuery, style, }) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.07)',
-            border: '1px solid #e7e7e7',
-            borderRadius: 6,
-            padding: 10,
-            width: '100%',
-            ...style,
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    width: '100%',
-                    justifyContent: 'space-between',
-                }, children: [_jsx(InputLabel, { children: "Custom SQL Query" }), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 12,
-                        }, children: [_jsx(SecondaryButtonComponent, { onClick: () => setIsEditingTenantQuery(true), label: "Edit" }), _jsx(SecondaryButtonComponent, { onClick: () => setTenantQuery(''), label: "Delete" })] })] }), _jsx(Highlight, { theme: themes.nightOwlLight, code: query ?? '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, style: {
-                        ...style,
-                        marginTop: 10,
-                        textAlign: 'left',
-                        padding: '1em',
-                        overflow: 'auto',
-                        overflowX: 'visible',
-                        height: 132,
-                        width: '100%',
-                        borderRadius: 6,
-                    }, 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)))))) })) })] }));
-}
-function MappingCard({ mappingField, SecondaryButtonComponent, setMappingToEdit, onDelete, }) {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 20,
-            alignItems: 'center',
-            marginTop: 10,
-        }, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.07)',
-                border: '1px solid #e7e7e7',
-                borderRadius: 6,
-                padding: 10,
-                justifyContent: 'space-between',
-                width: '100%',
-            }, children: [_jsx(InputLabel, { children: mappingField }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(SecondaryButtonComponent, { label: "Edit", onClick: () => setMappingToEdit(mappingField) }), _jsx(SecondaryButtonComponent, { label: "Delete", onClick: () => onDelete(mappingField) })] })] }) }));
-}
-function MappingForm({ currentMapping, client, toTenant, fromTenant, mappingQuery, handleSubmitMappingEdit, databaseTables, databaseType, ButtonComponent, SecondaryButtonComponent, onClose, }) {
-    const { state, eventTracking } = useAdmin();
-    const [loading, setLoading] = useState(false);
-    const [mappingTo, setMappingTo] = useState(toTenant);
-    useEffect(() => {
-        setMappingTo(toTenant);
-    }, [toTenant]);
-    const [localQuery, setLocalQuery] = useState(mappingQuery);
-    const [displayedTableData, setDisplayedTableData] = useState(databaseTables);
-    const [tableSearchQuery, setTableSearchQuery] = useState('');
-    const [mappedIds, setMappedIds] = useState(undefined);
-    const [errorMessage, setErrorMessage] = useState(undefined);
-    const onSave = useCallback(async (mode) => {
-        if (!localQuery || !mappingTo)
-            return;
-        setLoading(true);
-        try {
-            const returnedIds = await handleSubmitMappingEdit(localQuery, mappingTo, mode);
-            if (returnedIds) {
-                setMappedIds(returnedIds);
-            }
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error saving tenant mapping',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'MappingForm',
-                    function: 'onSave',
-                },
-            });
-            setErrorMessage(e.message);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [localQuery, handleSubmitMappingEdit]);
-    const mappingOptions = useMemo(() => {
-        return (client.allTenantTypes
-            ?.filter((tenant) => tenant.tenantField !== fromTenant &&
-            tenant.scope === 'row' &&
-            (tenant.tenantField === toTenant ||
-                currentMapping[tenant.tenantField] === undefined))
-            .map((tenant) => ({
-            value: tenant.tenantField,
-            label: tenant.name,
-        })) ?? []);
-    }, [client.allTenantTypes]);
-    const handleClickSchemaItem = async (event) => {
-        const name = event.target.textContent;
-        if (!name) {
-            return;
-        }
-        const newQuery = `SELECT * FROM ${processColumnReference(name, databaseType.toLowerCase())};`;
-        if (!localQuery || localQuery.length === 0) {
-            setLocalQuery(newQuery);
-        }
-        await navigator.clipboard.writeText(newQuery);
-    };
-    return (
-    // Grow height when error message is present
-    _jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'stretch',
-            height: 410 + 20 * Math.ceil((errorMessage?.length ?? 0) / 60),
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 20,
-                    maxWidth: '350px',
-                }, children: [_jsx("div", { style: {
-                            paddingLeft: '20px',
-                            paddingRight: '30px',
-                        }, children: _jsx(TextInputPrimitive, { placeholder: "Filter tables...", onChange: (e) => {
-                                setTableSearchQuery(e.target.value);
-                                setDisplayedTableData(databaseTables.filter((table) => {
-                                    return (table.tableName
-                                        ?.toLowerCase()
-                                        ?.includes(e.target.value.toLowerCase().trim()) ||
-                                        table.columns.some((col) => col.field
-                                            ?.toLowerCase()
-                                            ?.includes(e.target.value.toLowerCase().trim())));
-                                }));
-                            }, value: tableSearchQuery, width: '100%' }) }), _jsx("div", { style: { overflow: 'scroll', minHeight: 0 }, children: _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingSpinner, loading: false, width: '100%', onClick: handleClickSchemaItem }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx(InputLabel, { children: "Mapping to Tenant" }), _jsx(QuillSelectComponentWithCombo, { value: mappingTo, options: mappingOptions, onChange: (e) => {
-                            setMappingTo(e.target.value);
-                        }, width: 230, hideEmptyOption: true }), _jsx(InputLabel, { children: "Mapping SQL Query" }), _jsxs("div", { children: ["Return", ' ', _jsx("span", { style: {
-                                    fontFamily: 'monospace',
-                                    fontWeight: 600,
-                                    color: '#212121',
-                                    backgroundColor: '#f0f0f0',
-                                    padding: 4,
-                                    borderRadius: 4,
-                                }, children: mappingTo ?? '?' }), ' ', "and", ' ', _jsx("span", { style: {
-                                    fontFamily: 'monospace',
-                                    fontWeight: 600,
-                                    color: '#212121',
-                                    backgroundColor: '#f0f0f0',
-                                    padding: 4,
-                                    borderRadius: 4,
-                                }, children: fromTenant }), ' ', "as columns."] }), _jsx(SqlTextEditor, { containerStyle: {
-                            width: 460,
-                            marginBottom: 10,
-                            marginTop: 10,
-                        }, value: localQuery ?? '', setValue: (e) => {
-                            setLocalQuery(e);
-                        }, setEditorMounted: () => { }, schema: databaseTables, databaseType: databaseType }), errorMessage && (_jsx("div", { style: {
-                            color: 'red',
-                            fontSize: 12,
-                            width: 460,
-                            fontFamily: 'monospace',
-                        }, children: errorMessage })), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'flex-end',
-                            gap: 16,
-                        }, children: [_jsx(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => onClose(undefined, undefined) }), _jsx(ButtonComponent, { label: "Save Changes", onClick: () => onSave('validate'), disabled: mappingTo === undefined || !localQuery?.length, isLoading: loading })] })] }), _jsx(ModalPrimitive, { isOpen: !!mappedIds, onClose: () => setMappedIds(undefined), style: {
-                    minWidth: '500px',
-                }, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 20,
-                        width: '100%',
-                    }, children: [_jsx(CardSection, { children: "Mapped IDs" }), _jsx(Table, { containerStyle: {
-                                minHeight: 260,
-                                width: '100%',
-                                height: 75 + Math.min(mappedIds?.rows.length ?? 10, 5) * 37,
-                            }, rows: mappedIds?.rows ?? [], columns: mappedIds?.fields.map((field) => ({
-                                label: field.name,
-                                field: field.name,
-                            })) ?? [] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'flex-end',
-                                gap: 16,
-                            }, children: [_jsx(SecondaryButtonComponent, { label: "Go Back", onClick: () => setMappedIds(undefined) }), _jsx(ButtonComponent, { label: "Looks Good", onClick: async () => {
-                                        setLoading(true);
-                                        setMappedIds(undefined);
-                                        await onSave('save');
-                                        onClose(mappingTo, localQuery);
-                                        setLoading(false);
-                                    }, isLoading: loading })] })] }) })] }));
-}
-function TenantQueryForm({ creatingTenant, customQuery, currentTableObj, schema, tenantField, setTenantField, tenantTable, setTenantTable, tenantFlagField, setTenantFlagField, tenantIdField, setTenantIdField, tenantNameField, setTenantNameField, TextInputComponent, SecondaryButtonComponent, setIsEditingTenantQuery, isOnboarding, }) {
-    const columns = currentTableObj ? currentTableObj.columns : [];
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [!customQuery && (_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    // gap: 20,
-                    // paddingTop: 20,
-                    alignItems: 'flex-end',
-                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Table'], children: "Tenant Table" }), _jsx("div", { "data-testid": "quill-select-tenant-table", children: _jsx(QuillSelectComponentWithCombo, { width: 230, options: schema.map((elem) => ({
-                                        value: elem.tableName,
-                                        label: elem.tableName,
-                                    })), value: tenantTable, onChange: (e) => {
-                                        setTenantTable(e.target.value);
-                                    }, hideEmptyOption: true }) })] }), _jsx("div", { style: {
-                            height: 42,
-                            fontSize: 13,
-                            fontWeight: 600,
-                            color: '#565656',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            width: 33,
-                        }, children: "or" }), _jsx(SecondaryButtonComponent, { label: "Custom SQL Query", onClick: () => setIsEditingTenantQuery(true) })] })), _jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    gap: 20,
-                    paddingTop: 20,
-                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant ID Field'], children: "Tenant ID Field" }), _jsx("div", { "data-testid": "quill-select-tenant-id-field", children: _jsx(QuillSelectComponentWithCombo, { width: 230, options: columns
-                                        .filter((column) => isStringType(column.fieldType) ||
-                                        isNumberType(column.fieldType))
-                                        .map((elem) => ({
-                                        value: elem.columnName,
-                                        label: elem.columnName,
-                                    })), value: tenantIdField, disabled: !customQuery && !tenantTable, onChange: (e) => {
-                                        setTenantIdField(e.target.value);
-                                        if (!tenantFlagField) {
-                                            setTenantFlagField(e.target.value);
-                                        }
-                                    }, hideEmptyOption: true, testLabel: "id-field" }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Name Field'], children: "Tenant Name Field" }), _jsx("div", { "data-testid": "quill-select-tenant-name-field", children: _jsx(QuillSelectComponentWithCombo, { width: 230, options: columns.map((elem) => ({
-                                        value: elem.columnName,
-                                        label: elem.columnName,
-                                    })), value: tenantNameField, disabled: !customQuery && !tenantTable, onChange: (e) => {
-                                        setTenantNameField(e.target.value);
-                                    }, hideEmptyOption: true, testLabel: "name-field" }) })] })] }), _jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    gap: 20,
-                    paddingTop: 20,
-                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Foreign Key'], children: "Foreign Key" }), _jsx("div", { "data-testid": "quill-input-tenant-field", children: _jsx(TextInputComponent, { width: "230px", value: tenantField, onChange: (e) => setTenantField(e.target.value), disabled: !creatingTenant && !isOnboarding, placeholder: "customer_id..." }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { tooltip: tooltipDictionary['Tenant Flag Field'], children: "Tag Custom Reports By" }), _jsx("div", { "data-testid": "quill-select-tenant-flag-field", children: _jsx(QuillSelectComponentWithCombo, { width: 230, options: columns.map((elem) => ({
-                                        value: elem.columnName,
-                                        label: elem.columnName,
-                                    })), value: tenantFlagField, disabled: !customQuery && !tenantTable, onChange: (e) => {
-                                        setTenantFlagField(e.target.value);
-                                    }, hideEmptyOption: true, testLabel: "flag-field" }) })] })] })] }));
-}