From 14d63aa35467ddb416fbaaf32ef7ec32c1d7efd1 Mon Sep 17 00:00:00 2001
From: Basit <basit.chonka@mongodb.com>
Date: Wed, 20 Apr 2022 18:30:03 +0200
Subject: [PATCH] feat(aggregations): remove add stage button

---
 .../pipeline-header/pipeline-stages.spec.tsx  | 15 ++++++-----
 .../pipeline-header/pipeline-stages.tsx       | 26 ++++++++++++-------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.spec.tsx
index b71c3b534e0..b44b3067e47 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.spec.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.spec.tsx
@@ -34,7 +34,7 @@ describe('PipelineStages', function () {
       ).to.exist;
     });
 
-    it('renders button to add first stage', function () {
+    it('renders button to add first stage - when pipeline is empty', function () {
       expect(within(container).getByTestId('pipeline-toolbar-add-stage-button'))
         .to.exist;
     });
@@ -66,11 +66,14 @@ describe('PipelineStages', function () {
       container = screen.getByTestId('toolbar-pipeline-stages');
     });
     it('renders text to show no stages are in pipeline', function () {
-      expect(
-        within(container).findByText(
-          'Your pipeline is currently empty. To get started select the first stage.'
-        )
-      ).to.exist;
+      expect(within(container).findByText('Your pipeline is currently empty.'))
+        .to.exist;
+    });
+
+    it('does not render button to add first stage - when pipeline is not empty', function () {
+      expect(() => {
+        within(container).getByTestId('pipeline-toolbar-add-stage-button');
+      }).to.throw;
     });
   });
 
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx
index fe5a37b538e..ebf5ad62691 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx
@@ -54,16 +54,22 @@ export const PipelineStages: React.FunctionComponent<PipelineStagesProps> = ({
     <div className={containerStyles} data-testid="toolbar-pipeline-stages">
       {stages.filter(Boolean).length === 0 ? (
         <Description className={cx(descriptionStyles)}>
-          Your pipeline is currently empty. To get started select the&nbsp;
-          <Link
-            className={addStageStyles}
-            as="button"
-            onClick={() => onStageAdded()}
-            hideExternalIcon
-            data-testid="pipeline-toolbar-add-stage-button"
-          >
-            first stage.
-          </Link>
+          Your pipeline is currently empty.
+          {stages.length === 0 && (
+            <>
+              {' '}
+              To get started select the&nbsp;
+              <Link
+                className={addStageStyles}
+                as="button"
+                onClick={() => onStageAdded()}
+                hideExternalIcon
+                data-testid="pipeline-toolbar-add-stage-button"
+              >
+                first stage.
+              </Link>
+            </>
+          )}
         </Description>
       ) : (
         <Pipeline size="small">