@quillsql/admin 1.6.3 → 1.7.0

package/dist/esm/public_components/CreateEnvironment.js

@@ -6,25 +6,14 @@ import StepDisplay from '../components/StepDisplay';
 import ConnectSchema from '../forms/client_onboard/ConnectSchema';
 import { useAdmin } from '../AdminProvider';
 import { getDatabaseConnectionFormat, } from '../utils/databases';
-import CreateVirtualTables from '../forms/client_onboard/CreateVirtualTables';
 import { getTableColumnsBySchema } from '../api/ConnectionClient';
 import { quillFetch } from '../utils/dataFetcher';
-const header1Style = {
-    fontWeight: '600',
-    fontSize: '18px',
-    marginBottom: '6px',
-    color: '#000000',
-};
-const header2Style = {
-    fontWeight: '500',
-    fontSize: '13px',
-    color: '#595959',
-    marginBottom: '4px',
-};
+import { useLongLoading } from '../hooks/useLongLoading';
 export default function CreateEnvironment({ onOnboardComplete, containerStyle, }) {
     const parentRef = React.useRef(null);
-    const { state, dispatch, setClient, getToken, quillFetchWithToken } = useAdmin();
-    const domainName = state.domainName;
+    const { state, dispatch, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
+    const clerkOrgId = state.client?.clerkOrgId || state.clerkOrgId;
+    const defaultDatabaseType = state.client?.databaseType || 'PostgreSQL';
     const [createEnvSteps, setCreateEnvSteps] = useState({
         connectDB: {
             label: 'Connect Database',
@@ -39,7 +28,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
             open: false,
         },
     });
-    const [connection, setConnection] = useState(getDatabaseConnectionFormat('PostgreSQL'));
+    const [connection, setConnection] = useState(getDatabaseConnectionFormat(state.isSelfHosted ? defaultDatabaseType : 'PostgreSQL'));
     const [newClient, setNewClient] = useState({});
     const [databaseSchema, setDatabaseSchema] = useState(undefined);
     const [sqlTables, setSqlTables] = useState([]);
@@ -51,12 +40,21 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
     }), [newClient, connection, databaseSchema]);
     const [tenantInit, setTenantInit] = useState({});
     const [fetchSchemasLoading, setFetchSchemasLoading] = useState(false);
+    useLongLoading(onboardingCompleteIsLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Finishing onboarding',
+    });
+    useLongLoading(fetchSchemasLoading, {
+        origin: 'CreateEnvironment',
+        loadDescription: 'Fetching schemas',
+    });
     const onConnectDatabase = useCallback(async (clientId) => {
         setTenantInit({});
         setSqlTables([]);
         if (newClient.clientId) {
             await quillFetch({
                 client: {
+                    queryHeaders: state.queryHeaders,
                     queryEndpoint: state.queryEndpoint,
                     clientId: newClient.clientId,
                     withCredentials: false,
@@ -68,6 +66,10 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                 getToken,
             });
         }
+        eventTracking?.logEvent?.('start-onboarding', {
+            clientId,
+            clerkOrgId,
+        });
         setNewClient({
             clientId,
         });
@@ -81,7 +83,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
             clientId,
             databaseType: connectionInfo.type,
             schemaNames: selectedSchemaNames,
-            domainName,
+            clerkOrgId,
         });
         // FIXME: Error handling
         try {
@@ -89,7 +91,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                 type: 'SET_DATABASE_SCHEMA',
                 payload: { schema: [], id: clientId, loading: true },
             });
-            await getTableColumnsBySchema(state.queryEndpoint, clientId, getToken, selectedSchemaNames)
+            await getTableColumnsBySchema(state.isSelfHosted, state.queryEndpoint, clientId, connection.type, getToken, selectedSchemaNames, state.queryHeaders)
                 .then((schema) => {
                 dispatch({
                     type: 'SET_DATABASE_SCHEMA',
@@ -102,10 +104,31 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                 openStep('connectSchema');
             })
                 .catch((error) => {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching schema',
+                    errorMessage: error.message,
+                    errorData: {
+                        caller: 'CreateEnvironment',
+                        function: 'setEnvironmentDetails',
+                    },
+                });
                 console.error(error);
             });
         }
         catch (error) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error setting up database',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'CreateEnvironment',
+                    function: 'setEnvironmentDetails',
+                },
+            });
             console.error(error);
         }
         setFetchSchemasLoading(false);
@@ -124,6 +147,8 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
     };
     const finishOnboarding = async () => {
         setOnboardingCompleteIsLoading(true);
+        const orgName = localStorage.getItem('orgName'); // Set via portal, alternatively, pass a prop through Admin Provider
+        // TODO: Anyone could create a client with some domain through this endpoint
         const response = await quillFetchWithToken({
             client: {
                 queryEndpoint: state.queryEndpoint,
@@ -137,8 +162,9 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                     ...newClient,
                     allTenantTypes: undefined,
                 },
-                domainName: domainName,
+                clerkOrgId: clerkOrgId,
                 clientId: newClient.clientId,
+                orgName,
             },
             adminMode: true,
         });
@@ -146,7 +172,15 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
             setOnboardingCompleteIsLoading(false);
             throw new Error(response.message);
         }
+        eventTracking?.logEvent?.('finish-onboarding', {
+            clientId: newClient.clientId,
+            clerkOrgId: clerkOrgId,
+        });
         setClient(response.data.client);
+        dispatch({
+            type: 'UPDATE_CLIENTS',
+            payload: response.data.client,
+        });
         sessionStorage.removeItem('quill-adminState');
         sessionStorage.setItem('quill-client', JSON.stringify(response.data.client));
         dispatch({
@@ -160,6 +194,20 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
         // setOnboardingCompleteIsLoading(false);
     };
     const isTestMode = process.env.TEST_MODE === 'true';
+    const header1Style = {
+        fontWeight: '600',
+        fontSize: '18px',
+        marginBottom: '6px',
+        color: state.theme?.primaryTextColor,
+        fontFamily: state.theme?.fontFamily,
+    };
+    const header2Style = {
+        fontWeight: '500',
+        fontSize: '13px',
+        marginBottom: '4px',
+        fontFamily: state.theme?.fontFamily,
+        color: state.theme?.secondaryTextColor,
+    };
     return (_jsxs("div", { ref: parentRef, style: {
             ...containerStyle,
             display: 'flex',
@@ -190,7 +238,7 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                         ownerTenantFields: [tenantInit.ownerTenant.tenantField],
                         allTenantTypes: [tenantInit.ownerTenant],
                     });
-                    openStep('createVirtualTables');
+                    finishOnboarding();
                 }, returnToConnectDatabase: () => {
                     setNewClient({
                         ...newClient,
@@ -204,15 +252,5 @@ export default function CreateEnvironment({ onOnboardComplete, containerStyle, }
                         !!newClient?.schemaNames?.length) {
                         openStep('connectSchema');
                     }
-                } })), createEnvSteps.createVirtualTables.open ? (_jsx(CreateVirtualTables, { containerStyle: {
-                    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, databaseSchema: databaseSchema, environmentDetails: connection, completeOnboarding: finishOnboarding, state: state, client: newClient, tenantInit: tenantInit, isLoading: onboardingCompleteIsLoading, sqlTables: sqlTables, setSqlTables: setSqlTables })) : (_jsx(StepDisplay, { label: "Create Virtual Tables", completed: false, header1Style: header1Style, onClick: () => {
-                    if (tenantInit?.ownerTenant) {
-                        openStep('createVirtualTables');
-                    }
                 } }))] }));
 }

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,EAA4C,MAAM,OAAO,CAAC;AAuChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA6yBA"}
+{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AA6ChF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,6BAA6B,EAAE,6BAA6B,EAC5D,cAAc,GACf,EAAE;IACD,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAw3BA"}

package/dist/esm/public_components/DashboardManager.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
 import { OrgSelect, EnvSelectPopover, DashboardSelectPopover, } from '../components';
-import { useDashboard, useDashboards } from '@quillsql/react';
+import { useDashboardInternal, useDashboards, } from '@quillsql/react';
 import { deleteReport, ReportWrapper } from '../Admin';
 import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, CheckboxPrimitive, } from '../primitives';
 import { NewDashboardModal } from '../modals/NewDashboardModal';
@@ -21,8 +21,10 @@ import { Popover } from '../primitives/PopoverPrimitive';
 import CodePreview from '../modals/CodePreview';
 import SavedQueriesModal from '../modals/SavedQueriesModal';
 import { InternalDashboard } from '../components/InternalDashboard/InternalDashboard';
+import { useLongLoading } from '../hooks/useLongLoading';
+import CreateEnvironmentModal from '../modals/CreateEnvironmentModal';
 export default function DashboardManager({ navigateToVirtualTableManager: navigateToVirtualTableManager, containerStyle, }) {
-    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, } = useAdmin();
+    const { state, dispatch, clientLoading, setClient, getToken, quillFetchWithToken, eventTracking, } = useAdmin();
     const parentRef = useRef(null);
     const envSelectPopoverRef = useRef(null);
     const dashboardSelectPopoverRef = useRef(null);
@@ -33,8 +35,13 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
     const [editEnvironmentModalIsOpen, setEditEnvironmentModalIsOpen] = useState(false);
     //FIXME: we don't want to lift up this state
     const [userFilters, setUserFilters] = useState([]);
-    const { data: dashboardConfig, reload: reloadDashboard } = useDashboard(state.selectedDashboard, userFilters);
+    const [showCreateEnvironmentModal, setShowCreateEnvironmentModal] = useState(false);
+    const { data: dashboardConfig, reload: reloadDashboard } = useDashboardInternal(state.selectedDashboard, userFilters);
     const { dashboards, isLoading: dashboardsLoading } = useDashboards();
+    useLongLoading(dashboardsLoading, {
+        origin: 'DashboardManager',
+        loadDescription: 'Loading dashboards',
+    });
     const { setSelectedDashboard } = useDashboardManager();
     // const [editMode, setEditMode] = useState(true);
     const [autoPromoteVirtualTables, setAutoPromoteVirtualTables] = useState(true);
@@ -55,6 +62,15 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
             type: 'SET_ACTIVE_COMPONENT',
             payload: 'Report',
         });
+        eventTracking?.addBreadcrumb?.({
+            message: 'Clicked report in DashboardManager',
+            data: {
+                report: elem.id,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
     }, [dispatch]);
     const hoverActions = (data) => {
         return (_jsx("div", { style: {
@@ -78,7 +94,7 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                     gap: 4,
                 }, onClick: async (event) => {
                     event.stopPropagation();
-                    if (await deleteReport(data.id, state, getToken)) {
+                    if (await deleteReport(data.id, state, getToken, eventTracking)) {
                         reloadDashboard(undefined, false, {
                             report: { id: data.id },
                             action: 'delete',
@@ -152,9 +168,23 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
         }
         catch (error) {
             console.error('Promotion failed:', error);
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error promoting dashboard',
+                errorMessage: error.message,
+                errorStack: error.stack,
+                errorData: {
+                    caller: 'DashboardManager',
+                    function: 'handlePromote',
+                },
+            });
             alert('Could not promote this dashboard.');
         }
     };
+    if (showCreateEnvironmentModal) {
+        return (_jsx(CreateEnvironmentModal, { showCreateEnvironmentModal: showCreateEnvironmentModal, setShowCreateEnvironmentModal: setShowCreateEnvironmentModal }));
+    }
     return (_jsxs("div", { style: containerStyle, children: [(state.activeComponent === 'Report Builder' ||
                 state.activeComponent === 'SQL Editor') && (_jsx(ChartQueryBuilder, { activeComponent: state.activeComponent, destinationDashboard: state.selectedDashboard ??
                     dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.[0]
@@ -228,6 +258,8 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                     setClient(client, true);
                                                 }, onSelectedEditEnvironment: () => {
                                                     setEditEnvironmentModalIsOpen(true);
+                                                }, onCreateNewEnvironment: () => {
+                                                    setShowCreateEnvironmentModal(true);
                                                 }, theme: state.theme, parentRef: envSelectPopoverRef, isLoading: clientLoading }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, ref: dashboardSelectPopoverRef, children: _jsx(DashboardSelectPopover, { dashboards: dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)?.length
                                                     ? dashboards
                                                         .map((elem) => {
@@ -261,6 +293,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                     type: 'SET_ACTIVE_COMPONENT',
                                                     payload: 'CodePreview',
                                                 });
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened embed preview in DashboardManager',
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                             }, label: "Embed Preview" }), _jsx(Popover, { content: _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
@@ -274,6 +312,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'Report Builder',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened report builder in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "Report Builder \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -282,6 +326,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'SQL Editor',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened SQL editor in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "SQL Editor \u2197" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
                                                             if (!state.selectedDashboard) {
                                                                 return;
@@ -290,6 +340,12 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                                 type: 'SET_ACTIVE_COMPONENT',
                                                                 payload: 'SavedQueries',
                                                             });
+                                                            eventTracking?.addBreadcrumb?.({
+                                                                message: 'Opened saved queries in DashboardManager',
+                                                                category: 'navigation',
+                                                                level: 'info',
+                                                                timestamp: Date.now(),
+                                                            });
                                                         }, label: "Saved Queries \u2197" })] }), trigger: _jsx(ButtonPrimitive
                                             // onClick={() => {
                                             //   if (!state.selectedDashboard) {
@@ -336,8 +392,10 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                                         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: 16,
+                                                                fontSize: state.theme?.fontSize,
                                                                 fontWeight: 500,
+                                                                fontFamily: state.theme?.fontFamily,
+                                                                fontSizeAdjust: 0.5,
                                                                 color: '#565656',
                                                                 paddingTop: 8,
                                                                 paddingBottom: 8,
@@ -351,6 +409,15 @@ export default function DashboardManager({ navigateToVirtualTableManager: naviga
                                         dashboardsLoading ||
                                         dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD)
                                             .length ? (_jsx("div", { style: { width: '100%', position: 'relative' }, children: _jsx(InternalDashboard, { name: state.selectedDashboard ?? '', containerStyle: { padding: 25, width: '100%' }, onClickReport: handleClickReport, hoverActions: hoverActions, onUserFiltersUpdated: setUserFilters, parentLoading: clientLoading || dashboardsLoading, onManageDashboard: () => {
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened manage dashboard in DashboardManager',
+                                                    data: {
+                                                        dashboard: state.selectedDashboard,
+                                                    },
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                                 setEditFilterModalIsOpen(true);
                                             } }) })) : null] }), !clientLoading && !dashboardsLoading && (_jsxs(_Fragment, { children: [_jsx(EditEnvironmentModal, { isOpen: editEnvironmentModalIsOpen, setIsOpen: setEditEnvironmentModalIsOpen, onSave: async () => {
                                             await reloadDashboard(state.selectedDashboard ?? undefined);

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

@@ -6,7 +6,8 @@ interface EnvSelectPopoverProps {
     onSelectedEditEnvironment?: (environment: string) => void;
     parentRef: React.RefObject<HTMLDivElement>;
     isLoading?: boolean;
+    onCreateNewEnvironment?: () => void;
 }
-export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, }: EnvSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }: EnvSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=EnvSelectPopover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/public_components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,yBAAyB,EACzB,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,2CA4NvB"}
+{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/public_components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,yBAAyB,EACzB,SAAS,EACT,SAAS,EACT,sBAAsB,GACvB,EAAE,qBAAqB,2CAsQvB"}

package/dist/esm/public_components/EnvSelectPopover.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
-import { ListboxRow, ListboxTextInput, Popover } from '../components/OrgSelect';
+import { ListboxRow, Popover } from '../components/OrgSelect';
 import MiniButtonPrimitive from '../primitives/MiniButtonPrimitive';
 import { LoadingSpinner } from '../components/UiComponents';
-export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, }) {
-    const { state, dispatch } = useAdmin();
+import { ListboxTextInput } from '../components/QuillMultiSelectWithCombo';
+export default function EnvSelectPopover({ clients, setClient, client, theme, onSelectedEditEnvironment, parentRef, isLoading, onCreateNewEnvironment, }) {
+    const { state, dispatch, eventTracking } = useAdmin();
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const filteredClients = useMemo(() => {
@@ -19,6 +20,15 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
             dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
             dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
         }
+        eventTracking?.addBreadcrumb?.({
+            message: 'Set client in EnvSelectPopover',
+            data: {
+                clientId: selectedClient._id || selectedClient.id,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         setClient(selectedClient);
         setIsOpen(false);
     };
@@ -78,24 +88,50 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
                     marginBottom: '4px',
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
                 }, children: "Environment" }), _jsx(Popover, { parentRef: parentRef, label: client?.name ?? 'Select environment', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredClients.map((item) => (_jsx(ListboxRow, { setSelected: client._id !== item._id
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: (e) => {
+                                setSearchQuery(e);
+                            }, width: 180 }), _jsx("div", { style: {
+                                height: 9,
+                                width: 230,
+                                borderTop: `1px solid ${state.theme?.borderColor ?? '#e7e7e7'}`,
+                            } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredClients.map((item) => (_jsx(ListboxRow, { setSelected: client._id !== item._id
                                         ? () => handleItemClick(item)
                                         : undefined, item: item.name, isSelected: client._id === item._id, hoverActions: onSelectedEditEnvironment
                                         ? (item) => (_jsx(MiniButtonPrimitive, { label: "Manage", onClick: () => {
                                                 onSelectedEditEnvironment(item);
+                                                eventTracking?.addBreadcrumb?.({
+                                                    message: 'Opened manage environment in EnvSelectPopover',
+                                                    data: {
+                                                        environment: item,
+                                                    },
+                                                    category: 'navigation',
+                                                    level: 'info',
+                                                    timestamp: Date.now(),
+                                                });
                                                 setIsOpen(false);
                                             }, style: {
                                                 marginRight: -8,
                                                 marginTop: 'auto',
                                                 marginBottom: 'auto',
+                                                fontFamily: theme.fontFamily,
+                                                color: theme.secondaryTextColor,
+                                                backgroundColor: theme.backgroundColor,
                                             } }))
-                                        : undefined }, item._id))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("a", { href: '/onboard', style: {
+                                        : undefined }, item._id))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("a", { onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened create new environment in EnvSelectPopover',
+                                                category: 'navigation',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
+                                            onCreateNewEnvironment?.();
+                                        }, style: {
                                             height: 42,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -109,15 +145,19 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, on
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [_jsx("style", { children: `
                     .quill-list-select > a {
-                      background-color: white;
+                      background-color: ${state.theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-list-selected > a {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${state.theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }
                     .quill-list-select:hover > a {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${state.theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }` }), _jsxs("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualTableManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/VirtualTableManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AA0C5E,eAAO,MAAM,mBAAmB,aAAc,GAAG,EAAE,aAalD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,cAAc,EACd,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CA08BA"}
+{"version":3,"file":"VirtualTableManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/VirtualTableManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AA2C5E,eAAO,MAAM,mBAAmB,GAAI,UAAU,GAAG,EAAE,aAalD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,cAAc,EACd,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAukCA"}