@quillsql/admin 1.6.0 → 1.6.2

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

@@ -0,0 +1,760 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditTenant = EditTenant;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
+const TextInputPrimitive_1 = __importDefault(require("../../primitives/TextInputPrimitive"));
+const useDatabaseSchema_1 = require("../../hooks/useDatabaseSchema");
+const ConnectionClient_1 = require("../../api/ConnectionClient");
+const react_3 = require("@quillsql/react");
+const UiComponents_1 = require("../UiComponents");
+const InputLabel_1 = __importDefault(require("../InputLabel"));
+const QuillTab_1 = __importDefault(require("../QuillTab"));
+const QuillSelectWithCombo_1 = require("../QuillSelectWithCombo");
+const CardSection_1 = __importDefault(require("../CardSection"));
+const AdminProvider_1 = require("../../AdminProvider");
+const columnProcessing_1 = require("../../utils/columnProcessing");
+const SqlTextEditor_1 = __importDefault(require("../SqlTextEditor"));
+const prism_react_renderer_1 = require("prism-react-renderer");
+const primitives_1 = require("../../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.',
+};
+function EditTenant({ tenant, setTenant, setCreateNewTenant, onSubmitEditTenant, onValidateEditTenant, HeaderComponent, TextInputComponent, ButtonComponent, ModalComponent, SecondaryButtonComponent, isSubmitTenantLoading, client, queryEndpoint, hideDiscardChanges, isOnboarding, }) {
+    const [tenantName, setTenantName] = (0, react_2.useState)(tenant?.name ?? (!HeaderComponent ? 'Organization' : undefined));
+    const [tenantField, setTenantField] = (0, react_2.useState)(tenant?.tenantField !== 'QUILL_SINGLE_TENANT' ? tenant?.tenantField : '');
+    const [tenantTable, setTenantTable] = (0, react_2.useState)(tenant?.tenantTable);
+    const [tenantFlagField, setTenantFlagField] = (0, react_2.useState)(tenant?.tenantFlagField);
+    const [tenantIdField, setTenantIdField] = (0, react_2.useState)(tenant?.tenantIdField);
+    const [tenantNameField, setTenantNameField] = (0, react_2.useState)(tenant?.tenantLabelField);
+    const [tenantDefaultId, setTenantDefaultId] = (0, react_2.useState)(tenant?.defaultId);
+    const [tenantMappings, setTenantMappings] = (0, react_2.useState)(tenant?.mappings ?? {});
+    const [tenantScope, setTenantScope] = (0, react_2.useState)(tenant?.scope ?? 'row');
+    const [tenantRole, setTenantRole] = (0, react_2.useState)(client.ownerTenantFields.includes(tenant?.tenantField ?? '') ||
+        hideDiscardChanges
+        ? 'owner'
+        : 'viewer');
+    const [tenantFieldType, setTenantFieldType] = (0, react_2.useState)(tenant?.fieldType);
+    const [isDatabaseTablesLoading, setIsDatabaseTablesLoading] = (0, react_2.useState)(true);
+    const [tenantQuery, setTenantQuery] = (0, react_2.useState)(tenant?.tenantTableQuery);
+    const [tenantFlags, setTenantFlags] = (0, react_2.useState)(tenant?.flags?.join(', '));
+    const tenantFlagOptions = (0, react_2.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 } = (0, useDatabaseSchema_1.useDatabaseSchema)();
+    const [errorMessage, setErrorMessage] = (0, react_2.useState)(undefined);
+    const [currentTableObj, setCurrentTableObj] = (0, react_2.useState)(undefined);
+    const [mappingToEdit, setMappingToEdit] = (0, react_2.useState)();
+    const [isEditingTenantQuery, setIsEditingTenantQuery] = (0, react_2.useState)(false);
+    const [returnedTenantIds, setReturnedTenantIds] = (0, react_2.useState)([]);
+    const [showFlagWarning, setShowFlagWarning] = (0, react_2.useState)(false);
+    const { getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    const formIssue = (0, react_2.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 = (0, react_2.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,
+    ]);
+    (0, react_2.useEffect)(() => {
+        async function fetchTables() {
+            if (!tenantQuery) {
+                setCurrentTableObj(databaseTables?.find((table) => table.tableName === tenantTable));
+            }
+            else {
+                const resp = await (0, ConnectionClient_1.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 = (0, react_2.useCallback)(async (query) => {
+        const resp = await (0, ConnectionClient_1.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: react_3.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 ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [HeaderComponent && ((0, jsx_runtime_1.jsx)(HeaderComponent, { label: tenant ? 'Edit Tenant' : 'Create tenant' })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        minHeight: 200,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 400,
+                    }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 20,
+                    width: '100%',
+                    height: '100%',
+                    maxHeight: '100%',
+                }, children: [HeaderComponent && ((0, jsx_runtime_1.jsx)(HeaderComponent, { label: tenant ? 'Edit Tenant' : 'Create Tenant' })), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, "data-testid": "quill-input-tenant-name", children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { width: "230px", value: tenantName ?? '', onChange: (e) => setTenantName(e.target.value) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: 486 }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Division'], children: "Tenant Division" }), (0, jsx_runtime_1.jsx)(QuillTab_1.default, { 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 && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: 486 }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Role'], children: "Tenant Role" }), (0, jsx_runtime_1.jsx)(QuillTab_1.default, { width: "486px", modeToggleOptions: [
+                                    { value: 'owner', label: 'Owner' },
+                                    { value: 'viewer', label: 'Viewer' },
+                                ], toggleMode: tenantRole, setToggleMode: (mode) => setTenantRole(mode), disabled: !!tenant && tenantRole === 'owner' && !isOnboarding })] })), tenantScope === 'row' ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [tenantQuery && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Table'], children: "Tenant Table" }), (0, jsx_runtime_1.jsx)(CustomSQLQueryCard, { query: tenantQuery, SecondaryButtonComponent: SecondaryButtonComponent, setIsEditingTenantQuery: setIsEditingTenantQuery, setTenantQuery: setTenantQuery, style: {
+                                            width: 486,
+                                        } })] })), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 20 }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Mappings'], children: "Mappings" }), Object.keys(tenantMappings).map((key) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 8 }, children: (0, jsx_runtime_1.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');
+                                                }
+                                            } }) }))] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tags List'], children: "Tags List" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-input-tenant-flags", children: (0, jsx_runtime_1.jsx)(TextInputComponent, { width: "230px", value: tenantFlags ?? '', onChange: (e) => {
+                                                setTenantFlags(e.target.value);
+                                                setTenantDefaultId(undefined);
+                                            }, placeholder: "tag1, tag2, tag3..." }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Default Tag" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-default-tenant-flag", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { width: 230, value: tenantDefaultId?.toString(), onChange: (e) => setTenantDefaultId(e.target.value), options: tenantFlagOptions, hideEmptyOption: true }) })] })] })), (0, jsx_runtime_1.jsx)("div", { style: { color: 'red', fontSize: 12 }, children: errorMessage?.length && errorMessage }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: 16,
+                            justifyContent: 'flex-end',
+                        }, "data-testid": "quill-save-changes-button", children: [!hideDiscardChanges && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => {
+                                    setTenant(undefined);
+                                    setCreateNewTenant(false);
+                                }, style: { minHeight: 40 } })), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Save Changes", onClick: () => {
+                                    if (tenantFlagField !== tenant?.tenantFlagField &&
+                                        !!tenant?.tenantFlagField &&
+                                        !isOnboarding) {
+                                        setShowFlagWarning(true);
+                                    }
+                                    else {
+                                        handleEditTenant(false);
+                                    }
+                                }, isLoading: isSubmitTenantLoading, disabled: !!formIssue, tooltipText: formIssue })] })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isEditingTenantQuery, onClose: () => setIsEditingTenantQuery(false), style: {
+                    minWidth: '500px',
+                }, children: (0, jsx_runtime_1.jsx)(CustomSQLQueryModal, { customSQLQuery: tenantQuery ?? '', setCustomSQLQuery: setCustomSQLQuery, databaseTables: databaseTables ?? [], databaseType: client.databaseType, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, onClose: () => setIsEditingTenantQuery(false) }) }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: mappingToEdit ? true : false, onClose: () => {
+                    Object.keys(tenantMappings).forEach((key) => {
+                        if (!tenantMappings[key]?.query) {
+                            onDeleteMapping(key);
+                        }
+                    });
+                    setMappingToEdit(undefined);
+                }, style: {
+                    minWidth: '500px',
+                }, children: (0, jsx_runtime_1.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 }) }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: showFlagWarning, onClose: () => setShowFlagWarning(false), style: {
+                    minWidth: '300px',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        maxWidth: 450,
+                    }, children: [HeaderComponent && (0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Warning" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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."] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Cancel", onClick: () => setShowFlagWarning(false) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Continue", isLoading: isSubmitTenantLoading, onClick: () => {
+                                        handleEditTenant(false).then(() => setShowFlagWarning(false));
+                                    } })] })] }) }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: returnedTenantIds.length > 0, onClose: () => setReturnedTenantIds([]), style: {
+                    minWidth: '500px',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, "data-testid": "quill-tenant-ids-modal", children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Tenant IDs" }), (0, jsx_runtime_1.jsx)(react_3.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' },
+                            ] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Default Tenant ID" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-default-tenant-id-field", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.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 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Go Back", onClick: () => setReturnedTenantIds([]) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Looks Good", onClick: () => {
+                                        setReturnedTenantIds([]);
+                                        handleEditTenant(true);
+                                    }, disabled: !tenantDefaultId })] })] }) })] }));
+}
+function CustomSQLQueryModal({ customSQLQuery, setCustomSQLQuery, databaseTables, databaseType, ButtonComponent, SecondaryButtonComponent, onClose, }) {
+    const { state } = (0, AdminProvider_1.useAdmin)();
+    const [localQuery, setLocalQuery] = (0, react_2.useState)(customSQLQuery);
+    const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
+    const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(databaseTables);
+    const [loading, setLoading] = (0, react_2.useState)(false);
+    const [errorMessage, setErrorMessage] = (0, react_2.useState)(undefined);
+    const onSave = (0, react_2.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 ${(0, columnProcessing_1.processColumnReference)(name, state.client.databaseType)};`;
+        if (!localQuery || localQuery.length === 0) {
+            setLocalQuery(newQuery);
+        }
+        await navigator.clipboard.writeText(newQuery);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            height: 300 + 20 * Math.ceil((errorMessage?.length ?? 0) / 60),
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 20,
+                    maxWidth: '350px',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            paddingLeft: '20px',
+                            paddingRight: '30px',
+                        }, children: (0, jsx_runtime_1.jsx)(TextInputPrimitive_1.default, { 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%' }) }), (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'scroll', minHeight: 0 }, children: (0, jsx_runtime_1.jsx)(react_3.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: UiComponents_1.LoadingSpinner, loading: false, width: '100%', onClick: handleClickSchemaItem }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Custom SQL Query" }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { containerStyle: {
+                            width: 460,
+                            marginBottom: 10,
+                            marginTop: 10,
+                        }, value: localQuery, setValue: (e) => {
+                            setLocalQuery(e);
+                        }, setEditorMounted: () => { }, schema: databaseTables, databaseType: databaseType }), errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            color: 'red',
+                            fontSize: 12,
+                            width: 460,
+                            fontFamily: 'monospace',
+                        }, children: errorMessage })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            gap: 16,
+                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => onClose() }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Save Changes", isLoading: loading, onClick: onSave })] })] })] }));
+}
+function CustomSQLQueryCard({ query, SecondaryButtonComponent, setIsEditingTenantQuery, setTenantQuery, style, }) {
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Custom SQL Query" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 12,
+                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => setIsEditingTenantQuery(true), label: "Edit" }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => setTenantQuery(''), label: "Delete" })] })] }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.Highlight, { theme: prism_react_renderer_1.themes.nightOwlLight, code: query ?? '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.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) => ((0, react_1.createElement)("div", { ...getLineProps({ line }), key: i, style: {
+                            wordWrap: 'normal',
+                            whiteSpace: 'normal',
+                        } }, line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token }) }, key)))))) })) })] }));
+}
+function MappingCard({ mappingField, SecondaryButtonComponent, setMappingToEdit, onDelete, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 20,
+            alignItems: 'center',
+            marginTop: 10,
+        }, children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: mappingField }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit", onClick: () => setMappingToEdit(mappingField) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: () => onDelete(mappingField) })] })] }) }));
+}
+function MappingForm({ currentMapping, client, toTenant, fromTenant, mappingQuery, handleSubmitMappingEdit, databaseTables, databaseType, ButtonComponent, SecondaryButtonComponent, onClose, }) {
+    const { state } = (0, AdminProvider_1.useAdmin)();
+    const [loading, setLoading] = (0, react_2.useState)(false);
+    const [mappingTo, setMappingTo] = (0, react_2.useState)(toTenant);
+    (0, react_2.useEffect)(() => {
+        setMappingTo(toTenant);
+    }, [toTenant]);
+    const [localQuery, setLocalQuery] = (0, react_2.useState)(mappingQuery);
+    const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(databaseTables);
+    const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
+    const [mappedIds, setMappedIds] = (0, react_2.useState)(undefined);
+    const [errorMessage, setErrorMessage] = (0, react_2.useState)(undefined);
+    const onSave = (0, react_2.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 = (0, react_2.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 ${(0, columnProcessing_1.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
+    (0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            height: 410 + 20 * Math.ceil((errorMessage?.length ?? 0) / 60),
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 20,
+                    maxWidth: '350px',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            paddingLeft: '20px',
+                            paddingRight: '30px',
+                        }, children: (0, jsx_runtime_1.jsx)(TextInputPrimitive_1.default, { 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%' }) }), (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'scroll', minHeight: 0 }, children: (0, jsx_runtime_1.jsx)(react_3.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: UiComponents_1.LoadingSpinner, loading: false, width: '100%', onClick: handleClickSchemaItem }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Mapping to Tenant" }), (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { value: mappingTo, options: mappingOptions, onChange: (e) => {
+                            setMappingTo(e.target.value);
+                        }, width: 230, hideEmptyOption: true }), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Mapping SQL Query" }), (0, jsx_runtime_1.jsxs)("div", { children: ["Return", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                    fontFamily: 'monospace',
+                                    fontWeight: 600,
+                                    color: '#212121',
+                                    backgroundColor: '#f0f0f0',
+                                    padding: 4,
+                                    borderRadius: 4,
+                                }, children: mappingTo ?? '?' }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                    fontFamily: 'monospace',
+                                    fontWeight: 600,
+                                    color: '#212121',
+                                    backgroundColor: '#f0f0f0',
+                                    padding: 4,
+                                    borderRadius: 4,
+                                }, children: fromTenant }), ' ', "as columns."] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { containerStyle: {
+                            width: 460,
+                            marginBottom: 10,
+                            marginTop: 10,
+                        }, value: localQuery ?? '', setValue: (e) => {
+                            setLocalQuery(e);
+                        }, setEditorMounted: () => { }, schema: databaseTables, databaseType: databaseType }), errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            color: 'red',
+                            fontSize: 12,
+                            width: 460,
+                            fontFamily: 'monospace',
+                        }, children: errorMessage })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            gap: 16,
+                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Discard Changes", onClick: () => onClose(undefined, undefined) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Save Changes", onClick: () => onSave('validate'), disabled: mappingTo === undefined || !localQuery?.length, isLoading: loading })] })] }), (0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: !!mappedIds, onClose: () => setMappedIds(undefined), style: {
+                    minWidth: '500px',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Mapped IDs" }), (0, jsx_runtime_1.jsx)(react_3.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,
+                            })) ?? [] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Go Back", onClick: () => setMappedIds(undefined) }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [!customQuery && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    // gap: 20,
+                    // paddingTop: 20,
+                    alignItems: 'flex-end',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Table'], children: "Tenant Table" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-tenant-table", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { width: 230, options: schema.map((elem) => ({
+                                        value: elem.tableName,
+                                        label: elem.tableName,
+                                    })), value: tenantTable, onChange: (e) => {
+                                        setTenantTable(e.target.value);
+                                    }, hideEmptyOption: true }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            height: 42,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: '#565656',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: 33,
+                        }, children: "or" }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Custom SQL Query", onClick: () => setIsEditingTenantQuery(true) })] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 20,
+                    paddingTop: 20,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant ID Field'], children: "Tenant ID Field" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-tenant-id-field", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { width: 230, options: columns
+                                        .filter((column) => (0, columnProcessing_1.isStringType)(column.fieldType) ||
+                                        (0, columnProcessing_1.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" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Name Field'], children: "Tenant Name Field" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-tenant-name-field", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.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" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 20,
+                    paddingTop: 20,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Foreign Key'], children: "Foreign Key" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-input-tenant-field", children: (0, jsx_runtime_1.jsx)(TextInputComponent, { width: "230px", value: tenantField, onChange: (e) => setTenantField(e.target.value), disabled: !creatingTenant && !isOnboarding, placeholder: "customer_id..." }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: tooltipDictionary['Tenant Flag Field'], children: "Tag Custom Reports By" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-select-tenant-flag-field", children: (0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.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" }) })] })] })] }));
+}