@quillsql/admin 1.3.1 → 1.3.2

package/dist/public_components/CreateEnvironment.js

@@ -0,0 +1,129 @@
+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 };
+        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);
+                    setAllSchemaInfo(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 })), 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/{lib → dist}/public_components/DashboardBuilder.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from "react";
+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/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/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/{lib → dist}/public_components/DashboardManager.d.ts

@@ -1,5 +1,6 @@
-import { CSSProperties } from "react";
+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/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;AA8BnE,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,2CA6iBA"}