@quillsql/admin 1.6.0 → 1.6.2

package/dist/cjs/forms/client_onboard/CreateVirtualTables.js

@@ -0,0 +1,396 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CreateVirtualTables;
+exports.VirtualTableModal = VirtualTableModal;
+exports.TenantFieldModal = TenantFieldModal;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
+const primitives_1 = require("../../primitives");
+const ConnectionClient_1 = require("../../api/ConnectionClient");
+const VirtualTableTile_1 = __importDefault(require("../../components/VirtualTableTile"));
+const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"));
+const react_3 = require("@quillsql/react");
+const UiComponents_1 = require("../../components/UiComponents");
+const VirtualTableManager_1 = require("../../public_components/VirtualTableManager");
+const columnProcessing_1 = require("../../utils/columnProcessing");
+const AdminProvider_1 = require("../../AdminProvider");
+const constants_1 = require("../../utils/constants");
+const prism_react_renderer_1 = require("prism-react-renderer");
+function CreateVirtualTables({ containerStyle, header1Style, header2Style, environmentDetails, databaseSchema, completeOnboarding, client, state, tenantInit, isLoading, sqlTables, setSqlTables, }) {
+    const [queryInfo, setQueryInfo] = (0, react_2.useState)({
+        name: '',
+        query: '',
+    });
+    const [aiPrompt, setAIPrompt] = (0, react_2.useState)('');
+    const [errorInfo, setErrorInfo] = (0, react_2.useState)({ status: false, msg: '' });
+    const [sqlQueryError, setSqlQueryInfo] = (0, react_2.useState)({ status: false, msg: '' });
+    const [tableData, setTableData] = (0, react_2.useState)(undefined);
+    const [virtualTableModalOpen, setVirtualTableModalOpen] = (0, react_2.useState)(false);
+    const [openModalButtonLoading, setOpenModalButtonLoading] = (0, react_2.useState)(false);
+    const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_2.useState)(false);
+    const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_2.useState)(false);
+    const [failingTenant, setFailingTenant] = (0, react_2.useState)(undefined);
+    const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
+    const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(databaseSchema);
+    const middleColumn = (0, react_2.useRef)(null);
+    const { getToken, quillFetchWithToken } = (0, AdminProvider_1.useAdmin)();
+    (0, react_2.useEffect)(() => {
+        const scrollToBottom = () => {
+            // Scroll to the bottom of the container (or page)
+            document
+                .getElementById('create-virtual-table')
+                ?.scrollIntoView({ behavior: 'smooth' });
+        };
+        // Ensuring that the scroll happens after layout updates
+        const timeoutId = setTimeout(scrollToBottom, 0);
+        return () => clearTimeout(timeoutId); // Cleanup the timeout if the component unmounts
+    }, []);
+    (0, react_2.useEffect)(() => {
+        if (!tableData || !middleColumn.current) {
+            return;
+        }
+        middleColumn.current.scrollTop = middleColumn.current.scrollHeight;
+    }, [tableData]);
+    const addVirtualTable = async (override) => {
+        const tenantField = tenantInit.ownerTenant?.tenantField ??
+            client.allTenantTypes?.[0]?.tenantField;
+        if (!tenantField) {
+            throw new Error('Your tenant is not set up correctly, please redo step 2');
+        }
+        const results = await (0, ConnectionClient_1.createVirtualTable)(queryInfo, client, tableData, sqlTables?.map((e) => {
+            return e.name;
+        }) ?? [], client.clientId, tenantField === constants_1.SINGLE_TENANT || override ? [] : [tenantField], state.queryEndpoint, state.queryHeaders, getToken);
+        if (results.failingTenant) {
+            setFailingTenant(results.failingTenant);
+            return;
+        }
+        if (results.success && results.tables) {
+            setSqlQueryInfo({ msg: '', status: false });
+            setSqlTables(results.tables);
+            setQueryInfo({ name: '', query: '' });
+        }
+        else {
+            setSqlQueryInfo({ msg: results.message, status: true });
+        }
+        setTableData(undefined);
+    };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (!name) {
+            return;
+        }
+        let databaseType = 'postgresql';
+        if (environmentDetails && environmentDetails.type) {
+            databaseType = environmentDetails.type;
+        }
+        const newQuery = `SELECT * FROM ${(0, columnProcessing_1.processColumnReference)(name, databaseType)};`;
+        if (!queryInfo.query || queryInfo.query.length === 0) {
+            setQueryInfo({ name: queryInfo.name, query: newQuery });
+        }
+        await navigator.clipboard.writeText(newQuery);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            ...containerStyle,
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: 900,
+            maxWidth: '95vw',
+            width: '100%',
+        }, id: "create-virtual-table", children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: 20,
+                    paddingBottom: 12,
+                    height: 92,
+                    maxHeight: 92,
+                    minHeight: 92,
+                }, children: [(0, jsx_runtime_1.jsx)("h1", { style: header1Style, children: "Create Virtual Tables" }), (0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style }, children: "Create a cleaned schema that makes it easier to write queries." })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    borderTop: 'solid 1px #e7e7e7',
+                    height: 'calc(100vh - 150px)',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            paddingBottom: 10,
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    paddingLeft: '20px',
+                                    paddingRight: '30px',
+                                    height: 70,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingTop: 6,
+                                }, children: (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { placeholder: "Filter tables...", 
+                                    // @ts-ignore
+                                    onChange: (e) => {
+                                        setTableSearchQuery(e.target.value);
+                                        setDisplayedTableData(databaseSchema.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: "200px" }) }), (0, jsx_runtime_1.jsx)(react_3.SchemaListComponent, { schema: displayedTableData, theme: state.theme, width: '250px', loading: false, LoadingComponent: UiComponents_1.LoadingSpinner, onClick: handleClickSchemaItem, style: { overflowY: 'auto' } })] }), (0, jsx_runtime_1.jsxs)("div", { id: "form-editor-table", ref: middleColumn, style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: 'calc(100% - 500px)',
+                            minWidth: 300,
+                            // height: 'calc(100vh - 302px)',
+                            overflowY: 'scroll',
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    gap: 12,
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 70,
+                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
+                                            setAIPrompt(e.target.value);
+                                        }, placeholder: 'Describe a query...', value: aiPrompt }), (0, jsx_runtime_1.jsx)(UiComponents_1.QuillToolTip, { text: aiPrompt.trim().length > 500
+                                            ? 'Prompt must be less than 500 characters'
+                                            : '', enabled: aiPrompt.trim().length > 500, textStyle: {
+                                            maxWidth: '90px',
+                                            whiteSpace: 'normal',
+                                        }, displayBelow: true, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: async () => {
+                                                setAskAIButtonLoading(true);
+                                                const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(state.queryEndpoint, aiPrompt, client.clientId, getToken, client.schemaNames);
+                                                setQueryInfo({ name: queryInfo.name, query: results });
+                                                setAskAIButtonLoading(false);
+                                            }, style: { width: '90px' }, disabled: aiPrompt.trim().length > 500 }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "quill-sql-text-editor", children: (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: queryInfo.query, setValue: (e) => {
+                                        setQueryInfo({ name: queryInfo.name, query: e });
+                                    }, setEditorMounted: () => { }, containerStyle: {
+                                        paddingLeft: 16,
+                                        paddingRight: 16,
+                                        marginTop: 2,
+                                    }, schema: displayedTableData, databaseType: environmentDetails?.type, resizable: false }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    paddingTop: 12,
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 70,
+                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Run query', isLoading: runQueryButtonLoading, onClick: async () => {
+                                            setRunQueryButtonLoading(true);
+                                            const getSqlResults = await (0, ConnectionClient_1.getVirtualTableData)(client.clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint, getToken);
+                                            if (!getSqlResults.success) {
+                                                setErrorInfo({ status: true, msg: getSqlResults.error });
+                                            }
+                                            else {
+                                                setErrorInfo({ status: false, msg: '' });
+                                                setTableData(getSqlResults);
+                                            }
+                                            setRunQueryButtonLoading(false);
+                                        } }), errorInfo.status ? ((0, jsx_runtime_1.jsx)("h2", { style: {
+                                            ...header2Style,
+                                            color: 'red',
+                                            paddingLeft: '12px',
+                                            height: 40,
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                        }, children: errorInfo.msg })) : ((0, jsx_runtime_1.jsx)("div", {}))] }), !errorInfo.status && tableData && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 16,
+                                    height: 'calc(100vh - 539px)',
+                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
+                                            width: '100%',
+                                            height: 270,
+                                        }, hideCSVDownloadButton: true, isLoading: runQueryButtonLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            width: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            height: 70,
+                                        }, children: [sqlQueryError.status ? ((0, jsx_runtime_1.jsx)("h2", { style: {
+                                                    ...header2Style,
+                                                    color: 'red',
+                                                    paddingTop: '12px',
+                                                    // textTransform: 'capitalize',
+                                                }, children: sqlQueryError.msg })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)("div", { "data-testid": "add-virtual-table-button", children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Add Virtual Table", isLoading: openModalButtonLoading, disabled: !!failingTenant, onClick: async () => {
+                                                        setOpenModalButtonLoading(true);
+                                                        const duplicateColumns2 = (0, VirtualTableManager_1.getDuplicateColumns)(tableData?.fields);
+                                                        if (duplicateColumns2.length > 0) {
+                                                            alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns2.join('\n')}`);
+                                                            return;
+                                                        }
+                                                        const clientId = client?.publicKey || client?.clientId;
+                                                        if (!clientId) {
+                                                            // Shouldn't have reached this point without a public key
+                                                            // If we were to call astify without a public key, the database type would be unknown
+                                                            return;
+                                                        }
+                                                        const localURL = client.queryEndpoint ?? state.queryEndpoint;
+                                                        const { data: queryAstRaw } = await quillFetchWithToken({
+                                                            client: {
+                                                                queryEndpoint: localURL,
+                                                                clientId,
+                                                                withCredentials: !!state.withCredentials,
+                                                                queryHeaders: state.queryHeaders,
+                                                            },
+                                                            task: 'astify',
+                                                            metadata: {
+                                                                query: queryInfo.query,
+                                                                clientId: client?.publicKey || client?.clientId,
+                                                                useNewNodeSql: true,
+                                                            },
+                                                            adminMode: true,
+                                                        });
+                                                        if (queryAstRaw.success !== false) {
+                                                            const queryAst = queryAstRaw.ast[0]
+                                                                ? queryAstRaw.ast[0]
+                                                                : queryAstRaw.ast;
+                                                            const queryName = queryAst.from
+                                                                .map((ast) => ast.table.toLowerCase())
+                                                                .join('_');
+                                                            setQueryInfo({
+                                                                name: queryName,
+                                                                query: queryInfo.query,
+                                                            });
+                                                        }
+                                                        setOpenModalButtonLoading(false);
+                                                        setVirtualTableModalOpen(true);
+                                                    } }) })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            width: '400px',
+                            // background: '#fafafa',
+                            borderLeft: 'solid 1px #e7e7e7',
+                            // height: '100%',
+                        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                    ...header1Style,
+                                    color: '#212121',
+                                    paddingLeft: 16,
+                                    height: 70,
+                                    background: 'white',
+                                    borderBottom: 'solid 1px #e7e7e7',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    alignItems: 'flex-start',
+                                    marginBottom: 0,
+                                }, children: "Virtual Tables" }), sqlTables?.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '10px',
+                                    overflow: 'scroll',
+                                    height: 'calc(100vh - 302px)',
+                                    paddingTop: '12px',
+                                    paddingLeft: '20px',
+                                    paddingRight: '20px',
+                                }, children: [sqlTables?.map((e) => {
+                                        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(VirtualTableTile_1.default, { name: e.name, query: e.viewQuery, theme: state.theme }) }, e.name));
+                                    }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: 12, paddingRight: 12 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        border: 'dashed 1px #C5C5C5',
+                                        marginTop: '12px',
+                                        borderRadius: 6,
+                                        height: 200,
+                                    }, children: (0, jsx_runtime_1.jsxs)("h2", { style: {
+                                            ...header2Style,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            color: '#565656',
+                                            textAlign: 'center',
+                                        }, children: ['No virtual tables created yet.', (0, jsx_runtime_1.jsx)("br", {}), 'Create one with the SQL editor.'] }) }) })), (sqlTables?.length ?? 0) > 0 ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    justifyContent: 'flex-end',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    height: 70,
+                                    paddingRight: 12,
+                                    background: 'white',
+                                    borderTop: 'solid 1px #e7e7e7',
+                                }, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Looks good", onClick: () => {
+                                        completeOnboarding();
+                                    }, style: {
+                                    // marginBottom: -8,
+                                    }, isLoading: isLoading }) })) : null] })] }), (0, jsx_runtime_1.jsx)(TenantFieldModal, { isOpen: !!failingTenant, setClosed: () => setFailingTenant(undefined), tenant: failingTenant, onOverride: () => addVirtualTable(true) }), (0, jsx_runtime_1.jsx)(VirtualTableModal, { isOpen: virtualTableModalOpen, setIsOpen: setVirtualTableModalOpen, queryInfo: queryInfo, setQueryInfo: setQueryInfo, addVirtualTable: () => addVirtualTable(false) })] }));
+}
+function VirtualTableModal({ isOpen, setIsOpen, queryInfo, setQueryInfo, addVirtualTable, }) {
+    return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: isOpen, onClose: () => {
+            setIsOpen(false);
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                        fontSize: 24,
+                        fontWeight: 600,
+                        color: '#212121',
+                        paddingBottom: 20,
+                    }, children: "Add Virtual Table" }), (0, jsx_runtime_1.jsx)("h3", { style: {
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        marginBottom: '6px',
+                        color: '#212121',
+                    }, children: "Name" }), (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { ref: (e) => {
+                        e?.focus();
+                    }, value: queryInfo.name, onChange: (e) => {
+                        setQueryInfo({ name: e.target.value, query: queryInfo.query });
+                    }, placeholder: "Name..." }), (0, jsx_runtime_1.jsx)("h3", { style: {
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        marginBottom: '6px',
+                        marginTop: '12px',
+                        color: '#212121',
+                    }, children: "Query" }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.Highlight, { theme: prism_react_renderer_1.themes.nightOwlLight, code: queryInfo.query || '', language: "sql", children: ({ className, tokens, style, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
+                            ...style,
+                            textAlign: 'left',
+                            padding: '1em',
+                            overflow: 'auto',
+                            height: 132,
+                            maxWidth: 460,
+                            borderRadius: 8,
+                            position: 'relative',
+                        }, 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)))))) })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '12px',
+                        justifyContent: 'flex-end',
+                        marginTop: '12px',
+                    }, children: [(0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Cancel", onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Confirm", variant: "primary", onClick: () => {
+                                if (!/^[a-z0-9_]+$/.test(queryInfo.name)) {
+                                    alert('Names can only include lowercase letters, numbers, and underscores');
+                                    return;
+                                }
+                                addVirtualTable(false);
+                                setIsOpen(false);
+                            } })] })] }) }));
+}
+function TenantFieldModal({ isOpen, setClosed, tenant, onOverride, }) {
+    return ((0, jsx_runtime_1.jsx)(primitives_1.ModalPrimitive, { isOpen: isOpen, onClose: () => setClosed(), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '500px' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                        fontSize: 24,
+                        fontWeight: 600,
+                        color: '#212121',
+                        paddingBottom: 14,
+                    }, children: "Foreign Key Missing" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                color: '#212121',
+                                fontWeight: 600,
+                                backgroundColor: '#f7f7f7',
+                                padding: '2px 4px',
+                                borderRadius: 4,
+                                border: '1px solid #e0e0e0',
+                            }, children: tenant?.name }), "'s foreign key", ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                color: 'red',
+                                fontWeight: 600,
+                                backgroundColor: '#f7f7f7',
+                                padding: '2px 4px',
+                                borderRadius: 4,
+                                border: '1px solid #e0e0e0',
+                            }, children: tenant?.tenantField.replaceAll('"', '') }), ' ', "is not present in the current query to allow for filtering.", onOverride ? ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "Only override if this data is meant to be accessible by", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "every tenant" }), " (this is rare)"] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "If this tenant is not meant to filter this data, remove it from the owners dropdown"] }))] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '12px',
+                        justifyContent: 'flex-end',
+                    }, children: [onOverride && ((0, jsx_runtime_1.jsx)(primitives_1.SecondaryButtonPrimitive, { label: "Override", onClick: () => {
+                                onOverride();
+                                setClosed();
+                            } })), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Got It", onClick: () => setClosed() })] })] }) }));
+}

package/dist/cjs/forms/client_onboard/__tests__/ConnectDatabase.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=ConnectDatabase.test.d.ts.map

package/dist/cjs/forms/client_onboard/__tests__/ConnectDatabase.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectDatabase.test.d.ts","sourceRoot":"","sources":["../../../../../src/forms/client_onboard/__tests__/ConnectDatabase.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}