@quillsql/admin 1.4.0 → 1.6.0

package/dist/esm/public_components/DashboardBuilder.js

@@ -3,10 +3,11 @@ 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 { ReportBuilder, SQLEditor } from '@quillsql/react';
 import { QUILL_SERVER } from '../utils/constants';
 import Banner from '../components/Banner';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
+const modeToggleOptions = ['SQL Editor', 'Report Builder'];
 export default function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
     const parentRef = useRef(null);
     const { state, dispatch } = useAdmin();
@@ -27,6 +28,7 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
     const [fields, setFields] = useState([]);
     const [errorMessage, setErrorMessage] = useState('');
     const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+    const [toggleMode, setToggleMode] = useState('SQL Editor');
     useEffect(() => {
         if (state.activeQuery) {
             setIsEditActive(true);
@@ -152,7 +154,7 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                         borderLeftWidth: 0,
                         borderRightWidth: 0,
                         borderStyle: 'solid',
-                        borderColor: state.theme.borderColor,
+                        borderColor: state.theme?.borderColor,
                         paddingBottom: 20,
                         // boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
                         //   paddingRight: '50px',
@@ -164,18 +166,57 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                             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 })] }), !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => {
+                        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, 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("div", { style: { display: 'flex', marginTop: 'auto', height: 38 }, children: _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) => (_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 && (_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 });
@@ -185,22 +226,78 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
                             return;
                         dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
                         dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                    } })), state.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), sqlEditor && !state.databaseTypeMismatch.show && (_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.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), _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: _jsx(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;
                             });
-                            state.navigateToDashboardManager();
-                        }
-                    }, containerStyle: {
-                        height: 'calc(100% - 96px)',
-                        width: '100%',
-                        // paddingRight: 25,
-                        // paddingTop: 25,
-                    }, organizationName: state.organizations.find((org) => {
-                        return (org.id && String(org.id) === String(state.organizationId));
-                    })?.name }))] }) }));
+                            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 && (_jsx("div", { style: {
+                        height: toggleMode === 'SQL Editor' ? '100%' : 0,
+                        overflow: 'hidden',
+                    }, children: _jsx(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 }) }))] }) }));
 }

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

@@ -1 +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;AAgCnE,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,2CAkkBA"}
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AA0BnE,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,2CAofA"}