@quillsql/admin 1.3.3 → 1.3.6

package/dist/esm/public_components/DashboardManager.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+import { OrgSelect, EnvSelectPopover, DashboardSelectPopover, } from '../components';
+import { EditDashboardsModal, PromoteDashModal, ReorderDashboardModal, } from '../modals';
+import { Dashboard, useDashboard } from '@quillsql/react';
+import { EditFiltersModal, AddFilterModal, AddDashboardModal, ReportWrapper, } from '../Admin';
+import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, SelectPrimitive, TextInputPrimitive, } from '../primitives';
+import { NewDashboardModal } from '../modals/NewDashboardModal';
+import { QUILL_SERVER } from '../utils/constants';
+import EmptyDashboardComponent from '../components/EmptyDashboardComponent';
+export default function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
+    const { state, dispatch } = useAdmin();
+    const parentRef = useRef(null);
+    const [dashboards, setDashboards] = useState([]);
+    const [reloadFlag, setReloadFlag] = useState(false);
+    const [selectedEditDashboard, setSelectedEditDashboard] = useState('');
+    const [selectedReorderDashboard, setSelectedReorderDashboard] = useState('');
+    const [addFilterModalIsOpen, setAddFilterModalIsOpen] = useState(false);
+    const [isAddDashboardModalOpen, setIsAddDashboardModalOpen] = useState(false);
+    const [newDashboardModalIsOpen, setNewDashboardModalIsOpen] = useState(false);
+    const [editFilterModalIsOpen, setEditFilterModalIsOpen] = useState(false);
+    const { reload: reloadDashboard } = useDashboard(state.selectedDashboard);
+    const [isReorderDashboardModalOpen, setIsReorderDashboardModalOpen] = useState(false);
+    const [dashboardData, setDashboardData] = useState(null);
+    // const [activeComponent, setActiveComponent] = useContext(
+    //     ActiveComponentContext
+    // );
+    const [isEditDashboardModalOpen, setIsEditDashboardModalOpen] = useState(false);
+    const [isPromoteDashModalOpen, setIsPromoteDashModalOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    // A useless flag that just turns itself off.
+    useEffect(() => {
+        if (reloadFlag) {
+            setReloadFlag(false);
+        }
+    }, [reloadFlag]);
+    async function getDashNames() {
+        const url = `${QUILL_SERVER}/dashnames/${state.client._id}/`;
+        const response2 = await fetch(url, {
+            method: 'GET',
+            headers: {
+                Authorization: 'Bearer ', // Ensure you append your token after 'Bearer ' if needed
+                environment: state.environment,
+            },
+        });
+        // If you need to retrieve the JSON data from the response:
+        const data = await response2.json();
+        if (!data.dashboardNames || !data.dashboardNames.length) {
+            return;
+        }
+        const dashNames = data.dashboardNames.map((elem) => {
+            if (!elem) {
+                return { name: 'null' };
+            }
+            return { name: elem };
+        });
+        dispatch({ type: 'SET_DASHBOARDS', payload: dashNames });
+        dispatch({
+            type: 'SET_SELECTED_DASHBOARD',
+            payload: dashNames.some((dash) => dash.name === state.selectedDashboard)
+                ? state.selectedDashboard
+                : dashNames[0].name,
+        });
+    }
+    useEffect(() => {
+        if (navigateToDashboardBuilder) {
+            dispatch({
+                type: 'SET_NAVIGATE_TO_DASHBOARD_BUILDER',
+                payload: navigateToDashboardBuilder,
+            });
+        }
+        else {
+            console.warn('navigateToDashboardBuilder is not defined');
+        }
+    }, []);
+    useEffect(() => {
+        let isSubscribed = true;
+        if (isSubscribed) {
+            getDashNames();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [state.environment, state.client]);
+    // MMTODO: Idk if this is needed
+    // const handleSetOrganization = (org) => {
+    //     setOrganization(null);
+    //     setTimeout(() => setOrganization(org), 50);
+    // };
+    // MMTODO: Not sure if this actually does anything
+    useEffect(() => {
+        async function getDashboardData(dashboard, setData) {
+            let responseData;
+            if (state.queryEndpoint) {
+                const response = await fetch(state.queryEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        ...state.queryHeaders,
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        metadata: state.organizationId
+                            ? {
+                                orgId: state.organizationId,
+                                task: 'config',
+                                name: dashboard,
+                                clientId: state.client._id,
+                            }
+                            : { task: 'config', name: dashboard, clientId: state.client._id },
+                    }),
+                    credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+                });
+                responseData = (await response.json()).data;
+            }
+            else {
+                const url = new URL(`${QUILL_SERVER}/dashconfig`);
+                // Setting the search parameters for the URL
+                url.search = new URLSearchParams({
+                    orgId: state.organizationId ? state.organizationId : '',
+                    publicKey: state.client._id,
+                    name: dashboard,
+                }).toString();
+                const response2 = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        Authorization: 'Bearer ', // Ensure you append your token after 'Bearer ' if needed
+                        environment: state.environment,
+                    },
+                });
+                // If you need to retrieve the JSON data from the response:
+                responseData = await response2.json();
+            }
+            setData(responseData);
+        }
+        if (state.selectedEditDashboard) {
+            getDashboardData(state.selectedEditDashboard, (data) => {
+                dispatch({ type: 'SET_EDIT_DASHBOARD_DATA', payload: data });
+            });
+            return;
+        }
+        if (state.selectedDashboard && state.client) {
+            getDashboardData(state.selectedDashboard, setDashboardData);
+        }
+    }, [
+        state.selectedDashboard,
+        state.selectedEditDashboard,
+        state.organizationId,
+        state.client,
+    ]);
+    if (state.activeComponent == 'Report') {
+        return (_jsx(ReportWrapper, { ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, ModalComponent: ModalPrimitive, SelectComponent: SelectPrimitive, OrganizationSelectComponent: OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials }));
+    }
+    return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                paddingTop: '0px',
+                position: 'relative',
+            }, ref: parentRef, children: [_jsx("div", { style: {
+                        //   width: 'calc(100vw - 30px)',
+                        display: 'flex',
+                        position: 'sticky',
+                        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: {
+                            width: '100%',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                        }, children: [_jsxs("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && (_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,
+                                                    userSelect: 'none',
+                                                }, children: "Dashboard" }), _jsx(DashboardSelectPopover, { dashboards: state.dashboards.length
+                                                    ? state.dashboards.map((elem) => {
+                                                        return { value: elem.name, label: elem.name };
+                                                    })
+                                                    : [], setDashboard: (dashboard) => {
+                                                    dispatch({
+                                                        type: 'SET_SELECTED_DASHBOARD',
+                                                        payload: dashboard,
+                                                    });
+                                                }, dashboard: state.selectedDashboard ? state.selectedDashboard : '', theme: state.theme, onClickNewDashboard: () => {
+                                                    setNewDashboardModalIsOpen(true);
+                                                }, setSelectedEditDashboard: (d) => {
+                                                    dispatch({
+                                                        type: 'SET_SELECTED_EDIT_DASHBOARD',
+                                                        payload: d,
+                                                    });
+                                                    setEditFilterModalIsOpen(true);
+                                                } })] })), _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: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && (_jsx(OrgSelect, { parentRef: parentRef, environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, theme: state.theme, organizationId: state.organizationId, setOrganizationId: (id) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: id }) }))] }) }), _jsxs("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && (_jsx("div", { style: {
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                            }, children: _jsxs("div", { style: {
+                                    height: 80,
+                                    width: 260,
+                                    borderRadius: 6,
+                                    marginTop: 100,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    gap: 20,
+                                }, className: "hover-dash-rect", onClick: () => {
+                                    setNewDashboardModalIsOpen(true);
+                                }, children: [_jsx("style", { children: ` .hover-dash-rect { background: white; border: 1px dashed #e7e7e7; } .hover-dash-rect:hover { background: white; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7; } ` }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            width: 260,
+                                        }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
+                                                    fontSize: 14,
+                                                    fontWeight: 500,
+                                                    color: '#565656',
+                                                    // border: '1px solid #e7e7e7',
+                                                    paddingTop: 8,
+                                                    paddingBottom: 8,
+                                                    paddingRight: 12,
+                                                    paddingLeft: 12,
+                                                    borderRadius: 4,
+                                                    cursor: 'pointer',
+                                                }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag ? null : (_jsx(Dashboard, { name: state.selectedDashboard, containerStyle: {
+                                paddingRight: 25,
+                                paddingLeft: 25,
+                                paddingTop: 30,
+                            }, onClickDashboardItem: (elem) => {
+                                dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
+                                dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Report' });
+                            }, EmptyDashboardComponent: EmptyDashboardComponent }))] }), _jsx(EditDashboardsModal, { clientId: state.client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, openEditFilterModal: (dashboardName) => {
+                        dispatch({
+                            type: 'SET_SELECTED_EDIT_DASHBOARD',
+                            payload: dashboardName,
+                        });
+                        setEditFilterModalIsOpen(true);
+                        // setIsEditDashboardModalOpen(false);
+                    }, openAddDashboardModal: () => {
+                        setIsAddDashboardModalOpen(true);
+                        // setIsEditDashboardModalOpen(false);
+                    }, openEditOrderModal: (dashboardName) => {
+                        setSelectedReorderDashboard(dashboardName);
+                        setIsReorderDashboardModalOpen(true);
+                    }, HeaderComponent: HeaderPrimitive, setDashboardData: setDashboardData, dashboards: state.dashboards, getDashNames: getDashNames }), _jsx(PromoteDashModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteDashModalOpen, setIsOpen: setIsPromoteDashModalOpen, ModalComponent: ModalPrimitive, dashboards: state.dashboards, selectedDashboard: state.selectedDashboard, theme: state.theme, ButtonComponent: ButtonPrimitive }), _jsx(EditFiltersModal, { selectedDashboard: state.selectedDashboard, dashboardData: state.editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
+                        setAddFilterModalIsOpen(true);
+                        // setEditFilterModalIsOpen(false);
+                    }, openEditOrderModal: (dashboardName) => {
+                        setSelectedReorderDashboard(dashboardName);
+                        setIsReorderDashboardModalOpen(true);
+                    }, onSave: async () => {
+                        await getDashNames();
+                        setReloadFlag(true);
+                        reloadDashboard();
+                    }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
+                        setSelectedReorderDashboard(dashboardName);
+                        setIsReorderDashboardModalOpen(true);
+                    }, onSave: (name) => {
+                        dispatch({ type: 'SET_SELECTED_DASHBOARD', payload: name });
+                        dispatch({
+                            type: 'SET_DASHBOARDS',
+                            payload: [...state.dashboards, { name }],
+                        });
+                        setReloadFlag(true);
+                        reloadDashboard();
+                    }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
+                        setReloadFlag(true);
+                        reloadDashboard();
+                    }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard }), _jsx(AddFilterModal, { selectedDashboard: state.selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, openAddDashboardModal: () => {
+                        setIsAddDashboardModalOpen(true);
+                        // setAddFilterModalIsOpen(false);
+                    } }), _jsx(AddDashboardModal, { selectedDashboard: state.selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, dashNames: state.dashboards, 
+                    // @ts-ignore
+                    openAddFilterModal: () => {
+                        setAddFilterModalIsOpen(true);
+                        // setIsAddDashboardModalOpen(false);
+                    }, organizationId: state.organizationId, getDashNames: getDashNames })] }) }));
+}

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

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

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

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