feat(guide-cue): component implementation COMPASS-6334 (#4524)

Co-authored-by: Sergey Petushkov <[email protected]>

Author: mabaasit

package-lock.json

@@ -48,8 +48,8 @@
     "@mongodb-js/mongodb-redux-common": "^2.0.8",
     "bson": "^5.2.0",
     "compass-preferences-model": "^2.10.0",
-    "hadron-type-checker": "^7.0.3",
     "hadron-document": "^8.2.1",
+    "hadron-type-checker": "^7.0.3",
     "react": "^17.0.2"
   },
   "devDependencies": {
@@ -94,8 +94,7 @@
     "redux-thunk": "^2.4.1",
     "semver": "^5.7.1",
     "sinon": "^9.2.3",
-    "xvfb-maybe": "^0.2.1",
-    "react-intersection-observer": "^8.34.0"
+    "xvfb-maybe": "^0.2.1"
   },
   "dependencies": {
     "@mongodb-js/compass-components": "^1.10.0",
@@ -108,8 +107,8 @@
     "@mongodb-js/mongodb-redux-common": "^2.0.8",
     "bson": "^5.2.0",
     "compass-preferences-model": "^2.10.0",
-    "hadron-type-checker": "^7.0.3",
-    "hadron-document": "^8.2.1"
+    "hadron-document": "^8.2.1",
+    "hadron-type-checker": "^7.0.3"
   },
   "homepage": "https://github.com/mongodb-js/compass",
   "bugs": {

packages/compass-aggregations/package.json

@@ -9,7 +9,6 @@ import configureStore from '../../../test/configure-store';
 import { Provider } from 'react-redux';
 import sinon from 'sinon';
 import { STAGE_WIZARD_USE_CASES } from './stage-wizard-use-cases';
-import * as guideCueHook from '../use-guide-cue';
 
 const renderAggregationSidePanel = (
   props: Partial<ComponentProps<typeof AggregationSidePanel>> = {}
@@ -102,44 +101,4 @@ describe('aggregation side panel', function () {
     screen.getByTestId('use-case-sort').click();
     expect(onSelectUseCase).to.have.been.calledOnceWith('sort', '$sort');
   });
-
-  context('guide cue', function () {
-    const guideCueSandbox: sinon.SinonSandbox = sinon.createSandbox();
-    afterEach(function () {
-      guideCueSandbox.restore();
-    });
-
-    context('shows guide cue', function () {
-      let markCueVisitedSpy: sinon.SinonSpy;
-      beforeEach(function () {
-        markCueVisitedSpy = sinon.spy();
-        guideCueSandbox.stub(guideCueHook, 'useGuideCue').returns({
-          isCueVisible: true,
-          markCueVisited: markCueVisitedSpy,
-          cueRefEl: React.createRef(),
-        } as any);
-        renderAggregationSidePanel();
-      });
-      it('shows guide cue first time', function () {
-        expect(
-          screen.getByTestId('stage-wizard-use-case-list-guide-cue')
-        ).to.exist;
-      });
-      it('marks cue visited when use case is clicked', function () {
-        expect(markCueVisitedSpy.callCount).to.equal(0);
-        screen.getByTestId('use-case-sort').click();
-        expect(markCueVisitedSpy.callCount).to.equal(1);
-      });
-    });
-
-    it('does not show guide cue when its already shown', function () {
-      guideCueSandbox
-        .stub(guideCueHook, 'useGuideCue')
-        .returns({ isCueVisible: false, cueRefEl: React.createRef() } as any);
-      renderAggregationSidePanel();
-      expect(() =>
-        screen.getByTestId('stage-wizard-use-case-list-guide-cue')
-      ).to.throw;
-    });
-  });
 });

packages/compass-aggregations/src/components/aggregation-side-panel/index.spec.tsx

@@ -14,14 +14,12 @@ import {
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
-import { useDndMonitor } from '@dnd-kit/core';
 
 import { toggleSidePanel } from '../../modules/side-panel';
 import { STAGE_WIZARD_USE_CASES } from './stage-wizard-use-cases';
 import { FeedbackLink } from './feedback-link';
 import { addWizard } from '../../modules/pipeline-builder/stage-editor';
 import { UseCaseCard } from './stage-wizard-use-cases';
-import { useGuideCue, GuideCueStorageKeys } from '../use-guide-cue';
 
 const { track } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
 
@@ -80,13 +78,10 @@ export const AggregationSidePanel = ({
   const [searchText, setSearchText] = useState<string>('');
   const darkMode = useDarkMode();
 
-  const { cueIntersectingRef, cueRefEl, isCueVisible, markCueVisited } =
-    useGuideCue(GuideCueStorageKeys.STAGE_WIZARD_LIST);
-
   const filteredUseCases = useMemo(() => {
     return STAGE_WIZARD_USE_CASES.filter(({ title, stageOperator }) => {
       return title.includes(searchText) || stageOperator.includes(searchText);
-    });
+    }).map(({ id, title, stageOperator }) => ({ id, title, stageOperator }));
   }, [searchText]);
 
   const handleSearchTextChange = useCallback(
@@ -109,23 +104,12 @@ export const AggregationSidePanel = ({
         drag_and_drop: false,
         stage_name: useCase.stageOperator,
       });
-      markCueVisited();
     },
-    [onSelectUseCase, markCueVisited]
+    [onSelectUseCase]
   );
 
-  // Hide guide cue when use-case card is dragged from the list
-  useDndMonitor({
-    onDragStart(event) {
-      if (event.active.data.current?.type === 'use-case') {
-        markCueVisited();
-      }
-    },
-  });
-
   return (
     <KeylineCard
-      ref={cueIntersectingRef}
       data-testid="aggregation-side-panel"
       className={cx(containerStyles, darkMode && darkModeContainerStyles)}
     >
@@ -152,39 +136,37 @@ export const AggregationSidePanel = ({
         aria-label="How can we help?"
       />
       <div className={contentStyles} data-testid="side-panel-content">
-        {filteredUseCases.map((useCase, index) => (
-          <div key={index}>
-            <GuideCue
-              data-testid="stage-wizard-use-case-list-guide-cue"
-              open={isCueVisible && index === 0}
-              setOpen={markCueVisited}
-              refEl={cueRefEl}
-              numberOfSteps={1}
-              popoverZIndex={2}
-              title="Quick access to the stages"
-              tooltipJustify="end"
-              tooltipAlign="left"
-            >
-              Choose from the list and use our easy drag & drop functionality to
-              add it in the pipeline overview.
-            </GuideCue>
-            <div
-              ref={(r) => {
-                if (index === 0) {
-                  cueRefEl.current = r;
-                }
-              }}
-            >
+        {filteredUseCases.map((useCase, index) => {
+          if (index !== 0) {
+            return (
               <UseCaseCard
+                {...useCase}
                 key={useCase.id}
-                id={useCase.id}
-                title={useCase.title}
-                stageOperator={useCase.stageOperator}
                 onSelect={() => onSelect(useCase.id)}
               />
-            </div>
-          </div>
-        ))}
+            );
+          }
+
+          return (
+            <GuideCue<HTMLDivElement>
+              key={useCase.id}
+              cueId="aggregation-sidebar-wizard-use-case"
+              title="Quick access to the stages"
+              description={
+                'Choose from the list and use our easy drag & drop functionality to add it in the pipeline overview.'
+              }
+              tooltipAlign="left"
+              trigger={({ ref }) => (
+                <div ref={ref}>
+                  <UseCaseCard
+                    {...useCase}
+                    onSelect={() => onSelect(useCase.id)}
+                  />
+                </div>
+              )}
+            />
+          );
+        })}
         <FeedbackLink />
       </div>
     </KeylineCard>

packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { cleanup, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import type { SinonSandbox } from 'sinon';
 import { spy, createSandbox } from 'sinon';
-import * as guideCueHook from '../../use-guide-cue';
 
 import { PipelineExtraSettings } from './pipeline-extra-settings';
 import preferences from 'compass-preferences-model';
@@ -80,6 +79,7 @@ describe('PipelineExtraSettings', function () {
     });
     afterEach(function () {
       sandbox.restore();
+      cleanup();
     });
 
     it('calls onToggleSidePanel when clicked', function () {
@@ -105,57 +105,5 @@ describe('PipelineExtraSettings', function () {
           .getAttribute('aria-disabled')
       ).to.equal('true');
     });
-
-    context('guide cue', function () {
-      const guideCueSandbox: sinon.SinonSandbox = sinon.createSandbox();
-
-      afterEach(function () {
-        guideCueSandbox.restore();
-      });
-
-      context('shows guide cue', function () {
-        let markCueVisitedSpy: sinon.SinonSpy;
-        beforeEach(function () {
-          markCueVisitedSpy = sinon.spy();
-          guideCueSandbox.stub(guideCueHook, 'useGuideCue').returns({
-            isCueVisible: true,
-            markCueVisited: markCueVisitedSpy,
-          } as any);
-          renderPipelineExtraSettings({
-            pipelineMode: 'builder-ui',
-          });
-        });
-        it('shows guide cue first time', function () {
-          expect(screen.getByTestId('stage-wizard-guide-cue')).to.exist;
-        });
-        it('marks cue visited when stage wizard button is clicked', function () {
-          expect(markCueVisitedSpy.callCount).to.equal(0);
-          screen.getByTestId('pipeline-toolbar-side-panel-button').click();
-          expect(markCueVisitedSpy.callCount).to.equal(1);
-        });
-      });
-
-      context('does not show guide cue', function () {
-        it('when its already shown', function () {
-          guideCueSandbox
-            .stub(guideCueHook, 'useGuideCue')
-            .returns({ isCueVisible: false } as any);
-          renderPipelineExtraSettings({
-            pipelineMode: 'builder-ui',
-          });
-          expect(() => screen.getByTestId('stage-wizard-guide-cue')).to.throw;
-        });
-
-        it('in text mode', function () {
-          guideCueSandbox
-            .stub(guideCueHook, 'useGuideCue')
-            .returns({ isCueVisible: true } as any);
-          renderPipelineExtraSettings({
-            pipelineMode: 'as-text',
-          });
-          expect(() => screen.getByTestId('stage-wizard-guide-cue')).to.throw;
-        });
-      });
-    });
   });
 });