feat(compass-aggregation): adds a search input for filtering use cases in aggregation sidepanel - COMPASS-6665 (#4344)

himanshusinghs · web-flow · commit a0bba81f1be9 · 2023-05-09T09:39:14.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/index.spec.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/index.spec.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import { AggregationSidePanel } from './index';
-import { render, screen } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 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';
 
 const renderAggregationSidePanel = (
   props: Partial<ComponentProps<typeof AggregationSidePanel>> = {}
@@ -22,26 +24,78 @@ const renderAggregationSidePanel = (
 };
 
 describe('aggregation side panel', function () {
+  afterEach(cleanup);
+
   describe('header', function () {
     it('renders title', function () {
       renderAggregationSidePanel();
       expect(screen.getByText('Stage Wizard')).to.exist;
     });
+
     it('renders close button', function () {
       renderAggregationSidePanel();
       expect(screen.getByLabelText('Hide Side Panel')).to.exist;
     });
+
     it('calls onCloseSidePanel when close button is clicked', function () {
       const onCloseSidePanel = sinon.spy();
       renderAggregationSidePanel({ onCloseSidePanel });
       screen.getByLabelText('Hide Side Panel').click();
       expect(onCloseSidePanel).to.have.been.calledOnce;
     });
-    it('calls onSelectUseCase when a use case is clicked', function () {
-      const onSelectUseCase = sinon.spy();
-      renderAggregationSidePanel({ onSelectUseCase });
-      screen.getByTestId('use-case-sort').click();
-      expect(onSelectUseCase).to.have.been.calledOnceWith('sort', '$sort');
-    });
+  });
+
+  it('renders a search input', function () {
+    renderAggregationSidePanel();
+    expect(screen.getByRole('search')).to.not.throw;
+  });
+
+  it('renders all the usecases', function () {
+    renderAggregationSidePanel();
+    expect(
+      screen
+        .getByTestId('side-panel-content')
+        .querySelectorAll('[data-testid^="use-case-"]')
+    ).to.have.lengthOf(STAGE_WIZARD_USE_CASES.length);
+  });
+
+  it('renders usecases filtered by search text matching the title of the usecases', function () {
+    renderAggregationSidePanel();
+    const searchBox = screen.getByPlaceholderText(/How can we help\?/i);
+    userEvent.type(searchBox, 'Sort');
+    expect(
+      screen
+        .getByTestId('side-panel-content')
+        .querySelectorAll('[data-testid^="use-case-"]')
+    ).to.have.lengthOf(1);
+    expect(screen.getByTestId('use-case-sort')).to.not.throw;
+  });
+
+  it('renders usecases filtered by search text matching the stage operator of the usecases', function () {
+    renderAggregationSidePanel();
+    const searchBox = screen.getByPlaceholderText(/How can we help\?/i);
+    userEvent.type(searchBox, 'lookup');
+    expect(
+      screen
+        .getByTestId('side-panel-content')
+        .querySelectorAll('[data-testid^="use-case-"]')
+    ).to.have.lengthOf(1);
+    expect(screen.getByTestId('use-case-lookup')).to.not.throw;
+
+    userEvent.clear(searchBox);
+    userEvent.type(searchBox, '$lookup');
+    expect(
+      screen
+        .getByTestId('side-panel-content')
+        .querySelectorAll('[data-testid^="use-case-"]')
+    ).to.have.lengthOf(1);
+    expect(screen.getByTestId('use-case-lookup')).to.not.throw;
+  });
+
+  it('calls onSelectUseCase when a use case is clicked', function () {
+    const onSelectUseCase = sinon.spy();
+    renderAggregationSidePanel({ onSelectUseCase });
+    screen.getByTestId('use-case-sort').click();
+    expect(onSelectUseCase).to.have.been.calledOnceWith('sort', '$sort');
   });
 });
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Body,
   css,
@@ -9,14 +9,17 @@ import {
   palette,
   spacing,
   useDarkMode,
+  SearchInput,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+
 import { toggleSidePanel } from '../../modules/side-panel';
-import { STAGE_WIZARD_USE_CASES, UseCaseList } from './stage-wizard-use-cases';
+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 { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 const { track } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
 
 const containerStyles = css({
@@ -71,8 +74,24 @@ export const AggregationSidePanel = ({
   onCloseSidePanel,
   onSelectUseCase,
 }: AggregationSidePanelProps) => {
+  const [searchText, setSearchText] = useState<string>('');
   const darkMode = useDarkMode();
 
+  const filteredUseCases = useMemo(() => {
+    return STAGE_WIZARD_USE_CASES.filter(({ title, stageOperator }) => {
+      const escapedSearchText = searchText.replace('$', '\\$');
+      const matchRegex = new RegExp(escapedSearchText, 'gi');
+      return title.match(matchRegex) || stageOperator.match(matchRegex);
+    });
+  }, [searchText]);
+
+  const handleSearchTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchText(e.target.value);
+    },
+    [setSearchText]
+  );
+
   const onSelect = useCallback(
     (id: string) => {
       const useCase = STAGE_WIZARD_USE_CASES.find(
@@ -86,7 +105,7 @@ export const AggregationSidePanel = ({
         drag_and_drop: false,
       });
     },
-    [track]
+    [onSelectUseCase]
   );
 
   return (
@@ -110,8 +129,22 @@ export const AggregationSidePanel = ({
           <Icon glyph="X" />
         </IconButton>
       </div>
-      <div className={contentStyles}>
-        <UseCaseList onSelect={onSelect} />
+      <SearchInput
+        value={searchText}
+        onChange={handleSearchTextChange}
+        placeholder="How can we help?"
+        aria-label="How can we help?"
+      />
+      <div className={contentStyles} data-testid="side-panel-content">
+        {filteredUseCases.map((useCase) => (
+          <UseCaseCard
+            key={useCase.id}
+            id={useCase.id}
+            title={useCase.title}
+            stageOperator={useCase.stageOperator}
+            onSelect={() => onSelect(useCase.id)}
+          />
+        ))}
         <FeedbackLink />
       </div>
     </KeylineCard>
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/index.ts b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/index.ts
@@ -1,4 +1,4 @@
-import UseCaseList from './use-case-list';
+import UseCaseCard from './use-case-card';
 import SortUseCase from './sort/sort';
 import LookupUseCase from './lookup/lookup';
 import ProjectUseCase from './project/project';
@@ -73,4 +73,4 @@ export const STAGE_WIZARD_USE_CASES: StageWizardUseCase[] = [
   },
 ];
 
-export { UseCaseList };
+export { UseCaseCard };
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.spec.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Sinon from 'sinon';
+import { expect } from 'chai';
+import UseCaseCard from './use-case-card';
+import { STAGE_WIZARD_USE_CASES } from '.';
+
+describe('UseCaseCard', function () {
+  afterEach(cleanup);
+
+  it('should render a card for provided usecase', function () {
+    const useCase = STAGE_WIZARD_USE_CASES[0];
+    render(
+      <UseCaseCard
+        id={useCase.id}
+        title={useCase.title}
+        stageOperator={useCase.stageOperator}
+        onSelect={Sinon.spy()}
+      />
+    );
+    expect(screen.getByTestId(`use-case-${useCase.id}`)).to.not.throw;
+  });
+
+  it('should call onSelect when a usecase is selected', function () {
+    const onSelectSpy = Sinon.spy();
+    const useCase = STAGE_WIZARD_USE_CASES[0];
+    render(
+      <UseCaseCard
+        id={useCase.id}
+        title={useCase.title}
+        stageOperator={useCase.stageOperator}
+        onSelect={onSelectSpy}
+      />
+    );
+    userEvent.click(screen.getByTestId(`use-case-${useCase.id}`));
+    expect(onSelectSpy).to.be.called;
+  });
+});
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  KeylineCard,
+  Body,
+  Link,
+  css,
+  spacing,
+} from '@mongodb-js/compass-components';
+
+import { getStageHelpLink } from '../../../utils/stage';
+import type { StageWizardUseCase } from '.';
+
+const cardStyles = css({
+  cursor: 'pointer',
+  padding: spacing[3],
+});
+
+const cardTitleStyles = css({
+  display: 'inline',
+  marginRight: spacing[2],
+});
+
+type UseCaseCardProps = {
+  onSelect: () => void;
+} & Pick<StageWizardUseCase, 'id' | 'title' | 'stageOperator'>;
+
+const UseCaseCard = ({
+  id,
+  title,
+  stageOperator,
+  onSelect,
+}: UseCaseCardProps) => {
+  return (
+    <KeylineCard
+      data-testid={`use-case-${id}`}
+      onClick={onSelect}
+      className={cardStyles}
+    >
+      <Body className={cardTitleStyles}>{title}</Body>
+      <Link target="_blank" href={getStageHelpLink(stageOperator) as string}>
+        {stageOperator}
+      </Link>
+    </KeylineCard>
+  );
+};
+
+export default UseCaseCard;
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-list.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-list.tsx
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
@@ -70,6 +70,7 @@
     "@leafygreen-ui/tokens": "^1.4.1",
     "@leafygreen-ui/tooltip": "^9.0.2",
     "@leafygreen-ui/typography": "^15.2.0",
+    "@leafygreen-ui/search-input": "^2.0.3",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/tooltip": "^3.2.1",
     "@react-aria/utils": "^3.13.1",
diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
@@ -48,6 +48,7 @@ import {
 import { Tabs, Tab } from '@leafygreen-ui/tabs';
 import TextArea from '@leafygreen-ui/text-area';
 import TextInput from '@leafygreen-ui/text-input';
+import { SearchInput } from '@leafygreen-ui/search-input';
 import {
   default as Toast,
   Variant as ToastVariant,
@@ -147,4 +148,5 @@ export {
   Label,
   Link,
   Description,
+  SearchInput,
 };
