feat(data-modeling): display errors when creating a diagram COMPASS-9307

packages/compass-data-modeling/src/components/new-diagram-form.tsx

@@ -21,6 +21,7 @@ import {
   Banner,
   Button,
   css,
+  ErrorSummary,
   FormFieldContainer,
   Modal,
   ModalBody,
@@ -29,9 +30,14 @@ import {
   Option,
   Select,
   SelectTable,
+  spacing,
   TextInput,
 } from '@mongodb-js/compass-components';
 
+const footerStyles = css({
+  gap: spacing[200],
+});
+
 const FormStepContainer: React.FunctionComponent<{
   title: string;
   description?: string;
@@ -56,7 +62,7 @@ const FormStepContainer: React.FunctionComponent<{
     <>
       <ModalHeader title={title} subtitle={description}></ModalHeader>
       <ModalBody>{children}</ModalBody>
-      <ModalFooter>
+      <ModalFooter className={footerStyles}>
         <Button
           onClick={onNextClick}
           disabled={isNextDisabled}
@@ -90,6 +96,7 @@ type NewDiagramFormProps = {
   selectedDatabase: string | null;
   collections: string[];
   selectedCollections: string[];
+  error: Error | null;
 
   onCancel: () => void;
   onNameChange: (name: string) => void;
@@ -115,6 +122,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
   selectedDatabase,
   collections,
   selectedCollections,
+  error,
   onCancel,
   onNameChange,
   onNameConfirm,
@@ -174,7 +182,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
           onConfirmAction: onCollectionsSelectionConfirm,
           confirmActionLabel: 'Generate',
           isConfirmDisabled:
-            !selectedCollections || selectCollections.length === 0,
+            !selectedCollections || selectedCollections.length === 0,
           onCancelAction: onDatabaseSelectCancel,
           cancelLabel: 'Back',
         };
@@ -203,7 +211,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
             <TextInput
               label="New data model name"
               value={diagramName}
-              data-testId="new-diagram-name-input"
+              data-testid="new-diagram-name-input"
               onChange={(e) => {
                 onNameChange(e.currentTarget.value);
               }}
@@ -215,6 +223,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
           <FormFieldContainer>
             <Select
               label=""
+              aria-label="Select connection"
               value={selectedConnectionId ?? ''}
               data-testid="new-diagram-connection-selector"
               onChange={onConnectionSelect}
@@ -240,6 +249,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
           <FormFieldContainer>
             <Select
               label=""
+              aria-label="Select database"
               value={selectedDatabase ?? ''}
               data-testid="new-diagram-database-selector"
               onChange={onDatabaseSelect}
@@ -317,6 +327,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
         isLoading={isLoading}
       >
         {formContent}
+        {error && <ErrorSummary errors={[error.message]} />}
       </FormStepContainer>
     </Modal>
   );
@@ -351,6 +362,7 @@ export default connect(
       selectedDatabase,
       databaseCollections,
       selectedCollections,
+      error,
     } = state.generateDiagramWizard;
     return {
       isModalOpen: inProgress,
@@ -366,6 +378,7 @@ export default connect(
       selectedDatabase,
       collections: databaseCollections ?? [],
       selectedCollections: selectedCollections ?? [],
+      error,
     };
   },
   {

packages/compass-data-modeling/src/index.ts

@@ -1,30 +1,19 @@
-import { applyMiddleware, createStore } from 'redux';
-import thunk from 'redux-thunk';
 import { registerHadronPlugin } from 'hadron-app-registry';
 import { preferencesLocator } from 'compass-preferences-model/provider';
 import { connectionsLocator } from '@mongodb-js/compass-connections/provider';
 import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
 import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
 import type { WorkspaceComponent } from '@mongodb-js/compass-workspaces';
 import DataModelingComponent from './components/data-modeling';
-import reducer from './store/reducer';
 import { mongoDBInstancesManagerLocator } from '@mongodb-js/compass-app-stores/provider';
 import { dataModelStorageServiceLocator } from './provider';
+import { activateDataModelingStore } from './store';
 
 const DataModelingPlugin = registerHadronPlugin(
   {
     name: 'DataModeling',
     component: DataModelingComponent,
-    activate(initialProps, services, { cleanup }) {
-      const cancelControllerRef = { current: null };
-      const store = createStore(
-        reducer,
-        applyMiddleware(
-          thunk.withExtraArgument({ ...services, cancelControllerRef })
-        )
-      );
-      return { store, deactivate: cleanup };
-    },
+    activate: activateDataModelingStore,
   },
   {
     preferences: preferencesLocator,

packages/compass-data-modeling/src/provider/index.tsx

@@ -11,7 +11,7 @@ type DataModelStorageServiceState = {
   items: MongoDBDataModelDescription[];
 };
 
-const noopDataModelStorageService: DataModelStorageServiceState &
+export const noopDataModelStorageService: DataModelStorageServiceState &
   DataModelStorage = {
   status: 'INITIAL',
   error: null,

packages/compass-data-modeling/src/store/analysis-process.ts

@@ -209,6 +209,12 @@ export function startAnalysis(
       if (cancelController.signal.aborted) {
         dispatch({ type: AnalysisProcessActionTypes.ANALYSIS_CANCELED });
       } else {
+        services.logger.log.error(
+          services.logger.mongoLogId(1_001_000_350),
+          'DataModeling',
+          'Failed to analyze schema',
+          { err }
+        );
         dispatch({
           type: AnalysisProcessActionTypes.ANALYSIS_FAILED,
           error: err as Error,

packages/compass-data-modeling/src/store/generate-diagram-wizard.ts

@@ -23,6 +23,7 @@ export type GenerateDiagramWizardState = {
   databaseCollections: string[] | null;
   selectedCollections: string[] | null;
   automaticallyInferRelations: boolean;
+  error: Error | null;
 };
 
 export enum GenerateDiagramWizardActionTypes {
@@ -97,6 +98,7 @@ export type DatabasesFetchedAction = {
 
 export type ConnectionFailedAction = {
   type: GenerateDiagramWizardActionTypes.CONNECTION_FAILED;
+  error: Error;
 };
 
 export type SelectDatabaseAction = {
@@ -121,6 +123,7 @@ export type CollectionsFetchedAction = {
 
 export type CollectionsFetchFailedAction = {
   type: GenerateDiagramWizardActionTypes.COLLECTIONS_FETCH_FAILED;
+  error: Error;
 };
 
 export type SelectCollectionsAction = {
@@ -151,13 +154,16 @@ export type GenerateDiagramWizardActions =
   | CollectionsFetchedAction
   | SelectCollectionsAction
   | ToggleInferRelationsAction
-  | ConfirmSelectedCollectionsAction;
+  | ConfirmSelectedCollectionsAction
+  | CollectionsFetchFailedAction
+  | ConnectionFailedAction;
 
 const INITIAL_STATE: GenerateDiagramWizardState = {
   inProgress: false,
   step: 'ENTER_NAME',
   diagramName: '',
   selectedConnectionId: null,
+  error: null,
   connectionDatabases: null,
   selectedDatabase: null,
   databaseCollections: null,
@@ -186,13 +192,15 @@ export const generateDiagramWizardReducer: Reducer<
   if (isAction(action, GenerateDiagramWizardActionTypes.CANCEL_CONFIRM_NAME)) {
     return {
       ...state,
+      error: null,
       step: 'ENTER_NAME',
     };
   }
   if (isAction(action, GenerateDiagramWizardActionTypes.SELECT_CONNECTION)) {
     return {
       ...state,
       selectedConnectionId: action.id,
+      error: null,
     };
   }
   if (
@@ -287,15 +295,25 @@ export const generateDiagramWizardReducer: Reducer<
   if (isAction(action, GenerateDiagramWizardActionTypes.CONNECTION_FAILED)) {
     return {
       ...state,
-      inProgress: false,
+      error: action.error,
+      step: 'SELECT_CONNECTION',
     };
   }
   if (
     isAction(action, GenerateDiagramWizardActionTypes.COLLECTIONS_FETCH_FAILED)
   ) {
     return {
       ...state,
-      inProgress: false,
+      error: action.error,
+      step: 'SELECT_DATABASE',
+    };
+  }
+  if (
+    isAction(action, GenerateDiagramWizardActionTypes.CONFIRM_SELECT_DATABASE)
+  ) {
+    return {
+      ...state,
+      step: 'LOADING_COLLECTIONS',
     };
   }
   return state;
@@ -342,6 +360,13 @@ export function confirmSelectConnection(): DataModelingThunkAction<
         return;
       }
       await services.connections.connect(connectionInfo);
+      // ConnectionsService.connect does not throw an error if it fails to establish a connection,
+      // so explicitly checking if error is in the connection item and throwing it.
+      const connectionError =
+        services.connections.getConnectionById(selectedConnectionId)?.error;
+      if (connectionError) {
+        throw connectionError;
+      }
       dispatch({ type: GenerateDiagramWizardActionTypes.CONNECTION_CONNECTED });
       const mongoDBInstance =
         services.instanceManager.getMongoDBInstanceForConnection(
@@ -362,7 +387,16 @@ export function confirmSelectConnection(): DataModelingThunkAction<
           }),
       });
     } catch (err) {
-      dispatch({ type: GenerateDiagramWizardActionTypes.CONNECTION_FAILED });
+      services.logger.log.error(
+        services.logger.mongoLogId(1_001_000_348),
+        'DataModeling',
+        'Failed to select connection',
+        { err }
+      );
+      dispatch({
+        type: GenerateDiagramWizardActionTypes.CONNECTION_FAILED,
+        error: err as Error,
+      });
     }
   };
 }
@@ -414,8 +448,15 @@ export function confirmSelectDatabase(): DataModelingThunkAction<
           }),
       });
     } catch (err) {
+      services.logger.log.error(
+        services.logger.mongoLogId(1_001_000_349),
+        'DataModeling',
+        'Failed to select database',
+        { err }
+      );
       dispatch({
         type: GenerateDiagramWizardActionTypes.COLLECTIONS_FETCH_FAILED,
+        error: err as Error,
       });
     }
   };

packages/compass-data-modeling/src/store/index.ts

@@ -0,0 +1,36 @@
+import type { PreferencesAccess } from 'compass-preferences-model/provider';
+import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
+import type { TrackFunction } from '@mongodb-js/compass-telemetry/provider';
+import type { Logger } from '@mongodb-js/compass-logging/provider';
+import type { MongoDBInstancesManager } from '@mongodb-js/compass-app-stores/provider';
+import type { DataModelStorageService } from '../provider';
+import { applyMiddleware, createStore } from 'redux';
+import reducer from './reducer';
+import thunk from 'redux-thunk';
+import type { ActivateHelpers } from 'hadron-app-registry';
+
+export type DataModelingStoreOptions = Record<string, unknown>;
+
+export type DataModelingStoreServices = {
+  preferences: PreferencesAccess;
+  connections: ConnectionsService;
+  instanceManager: MongoDBInstancesManager;
+  dataModelStorage: DataModelStorageService;
+  track: TrackFunction;
+  logger: Logger;
+};
+
+export function activateDataModelingStore(
+  _: DataModelingStoreOptions,
+  services: DataModelingStoreServices,
+  { cleanup }: ActivateHelpers
+) {
+  const cancelControllerRef = { current: null };
+  const store = createStore(
+    reducer,
+    applyMiddleware(
+      thunk.withExtraArgument({ ...services, cancelControllerRef })
+    )
+  );
+  return { store, deactivate: cleanup };
+}

packages/compass-data-modeling/src/store/reducer.ts

@@ -13,13 +13,8 @@ import { analysisProcessReducer } from './analysis-process';
 import type { DiagramActions, DiagramActionTypes } from './diagram';
 import { diagramReducer } from './diagram';
 import type { ThunkAction } from 'redux-thunk';
-import type { PreferencesAccess } from 'compass-preferences-model/provider';
-import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
-import type { TrackFunction } from '@mongodb-js/compass-telemetry/provider';
-import type { Logger } from '@mongodb-js/compass-logging/provider';
-import type { MongoDBInstancesManager } from '@mongodb-js/compass-app-stores/provider';
 import { stepReducer } from './step';
-import type { DataModelStorageService } from '../provider';
+import type { DataModelingStoreServices } from '.';
 
 const reducer = combineReducers({
   step: stepReducer,
@@ -40,18 +35,14 @@ export type DataModelingActionTypes =
 
 export type DataModelingState = ReturnType<typeof reducer>;
 
+export type DataModelingExtraArgs = DataModelingStoreServices & {
+  cancelControllerRef: { current: AbortController | null };
+};
+
 export type DataModelingThunkAction<R, A extends AnyAction> = ThunkAction<
   R,
   DataModelingState,
-  {
-    preferences: PreferencesAccess;
-    connections: ConnectionsService;
-    instanceManager: MongoDBInstancesManager;
-    dataModelStorage: DataModelStorageService;
-    track: TrackFunction;
-    logger: Logger;
-    cancelControllerRef: { current: AbortController | null };
-  },
+  DataModelingExtraArgs,
   A
 >;