@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/forms/sql_views/CreateEditSqlView.js

@@ -1,222 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, SchemaListComponent, } from '@quillsql/react';
-import { useEffect, useState, } from 'react';
-import { useAdmin } from '../../AdminProvider';
-import { getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
-import SqlTextEditor from '../../components/SqlTextEditor';
-import { LoadingSpinner, MemoizedButton, MemoizedHeader, MemoizedTextInput, } from '../../components/UiComponents';
-import { ForeignKeyModal } from '../client_onboard/CreateSqlViews';
-import DynamicBanner from '../../components/DynamicBanner';
-import { getDuplicateColumns } from '../../public_components/SQLViewManager';
-import { processColumnReference } from '../../utils/columnProcessing';
-import { processJoinASTWithDuplicateColumns } from '../../utils/astProcessing';
-import { QUILL_SERVER } from '../../utils/constants';
-export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, setProvider, provider, SecondaryButtonComponent, LoadingComponent = () => _jsx(LoadingSpinner, {}), Button = MemoizedButton, TextInput = MemoizedTextInput, Header = MemoizedHeader, allTableData, schemaIsLoading, }) {
-    const [name, setName] = useState(initialSqlView?.name || '');
-    const [editViewQuery, setEditViewQuery] = useState(initialSqlView?.query || '');
-    const [ranViewQuery, setRanViewQuery] = useState(initialSqlView?.query || '');
-    const [askAIButtonLoading, setAskAIButtonLoading] = useState(false);
-    const [runQueryButtonLoading, setRunQueryButtonLoading] = useState(false);
-    const [aiPrompt, setAIPrompt] = useState('');
-    const [viewAddable, setViewAddable] = useState(false);
-    const [showFKModal, setShowFKModal] = useState(false);
-    const [overrideFKCheck, setOverrideFKCheck] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [tableSearchQuery, setTableSearchQuery] = useState('');
-    const [editorMounted, setEditorMounted] = useState(false);
-    const [displayedTableData, setDisplayedTableData] = useState(allTableData);
-    const [errorInfo, setErrorInfo] = useState({ show: false, message: '' });
-    const [tableData, setTableData] = useState(undefined);
-    const { state, dispatch } = useAdmin();
-    const addEditSqlView = async (override = false) => {
-        if (!override &&
-            tableData &&
-            !tableData.fields.find((col) => col.name === state.client.customerFieldName.replaceAll('"', ''))) {
-            setShowFKModal(true);
-            return;
-        }
-        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined, tableData?.fields || []);
-    };
-    useEffect(() => {
-        setDisplayedTableData(allTableData);
-    }, [allTableData]);
-    const handleRunSqlPrompt = async () => {
-        setErrorInfo({ show: false, message: '' });
-        setViewAddable(false);
-        setAskAIButtonLoading(true);
-        const results = await getQueryFromAiWithConnection(aiPrompt, state.client._id, state.client.schemaNames);
-        setOverrideFKCheck(false);
-        setEditViewQuery(results);
-        setAskAIButtonLoading(false);
-    };
-    const handleClickSchemaItem = async (event) => {
-        const name = event.target.textContent;
-        if (!name) {
-            return;
-        }
-        const newQuery = `SELECT * FROM ${processColumnReference(name, state.client.databaseType)};`;
-        if (!editViewQuery || editViewQuery.length === 0) {
-            setEditViewQuery(newQuery);
-        }
-        await navigator.clipboard.writeText(newQuery);
-    };
-    const handleRunQuery = async (overrideQuery) => {
-        const query = overrideQuery ? overrideQuery : editViewQuery;
-        // If this query has a limit at the end alert the user
-        if (/limit\s+\d+\s*;?\s*$/i.test(query)) {
-            setErrorInfo({
-                show: true,
-                message: 'Error: Please remove the limit at the end of your query.',
-            });
-            return;
-        }
-        setViewAddable(false);
-        setErrorInfo({ show: false, message: '' });
-        setTableData(undefined);
-        setIsLoading(true);
-        setRunQueryButtonLoading(true);
-        setOverrideFKCheck(false);
-        if (query.length === 0) {
-            setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
-            setRunQueryButtonLoading(false);
-            return;
-        }
-        const resp = await getSqlViewData(state.client._id, query, state.client.databaseType, state.queryEndpoint);
-        if (!resp.success) {
-            setErrorInfo({ show: true, message: resp.error });
-            setTableData(undefined);
-            setViewAddable(false);
-            setRunQueryButtonLoading(false);
-            setIsLoading(false);
-            return;
-        }
-        setRunQueryButtonLoading(false);
-        setErrorInfo({ show: false, message: '' });
-        // stringify all rows that are either jsonb or json
-        resp.rows = resp.rows.map((row) => {
-            for (const key in row) {
-                if (row[key] !== null && typeof row[key] === 'object') {
-                    row[key] = JSON.stringify(row[key]);
-                }
-            }
-            return row;
-        });
-        const duplicateColumns = getDuplicateColumns(resp.fields);
-        if (duplicateColumns.length > 0) {
-            let parsedAST = resp.ast;
-            if (Array.isArray(resp.ast)) {
-                parsedAST = [0];
-            }
-            const tableNames = parsedAST.from.map((table) => {
-                const db = table.db ? `${table.db}.` : '';
-                return `${db}${table.table}`;
-            });
-            const newAst = processJoinASTWithDuplicateColumns(duplicateColumns, tableNames, allTableData, parsedAST);
-            const response = await fetch(`${QUILL_SERVER}/sqlify`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    ast: { ...newAst },
-                    publicKey: state.client._id,
-                }),
-            });
-            const jsonResponse = await response.json();
-            setEditViewQuery(jsonResponse.query);
-            await handleRunQuery(jsonResponse.query);
-            return;
-        }
-        setTableData({ fields: resp.fields, rows: resp.rows });
-        setViewAddable(true);
-        setRanViewQuery(query);
-        setIsLoading(false);
-    };
-    return (_jsx("div", { style: {
-            ...containerStyle,
-            gap: 6,
-            height: 'calc(100vh - 130px)',
-        }, children: _jsxs("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [_jsx(DynamicBanner, { header: initialSqlView
-                        ? `Edit "${initialSqlView.name}" view`
-                        : 'Create SQL View', message: initialSqlView
-                        ? `You are currently editing the '${initialSqlView.name}' sql view.`
-                        : '', onExit: closeEditView, style: {
-                        display: 'flex',
-                        paddingTop: '0.625rem',
-                        paddingBottom: '0.625rem',
-                        paddingLeft: '24px',
-                        paddingRight: '24px',
-                        alignItems: 'center',
-                        backgroundColor: initialSqlView ? '#111827' : '#ffffff',
-                    } }), _jsxs("div", { style: {
-                        width: '100%',
-                        display: 'flex',
-                        height: '100%',
-                        flexDirection: 'row',
-                        paddingTop: '20px',
-                    }, children: [_jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 20,
-                            }, children: [_jsx("div", { style: {
-                                        paddingLeft: '20px',
-                                        paddingRight: '30px',
-                                    }, children: _jsx(TextInput, { placeholder: "Search...", onChange: (e) => {
-                                            setTableSearchQuery(e.target.value);
-                                            setDisplayedTableData(allTableData.filter((table) => table.tableName
-                                                .toLowerCase()
-                                                .includes(e.target.value.toLowerCase().trim())));
-                                        }, value: tableSearchQuery, id: 'edit-name', width: '100%' }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px', onClick: handleClickSchemaItem })] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                gap: 20,
-                                flexDirection: 'column',
-                                width: 'calc(100% - 250px)',
-                                maxHeight: '100%',
-                                overflowX: 'hidden',
-                                paddingRight: '24px',
-                            }, children: [_jsxs("div", { style: {
-                                        overflow: 'auto',
-                                        gap: 20,
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    }, children: [_jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'flex-start',
-                                                justifyContent: 'space-between',
-                                                gap: 20,
-                                                width: '100%',
-                                            }, children: [_jsx(TextInput, { onChange: (e) => {
-                                                        setAIPrompt(e.target.value);
-                                                    }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '100%' }), _jsx(Button, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: handleRunSqlPrompt })] }), _jsx(SqlTextEditor, { value: editViewQuery, setValue: (e) => {
-                                                setEditViewQuery(e);
-                                            }, setEditorMounted: (didMount) => {
-                                                setEditorMounted(didMount);
-                                            }, setPreviousProvier: (provider) => {
-                                                setProvider(provider);
-                                            }, previousProvider: provider, schema: displayedTableData, databaseType: state.client.databaseType }), editorMounted && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: 'Run query', onClick: () => {
-                                                    handleRunQuery();
-                                                } }) })), errorInfo.show ? (_jsx("div", { style: {
-                                                fontSize: 15,
-                                                fontWeight: '400',
-                                            }, children: _jsx("div", { style: {
-                                                    padding: 30,
-                                                    background: 'rgba(0,0,0,0.02)',
-                                                    display: 'inline-block',
-                                                    flex: 0,
-                                                    borderRadius: 6,
-                                                }, children: errorInfo.message }) })) : null, isLoading && (_jsx("div", { style: {
-                                                height: 'calc(100vh - 589px)',
-                                                width: '100%',
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                alignItems: 'center',
-                                            }, children: _jsx(LoadingComponent, {}) })), tableData && (_jsx(Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px', minHeight: 250 } }))] }), viewAddable && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => {
-                                            const duplicateColumns2 = 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;
-                                            }
-                                            addEditSqlView(false);
-                                        } }) }))] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
-}

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

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { QuillTheme } from '../Admin';
-interface PromoteDashModalProps {
-    ButtonComponent: React.ComponentType<any>;
-    ModalComponent: React.ComponentType<any>;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    clientId: string;
-    client: any;
-    dashboards: any[];
-    clients: any[];
-    selectedDashboard: string;
-    theme: QuillTheme;
-}
-export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client, dashboards, clients, theme, }: PromoteDashModalProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=PromoteDashModal.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PromoteDashModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,UAAU,CAAC;AAoE7C,UAAU,qBAAqB;IAC7B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CAqIvB"}

package/dist/esm/modals/PromoteDashModal.js

@@ -1,130 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAdmin } from '../AdminProvider';
-import { DropDownMenu } from '../components';
-import { useEffect, useState } from 'react';
-import { QUILL_SERVER } from '../utils/constants';
-import { QuillSelectComponent } from '../components/QuillSelect';
-const createStyles = (theme) => ({
-    modalContent: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    modalHeader: {
-        fontWeight: '600',
-        fontSize: 20,
-        paddingBottom: 4,
-        color: theme.primaryTextColor,
-    },
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        gap: '5px',
-        marginTop: 20,
-    },
-    multiContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: '20px',
-        marginTop: 20,
-    },
-    header: {
-        fontSize: theme.fontSize,
-        paddingTop: '0px',
-        marginTop: '0px',
-        marginBottom: '0px',
-        fontWeight: theme.labelFontWeight,
-        color: theme.primaryTextColor,
-    },
-    text: {
-        fontSize: theme.fontSize,
-        paddingTop: '0px',
-        marginTop: '0px',
-        marginBottom: '4px',
-        fontWeight: theme.labelFontWeight,
-        color: theme.primaryTextColor,
-    },
-    group: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        gap: '5px',
-    },
-    button: {
-        flexGrow: 1,
-        fontSize: theme.fontSize,
-        fontWeight: '600',
-        padding: '10px 20px',
-        marginTop: 20,
-        backgroundColor: theme.primaryButtonColor,
-        borderRadius: '5px',
-        color: theme.primaryButtonTextColor,
-    },
-});
-export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client, dashboards, clients, theme, }) {
-    const { state, dispatch } = useAdmin();
-    const [modalSelectedDashboard, setModalSelectedDashboard] = useState();
-    const [selectedToClient, setSelectedToClient] = useState();
-    const styles = createStyles(theme);
-    useEffect(() => {
-        setModalSelectedDashboard(state.selectedDashboard.name);
-        setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
-    }, [state.selectedDashboard, state.clients]);
-    const handlePromote = async () => {
-        try {
-            const response = await fetch(`${QUILL_SERVER}/promote_dashboard/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer ',
-                },
-                body: JSON.stringify({
-                    dashboardName: modalSelectedDashboard,
-                    fromClientId: clientId,
-                    toClientId: selectedToClient._id,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error('API request failed');
-            }
-            const data = await response.json();
-        }
-        catch (error) {
-            console.error('Promotion failed:', error);
-        }
-    };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: { overflow: 'visible' }, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-            }, children: [_jsx("div", { style: styles.modalContent, children: _jsx("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), _jsx("div", { style: styles.container, children: _jsx("div", { style: styles.text, children: _jsx(QuillSelectComponent, { label: "Dashboard", options: dashboards.map((dashboard) => {
-                                return { label: dashboard.name, value: dashboard.name };
-                            }), onChange: setModalSelectedDashboard, value: modalSelectedDashboard, theme: theme }) }) }), _jsxs("div", { style: styles.multiContainer, children: [_jsxs("div", { style: styles.group, children: [_jsx("h1", { style: styles.header, children: "From" }), _jsx("div", { style: styles.text, children: _jsx(DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), _jsx("div", { style: styles.group, children: _jsx("div", { style: styles.text, children: _jsx(QuillSelectComponent, { label: "To", options: clients
-                                        .filter((c) => c.name !== client.name)
-                                        .map((client) => {
-                                        return { label: client.name, value: client };
-                                    }), onChange: setSelectedToClient, value: selectedToClient, theme: theme }) }) })] }), _jsx("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: _jsxs("button", { onClick: () => {
-                            handlePromote();
-                            setIsOpen(false);
-                        }, className: "quill-button", children: [_jsx("style", { children: `.quill-button {
-                    background: #212121;
-                    color: white;
-                    font-size: 15px;
-                    height: 42px;
-                    padding-left: 16px;
-                    padding-right: 16px;
-                    font-weight: 500;
-                    border-radius: 6px;
-                    margin-top: 30px;
-                }
-                .quill-button:hover {
-                    background: rgba(0,0,0,0.75);
-                }` }), "Promote Dashboard"] }) })] }) }));
-}

package/dist/esm/primitives/SelectPrimitive.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import { QuillTheme } from "../Admin";
-type Option = {
-    value: string;
-    label: string;
-};
-type SelectPrimitiveProps = {
-    options: Option[];
-    onChange: (value: string) => void;
-    value: string;
-    theme?: QuillTheme;
-    disabled?: boolean;
-};
-declare const SelectPrimitive: React.FC<SelectPrimitiveProps>;
-export default SelectPrimitive;
-//# sourceMappingURL=SelectPrimitive.d.ts.map

package/dist/esm/primitives/SelectPrimitive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/SelectPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/SelectPrimitive.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownHeadIcon } from "../icons";
-import { theme as defaultTheme } from "../Admin";
-const SelectPrimitive = ({ options, onChange, value, theme = defaultTheme, disabled = false, }) => {
-    return (_jsxs("div", { style: {
-            position: "relative",
-            fontFamily: theme?.fontFamily,
-            fontSize: 14,
-            fontWeight: 500,
-        }, children: [_jsx("select", { disabled: disabled, style: {
-                    width: "100%",
-                    minWidth: 230,
-                    maxWidth: 230,
-                    outline: "none",
-                    textAlign: "left",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    borderRadius: 6,
-                    WebkitAppearance: "none",
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    height: 38,
-                    borderWidth: theme?.borderWidth,
-                    borderColor: theme?.borderColor,
-                    background: theme?.backgroundColor,
-                    color: theme?.primaryTextColor,
-                    boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
-                    fontFamily: theme?.fontFamily,
-                }, value: value || "", onChange: (event) => onChange(event.target.value), children: options?.length > 0 &&
-                    options.map((option, index) => (_jsx("option", { value: option.value, label: option.label }, index))) }), _jsx(ArrowDownHeadIcon, { style: {
-                    height: "20px",
-                    width: "20px",
-                    flex: "none",
-                    position: "absolute",
-                    right: 8,
-                    top: 9,
-                    color: theme?.secondaryTextColor,
-                }, "aria-hidden": "true" })] }));
-};
-export default SelectPrimitive;

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAwUA"}