fix(stage-wizard): show toggle button when feature flag is enabled (#4228)

Author: mabaasit

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.spec.tsx

@@ -7,6 +7,8 @@ import type { SinonSandbox } from 'sinon';
 import { spy, createSandbox } from 'sinon';
 
 import { PipelineExtraSettings } from './pipeline-extra-settings';
+import preferences from 'compass-preferences-model';
+import sinon from 'sinon';
 
 const renderPipelineExtraSettings = (
   props: Partial<ComponentProps<typeof PipelineExtraSettings>> = {}
@@ -67,27 +69,40 @@ describe('PipelineExtraSettings', function () {
     expect(within(container).getByTestId('pipeline-builder-toggle')).to.exist;
   });
 
-  it('calls onToggleSidePanel when clicked', function () {
-    const onToggleSidePanelSpy = spy();
-    renderPipelineExtraSettings({ onToggleSidePanel: onToggleSidePanelSpy });
-    const container = screen.getByTestId('pipeline-toolbar-extra-settings');
-    const button = within(container).getByTestId(
-      'pipeline-toolbar-side-panel-button'
-    );
-    expect(button).to.exist;
-    expect(onToggleSidePanelSpy.calledOnce).to.be.false;
-    userEvent.click(button);
-    expect(onToggleSidePanelSpy.calledOnce).to.be.true;
-  });
+  describe('stage wizard', function () {
+    let sandbox: sinon.SinonSandbox;
+    beforeEach(function () {
+      sandbox = sinon.createSandbox();
+      sandbox
+        .stub(preferences, 'getPreferences')
+        .returns({ useStageWizard: true } as any);
+    });
+    afterEach(function () {
+      sandbox.restore();
+    });
 
-  it('disables toggle side panel button in text mode', function () {
-    renderPipelineExtraSettings({
-      pipelineMode: 'as-text',
+    it('calls onToggleSidePanel when clicked', function () {
+      const onToggleSidePanelSpy = spy();
+      renderPipelineExtraSettings({ onToggleSidePanel: onToggleSidePanelSpy });
+      const container = screen.getByTestId('pipeline-toolbar-extra-settings');
+      const button = within(container).getByTestId(
+        'pipeline-toolbar-side-panel-button'
+      );
+      expect(button).to.exist;
+      expect(onToggleSidePanelSpy.calledOnce).to.be.false;
+      userEvent.click(button);
+      expect(onToggleSidePanelSpy.calledOnce).to.be.true;
+    });
+
+    it('disables toggle side panel button in text mode', function () {
+      renderPipelineExtraSettings({
+        pipelineMode: 'as-text',
+      });
+      expect(
+        screen
+          .getByTestId('pipeline-toolbar-side-panel-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
     });
-    expect(
-      screen
-        .getByTestId('pipeline-toolbar-side-panel-button')
-        .getAttribute('aria-disabled')
-    ).to.equal('true');
   });
 });

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx

@@ -17,6 +17,7 @@ import { changePipelineMode } from '../../../modules/pipeline-builder/pipeline-m
 import type { PipelineMode } from '../../../modules/pipeline-builder/pipeline-mode';
 import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-builder/builder-helpers';
 import { toggleSidePanel } from '../../../modules/side-panel';
+import { usePreference } from 'compass-preferences-model';
 
 const containerStyles = css({
   display: 'flex',
@@ -57,6 +58,7 @@ export const PipelineExtraSettings: React.FunctionComponent<
   onToggleSettings,
   onToggleSidePanel,
 }) => {
+  const showStageWizard = usePreference('useStageWizard', React);
   return (
     <div
       className={containerStyles}
@@ -105,15 +107,17 @@ export const PipelineExtraSettings: React.FunctionComponent<
           Text
         </SegmentedControlOption>
       </SegmentedControl>
-      <IconButton
-        title="Toggle Side Panel"
-        aria-label="Toggle Side Panel"
-        onClick={() => onToggleSidePanel()}
-        data-testid="pipeline-toolbar-side-panel-button"
-        disabled={pipelineMode === 'as-text'}
-      >
-        <Icon glyph="Filter" />
-      </IconButton>
+      {showStageWizard && (
+        <IconButton
+          title="Toggle Side Panel"
+          aria-label="Toggle Side Panel"
+          onClick={() => onToggleSidePanel()}
+          data-testid="pipeline-toolbar-side-panel-button"
+          disabled={pipelineMode === 'as-text'}
+        >
+          <Icon glyph="Filter" />
+        </IconButton>
+      )}
       <IconButton
         title="More Settings"
         aria-label="More Settings"