@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/modals/EditEnvironmentModal.js

@@ -0,0 +1,545 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState, } from 'react';
+import InputLabel from '../components/InputLabel';
+import CardSection from '../components/CardSection';
+import { useAdmin } from '../AdminProvider';
+import CheckCircleIcon from '../icons/CheckCircleIcon';
+import { getDatabaseConnectionFormat, } from '../utils/databases';
+import ConnectDatabase from '../forms/client_onboard/ConnectDatabase';
+import { SINGLE_TENANT } from '../utils/constants';
+import { EditTenant } from '../components/Tenants/EditTenant';
+import { getTableColumnsBySchema } from '../api/ConnectionClient';
+import { useDashboardManager } from '../hooks/useDashboardManager';
+const header1Style = {
+    fontWeight: '600',
+    fontSize: '18px',
+    marginBottom: '6px',
+    color: '#000000',
+};
+const header2Style = {
+    fontWeight: '500',
+    fontSize: '13px',
+    color: '#595959',
+    marginBottom: '4px',
+};
+export function EditEnvironmentModal({ isOpen, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SecondaryButtonComponent, }) {
+    const { state, dispatch, setClient, getToken, quillFetchWithToken } = useAdmin();
+    const { setSelectedDashboard } = useDashboardManager();
+    const [selectedEnvironmentName, setSelectedEnvironmentName] = useState(state.client.name);
+    const [copied, setCopied] = useState(false);
+    const [isSubmitTenantLoading, setSubmitTenantLoading] = useState(false);
+    const [validationError, setValidationError] = useState(undefined);
+    const [formError, setFormError] = useState(undefined);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [connectionDetails, setConnectionDetails] = useState(getDatabaseConnectionFormat(state.client.databaseType));
+    const [tenantToEdit, setTenantToEdit] = useState(undefined);
+    const [fetchSchemasLoading, setFetchSchemasLoading] = useState(false);
+    const [createNewTenant, setCreateNewTenant] = useState(false);
+    const [isConnectDatabaseModalOpen, setIsConnectDatabaseModalOpen] = useState(false);
+    const tenantRequest = async (tenant, mode) => {
+        if (!tenant.clientId) {
+            throw new Error('Client ID is required on tenant');
+        }
+        return await quillFetchWithToken({
+            client: {
+                queryEndpoint: state.queryEndpoint,
+                clientId: tenant.clientId,
+                withCredentials: !!state.withCredentials,
+                queryHeaders: state.queryHeaders,
+            },
+            task: `${mode}-tenant`,
+            metadata: {
+                clientId: tenant.clientId,
+                tenantIdToEdit: tenant?.id,
+                tenant: {
+                    ...tenant,
+                    tenantIds: undefined,
+                },
+            },
+            adminMode: true,
+        });
+    };
+    const onValidateEditTenant = async (tenant) => {
+        setSubmitTenantLoading(true);
+        try {
+            const response = await tenantRequest(tenant, 'validate');
+            if (response.error) {
+                throw new Error(response.error);
+            }
+            else {
+                const tenantFieldDataType = response.queries.queryResults[0].fields.find((field) => field.name === response.data.tenant.tenantField)?.dataTypeID;
+                // Taken from convertPostgresColumn
+                const isNumber = [20, 21, 23, 700, 701, 1700].includes(tenantFieldDataType);
+                const results = response.queries.queryResults[0].rows?.map((row) => ({
+                    id: isNumber
+                        ? Number(row[response.data.tenant.tenantField])
+                        : row[response.data.tenant.tenantField],
+                    flag: row.quill_flag,
+                    label: row.quill_label,
+                })) ?? [];
+                if (!results.length) {
+                    setFormError(`No rows were returned from this ${tenant.tenantTableQuery ? 'query' : 'table'}`);
+                }
+                return results;
+            }
+        }
+        catch (e) {
+            setFormError(e.message);
+            throw e;
+        }
+        finally {
+            setTimeout(() => {
+                setSubmitTenantLoading(false);
+            }, 50);
+        }
+    };
+    const onSubmitEditTenant = async (tenant, creation) => {
+        if (!tenant)
+            return;
+        setSubmitTenantLoading(true);
+        try {
+            const response = await tenantRequest(tenant, creation ? 'create' : 'edit');
+            const editedTenant = {
+                ...response.data.tenant,
+                tenantIds: tenant.scope === 'database'
+                    ? undefined
+                    : response.queries.queryResults[0].rows?.map((row) => ({
+                        id: response.data.tenant.fieldType === 'number'
+                            ? Number(row[response.data.tenant.tenantField])
+                            : row[response.data.tenant.tenantField],
+                        flag: row.quill_flag,
+                        label: row.quill_label,
+                    })),
+            };
+            if (tenantToEdit) {
+                dispatch({
+                    type: 'SET_CLIENT',
+                    payload: {
+                        ...state.client,
+                        allTenantTypes: state.client.allTenantTypes?.map(
+                        //only update the tenant that was edited
+                        (t) => t.tenantField === editedTenant.tenantField
+                            ? {
+                                ...t,
+                                ...editedTenant,
+                            }
+                            : t),
+                        ownerTenantFields: tenant.role === 'owner' &&
+                            !state.client.ownerTenantFields.includes(editedTenant.tenantField)
+                            ? [...state.client.ownerTenantFields, editedTenant.tenantField]
+                            : tenant.role !== 'owner'
+                                ? state.client.ownerTenantFields?.filter((f) => f !== editedTenant.tenantField)
+                                : state.client.ownerTenantFields,
+                    },
+                });
+                dispatch({
+                    type: 'SET_CLIENTS',
+                    payload: state.clients.map((c) => c._id === state.client._id
+                        ? {
+                            ...c,
+                            allTenantTypes: c.allTenantTypes?.map((t) => t.id === editedTenant.id
+                                ? {
+                                    ...t,
+                                    ...editedTenant,
+                                }
+                                : t),
+                            ownerTenantFields: tenant.role === 'owner' &&
+                                !state.client.ownerTenantFields.includes(editedTenant.tenantField)
+                                ? [
+                                    ...state.client.ownerTenantFields,
+                                    editedTenant.tenantField,
+                                ]
+                                : tenant.role !== 'owner'
+                                    ? state.client.ownerTenantFields?.filter((f) => f !== editedTenant.tenantField)
+                                    : state.client.ownerTenantFields,
+                        }
+                        : c),
+                });
+            }
+            else {
+                // New tenant
+                dispatch({
+                    type: 'SET_CLIENT',
+                    payload: {
+                        ...state.client,
+                        allTenantTypes: [
+                            ...(state.client.allTenantTypes ?? []),
+                            editedTenant,
+                        ],
+                        ownerTenantFields: tenant.role === 'owner' &&
+                            !state.client.ownerTenantFields.includes(editedTenant.tenantField)
+                            ? [...state.client.ownerTenantFields, editedTenant.tenantField]
+                            : tenant.role !== 'owner'
+                                ? state.client.ownerTenantFields?.filter((f) => f !== editedTenant.tenantField)
+                                : state.client.ownerTenantFields,
+                    },
+                });
+                dispatch({
+                    type: 'SET_CLIENTS',
+                    payload: state.clients.map((c) => c._id === state.client._id
+                        ? {
+                            ...c,
+                            allTenantTypes: [...(c.allTenantTypes ?? []), editedTenant],
+                            ownerTenantFields: tenant.role === 'owner' &&
+                                !state.client.ownerTenantFields.includes(editedTenant.tenantField)
+                                ? [
+                                    ...state.client.ownerTenantFields,
+                                    editedTenant.tenantField,
+                                ]
+                                : tenant.role !== 'owner'
+                                    ? state.client.ownerTenantFields?.filter((f) => f !== editedTenant.tenantField)
+                                    : state.client.ownerTenantFields,
+                        }
+                        : c),
+                });
+            }
+            setTimeout(() => {
+                setTenantToEdit(undefined);
+                setCreateNewTenant(false);
+            }, 50);
+        }
+        catch (e) {
+            setFormError(e.message);
+        }
+        finally {
+            setTimeout(() => {
+                setSubmitTenantLoading(false);
+                setCreateNewTenant(false);
+            }, 50);
+        }
+    };
+    const onDeleteTenant = async (tenant) => {
+        try {
+            const response = await tenantRequest(tenant, 'delete');
+            if (response.error) {
+                throw new Error(response.error);
+            }
+            else {
+                dispatch({
+                    type: 'SET_CLIENT',
+                    payload: {
+                        ...state.client,
+                        allTenantTypes: state.client.allTenantTypes
+                            ?.filter((t) => t.id !== tenant.id)
+                            .map((t) => ({
+                            ...t,
+                            mappings: t.mappings
+                                ? Object.fromEntries(Object.entries(t.mappings).filter(([key]) => key !== tenant.tenantField))
+                                : undefined,
+                        })),
+                        tenantOwnerFields: state.client.ownerTenantFields?.filter((f) => f !== tenant.tenantField),
+                    },
+                });
+                dispatch({
+                    type: 'SET_CLIENTS',
+                    payload: state.clients.map((c) => c._id === state.client._id
+                        ? {
+                            ...c,
+                            allTenantTypes: c.allTenantTypes?.filter((t) => t.id !== tenant.id),
+                            tenantOwnerFields: c.ownerTenantFields?.filter((f) => f !== tenant.tenantField),
+                        }
+                        : c),
+                });
+            }
+        }
+        catch (e) {
+            console.log('error', e);
+            setValidationError('Error deleting tenant');
+        }
+        finally {
+            setTimeout(() => {
+                setTenantToEdit(undefined);
+            }, 50);
+        }
+    };
+    const environmentDetails = useMemo(() => ({
+        client: state.client,
+        connection: connectionDetails,
+        databaseSchema: undefined,
+    }), [state.client, connectionDetails]);
+    const handleUpdateEnvironment = async (connectionInfo, _schema, selectedSchemaNames, close = true) => {
+        try {
+            setFetchSchemasLoading(true);
+            dispatch({
+                type: 'SET_DATABASE_SCHEMA',
+                payload: {
+                    schema: state.databaseSchema?.schema ?? [],
+                    id: state.client.id,
+                    loading: true,
+                },
+            });
+            const schema = await getTableColumnsBySchema(state.queryEndpoint, state.client._id, getToken);
+            // If any of the tenants point to a table that no longer exists, throw an error
+            const tenantTables = state.client.allTenantTypes?.filter((t) => t.tenantTable !== undefined);
+            const tables = schema.columnsByTable.map((t) => t.tableName);
+            const invalidTables = tenantTables.filter((t) => !tables.includes(t.tenantTable));
+            if (invalidTables.length > 0) {
+                throw new Error(`You deselected a schema that is depended on by tenant${invalidTables.length > 1 ? 's' : ''}: 
+          ${invalidTables.map((t) => t.name).join(', ')}`);
+            }
+            await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: state.client._id,
+                    withCredentials: !!state.withCredentials,
+                    queryHeaders: state.queryHeaders,
+                },
+                task: 'update-client',
+                metadata: {
+                    clientId: state.client._id,
+                    client: {
+                        ...state.client,
+                        name: selectedEnvironmentName,
+                        schemaNames: selectedSchemaNames,
+                        databaseType: connectionInfo?.type ?? state.client.databaseType,
+                        databaseConnectionString: connectionInfo?.connectionString ??
+                            state.client.databaseConnectionString,
+                        defaultDashboard: undefined,
+                        allTenantTypes: undefined,
+                    },
+                },
+                adminMode: true,
+            });
+            onSave();
+            dispatch({
+                type: 'SET_DATABASE_SCHEMA',
+                payload: {
+                    schema: schema.columnsByTable,
+                    id: state.client.id,
+                    loading: false,
+                },
+            });
+            dispatch({
+                type: 'SET_CLIENT',
+                payload: {
+                    ...state.client,
+                    name: selectedEnvironmentName,
+                    schemaNames: selectedSchemaNames,
+                    databaseType: connectionInfo?.type ?? state.client.databaseType,
+                    databaseConnectionString: connectionInfo?.connectionString ??
+                        state.client.databaseConnectionString,
+                },
+            });
+            dispatch({
+                type: 'SET_CLIENTS',
+                payload: state.clients.map((c) => c._id === state.client._id
+                    ? {
+                        ...c,
+                        name: selectedEnvironmentName,
+                        schemaNames: selectedSchemaNames,
+                        databaseType: connectionInfo?.type ?? state.client.databaseType,
+                        databaseConnectionString: connectionInfo?.connectionString ??
+                            state.client.databaseConnectionString,
+                    }
+                    : c),
+            });
+            if (close)
+                setIsOpen(false);
+            setIsConnectDatabaseModalOpen(false);
+        }
+        catch (e) {
+            setIsConnectDatabaseModalOpen(false);
+            setValidationError(e.message);
+        }
+        finally {
+            setFetchSchemasLoading(false);
+        }
+    };
+    const handleDeleteEnvironment = async () => {
+        if (confirm('Are you sure? All dashboards in this environment will also be deleted. This action cannot be undone.')) {
+            await quillFetchWithToken({
+                client: {
+                    queryEndpoint: state.queryEndpoint,
+                    clientId: state.client._id,
+                    withCredentials: !!state.withCredentials,
+                    queryHeaders: state.queryHeaders,
+                },
+                task: 'delete-client',
+                metadata: {
+                    clientId: state.client._id,
+                },
+                adminMode: true,
+            });
+            dispatch({
+                type: 'SET_CLIENTS',
+                payload: state.clients.filter((c) => c._id !== state.client._id),
+            });
+            setSelectedDashboard(null);
+            setClient(state.clients[0]);
+            setIsOpen(false);
+            onSave();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModalComponent, { isOpen: isOpen, onClose: () => {
+                    setValidationError(undefined);
+                    setIsOpen(false);
+                    setSelectedEnvironmentName(state.client.name);
+                }, style: {
+                    minWidth: '600px',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 16,
+                        flexDirection: 'column',
+                        width: '100%',
+                        height: '100%',
+                        maxHeight: '100%',
+                    }, children: [_jsx(HeaderComponent, { label: "Manage Environment" }), _jsxs("div", { children: [_jsx(InputLabel, { children: "Name" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(TextInputComponent, { width: "230px", value: selectedEnvironmentName, onChange: (e) => setSelectedEnvironmentName(e.target.value) }) })] }), _jsx(CardSection, { children: "Tenants" }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(2, 1fr)',
+                                gap: '16px',
+                            }, children: state.client?.allTenantTypes?.map((tenant) => (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    border: '1px solid #e7e7e7',
+                                    boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+                                    borderRadius: 6,
+                                    position: 'relative',
+                                    padding: 10,
+                                }, children: [_jsx(CardSection, { children: tenant.name }), state.client?.ownerTenantFields?.includes(tenant.tenantField) && (_jsx("div", { style: {
+                                            position: 'absolute',
+                                            bottom: 16,
+                                            right: 16,
+                                            userSelect: 'none',
+                                            letterSpacing: '0.6px',
+                                            // backgroundColor: 'black',
+                                            marginTop: 4,
+                                            borderRadius: 16,
+                                            // padding: '2px 8px',
+                                            fontSize: 12,
+                                            font: 'monospace',
+                                            fontWeight: 300,
+                                            width: 'fit-content',
+                                        }, children: "Dashboard Owner" })), _jsx("div", { style: {
+                                            fontFamily: 'monospace',
+                                            marginTop: 8,
+                                            marginBottom: 8,
+                                        }, children: tenant.tenantField === SINGLE_TENANT
+                                            ? 'Database tenant'
+                                            : tenant.tenantField }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 12,
+                                            marginTop: 'auto',
+                                        }, children: [_jsx(SecondaryButtonComponent, { onClick: () => setTenantToEdit(tenant), label: "Edit" }), !state.client?.ownerTenantFields?.includes(tenant.tenantField) && (_jsx(SecondaryButtonComponent, { label: "Delete", onClick: () => onDeleteTenant(tenant) }))] })] }, tenant.tenantField))) }), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => setCreateNewTenant(true), label: "Add Tenant" }) }), _jsxs(_Fragment, { children: [_jsx(CardSection, { children: "Danger Zone" }), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        width: 'fit-content',
+                                        gap: 16,
+                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => setIsConnectDatabaseModalOpen(true), label: "Edit Database Connection" }), _jsx(SecondaryButtonComponent, { onClick: handleDeleteEnvironment, label: "Delete Environment" })] })] }), _jsx("div", { style: { height: 18 } }), _jsxs("div", { style: {
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }, children: [_jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    }, children: [_jsxs("div", { style: {
+                                                // width: '100%',
+                                                maxWidth: 330,
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                                padding: '6px 12px',
+                                                borderRadius: 6,
+                                                height: 40,
+                                                cursor: 'pointer',
+                                            }, onClick: () => {
+                                                navigator.clipboard.writeText(state.client._id);
+                                                setCopied(true);
+                                                setTimeout(() => setCopied(false), 1500);
+                                            }, className: "quill-active", children: [_jsx("style", { children: `.quill-active { background: #fff; border: 1px solid #e7e7e7; } 
+.quill-active:hover { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7 }
+.quill-active:active { background: #fff; box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.07); border: 1px solid #9DC4F8; outline: 2px solid #9DC4F8; }
+` }), _jsx("div", { style: {
+                                                        color: '#212121',
+                                                        marginBottom: '0px',
+                                                    }, children: _jsx("h1", { style: {
+                                                            fontSize: '14px',
+                                                            fontWeight: '600',
+                                                            color: state.theme.secondaryTextColor,
+                                                            fontFamily: state.theme.fontFamily,
+                                                            userSelect: 'none',
+                                                        }, children: "Copy Public Key" }) }), _jsx("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                        gap: '6px',
+                                                        cursor: 'pointer',
+                                                        marginLeft: '12px',
+                                                    }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "#212121", width: 18, height: 18, children: [_jsx("path", { d: "M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" }), _jsx("path", { d: "M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" })] }) })] }), copied && (_jsxs("div", { style: {
+                                                fontSize: 13,
+                                                fontWeight: 600,
+                                                color: '#565656',
+                                                marginLeft: 16,
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                gap: 6,
+                                            }, children: [_jsx(CheckCircleIcon, { height: 16 }), " ", _jsx("div", { children: "Copied" })] }))] }), _jsx(ButtonComponent, { onClick: () => handleUpdateEnvironment(), label: "Save changes" })] })] }) }), _jsx(ModalComponent, { isOpen: isConnectDatabaseModalOpen, onClose: () => setIsConnectDatabaseModalOpen(false), style: {
+                    minWidth: '400px',
+                }, children: _jsx("div", { style: { overflow: 'scroll ' }, children: _jsx(ConnectDatabase, { containerStyle: {
+                            padding: '24px',
+                            borderRadius: 6,
+                            border: '1px solid #e7e7e7',
+                            boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+                        }, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: (connectionInfo, schema, selectedSchemaNames) => {
+                            handleUpdateEnvironment(connectionInfo, schema, selectedSchemaNames, false);
+                        }, fetchSchemasLoading: fetchSchemasLoading }) }) }), _jsx(ModalComponent, { isOpen: tenantToEdit ? true : false, onClose: () => setTenantToEdit(undefined), style: {
+                    minWidth: '400px',
+                }, children: _jsx(EditTenant, { tenant: tenantToEdit, setTenant: (tenant) => setTenantToEdit(tenant), setCreateNewTenant: setCreateNewTenant, onSubmitEditTenant: onSubmitEditTenant, onValidateEditTenant: onValidateEditTenant, HeaderComponent: HeaderComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, isSubmitTenantLoading: isSubmitTenantLoading, client: state.client, queryEndpoint: state.queryEndpoint, ModalComponent: ModalComponent, isOnboarding: false }) }), _jsx(ModalComponent, { isOpen: createNewTenant, onClose: () => setCreateNewTenant(false), style: {
+                    minWidth: '400px',
+                }, children: _jsx(EditTenant, { tenant: undefined, setTenant: (tenant) => setTenantToEdit(tenant), setCreateNewTenant: setCreateNewTenant, onSubmitEditTenant: onSubmitEditTenant, onValidateEditTenant: onValidateEditTenant, HeaderComponent: HeaderComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, isSubmitTenantLoading: isSubmitTenantLoading, client: state.client, queryEndpoint: state.queryEndpoint, ModalComponent: ModalComponent, isOnboarding: false }) }), _jsx(ModalComponent, { isOpen: !!validationError, onClose: () => setValidationError(undefined), style: {
+                    width: 420,
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [_jsx(CardSection, { children: "Failed to Connect" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, children: _jsx("div", { style: {
+                                    color: 'red',
+                                    fontWeight: 600,
+                                    fontFamily: 'monospace',
+                                    border: '1px solid #e0e0e0',
+                                    padding: 8,
+                                    borderRadius: 4,
+                                    backgroundColor: '#f5f5f5',
+                                    marginBottom: 8,
+                                }, children: validationError }) }), _jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: _jsx(ButtonComponent, { label: "Close", onClick: () => setValidationError(undefined) }) })] }) }), _jsx(ModalComponent, { isOpen: !!formError, onClose: () => setFormError(undefined), style: {
+                    width: 420,
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 20,
+                        width: '100%',
+                    }, children: [_jsx(CardSection, { children: "Tenant Issue" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx("div", { style: {
+                                        color: 'red',
+                                        fontWeight: 600,
+                                        fontFamily: 'monospace',
+                                        border: '1px solid #e0e0e0',
+                                        padding: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: '#f5f5f5',
+                                        marginBottom: 8,
+                                    }, children: formError }), _jsx("strong", { children: "Things to try" }), _jsxs("ul", { style: { paddingLeft: 16 }, children: [_jsx("style", { children: `
+                .error-bullet {
+                  list-style-type: disc;
+                  margin-left: 20px;
+                }
+              ` }), _jsx("li", { className: "error-bullet", children: "Double check you are referencing the correct table" }), _jsx("li", { className: "error-bullet", children: "If you don't want to filter data per tenant, select \"Database Level\"" }), _jsx("li", { className: "error-bullet", children: "Ensure the user for your connection has access to the schemas and tables that you are referencing" }), _jsx("li", { className: "error-bullet", children: "Double check that you selected the schema that contains the tenant data in the previous step" })] })] }), _jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: 16,
+                                width: '100%',
+                            }, children: _jsx(ButtonComponent, { label: "Close", onClick: () => setFormError(undefined) }) })] }) })] }));
+}

package/dist/esm/modals/EditFiltersModal.d.ts

@@ -1,17 +1,21 @@
-export declare function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
+import { ReactNode } from 'react';
+import { ButtonComponentProps } from '@quillsql/react';
+import { SelectComponentProps } from '../components/UiComponents';
+import { TextInputPrimitiveProps } from '../primitives/TextInputPrimitive';
+import { SecondaryButtonPrimitiveProps } from '../primitives/SecondaryButtonPrimitive';
+export declare function EditFiltersModal({ isOpen, selectedDashboardName, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, ErrorComponent, openPromoteModal, }: {
     isOpen: boolean;
-    dashboardData: any;
-    selectedDashboard: any;
-    client: any;
+    selectedDashboardName: string;
     setIsOpen: any;
-    onSave: any;
-    openEditOrderModal: any;
+    onSave: (dashboard: string | null) => Promise<void>;
     ModalComponent: any;
-    TextInputComponent: any;
-    ButtonComponent: any;
+    TextInputComponent: React.ForwardRefExoticComponent<TextInputPrimitiveProps>;
+    ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
     HeaderComponent: any;
-    SelectComponent: any;
+    SelectComponent: (props: SelectComponentProps) => JSX.Element;
     dashNames: any;
-    SecondaryButtonComponent: any;
+    SecondaryButtonComponent: (props: SecondaryButtonPrimitiveProps) => ReactNode;
+    ErrorComponent: any;
+    openPromoteModal: () => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditFiltersModal.d.ts.map

package/dist/esm/modals/EditFiltersModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAeA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA8mBA"}
+{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAExE,OAAO,EACL,oBAAoB,EAKrB,MAAM,iBAAiB,CAAC;AAczB,OAAO,EAEL,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AAOpC,OAA2B,EACzB,uBAAuB,EACxB,MAAM,kCAAkC,CAAC;AAY1C,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAC;AAqBvF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,qBAAqB,EACrB,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,cAAc,EACd,gBAAgB,GACjB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,KAAK,CAAC,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IAC7E,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,SAAS,CAAC;IAC9E,cAAc,EAAE,GAAG,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,2CAokFA"}