@quillsql/admin 1.6.1 → 1.6.3

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

@@ -0,0 +1,754 @@
+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 } = 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);
+                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);
+        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) {
+                console.log('error', e);
+                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);
+            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 } = 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) {
+            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, state.client.databaseType)};`;
+        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 } = 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) {
+            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, state.client.databaseType)};`;
+        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" }) })] })] })] }));
+}