@quillsql/admin 1.3.4 → 1.3.6

package/dist/esm/primitives/SelectPrimitive.js

@@ -0,0 +1,41 @@
+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/primitives/TextInputPrimitive.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { QuillTheme } from '../Admin';
+interface TextInputPrimitiveProps {
+    onChange: (e: any) => void;
+    value: string;
+    placeholder?: string;
+    theme?: QuillTheme;
+    disabled?: boolean;
+}
+declare const TextInputPrimitive: React.FC<TextInputPrimitiveProps>;
+export default TextInputPrimitive;
+//# sourceMappingURL=TextInputPrimitive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/primitives/TextInputPrimitive.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { theme as defaultTheme } from '../Admin';
+const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme, disabled = false, }) => {
+    return (_jsx("input", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            fontWeight: 'medium',
+            height: 38,
+            minWidth: 250,
+            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+            width: '100%',
+            backgroundColor: theme?.backgroundColor || 'white',
+            color: theme?.primaryTextColor,
+            borderWidth: '1px',
+            borderColor: theme?.borderColor || '#E7E7E7',
+            borderStyle: 'solid',
+            borderRadius: '6px',
+            fontSize: 14,
+        }, disabled: disabled, onChange: onChange, value: value, placeholder: placeholder }));
+};
+export default TextInputPrimitive;

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

@@ -0,0 +1,6 @@
+declare const TogglePrimitive: ({ value, onClick }: {
+    value: any;
+    onClick: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TogglePrimitive;
+//# sourceMappingURL=TogglePrimitive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe;WAAiC,GAAG;aAAW,GAAG;6CAiEtE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/TogglePrimitive.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TogglePrimitive = ({ value, onClick }) => {
+    const toggleStyle = {
+        container: {
+            display: 'inline-block',
+            position: 'relative',
+            width: '70px',
+            height: '38px',
+            borderRadius: '24px',
+            backgroundColor: value ? '#212121' : '#ccc',
+            cursor: 'pointer',
+            transition: 'background-color 0.4s',
+        },
+        circle: {
+            position: 'absolute',
+            top: '3px',
+            left: value ? '35px' : '3px',
+            width: '32px',
+            height: '32px',
+            borderRadius: '50%',
+            backgroundColor: '#FFF',
+            transition: 'left 0.4s',
+        },
+        icon: {
+            position: 'absolute',
+            top: '3px',
+            left: '3px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '20px',
+            height: '20px',
+            color: '#FFF',
+        },
+    };
+    return (_jsxs("div", { style: toggleStyle.container, onClick: onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle between dark and light mode", children: [_jsx("div", { style: toggleStyle.circle }), value ? (_jsx("div", { style: {
+                    ...toggleStyle.icon,
+                    left: '35px',
+                    color: '#FFC107',
+                } })) : (_jsx("div", { style: {
+                    ...toggleStyle.icon,
+                    color: '#607D8B',
+                } }))] }));
+};
+export default TogglePrimitive;

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

@@ -0,0 +1,7 @@
+export { default as TextInputPrimitive } from './TextInputPrimitive';
+export { default as ButtonPrimitive } from './ButtonPrimitive';
+export { default as SecondaryButtonPrimitive } from './SecondaryButtonPrimitive';
+export { default as ModalPrimitive } from './ModalPrimitive';
+export { default as SelectPrimitive } from './SelectPrimitive';
+export { default as HeaderPrimitive } from './HeaderPrimitive';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA0LA"}

package/dist/esm/public_components/CreateEnvironment.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, 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 { formConnectionString, getDatabaseConnectionFormat, } from '../utils/databases';
+import CreateSQLViews from '../forms/client_onboard/CreateSqlViews';
+import { getTableSchema } from '../api/ConnectionClient';
+const header1Style = {
+    fontWeight: '600',
+    fontSize: '18px',
+    marginBottom: '6px',
+    color: '#000000',
+};
+const header2Style = {
+    fontWeight: '500',
+    fontSize: '14px',
+    color: '#595959',
+    marginBottom: '6px',
+};
+export default function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
+    const { state, dispatch } = useAdmin();
+    const domainName = state.domainName;
+    const [createEnvSteps, setCreateEnvSteps] = useState({
+        connectDB: {
+            label: 'Connect Database',
+            completed: false,
+            open: true,
+        },
+        connectSchema: {
+            label: 'Connect Schema',
+            completed: false,
+            open: false,
+        },
+        createSQLViews: {
+            label: 'Create SQL Views',
+            completed: false,
+            open: false,
+        },
+    });
+    const [environmentDetails, setEnvironmentDetails] = useState(getDatabaseConnectionFormat('PostgreSQL'));
+    const [allSchemaInfo, setAllSchemaInfo] = useState(undefined);
+    const [initialError, setInitialError] = useState();
+    const [columnsByTable, setColumnsByTable] = useState([]);
+    const openStep = (step) => {
+        const updatedSteps = { ...createEnvSteps };
+        if (step === 'connectSchema' &&
+            updatedSteps.connectDB.completed === false) {
+            return;
+        }
+        Object.keys(updatedSteps).forEach((key) => {
+            if (key === step) {
+                updatedSteps[key].open = true;
+            }
+            else {
+                updatedSteps[key].open = false;
+            }
+        });
+        setCreateEnvSteps(updatedSteps);
+    };
+    useEffect(() => {
+        if (navigateToDashboardManager) {
+            dispatch({
+                type: 'SET_NAVIGATE_TO_DASHBOARD_MANAGER',
+                payload: navigateToDashboardManager,
+            });
+        }
+        else {
+            console.warn('navigateToDashboardManager is undefined');
+        }
+    }, [navigateToDashboardManager]);
+    return (_jsxs("div", { style: {
+            ...containerStyle,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 12,
+            paddingTop: 24,
+        }, children: [createEnvSteps.connectDB.open ? (_jsx(ConnectDatabase, { containerStyle: {
+                    padding: '24px',
+                    // width: '50%',
+                    // minWidth: 800,
+                    borderRadius: 6,
+                    border: '1px solid #e7e7e7',
+                    boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+                }, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: (connectionInfo, initialSchemaRequest, initialSchemaRequestError) => {
+                    setEnvironmentDetails(connectionInfo);
+                    if (initialSchemaRequestError) {
+                        setInitialError(initialSchemaRequestError);
+                    }
+                    if (initialSchemaRequest) {
+                        setAllSchemaInfo(initialSchemaRequest);
+                    }
+                    const updatedSteps = { ...createEnvSteps };
+                    updatedSteps.connectDB.completed = true;
+                    setCreateEnvSteps(updatedSteps);
+                    openStep('connectSchema');
+                } })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
+                    openStep('connectDB');
+                    setInitialError(undefined);
+                } })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { containerStyle: {
+                    padding: '24px',
+                    // width: '50%',
+                    borderRadius: 6,
+                    maxWidth: 900,
+                    border: '1px solid #e7e7e7',
+                    boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+                }, header1Style: header1Style, header2Style: header2Style, propogateSchemaDetails: async (schemaDetails) => {
+                    const updatedSteps = { ...createEnvSteps };
+                    updatedSteps.connectSchema.completed = true;
+                    const tableSchemas = await getTableSchema(formConnectionString(environmentDetails), schemaDetails?.tables);
+                    setColumnsByTable(tableSchemas);
+                    setCreateEnvSteps(updatedSteps);
+                    setAllSchemaInfo(schemaDetails);
+                    openStep('createSQLViews');
+                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
+                    openStep('connectSchema');
+                    setInitialError(undefined);
+                } })), createEnvSteps.createSQLViews.open ? (_jsx(CreateSQLViews, { containerStyle: {
+                    // padding: '20px',
+                    // width: '90%',
+                    borderRadius: 6,
+                    border: '1px solid #e7e7e7',
+                    boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.07)',
+                    height: 'calc(100vh - 59px)',
+                    width: 'calc(100vw - 200px)',
+                }, header1Style: header1Style, header2Style: header2Style, columnsByTable: columnsByTable, environmentDetails: environmentDetails, allSchemaInfo: allSchemaInfo, completeOnboarding: (client) => {
+                    dispatch({ type: 'SET_CLIENT', payload: client });
+                    dispatch({ type: 'UPDATE_CLIENTS', payload: client });
+                    if (navigateToDashboardManager) {
+                        navigateToDashboardManager();
+                    }
+                }, domainName: domainName })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
+}

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAQ5E,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,2CAmSA"}

package/dist/esm/public_components/DashboardBuilder.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+import { convertPostgresColumn } from '../Admin';
+import { EnvSelectPopover, OrgSelect } from '../components';
+import { SQLEditor } from '@quillsql/react';
+import { QUILL_SERVER } from '../utils/constants';
+import Banner from '../components/Banner';
+export default function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
+    const parentRef = useRef(null);
+    const { state, dispatch } = useAdmin();
+    const [customerId, setCustomerId] = useState('');
+    const [isEditActive, setIsEditActive] = useState(false);
+    const [checked, setChecked] = useState(false);
+    const [selected, setSelected] = useState('');
+    const [userTyping, setUserTyping] = useState(false);
+    const inputRef = useRef(null);
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const [sqlPrompt, setSqlPrompt] = useState('');
+    const [dashboardNames, setDashboardNames] = useState([]);
+    const [selectedDashboardName, setSelectedDashboardName] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState(state.activeQuery);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [fields, setFields] = useState([]);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+    useEffect(() => {
+        if (state.activeQuery) {
+            setIsEditActive(true);
+        }
+        else {
+            setIsEditActive(false);
+        }
+    }, [state.activeQuery]);
+    useEffect(() => {
+        if (navigateToDashboardManager) {
+            dispatch({
+                type: 'SET_NAVIGATE_TO_DASHBOARD_MANAGER',
+                payload: navigateToDashboardManager,
+            });
+        }
+        else {
+            console.warn('navigateToDashboardManager is undefined');
+        }
+    }, [navigateToDashboardManager]);
+    useEffect(() => {
+        setQuery(state.activeQuery);
+    }, [state.activeQuery]);
+    useEffect(() => {
+        let isSubscribed = true;
+        async function getCustomers() {
+            // If you need to retrieve the JSON data from the response:
+            const response2 = await fetch(`${QUILL_SERVER}/dashnames/${state.client._id}/`, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer `,
+                    environment: state.environment,
+                },
+            });
+            const response2Data = await response2.json();
+            const dashNames = response2Data.dashboardNames.filter((elem) => elem !== null);
+            setDashboardNames(dashNames);
+            setSelectedDashboardName(dashNames[0]);
+        }
+        if (isSubscribed) {
+            getCustomers();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [state.environment]);
+    // const navigate = useNavigate();
+    const handleRunQuery = async () => {
+        const { _id } = state.client;
+        try {
+            const response = await fetch(`${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) => convertPostgresColumn(elem)));
+            setFields(responseData.fields);
+        }
+        catch (e) {
+            console.log('ERROR: ', e);
+            return;
+        }
+    };
+    const handleAddToDashboard = () => {
+        setIsOpen(true);
+    };
+    const newRows = 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 (_jsx("div", { style: {
+            // display: "flex",
+            // flexDirection: "column",
+            // paddingTop: "70px",
+            // paddingLeft: "30px",
+            // paddingRight: "30px",
+            ...containerStyle,
+        }, ref: parentRef, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_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: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_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" }), _jsx(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 })] }), _jsx(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 && (_jsx(Banner, { 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 });
+                    } })), sqlEditor && (_jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
+                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        if (state.navigateToDashboardManager) {
+                            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+                            state.navigateToDashboardManager();
+                        }
+                    }, containerStyle: {
+                        height: 'calc(100% - 138px)',
+                        width: '100%',
+                        paddingRight: 25,
+                        paddingTop: 25,
+                    } }))] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AA+BnE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA+iBA"}