feat(connections): add onFailToLoadConnections callback for error handling

Author: mabaasit

configs/testing-library-compass/src/index.tsx

@@ -330,6 +330,12 @@ function createWrapper(
                     <ConnectFnProvider connect={wrapperState.connect}>
                       <CompassConnections
                         appName={options.appName ?? 'TEST'}
+                        onFailToLoadConnections={
+                          options.onFailToLoadConnections ??
+                          (() => {
+                            // noop
+                          })
+                        }
                         onExtraConnectionDataRequest={
                           options.onExtraConnectionDataRequest ??
                           (() => {

packages/compass-connections/src/index.tsx

@@ -63,6 +63,10 @@ const ConnectionsComponent: React.FunctionComponent<{
    * connections on plugin activate
    */
   preloadStorageConnectionInfos?: ConnectionInfo[];
+  /**
+   * When connections fail to load, this callback will be called
+   */
+  onFailToLoadConnections: (error: Error) => void;
 }> = ({ children }) => {
   return (
     <ConnectionActionsProvider>
@@ -90,6 +94,7 @@ const CompassConnectionsPlugin = registerHadronPlugin(
         appName: initialProps.appName,
         connectFn: initialProps.connectFn,
         globalAppRegistry,
+        onFailToLoadConnections: initialProps.onFailToLoadConnections,
       });
 
       setTimeout(() => {

packages/compass-connections/src/stores/connections-store-redux.ts

@@ -216,6 +216,7 @@ type ThunkExtraArg = {
   ) => Promise<[ExtraConnectionDataForTelemetry, string | null]>;
   connectFn?: typeof devtoolsConnect;
   globalAppRegistry: Pick<AppRegistry, 'on' | 'emit' | 'removeListener'>;
+  onFailToLoadConnections: (error: Error) => void;
 };
 
 export type ConnectionsThunkAction<
@@ -1266,7 +1267,11 @@ export const loadConnections = (): ConnectionsThunkAction<
   | ConnectionsLoadSuccessAction
   | ConnectionsLoadErrorAction
 > => {
-  return async (dispatch, getState, { connectionStorage }) => {
+  return async (
+    dispatch,
+    getState,
+    { connectionStorage, onFailToLoadConnections }
+  ) => {
     if (getState().connections.status !== 'initial') {
       return;
     }
@@ -1276,6 +1281,7 @@ export const loadConnections = (): ConnectionsThunkAction<
       dispatch({ type: ActionTypes.ConnectionsLoadSuccess, connections });
     } catch (err) {
       dispatch({ type: ActionTypes.ConnectionsLoadError, error: err as any });
+      onFailToLoadConnections(err as Error);
     }
   };
 };

packages/compass-web/sandbox/index.tsx

@@ -1,6 +1,11 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { resetGlobalCSS, css, Body } from '@mongodb-js/compass-components';
+import {
+  resetGlobalCSS,
+  css,
+  Body,
+  openToast,
+} from '@mongodb-js/compass-components';
 import type { AllPreferences } from 'compass-preferences-model';
 import { CompassWeb } from '../src/index';
 import { SandboxConnectionStorageProvider } from '../src/connection-storage';
@@ -86,6 +91,14 @@ const App = () => {
     getMetaEl('csrf-time').setAttribute('content', csrfTime ?? '');
   }, [csrfToken, csrfTime]);
 
+  const onFailToLoadConnections = useCallback((error: Error) => {
+    openToast('failed-to-load-connections', {
+      title: 'Failed to load connections',
+      description: error.message,
+      variant: 'warning',
+    });
+  }, []);
+
   if (status === 'checking') {
     return null;
   }
@@ -132,6 +145,7 @@ const App = () => {
             onTrack={sandboxTelemetry.track}
             onDebug={sandboxLogger.debug}
             onLog={sandboxLogger.log}
+            onFailToLoadConnections={onFailToLoadConnections}
           ></CompassWeb>
         </Body>
       </SandboxPreferencesUpdateProvider>

packages/compass-web/src/entrypoint.tsx

@@ -150,6 +150,11 @@ type CompassWebProps = {
   onOpenConnectViaModal?: (
     atlasMetadata: ConnectionInfo['atlasMetadata']
   ) => void;
+
+  /**
+   * Callback prop called when connections fail to load
+   */
+  onFailToLoadConnections: (err: Error) => void;
 };
 
 function CompassWorkspace({
@@ -253,6 +258,7 @@ const CompassWeb = ({
   onDebug,
   onTrack,
   onOpenConnectViaModal,
+  onFailToLoadConnections,
 }: CompassWebProps) => {
   const appRegistry = useRef(new AppRegistry());
   const logger = useCompassWebLoggerAndTelemetry({
@@ -335,6 +341,7 @@ const CompassWeb = ({
                   >
                     <CompassConnections
                       appName={appName ?? 'Compass Web'}
+                      onFailToLoadConnections={onFailToLoadConnections}
                       onExtraConnectionDataRequest={() => {
                         return Promise.resolve([{}, null] as [
                           Record<string, unknown>,

packages/compass/src/app/components/home.tsx

@@ -6,6 +6,7 @@ import {
   css,
   cx,
   getScrollbarStyles,
+  openToast,
   palette,
   resetGlobalCSS,
 } from '@mongodb-js/compass-components';
@@ -149,6 +150,13 @@ function HomeWithConnections({
           onExtraConnectionDataRequest={getExtraConnectionData}
           onAutoconnectInfoRequest={onAutoconnectInfoRequest}
           doNotReconnectDisconnectedAutoconnectInfo
+          onFailToLoadConnections={(error) => {
+            openToast('failed-to-load-connections', {
+              title: 'Failed to load connections',
+              description: error.message,
+              variant: 'warning',
+            });
+          }}
         >
           <Home {...props}></Home>
         </CompassConnections>