.

Author: paula-stacho

packages/compass-components/src/components/error-warning-summary.tsx

@@ -24,6 +24,10 @@ const actionButtonStyles = css({
   marginLeft: 'auto',
 });
 
+type DismissProps =
+  | { dismissible: true; onClose: () => void }
+  | { dismissible?: false; onClose?: never };
+
 function Summary({ messages }: { messages: string[] }): React.ReactElement {
   if (messages.length === 1) {
     return <div>{messages[0]}</div>;
@@ -77,11 +81,11 @@ const BannerWithSummary: React.FunctionComponent<
     variant: BannerVariant;
     ['data-testid']?: string;
     className?: string;
-    dismissible?: boolean;
   } & (
     | { actionText: string; onAction(): void }
     | { actionText?: never; onAction?: never }
-  )
+  ) &
+    DismissProps
 > = ({
   ['data-testid']: dataTestId,
   messages,
@@ -90,6 +94,7 @@ const BannerWithSummary: React.FunctionComponent<
   variant,
   className,
   dismissible,
+  onClose,
 }) => {
   const _messages = useMemo(() => {
     return !Array.isArray(messages) ? [messages] : messages;
@@ -101,6 +106,7 @@ const BannerWithSummary: React.FunctionComponent<
       variant={variant}
       className={cx(bannerStyle, className)}
       dismissible={dismissible}
+      onClose={onClose}
     >
       <div className={summaryStyles}>
         <Summary messages={_messages}></Summary>
@@ -127,7 +133,8 @@ export const ErrorSummary: React.FunctionComponent<
   } & (
     | { actionText: string; onAction(): void }
     | { actionText?: never; onAction?: never }
-  )
+  ) &
+    DismissProps
 > = ({ className, errors, ...props }) => {
   return (
     <BannerWithSummary
@@ -147,7 +154,8 @@ export const WarningSummary: React.FunctionComponent<
   } & (
     | { actionText: string; onAction(): void }
     | { actionText?: never; onAction?: never }
-  )
+  ) &
+    DismissProps
 > = ({ className, warnings, ...props }) => {
   return (
     <BannerWithSummary

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

@@ -37,6 +37,7 @@ import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { RootState } from '../stores/store';
 import {
+  analysisErrorDismissed,
   type SchemaAnalysisError,
   startAnalysis,
   stopAnalysis,
@@ -383,6 +384,7 @@ const Schema: React.FunctionComponent<{
   onExportSchemaClicked: () => void;
   onStartAnalysis: () => Promise<void>;
   onStopAnalysis: () => void;
+  onDismissError: () => void;
 }> = ({
   analysisState,
   error,
@@ -391,6 +393,7 @@ const Schema: React.FunctionComponent<{
   onExportSchemaClicked,
   onStartAnalysis,
   onStopAnalysis,
+  onDismissError,
 }) => {
   const onApplyClicked = useCallback(() => {
     void onStartAnalysis();
@@ -415,6 +418,7 @@ const Schema: React.FunctionComponent<{
               onResetClicked={onApplyClicked}
               analysisState={analysisState}
               error={error}
+              onDismissError={onDismissError}
               isOutdated={!!outdated}
               sampleSize={schema ? schema.count : 0}
               schemaResultId={resultId || ''}
@@ -452,5 +456,6 @@ export default connect(
     onStartAnalysis: startAnalysis,
     onStopAnalysis: () => stopAnalysis(),
     onExportSchemaClicked: openExportSchema,
+    onDismissError: analysisErrorDismissed,
   }
 )(Schema);

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

@@ -47,6 +47,7 @@ describe('SchemaToolbar', function () {
           sampleSize={10}
           schemaResultId="123"
           onExportSchemaClicked={() => {}}
+          onDismissError={() => {}}
           {...props}
         />
       </MockQueryBarPlugin>,
@@ -74,6 +75,22 @@ describe('SchemaToolbar', function () {
       expect(screen.getByTestId('schema-toolbar-error-message')).to.be.visible;
     });
 
+    it('renders timeout error', function () {
+      renderSchemaToolbar({
+        analysisState: 'initial',
+        error: {
+          errorType: 'TIMEOUT',
+          errorMessage: 'test error msg',
+        },
+      });
+
+      expect(screen.getByTestId('schema-toolbar-timeout-message')).to.be
+        .visible;
+      expect(
+        screen.getByTestId('schema-toolbar-timeout-message').textContent
+      ).to.include('Please try increasing the maxTimeMS');
+    });
+
     it('renders complexity abort error', function () {
       renderSchemaToolbar({
         analysisState: 'initial',

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

@@ -64,13 +64,15 @@ type SchemaToolbarProps = {
   onAnalyzeSchemaClicked: () => void;
   onExportSchemaClicked: () => void;
   onResetClicked: () => void;
+  onDismissError: () => void;
   sampleSize: number;
   schemaResultId: string;
 };
 
 const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   analysisState,
   error,
+  onDismissError,
   isOutdated,
   onAnalyzeSchemaClicked,
   onExportSchemaClicked,
@@ -134,19 +136,23 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
           data-testid="schema-toolbar-error-message"
           errors={[`${ERROR_WARNING}: ${error.errorMessage}`]}
           dismissible={true}
+          onClose={onDismissError}
         />
       )}
       {error?.errorType === 'TIMEOUT' && (
         <WarningSummary
+          data-testid="schema-toolbar-timeout-message"
           warnings={[INCREASE_MAX_TIME_MS_HINT_MESSAGE]}
           dismissible={true}
+          onClose={onDismissError}
         />
       )}
       {error?.errorType === 'HIGH_COMPLEXITY' && (
         <Banner
           variant={BannerVariant.Danger}
           data-testid="schema-toolbar-complexity-abort-message"
           dismissible={true}
+          onClose={onDismissError}
         >
           The analysis was aborted because the number of fields exceeds 1000.
           Consider breaking up your data into more collections with smaller

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

@@ -42,6 +42,7 @@ export const enum SchemaAnalysisActions {
   analysisStarted = 'schema-service/schema-analysis/analysisStarted',
   analysisFinished = 'schema-service/schema-analysis/analysisFinished',
   analysisFailed = 'schema-service/schema-analysis/analysisFailed',
+  analysisErrorDismissed = 'schema-service/schema-analysis/analysisErrorDismissed',
 }
 
 export type AnalysisStartedAction = {
@@ -59,6 +60,10 @@ export type AnalysisFailedAction = {
   error: Error;
 };
 
+export type AnalysisErrorDismissedAction = {
+  type: SchemaAnalysisActions.analysisErrorDismissed;
+};
+
 export const schemaAnalysisReducer: Reducer<SchemaAnalysisState, Action> = (
   state = getInitialState(),
   action
@@ -105,6 +110,18 @@ export const schemaAnalysisReducer: Reducer<SchemaAnalysisState, Action> = (
     };
   }
 
+  if (
+    isAction<AnalysisErrorDismissedAction>(
+      action,
+      SchemaAnalysisActions.analysisErrorDismissed
+    )
+  ) {
+    return {
+      ...state,
+      error: undefined,
+    };
+  }
+
   return state;
 };
 
@@ -148,6 +165,12 @@ export const geoLayerAdded = (
   };
 };
 
+export const analysisErrorDismissed =
+  (): SchemaThunkAction<AnalysisErrorDismissedAction> => {
+    return (dispatch) =>
+      dispatch({ type: SchemaAnalysisActions.analysisErrorDismissed });
+  };
+
 export const geoLayersEdited = (
   field: string,
   layers: LayerGroup

packages/compass-schema/src/stores/store.spec.ts

@@ -131,7 +131,7 @@ describe('Schema Store', function () {
       store.dispatch(stopAnalysis());
       isCancelErrorStub.returns(true);
       await analysisPromise;
-      expect(store.getState().schemaAnalysis.analysisState).to.equal('error');
+      expect(store.getState().schemaAnalysis.analysisState).to.equal('initial');
     });
 
     describe('schema export', function () {