use error banner instead of toast

Author: paula-stacho

packages/compass-schema/src/components/compass-schema.tsx

@@ -36,7 +36,11 @@ import { getAtlasPerformanceAdvisorLink } from '../utils';
 import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { RootState } from '../stores/store';
-import { startAnalysis, stopAnalysis } from '../stores/schema-analysis-reducer';
+import {
+  type SchemaAnalysisError,
+  startAnalysis,
+  stopAnalysis,
+} from '../stores/schema-analysis-reducer';
 import { openExportSchema } from '../stores/schema-export-reducer';
 import ExportSchemaModal from './export-schema-modal';
 import ExportSchemaLegacyBanner from './export-schema-legacy-banner';
@@ -371,7 +375,7 @@ const PerformanceAdvisorBanner = () => {
 
 const Schema: React.FunctionComponent<{
   analysisState: AnalysisState;
-  errorMessage?: string;
+  error?: SchemaAnalysisError;
   maxTimeMS?: number;
   schema: MongodbSchema | null;
   count?: number;
@@ -381,7 +385,7 @@ const Schema: React.FunctionComponent<{
   onStopAnalysis: () => void;
 }> = ({
   analysisState,
-  errorMessage,
+  error,
   schema,
   resultId,
   onExportSchemaClicked,
@@ -410,7 +414,7 @@ const Schema: React.FunctionComponent<{
               onExportSchemaClicked={onExportSchemaClicked}
               onResetClicked={onApplyClicked}
               analysisState={analysisState}
-              errorMessage={errorMessage || ''}
+              error={error}
               isOutdated={!!outdated}
               sampleSize={schema ? schema.count : 0}
               schemaResultId={resultId || ''}
@@ -440,7 +444,7 @@ const Schema: React.FunctionComponent<{
 export default connect(
   (state: RootState) => ({
     analysisState: state.schemaAnalysis.analysisState,
-    errorMessage: state.schemaAnalysis.errorMessage,
+    error: state.schemaAnalysis.error,
     schema: state.schemaAnalysis.schema,
     resultId: state.schemaAnalysis.resultId,
   }),

packages/compass-schema/src/components/schema-toolbar/schema-toolbar.tsx

@@ -13,6 +13,7 @@ import { usePreference } from 'compass-preferences-model/provider';
 import type { AnalysisState } from '../../constants/analysis-states';
 import { ANALYSIS_STATE_COMPLETE } from '../../constants/analysis-states';
 import { QueryBar } from '@mongodb-js/compass-query-bar';
+import { type SchemaAnalysisError } from '../../stores/schema-analysis-reducer';
 
 const schemaToolbarStyles = css({
   display: 'flex',
@@ -43,6 +44,13 @@ const schemaToolbarActionBarRightStyles = css({
   paddingLeft: spacing[2],
 });
 
+const ERROR_WARNING = 'An error occurred during schema analysis';
+const COMPLEXITY_ABORT_MESSAGE = `
+Analysis was aborted due to: Fields count above 1000.
+Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.
+`;
+const INCREASE_MAX_TIME_MS_HINT_MESSAGE =
+  'Operation exceeded time limit. Please try increasing the maxTimeMS for the query in the filter options.';
 const OUTDATED_WARNING_MESSAGE =
   'The schema content is outdated and no longer in sync' +
   ' with the documents view. Press "Analyze" again to see the schema for the' +
@@ -53,7 +61,7 @@ const SCHEMA_ANALYSIS_DOCS_LINK =
 
 type SchemaToolbarProps = {
   analysisState: AnalysisState;
-  errorMessage: string;
+  error: SchemaAnalysisError;
   isOutdated: boolean;
   onAnalyzeSchemaClicked: () => void;
   onExportSchemaClicked: () => void;
@@ -64,7 +72,7 @@ type SchemaToolbarProps = {
 
 const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   analysisState,
-  errorMessage,
+  error,
   isOutdated,
   onAnalyzeSchemaClicked,
   onExportSchemaClicked,
@@ -123,6 +131,21 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
           </div>
         </div>
       )}
+      {error?.errorType === 'GENERAL' && (
+        <ErrorSummary
+          data-testid="schema-toolbar-error-message"
+          errors={[`${ERROR_WARNING}: ${error.errorMessage}`]}
+        />
+      )}
+      {error?.errorType === 'TIMEOUT' && (
+        <WarningSummary warnings={[INCREASE_MAX_TIME_MS_HINT_MESSAGE]} />
+      )}
+      {error?.errorType === 'HIGH_COMPLEXITY' && (
+        <ErrorSummary
+          data-testid="schema-toolbar-complexity-abort-message"
+          errors={[COMPLEXITY_ABORT_MESSAGE]}
+        />
+      )}
       {analysisState === ANALYSIS_STATE_COMPLETE && isOutdated && (
         <WarningSummary warnings={[OUTDATED_WARNING_MESSAGE]} />
       )}

packages/compass-schema/src/stores/schema-analysis-reducer.ts

@@ -1,11 +1,7 @@
 import type { Schema } from 'mongodb-schema';
 import { isInternalFieldPath } from 'hadron-document';
-import {
-  openToast,
-  type ToastProperties,
-} from '@mongodb-js/compass-components';
 import type { Action, Reducer } from 'redux';
-import type { AggregateOptions } from 'mongodb';
+import type { AggregateOptions, MongoError } from 'mongodb';
 import { type AnalysisState } from '../constants/analysis-states';
 import {
   ANALYSIS_STATE_ANALYZING,
@@ -25,21 +21,18 @@ import type { SchemaThunkAction } from './store';
 import { UUID } from 'bson';
 import { isAction } from '../utils';
 
-const ERROR_WARNING = 'An error occurred during schema analysis';
-const COMPLEXITY_ABORT_MESSAGE = `
-Analysis was aborted due to: Fields count above 1000.
-Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.
-`;
-const INCREASE_MAX_TIME_MS_HINT_MESSAGE =
-  'Operation exceeded time limit. Please try increasing the maxTimeMS for the query in the filter options.';
-
 const DEFAULT_SAMPLE_SIZE = 1000;
 
 const ERROR_CODE_MAX_TIME_MS_EXPIRED = 50;
 
+export type SchemaAnalysisError = {
+  errorMessage: string;
+  errorType: 'TIMEOUT' | 'HIGH_COMPLEXITY' | 'GENERAL';
+};
+
 export type SchemaAnalysisState = {
   analysisState: AnalysisState;
-  errorMessage: string;
+  error?: SchemaAnalysisError;
   schema: Schema | null;
   resultId: string;
 };
@@ -67,7 +60,7 @@ export type AnalysisFailedAction = {
 export const schemaAnalysisReducer: Reducer<SchemaAnalysisState, Action> = (
   state = getInitialState(),
   action
-) => {
+): SchemaAnalysisState => {
   if (
     isAction<AnalysisStartedAction>(
       action,
@@ -77,7 +70,7 @@ export const schemaAnalysisReducer: Reducer<SchemaAnalysisState, Action> = (
     return {
       ...state,
       analysisState: ANALYSIS_STATE_ANALYZING,
-      errorMessage: '',
+      error: undefined,
       schema: null,
     };
   }
@@ -98,34 +91,38 @@ export const schemaAnalysisReducer: Reducer<SchemaAnalysisState, Action> = (
     };
   }
 
+  if (
+    isAction<AnalysisFailedAction>(action, SchemaAnalysisActions.analysisFailed)
+  ) {
+    return {
+      ...state,
+      error: getErrorDetails(action.error),
+      analysisState: ANALYSIS_STATE_INITIAL,
+      resultId: resultId(),
+    };
+  }
+
   return state;
 };
 
-function getErrorDetails(
-  errorMessage: string,
-  errorCode?: number
-): Partial<ToastProperties> {
+function getErrorDetails(error: Error): SchemaAnalysisError {
+  const errorCode = (error as MongoError).code;
+  const errorMessage = error.message || 'Unknown error';
+  let errorType: SchemaAnalysisError['errorType'] = 'GENERAL';
   if (errorCode === ERROR_CODE_MAX_TIME_MS_EXPIRED) {
-    return { description: INCREASE_MAX_TIME_MS_HINT_MESSAGE };
-  } else if (errorMessage.includes('Schema analysis aborted: Fields count')) {
-    return {
-      description: COMPLEXITY_ABORT_MESSAGE,
-      actionElement: `<a href="https://www.mongodb.com/cloud/atlas/lp/search-1">Learn more</a>`,
-    };
-  } else {
-    return { description: `${ERROR_WARNING}: ${errorMessage}` };
+    errorType = 'TIMEOUT';
+  } else if (error.message.includes('Schema analysis aborted: Fields count')) {
+    errorType = 'HIGH_COMPLEXITY';
+    // return {
+    //   description: COMPLEXITY_ABORT_MESSAGE,
+    //   actionElement: `<a href="https://www.mongodb.com/cloud/atlas/lp/search-1">Learn more</a>`,
+    // };
   }
-}
-
-function handleError(err: Error & { code?: number }) {
-  const errorMessage = (err && err.message) || 'Unknown error';
-  const errorCode = err && err.code;
 
-  openToast('schema-analysis-error', {
-    variant: 'important',
-    title: 'Schema Analysis Failed',
-    ...getErrorDetails(errorMessage, errorCode),
-  });
+  return {
+    errorType,
+    errorMessage,
+  };
 }
 
 function resultId(): string {
@@ -134,7 +131,6 @@ function resultId(): string {
 
 const getInitialState = (): SchemaAnalysisState => ({
   analysisState: ANALYSIS_STATE_INITIAL,
-  errorMessage: '',
   schema: null,
   resultId: resultId(),
 });
@@ -284,8 +280,10 @@ export const startAnalysis = (): SchemaThunkAction<
           error: err.stack,
         }
       );
-      dispatch({ type: SchemaAnalysisActions.analysisFinished, schema: null });
-      handleError(err as Error);
+      dispatch({
+        type: SchemaAnalysisActions.analysisFailed,
+        error: err as Error,
+      });
     } finally {
       analysisAbortControllerRef.current = undefined;
     }