fix(aggregations): hide the stage error message when changing the operator COMPASS-5684 (#3110)

* hide the error message when changing stage

* didn't mean that..

* clear error, not syntaxError

* test STAGE_OPERATOR_SELECTED

Author: lerouxb

packages/compass-aggregations/src/components/stage-editor/stage-editor.jsx

@@ -136,7 +136,7 @@ class StageEditor extends Component {
   }
 
   renderSyntaxError() {
-    if (!this.props.isValid) {
+    if (!this.props.isValid && this.props.syntaxError) {
       return (
         <div
           className={styles['stage-editor-syntax-error']}

packages/compass-aggregations/src/modules/pipeline.ts

@@ -320,33 +320,43 @@ const moveStage = (state: State, action: AnyAction): State => {
 const selectStageOperator = (state: State, action: AnyAction): State => {
   const operatorName = action.stageOperator;
   const oldStage = state[action.index];
-  if (operatorName !== oldStage.stageOperator) {
-    const newState = copyState(state);
-    // if the value of the existing state operator has not been modified by user,
-    // we can easily replace it or else persist the one user changed
-    let value = getStageDefaultValue(operatorName, action.isCommenting, action.env);
-    if (hasUserChangedStage(oldStage, action.env)) {
-      value = oldStage.stage;
-    }
-    newState[action.index].stageOperator = operatorName;
-    newState[action.index].stage = value;
-    newState[action.index].isExpanded = true;
-    newState[action.index].isComplete = false;
-    newState[action.index].previewDocuments = [];
-    if (
-      [SEARCH, SEARCH_META, DOCUMENTS].includes(newState[action.index].stageOperator) &&
-      action.env !== ADL && action.env !== ATLAS
-    ) {
-      newState[action.index].isMissingAtlasOnlyStageSupport = true;
-    } else {
-      newState[action.index].isMissingAtlasOnlyStageSupport = false;
-    }
-    const { isValid, syntaxError } = validateStage(newState[action.index]);
-    newState[action.index].isValid = isValid;
-    newState[action.index].syntaxError = syntaxError;
-    return newState;
+
+  if (operatorName === oldStage.stageOperator) {
+    return state;
   }
-  return state;
+
+  // If the value of the existing state operator has not been modified by user,
+  // we can easily replace it or else persist the one user changed
+  let value;
+  if (hasUserChangedStage(oldStage, action.env)) {
+    value = oldStage.stage;
+  }
+  else {
+    value = getStageDefaultValue(operatorName, action.isCommenting, action.env);
+  }
+
+  const newState = copyState(state);
+
+  newState[action.index].stageOperator = operatorName;
+  newState[action.index].stage = value;
+  newState[action.index].isExpanded = true;
+  newState[action.index].isComplete = false;
+  newState[action.index].previewDocuments = [];
+  newState[action.index].isMissingAtlasOnlyStageSupport = !!(
+    [SEARCH, SEARCH_META, DOCUMENTS].includes(operatorName) &&
+    action.env !== ADL && action.env !== ATLAS
+  );
+
+  // Re-validate the stage according to the new operator
+  const { isValid, syntaxError } = validateStage(newState[action.index]);
+  newState[action.index].isValid = isValid;
+  newState[action.index].syntaxError = syntaxError;
+
+  // Clear the server error when we change the stage operator because it isn't
+  // relevant anymore
+  newState[action.index].error = null;
+
+  return newState;
 };
 
 export const replaceOperatorSnippetTokens = (str: string): string => {

packages/compass-aggregations/src/stores/store.spec.js

@@ -6,7 +6,8 @@ import {
   stageDeleted,
   stageAdded,
   stageAddedAfter,
-  stageToggled
+  stageToggled,
+  stageOperatorSelected
 } from '../modules/pipeline';
 import { INITIAL_STATE } from '../modules/index';
 import { expect } from 'chai';
@@ -426,5 +427,34 @@ describe('Aggregation Store', function() {
         store.dispatch(stageCollapseToggled(0));
       });
     });
+
+    context('when the action is STAGE_OPERATOR_SELECTED', function() {
+      it('clears the error', function(done) {
+        const unsubscribe = store.subscribe(() => {
+          unsubscribe();
+          const pipeline = store.getState().pipeline[0];
+          delete pipeline.id;
+          expect(pipeline).to.deep.equal({
+            stageOperator: '$match',
+            stage: '{\n  query\n}',
+            isMissingAtlasOnlyStageSupport: false,
+            isValid: false,
+            isEnabled: true,
+            isExpanded: true,
+            isLoading: false,
+            isComplete: false,
+            previewDocuments: [],
+            syntaxError: 'Stage must be a properly formatted document.',
+            error: null,
+            projections: []
+          });
+          done();
+        });
+
+        store.getState().pipeline[0].error = 'foo';
+
+        store.dispatch(stageOperatorSelected(0, '$match', false, 'on-prem'));
+      });
+    });
   });
 });