@quillsql/admin 1.7.0 → 1.7.2

package/dist/esm/public_components/ChartQueryBuilder.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
-import { EnvSelectPopover, OrgSelect } from '../components';
-import { ReportBuilder, SQLEditor, useDashboardInternal, } from '@quillsql/react';
-import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
-import QuillTab from '../components/QuillTab';
-import XMarkIcon from '../icons/XMarkIcon';
-import PlaceholderPrimitive from '../primitives/PlaceholderPrimitive';
-import { useDashboardManager } from '../hooks/useDashboardManager';
-import { onlySingleDatabaseTenant } from '../utils/tenants';
-import { ButtonPrimitive } from '../primitives';
-import { SAVED_QUERIES_DASHBOARD } from '../utils/constants';
-import CreateEnvironmentModal from '../modals/CreateEnvironmentModal';
-export default function ChartQueryBuilder({ activeComponent, onExit, containerStyle, destinationDashboard, }) {
-    const parentRef = useRef(null);
-    const envPopoverRef = useRef(null);
-    const { state, dispatch, clientLoading, setClient, onRequestAddVirtualTable, } = useAdmin();
-    const [query, setQuery] = useState(state.activeQuery);
-    const [toggleMode, setToggleMode] = useState(activeComponent);
-    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = useState(false);
-    const { setSelectedDashboard } = useDashboardManager();
-    const { reload } = useDashboardInternal(SAVED_QUERIES_DASHBOARD);
-    const modeToggleOptions = [
-        { label: 'SQL Editor', value: 'SQL Editor' },
-        { label: 'Report Builder', value: 'Report Builder' },
-    ];
-    const submitReport = (report) => {
-        onExit && onExit(report);
-        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-        setSelectedDashboard(report.dashboardName);
-    };
-    const submitSavedQuery = (report) => {
-        reload(SAVED_QUERIES_DASHBOARD, true, { report, action: 'upsert' });
-        onExit && onExit(report);
-        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SavedQueries' });
-    };
-    // useEffect(() => {
-    //   if (state.activeQuery) {
-    //     setIsEditActive(true);
-    //   } else {
-    //     setIsEditActive(false);
-    //   }
-    // }, [state.activeQuery]);
-    useEffect(() => {
-        setQuery(state.activeQuery);
-    }, [state.activeQuery]);
-    useEffect(() => {
-        setToggleMode(activeComponent);
-    }, [activeComponent]);
-    if (showCreateEnvironmentModal) {
-        return (_jsx(CreateEnvironmentModal, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
-    }
-    return (_jsx("div", { style: {
-            height: '100%',
-            ...containerStyle,
-        }, ref: parentRef, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
-                        display: 'flex',
-                        backgroundColor: 'white',
-                        zIndex: 1,
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        flexDirection: 'row',
-                        paddingTop: 12,
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingLeft: '30px',
-                        paddingRight: '30px',
-                        borderBottomWidth: 1,
-                        borderTopWidth: 0,
-                        borderLeftWidth: 0,
-                        borderRightWidth: 0,
-                        borderStyle: 'solid',
-                        borderColor: state.theme?.borderColor,
-                        paddingBottom: 20,
-                    }, children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'flex-end',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    gap: 12,
-                                    alignItems: 'flex-end',
-                                }, ref: envPopoverRef, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(EnvSelectPopover, { clients: state.clients, client: state.client, setClient: (client) => {
-                                                setSelectedDashboard(null);
-                                                setClient(client, true);
-                                            }, theme: state.theme, parentRef: envPopoverRef, isLoading: clientLoading, onCreateNewEnvironment: () => {
-                                                setShowCreateEnvironmentModal(true);
-                                            } }) }), state.client?.name !== undefined &&
-                                        !state.databaseTypeMismatch.show &&
-                                        !onlySingleDatabaseTenant(state.client) && (_jsx(OrgSelect, { isLoading: clientLoading })), _jsx(QuillTab, { modeToggleOptions: modeToggleOptions, toggleMode: toggleMode, setToggleMode: setToggleMode, width: "250px" })] }), onExit && (_jsx("button", { type: "button", onClick: () => {
-                                    onExit();
-                                }, style: {
-                                    height: 40,
-                                    width: 40,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    background: 'white',
-                                    border: '1px solid #e7e7e7',
-                                    borderRadius: '4px',
-                                }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, "aria-hidden": "true" }) }))] }) }), state.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environmentName: state.client.name, environmentDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), clientLoading ? (_jsxs("div", { style: {
-                        width: '100%',
-                        display: 'flex',
-                        flexGrow: 1,
-                        gap: 32,
-                        padding: 32,
-                    }, children: [_jsx(PlaceholderPrimitive, { containerStyle: { width: '12%' } }), _jsx(PlaceholderPrimitive, { containerStyle: { maxHeight: 300 } })] })) : toggleMode === 'Report Builder' ? (_jsx(ReportBuilder, { reportId: state.activeSavedQueryReportId ?? '', isAdminEnabled: true, onSubmitCreateReport: submitReport, onSubmitEditReport: submitReport, onSubmitSaveQuery: submitSavedQuery, containerStyle: {
-                        width: '100%',
-                        backgroundColor: 'white',
-                    }, ButtonComponent: ({ onClick, label, isLoading, disabled }) => {
-                        if (label === 'Save changes' && state.activeSavedQueryReportId) {
-                            return (_jsx(ButtonPrimitive, { onClick: onClick, label: 'Add to dashboard', isLoading: isLoading, disabled: disabled }));
-                        }
-                        return (_jsx(ButtonPrimitive, { onClick: onClick, label: label, isLoading: isLoading, disabled: disabled }));
-                    }, destinationDashboard: destinationDashboard, chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, isAIEnabled: state.client?.databaseType?.toLowerCase() === 'mssql'
-                        ? false
-                        : true, onRequestAddVirtualTable: onRequestAddVirtualTable })) : (_jsx(SQLEditor, { isAdminEnabled: true, showTableFormatOptions: true, showAccessControlOptions: true, showDateFieldOptions: true, defaultQuery: query, addToDashboardButtonLabel: 'Add to dashboard', chartBuilderTitle: `Add to ${destinationDashboard ?? 'dashboard'}`, 
-                    // report={state.activeQuery ? state.activeEditItem : undefined}
-                    onAddToDashboardComplete: submitReport, onSaveQueryComplete: submitSavedQuery, containerStyle: {
-                        height: '100%',
-                        width: '100%',
-                        overflow: 'hidden',
-                        backgroundColor: 'white',
-                        // paddingRight: 25,
-                        // paddingTop: 25,
-                    }, destinationDashboard: destinationDashboard, onRequestAddVirtualTable: onRequestAddVirtualTable }))] }) }));
-}

package/dist/esm/public_components/CreateEnvironment.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'react';
-export default function CreateEnvironment({ onOnboardComplete, containerStyle, }: {
-    navigateToDashboardManager?: () => void;
-    onOnboardComplete?: (client: any) => void;
-    containerStyle?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CreateEnvironment.d.ts.map

package/dist/esm/public_components/CreateEnvironment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,aAAa,EAOd,MAAM,OAAO,CAAC;AAyBf,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA6YA"}

package/dist/esm/public_components/CreateEnvironment.js

@@ -1,256 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
-import React, { useCallback, useMemo, useState, } from 'react';
-import ConnectDatabase from '../forms/client_onboard/ConnectDatabase';
-import StepDisplay from '../components/StepDisplay';
-import ConnectSchema from '../forms/client_onboard/ConnectSchema';
-import { useAdmin } from '../AdminProvider';
-import { getDatabaseConnectionFormat, } from '../utils/databases';
-import { getTableColumnsBySchema } from '../api/ConnectionClient';
-import { quillFetch } from '../utils/dataFetcher';
-import { useLongLoading } from '../hooks/useLongLoading';
-export default function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
-    const parentRef = React.useRef(null);
-    const { state, dispatch, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
-    const clerkOrgId = state.client?.clerkOrgId || state.clerkOrgId;
-    const defaultDatabaseType = state.client?.databaseType || 'PostgreSQL';
-    const [createEnvSteps, setCreateEnvSteps] = useState({
-        connectDB: {
-            label: 'Connect Database',
-            open: true,
-        },
-        connectSchema: {
-            label: 'Configure Organization Table',
-            open: false,
-        },
-        createVirtualTables: {
-            label: 'Create Virtual Tables',
-            open: false,
-        },
-    });
-    const [connection, setConnection] = useState(getDatabaseConnectionFormat(state.isSelfHosted ? defaultDatabaseType : 'PostgreSQL'));
-    const [newClient, setNewClient] = useState({});
-    const [databaseSchema, setDatabaseSchema] = useState(undefined);
-    const [sqlTables, setSqlTables] = useState([]);
-    const [onboardingCompleteIsLoading, setOnboardingCompleteIsLoading] = useState(false);
-    const environmentDetails = useMemo(() => ({
-        client: newClient,
-        connection: connection,
-        databaseSchema: databaseSchema,
-    }), [newClient, connection, databaseSchema]);
-    const [tenantInit, setTenantInit] = useState({});
-    const [fetchSchemasLoading, setFetchSchemasLoading] = useState(false);
-    useLongLoading(onboardingCompleteIsLoading, {
-        origin: 'CreateEnvironment',
-        loadDescription: 'Finishing onboarding',
-    });
-    useLongLoading(fetchSchemasLoading, {
-        origin: 'CreateEnvironment',
-        loadDescription: 'Fetching schemas',
-    });
-    const onConnectDatabase = useCallback(async (clientId) => {
-        setTenantInit({});
-        setSqlTables([]);
-        if (newClient.clientId) {
-            await quillFetch({
-                client: {
-                    queryHeaders: state.queryHeaders,
-                    queryEndpoint: state.queryEndpoint,
-                    clientId: newClient.clientId,
-                    withCredentials: false,
-                },
-                task: 'clear-onboarding-state',
-                metadata: {
-                    clientId: newClient.clientId,
-                },
-                getToken,
-            });
-        }
-        eventTracking?.logEvent?.('start-onboarding', {
-            clientId,
-            clerkOrgId,
-        });
-        setNewClient({
-            clientId,
-        });
-    }, [state.queryEndpoint, getToken]);
-    const setEnvironmentDetails = useCallback(async (connectionInfo, schema, selectedSchemaNames, clientId) => {
-        setFetchSchemasLoading(true);
-        setConnection(connectionInfo);
-        setDatabaseSchema(schema);
-        setNewClient({
-            ...newClient,
-            clientId,
-            databaseType: connectionInfo.type,
-            schemaNames: selectedSchemaNames,
-            clerkOrgId,
-        });
-        // FIXME: Error handling
-        try {
-            dispatch({
-                type: 'SET_DATABASE_SCHEMA',
-                payload: { schema: [], id: clientId, loading: true },
-            });
-            await getTableColumnsBySchema(state.isSelfHosted, state.queryEndpoint, clientId, connection.type, getToken, selectedSchemaNames, state.queryHeaders)
-                .then((schema) => {
-                dispatch({
-                    type: 'SET_DATABASE_SCHEMA',
-                    payload: {
-                        schema: schema.columnsByTable,
-                        id: state.client.id,
-                        loading: false,
-                    },
-                });
-                openStep('connectSchema');
-            })
-                .catch((error) => {
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error fetching schema',
-                    errorMessage: error.message,
-                    errorData: {
-                        caller: 'CreateEnvironment',
-                        function: 'setEnvironmentDetails',
-                    },
-                });
-                console.error(error);
-            });
-        }
-        catch (error) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error setting up database',
-                errorMessage: error.message,
-                errorStack: error.stack,
-                errorData: {
-                    caller: 'CreateEnvironment',
-                    function: 'setEnvironmentDetails',
-                },
-            });
-            console.error(error);
-        }
-        setFetchSchemasLoading(false);
-    }, [newClient, connection, databaseSchema]);
-    const openStep = (step) => {
-        const updatedSteps = { ...createEnvSteps };
-        Object.keys(updatedSteps).forEach((key) => {
-            if (key === step) {
-                updatedSteps[key].open = true;
-            }
-            else {
-                updatedSteps[key].open = false;
-            }
-        });
-        setCreateEnvSteps(updatedSteps);
-    };
-    const finishOnboarding = async () => {
-        setOnboardingCompleteIsLoading(true);
-        const orgName = localStorage.getItem('orgName'); // Set via portal, alternatively, pass a prop through Admin Provider
-        // TODO: Anyone could create a client with some domain through this endpoint
-        const response = await quillFetchWithToken({
-            client: {
-                queryEndpoint: state.queryEndpoint,
-                clientId: newClient.clientId,
-                withCredentials: !!state.withCredentials,
-                queryHeaders: state.queryHeaders,
-            },
-            task: 'finish-onboarding',
-            metadata: {
-                client: {
-                    ...newClient,
-                    allTenantTypes: undefined,
-                },
-                clerkOrgId: clerkOrgId,
-                clientId: newClient.clientId,
-                orgName,
-            },
-            adminMode: true,
-        });
-        if (response.status !== 'success') {
-            setOnboardingCompleteIsLoading(false);
-            throw new Error(response.message);
-        }
-        eventTracking?.logEvent?.('finish-onboarding', {
-            clientId: newClient.clientId,
-            clerkOrgId: clerkOrgId,
-        });
-        setClient(response.data.client);
-        dispatch({
-            type: 'UPDATE_CLIENTS',
-            payload: response.data.client,
-        });
-        sessionStorage.removeItem('quill-adminState');
-        sessionStorage.setItem('quill-client', JSON.stringify(response.data.client));
-        dispatch({
-            type: 'SET_SELECTED_DASHBOARD_NAME',
-            payload: {
-                dashboard: null,
-                reportId: undefined,
-            },
-        });
-        onOnboardComplete?.(response.data.client);
-        // setOnboardingCompleteIsLoading(false);
-    };
-    const isTestMode = process.env.TEST_MODE === 'true';
-    const header1Style = {
-        fontWeight: '600',
-        fontSize: '18px',
-        marginBottom: '6px',
-        color: state.theme?.primaryTextColor,
-        fontFamily: state.theme?.fontFamily,
-    };
-    const header2Style = {
-        fontWeight: '500',
-        fontSize: '13px',
-        marginBottom: '4px',
-        fontFamily: state.theme?.fontFamily,
-        color: state.theme?.secondaryTextColor,
-    };
-    return (_jsxs("div", { ref: parentRef, style: {
-            ...containerStyle,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 12,
-            paddingTop: 24,
-            paddingBottom: 12,
-        }, children: [isTestMode && (_jsx("div", { id: "quill-client-id", "data-testid": "quill-client-id", "data-create-env-steps": JSON.stringify(createEnvSteps), "data-new-client": JSON.stringify(newClient), "data-database-schema": JSON.stringify(databaseSchema), "data-sql-tables": JSON.stringify(sqlTables), "data-tenant-init": JSON.stringify(tenantInit), "data-connection": JSON.stringify(connection), "data-state": JSON.stringify(state), "data-environment-details": JSON.stringify(environmentDetails), style: { display: 'none' }, children: newClient.clientId })), createEnvSteps.connectDB.open ? (_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: setEnvironmentDetails, fetchSchemasLoading: fetchSchemasLoading, onConnectDatabase: onConnectDatabase })) : (_jsx(StepDisplay, { label: "Connect Database", completed: !!connection.connectionString && !!newClient?.schemaNames?.length, header1Style: header1Style, onClick: () => {
-                    openStep('connectDB');
-                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { containerStyle: {
-                    padding: '24px',
-                    // width: '50%',
-                    minWidth: 650,
-                    borderRadius: 6,
-                    maxWidth: 1200,
-                    border: '1px solid #e7e7e7',
-                    boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
-                }, header1Style: header1Style, header2Style: header2Style, tenantInit: tenantInit, onTenantCreation: async (tenantInit) => {
-                    setTenantInit(tenantInit);
-                    setNewClient({
-                        ...newClient,
-                        ownerTenantFields: [tenantInit.ownerTenant.tenantField],
-                        allTenantTypes: [tenantInit.ownerTenant],
-                    });
-                    finishOnboarding();
-                }, returnToConnectDatabase: () => {
-                    setNewClient({
-                        ...newClient,
-                        schemaNames: [],
-                    });
-                    setTenantInit({});
-                    setSqlTables([]);
-                    openStep('connectDB');
-                }, databaseSchema: databaseSchema, connection: connection, clientId: newClient.clientId, selectedSchemas: newClient.schemaNames, state: state, label: 'Filter Data By Tenant' })) : (_jsx(StepDisplay, { label: "Filter Data By Tenant", completed: !!tenantInit?.ownerTenant, header1Style: header1Style, onClick: () => {
-                    if (!!connection.connectionString &&
-                        !!newClient?.schemaNames?.length) {
-                        openStep('connectSchema');
-                    }
-                } }))] }));
-}

package/dist/esm/public_components/DashboardManager.d.ts

@@ -1,6 +0,0 @@
-import { CSSProperties } from 'react';
-export default function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }: {
-    navigateToVirtualTableManager?: () => void;
-    containerStyle?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DashboardManager.d.ts.map

package/dist/esm/public_components/DashboardManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AA6ChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAw3BA"}