fix(aggregations): hide add stage in toolbar COMPASS-6373 (#3907)

Author: mabaasit

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.spec.tsx

@@ -31,11 +31,10 @@ describe('PipelineStages', function () {
       stages: [],
       showAddNewStage: true,
     });
-    expect(
-      within(container).findByText(
-        'Your pipeline is currently empty. To get started select the first stage.'
-      )
-    ).to.exist;
+    const content = container.textContent?.trim().replace(/\u00a0/g, ' ');
+    expect(content).to.equal(
+      `Your pipeline is currently empty. To get started add the first stage.`
+    );
   });
 
   describe('add stage button', function () {

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx

@@ -46,6 +46,8 @@ type PipelineStagesProps = {
   onEditPipelineClick: (workspace: Workspace) => void;
 };
 
+const nbsp = '\u00a0';
+
 export const PipelineStages: React.FunctionComponent<PipelineStagesProps> = ({
   isResultsMode,
   stages,
@@ -60,8 +62,7 @@ export const PipelineStages: React.FunctionComponent<PipelineStagesProps> = ({
           Your pipeline is currently empty.
           {showAddNewStage && (
             <>
-              {' '}
-              To get started select the&nbsp;
+              {nbsp}To get started add the{nbsp}
               <Link
                 className={addStageStyles}
                 as="button"
@@ -97,11 +98,12 @@ export const PipelineStages: React.FunctionComponent<PipelineStagesProps> = ({
 };
 
 const mapState = (state: RootState) => {
-  const stages = getPipelineStageOperatorsFromBuilderState(state);
+  const stages = getPipelineStageOperatorsFromBuilderState(state, false);
   const isResultsMode = state.workspace === 'results';
+  const isStageMode = state.pipelineBuilder.pipelineMode === 'builder-ui';
   return {
-    stages,
-    showAddNewStage: !isResultsMode && stages.length === 0,
+    stages: stages.filter(Boolean) as string[],
+    showAddNewStage: !isResultsMode && isStageMode && stages.length === 0,
     isResultsMode,
   };
 };

packages/compass-aggregations/src/modules/pipeline-builder/builder-helpers.spec.ts

@@ -0,0 +1,73 @@
+import { expect } from 'chai';
+import { applyMiddleware, createStore as createReduxStore } from 'redux';
+import type { DataService } from 'mongodb-data-service';
+import thunk from 'redux-thunk';
+
+import reducer from '..';
+import { getPipelineStageOperatorsFromBuilderState } from './builder-helpers';
+import { PipelineBuilder } from './pipeline-builder';
+import { addStage, mapBuilderStageToStoreStage } from './stage-editor';
+import { changePipelineMode } from './pipeline-mode';
+import { PipelineStorage } from '../../utils/pipeline-storage';
+
+function createStore(
+  pipelineSource = `[{$match: {_id: 1}}, {$limit: 10}]`
+) {
+  const pipelineBuilder = new PipelineBuilder({} as DataService, pipelineSource);
+  return createReduxStore(
+    reducer,
+    {
+      pipelineBuilder: {
+        stageEditor: {
+          stageIds: pipelineBuilder.stages.map(stage => stage.id),
+          stages: pipelineBuilder.stages.map(mapBuilderStageToStoreStage)
+        }
+      }
+    },
+    applyMiddleware(
+      thunk.withExtraArgument({
+        pipelineBuilder,
+        pipelineStorage: new PipelineStorage(),
+      })
+    )
+  );
+}
+
+describe('builder-helpers', function () {
+  describe('getPipelineStageOperatorsFromBuilderState', function () {
+    let store: ReturnType<typeof createStore>;
+    beforeEach(function() {
+      store = createStore();
+    });
+    describe('in stage editor mode', function() {
+      it('should return filtered stage names', function () {
+        store.dispatch(addStage());
+        expect(
+          getPipelineStageOperatorsFromBuilderState(store.getState())
+        ).to.deep.equal(['$match', '$limit']);
+      });
+  
+      it('should return unfiltered stage names', function () {
+        store.dispatch(addStage());
+        expect(
+          getPipelineStageOperatorsFromBuilderState(store.getState(), false)
+        ).to.deep.equal(['$match', '$limit', null]);
+      });
+    })
+    describe('in text editor mode', function() {
+      it('should return filtered stage names', function() {
+        store.dispatch(changePipelineMode('as-text'));
+        store.dispatch(addStage());
+        expect(
+          getPipelineStageOperatorsFromBuilderState(store.getState())
+          ).to.deep.equal(['$match', '$limit']);
+      });
+      it('should return unfiltered stage names', function() {
+        store.dispatch(addStage());
+        expect(
+          getPipelineStageOperatorsFromBuilderState(store.getState(), false)
+          ).to.deep.equal(['$match', '$limit', null]);
+      });
+    });
+  });
+});

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

@@ -53,19 +53,27 @@ export function getPipelineStringFromBuilderState(
 }
 
 export function getPipelineStageOperatorsFromBuilderState(
-  state: RootState
-): string[] {
-  if (state.pipelineBuilder.pipelineMode === 'builder-ui') {
-    return state.pipelineBuilder.stageEditor.stages
+  state: RootState,
+  filterEmptyStageOperators?: true,
+): string[];
+export function getPipelineStageOperatorsFromBuilderState(
+  state: RootState,
+  filterEmptyStageOperators?: false
+): (string | null)[];
+export function getPipelineStageOperatorsFromBuilderState(
+  state: RootState,
+  filterEmptyStageOperators = true
+): (string | null)[] | string[] {
+  const stages = state.pipelineBuilder.pipelineMode === 'builder-ui'
+    ? state.pipelineBuilder.stageEditor.stages
       .filter((stage) => !stage.disabled)
       .map((stage) => stage.stageOperator)
-      .filter(Boolean) as string[];
-  }
-  return state.pipelineBuilder.textEditor.pipeline.pipeline
-    .map((stage) => {
-      return getStageOperator(stage);
-    })
-    .filter(Boolean) as string[];
+    : state.pipelineBuilder.textEditor.pipeline.pipeline
+      .map((stage) => {
+        return getStageOperator(stage) ?? null;
+      });
+
+  return filterEmptyStageOperators ? stages.filter(Boolean) : stages;
 }
 
 export function getIsPipelineInvalidFromBuilderState(