@quillsql/admin 1.6.0 → 1.6.2

package/dist/cjs/public_components/DashboardBuilder.js

@@ -1,309 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const AdminProvider_1 = require("../AdminProvider");
-const Admin_1 = require("../Admin");
-const components_1 = require("../components");
-const react_2 = require("@quillsql/react");
-const constants_1 = require("../utils/constants");
-const Banner_1 = __importDefault(require("../components/Banner"));
-const DatabaseMismatchCard_1 = __importDefault(require("../components/DatabaseMismatchCard"));
-const modeToggleOptions = ['SQL Editor', 'Report Builder'];
-function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
-    const parentRef = (0, react_1.useRef)(null);
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
-    const [customerId, setCustomerId] = (0, react_1.useState)('');
-    const [isEditActive, setIsEditActive] = (0, react_1.useState)(false);
-    const [checked, setChecked] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)('');
-    const [userTyping, setUserTyping] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
-    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
-    const [dashboardNames, setDashboardNames] = (0, react_1.useState)([]);
-    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [query, setQuery] = (0, react_1.useState)(state.activeQuery);
-    const [rows, setRows] = (0, react_1.useState)([]);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
-    const [toggleMode, setToggleMode] = (0, react_1.useState)('SQL Editor');
-    (0, react_1.useEffect)(() => {
-        if (state.activeQuery) {
-            setIsEditActive(true);
-        }
-        else {
-            setIsEditActive(false);
-        }
-    }, [state.activeQuery]);
-    (0, react_1.useEffect)(() => {
-        if (navigateToDashboardManager) {
-            dispatch({
-                type: 'SET_NAVIGATE_TO_DASHBOARD_MANAGER',
-                payload: navigateToDashboardManager,
-            });
-        }
-        else {
-            console.warn('navigateToDashboardManager is undefined');
-        }
-    }, [navigateToDashboardManager]);
-    (0, react_1.useEffect)(() => {
-        setQuery(state.activeQuery);
-    }, [state.activeQuery]);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getDashNames() {
-            // If you need to retrieve the JSON data from the response:
-            const response = await fetch(`${state.queryEndpoint}`, {
-                method: 'POST',
-                headers: {
-                    ...state.queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        clientId: state.client._id,
-                        publicKey: state.client._id,
-                        task: 'dashboards',
-                        databaseType: state.client.databaseType,
-                    },
-                }),
-            });
-            const data = await response.json();
-            const dashNames = data.data.dashboardNames.filter((elem) => elem !== null);
-            setDashboardNames(dashNames);
-            setSelectedDashboardName(dashNames[0]);
-        }
-        if (isSubscribed) {
-            getDashNames();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [state.environment]);
-    // const navigate = useNavigate();
-    const handleRunQuery = async () => {
-        const { _id } = state.client;
-        try {
-            const response = await fetch(`${constants_1.QUILL_SERVER}/dashquery?orgId=${state.organizationId || ''}&publicKey=${_id}`, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: state.environment,
-                    'Content-Type': 'application/json', // Important when sending JSON
-                },
-                body: JSON.stringify({
-                    query,
-                }),
-            });
-            const responseData = await response.json();
-            if (responseData && responseData.errorMessage) {
-                setErrorMessage('Failed to run SQL query: ' + responseData.errorMessage);
-                setRows([]);
-                setColumns([]);
-                setFields([]);
-                return;
-            }
-            setErrorMessage('');
-            setRows(responseData.rows);
-            setColumns(responseData.fields.map((elem) => (0, Admin_1.convertPostgresColumn)(elem)));
-            setFields(responseData.fields);
-        }
-        catch (e) {
-            console.log('ERROR: ', e);
-            return;
-        }
-    };
-    const handleAddToDashboard = () => {
-        setIsOpen(true);
-    };
-    const newRows = (0, react_1.useMemo)(() => {
-        return JSON.parse(JSON.stringify(rows));
-    }, [rows]);
-    /* all your useState and useContext calls and your useEffect hooks */
-    // MMTODO: idk if this is needed
-    // const handleSetOrganization = (org) => {
-    //     setOrganization(null);
-    //     setTimeout(() => setOrganization(org), 50);
-    // };
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            // display: "flex",
-            // flexDirection: "column",
-            // paddingTop: "70px",
-            // paddingLeft: "30px",
-            // paddingRight: "30px",
-            ...containerStyle,
-        }, ref: parentRef, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        //   width: 'calc(100vw - 30px)',
-                        display: 'flex',
-                        // position: "fixed",
-                        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,
-                        // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
-                        //   paddingRight: '50px',
-                        //   position: 'absolute'
-                        //   // zIndex: 10
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'flex-end',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                                    fontSize: '14px',
-                                                    paddingTop: '0px',
-                                                    marginTop: '0px',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                    color: state.theme.secondaryTextColor,
-                                                    fontFamily: state.theme.fontFamily,
-                                                    userSelect: 'none',
-                                                }, children: "Environment" }), (0, jsx_runtime_1.jsx)(components_1.EnvSelectPopover, { setEnvironment: (env) => {
-                                                    dispatch({ type: 'SET_ENVIRONMENT', payload: env });
-                                                }, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', marginTop: 'auto', height: 38 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                borderRadius: '0.25rem',
-                                                borderStyle: 'none',
-                                                outlineStyle: 'none',
-                                                background: '#F9FAFB',
-                                                paddingLeft: 3,
-                                                paddingRight: 3,
-                                                paddingTop: 4,
-                                                paddingBottom: 4,
-                                            }, children: modeToggleOptions.map((label) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setToggleMode(label), style: {
-                                                    borderRadius: '0.25rem',
-                                                    borderWidth: '1px',
-                                                    fontSize: '14px',
-                                                    outlineStyle: 'none',
-                                                    transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-                                                    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-                                                    transitionDuration: '300ms',
-                                                    margin: '0px',
-                                                    paddingTop: '0.375rem',
-                                                    paddingBottom: '0.375rem',
-                                                    paddingLeft: '0.75rem',
-                                                    paddingRight: '0.75rem',
-                                                    ...(label === toggleMode
-                                                        ? {
-                                                            fontWeight: 600,
-                                                            backgroundColor: '#ffffff',
-                                                            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                                                            color: '#212121',
-                                                            borderColor: '#e7e7e7',
-                                                        }
-                                                        : {
-                                                            borderColor: 'transparent',
-                                                            fontWeight: 500,
-                                                            backgroundColor: 'transparent',
-                                                            color: '#606572',
-                                                        }),
-                                                }, children: label }, label))) }) })] }), !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => {
-                                    dispatch({ type: 'SET_ENVIRONMENT', payload: env });
-                                }, organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => {
-                                    dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId });
-                                }, theme: state.theme, parentRef: parentRef }))] }) }), isEditActive && ((0, jsx_runtime_1.jsx)(Banner_1.default, { onExit: () => {
-                        const msg = 'Are you sure you want to exit edit mode? Your changes will not be saved.';
-                        if (!confirm(msg))
-                            return;
-                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                    } })), state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)(DatabaseMismatchCard_1.default, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), (0, jsx_runtime_1.jsx)("div", { style: {
-                        // Toggle the height of the container so they both stay in the DOM
-                        // and don't refetch when switching back and forth.
-                        height: toggleMode === 'Report Builder' ? '100%' : 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.ReportBuilder, { isAdminEnabled: true, 
-                        // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
-                        onSubmitCreateReport: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
-                            });
-                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                            if (state.navigateToDashboardManager) {
-                                dispatch({
-                                    type: 'SET_ACTIVE_COMPONENT',
-                                    payload: 'Dashboards',
-                                });
-                                dispatch({
-                                    type: 'SET_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, onSubmitEditReport: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
-                            });
-                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                            if (state.navigateToDashboardManager) {
-                                dispatch({
-                                    type: 'SET_ACTIVE_COMPONENT',
-                                    payload: 'Dashboards',
-                                });
-                                dispatch({
-                                    type: 'SET_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, organizationName: state.organizations.find((org) => {
-                            return (org.id && String(org.id) === String(state.organizationId));
-                        })?.name, containerStyle: {
-                            height: '100%',
-                            width: '100%',
-                        } }) }), sqlEditor && !state.databaseTypeMismatch.show && ((0, jsx_runtime_1.jsx)("div", { style: {
-                        height: toggleMode === 'SQL Editor' ? '100%' : 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.SQLEditor, { isChartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', report: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: (report) => {
-                            const dashboard = state.dashboards.find((dash) => {
-                                return dash.name === report.dashboardName;
-                            });
-                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                            if (state.navigateToDashboardManager) {
-                                dispatch({
-                                    type: 'SET_ACTIVE_COMPONENT',
-                                    payload: 'Dashboards',
-                                });
-                                dispatch({
-                                    type: 'SET_SELECTED_DASHBOARD',
-                                    payload: dashboard,
-                                });
-                                state.navigateToDashboardManager();
-                            }
-                        }, containerStyle: {
-                            height: '100%',
-                            width: '100%',
-                            // paddingRight: 25,
-                            // paddingTop: 25,
-                        }, organizationName: state.organizations.find((org) => {
-                            return (org.id && String(org.id) === String(state.organizationId));
-                        })?.name }) }))] }) }));
-}
-exports.default = DashboardBuilder;

package/dist/cjs/public_components/SQLViewManager.d.ts

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

package/dist/cjs/public_components/SQLViewManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SQLViewManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/SQLViewManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAyBnE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAgaA"}