feat: remove outdated guide cues COMPASS-7396 (#5072)

* feat: remove outdated guide cues COMPASS-7396 * remove tests
mongodb-js · Nov 10, 2023 · 53ac552 · 53ac552
1 parent 196af72
commit 53ac552
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 204 deletions.
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx
@@ -10,7 +10,6 @@ import {
   spacing,
   useDarkMode,
   SearchInput,
-  GuideCue,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
@@ -158,22 +157,10 @@ export const AggregationSidePanel = ({
           }
 
           return (
-            <GuideCue<HTMLDivElement>
+            <UseCaseCard
+              {...useCase}
               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>
-              )}
+              onSelect={() => onSelect(useCase.id)}
             />
           );
         })}

diff --git a/...ggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx b/...ggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx
@@ -9,7 +9,6 @@ import {
   spacing,
   SegmentedControl,
   SegmentedControlOption,
-  GuideCue,
   Button,
 } from '@mongodb-js/compass-components';
 import { toggleSettingsIsExpanded } from '../../../modules/settings';
@@ -114,30 +113,18 @@ export const PipelineExtraSettings: React.FunctionComponent<
         </SegmentedControlOption>
       </SegmentedControl>
       {showStageWizard && (
-        <GuideCue
-          cueId="aggregation-toolbar-stage-wizard"
-          title="Stage Wizard"
-          description={
-            'You can quickly build your stages based on your needs. You should try it out.'
-          }
-          trigger={({ ref }) => (
-            <Button
-              ref={ref}
-              size="xsmall"
-              leftGlyph={<Icon glyph="Wizard" />}
-              onClick={onToggleSidePanel}
-              title="Toggle Stage Wizard"
-              aria-label="Toggle Stage Wizard"
-              data-testid="pipeline-toolbar-side-panel-button"
-              className={toggleStageWizardStyles}
-              disabled={pipelineMode === 'as-text'}
-            >
-              <span className={hiddenOnNarrowPipelineToolbarStyles}>
-                Wizard
-              </span>
-            </Button>
-          )}
-        />
+        <Button
+          size="xsmall"
+          leftGlyph={<Icon glyph="Wizard" />}
+          onClick={onToggleSidePanel}
+          title="Toggle Stage Wizard"
+          aria-label="Toggle Stage Wizard"
+          data-testid="pipeline-toolbar-side-panel-button"
+          className={toggleStageWizardStyles}
+          disabled={pipelineMode === 'as-text'}
+        >
+          <span className={hiddenOnNarrowPipelineToolbarStyles}>Wizard</span>
+        </Button>
       )}
       <IconButton
         title="More Settings"

diff --git a/packages/compass-crud/src/components/view-switcher.tsx b/packages/compass-crud/src/components/view-switcher.tsx
@@ -4,7 +4,6 @@ import {
   SegmentedControl,
   SegmentedControlOption,
   useId,
-  GuideCue,
 } from '@mongodb-js/compass-components';
 import type { DocumentView } from '../stores/crud-store';
 
@@ -16,40 +15,32 @@ type ViewSwitcherProps = {
 const ViewSwitcher = ({ activeView, onChange }: ViewSwitcherProps) => {
   const controlId = useId();
   return (
-    <GuideCue<HTMLDivElement>
-      cueId="document-view-switcher"
-      title="View your documents your preferred way"
-      description="Toggle between a list view, JSON view, and table view."
-      trigger={({ ref }) => (
-        <SegmentedControl
-          id={controlId}
-          ref={ref}
-          aria-label="View"
-          size="small"
-          value={activeView}
-          onChange={(value) => onChange(value as DocumentView)}
-        >
-          <SegmentedControlOption
-            data-testid="toolbar-view-list"
-            aria-label="Document list"
-            value="List"
-            glyph={<Icon glyph="Menu" />}
-          />
-          <SegmentedControlOption
-            data-testid="toolbar-view-json"
-            aria-label="E-JSON View"
-            value="JSON"
-            glyph={<Icon glyph="CurlyBraces" />}
-          />
-          <SegmentedControlOption
-            data-testid="toolbar-view-table"
-            aria-label="Table View"
-            value="Table"
-            glyph={<Icon glyph="Table" />}
-          />
-        </SegmentedControl>
-      )}
-    />
+    <SegmentedControl
+      id={controlId}
+      aria-label="View"
+      size="small"
+      value={activeView}
+      onChange={(value) => onChange(value as DocumentView)}
+    >
+      <SegmentedControlOption
+        data-testid="toolbar-view-list"
+        aria-label="Document list"
+        value="List"
+        glyph={<Icon glyph="Menu" />}
+      />
+      <SegmentedControlOption
+        data-testid="toolbar-view-json"
+        aria-label="E-JSON View"
+        value="JSON"
+        glyph={<Icon glyph="CurlyBraces" />}
+      />
+      <SegmentedControlOption
+        data-testid="toolbar-view-table"
+        aria-label="Table View"
+        value="Table"
+        glyph={<Icon glyph="Table" />}
+      />
+    </SegmentedControl>
   );
 };
 

diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -821,7 +821,6 @@ export const StageMoreOptionsContent = `[data-testid="stage-option-menu-content"
 export const StageDelete = `[data-testid="stage-option-menu-content"] [data-text="Delete stage"]`;
 
 // Focus Mode
-export const FocusModeGuideCue = '[data-testid="focus-mode-guide-cue"]';
 export const FocusModeModal = '[data-testid="focus-mode-modal"]';
 export const FocusModeStageInput = `${FocusModeModal} [data-testid="stage-input"]`;
 export const FocusModeStageEditor = `${FocusModeModal} [data-testid="stage-editor"]`;

diff --git a/packages/compass-query-bar/src/components/query-bar.tsx b/packages/compass-query-bar/src/components/query-bar.tsx
@@ -10,7 +10,6 @@ import {
   useDarkMode,
   Label,
   Link,
-  GuideCue,
 } from '@mongodb-js/compass-components';
 import {
   AIExperienceEntry,
@@ -269,26 +268,17 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
           )}
         </div>
         {showExplainButton && newExplainPlan && (
-          <GuideCue
-            cueId="query-bar-explain-plan"
-            title="“Explain Plan” has changed"
-            description={
-              'To view a query’s execution plan, click “Explain” as you would on an aggregation pipeline.'
-            }
-            trigger={({ ref }) => (
-              <Button
-                ref={ref}
-                aria-label="Reset query"
-                data-testid="query-bar-explain-button"
-                onClick={onExplain}
-                disabled={!isQueryValid}
-                size="small"
-                type="button"
-              >
-                Explain
-              </Button>
-            )}
-          />
+          <Button
+            aria-label="Explain query"
+            title="View the execution plan for the current query"
+            data-testid="query-bar-explain-button"
+            onClick={onExplain}
+            disabled={!isQueryValid}
+            size="small"
+            type="button"
+          >
+            Explain
+          </Button>
         )}
         <Button
           aria-label="Reset query"

diff --git a/packages/compass-shell/src/components/shell-header/shell-header.spec.tsx b/packages/compass-shell/src/components/shell-header/shell-header.spec.tsx
@@ -1,11 +1,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import {
-  Icon,
-  IconButton,
-  SpinLoader,
-  GuideCue,
-} from '@mongodb-js/compass-components';
+import { Icon, IconButton, SpinLoader } from '@mongodb-js/compass-components';
 import { expect } from 'chai';
 
 import { ShellHeader } from './shell-header';
@@ -35,12 +30,9 @@ describe('ShellHeader', function () {
       expect(wrapper.find(Icon).at(1).prop('glyph')).to.equal('ChevronDown');
     });
 
-    it('renders an info button with guide cue', function () {
-      const cue = wrapper.find(GuideCue);
-      expect(cue.exists()).to.be.true;
-
-      expect(cue.find(IconButton).exists()).to.equal(true);
-      expect(cue.find(Icon).at(0).prop('glyph')).to.equal('InfoWithCircle');
+    it('renders an info button', function () {
+      expect(wrapper.find(IconButton).exists()).to.equal(true);
+      expect(wrapper.find(Icon).at(0).prop('glyph')).to.equal('InfoWithCircle');
     });
 
     it('does not render the loader', function () {
@@ -76,10 +68,7 @@ describe('ShellHeader', function () {
     });
 
     it('renders title with guide cue', function () {
-      const cue = wrapper.find(GuideCue);
-      expect(cue.exists()).to.be.true;
-
-      expect(cue.text()).to.contain('_MONGOSH');
+      expect(wrapper.text()).to.contain('_MONGOSH');
     });
   });
 

diff --git a/packages/compass-shell/src/components/shell-header/shell-header.tsx b/packages/compass-shell/src/components/shell-header/shell-header.tsx
@@ -8,8 +8,6 @@ import {
   SpinLoader,
   withDarkMode,
   useHotkeys,
-  GuideCue,
-  Link,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -98,23 +96,8 @@ export const ShellHeader = ({
           onClick={onShellToggleClicked}
           aria-pressed={isExpanded}
         >
-          <GuideCue
-            cueId="shell-title"
-            title="Using the embedded MongoDB Shell"
-            description={
-              <>
-                Compass includes an embedded mongosh, allowing you to test
-                queries and operations in your databases.
-                <Link
-                  href="https://www.mongodb.com/docs/compass/beta/embedded-shell/#embedded-mongodb-shell"
-                  hideExternalIcon
-                >
-                  Learn more about running operations in mongosh.
-                </Link>
-              </>
-            }
-            trigger={({ ref }) => <span ref={ref}>&gt;_MONGOSH</span>}
-          />
+          <span>&gt;_MONGOSH</span>
+
           {!isExpanded && isOperationInProgress && (
             <span className={operationInProgressStyles}>
               <SpinLoader darkMode={true} />
@@ -125,24 +108,14 @@ export const ShellHeader = ({
       </div>
       <div className={shellHeaderRightStyles}>
         {isExpanded && (
-          <GuideCue
-            cueId="shell-info"
-            title="Using the embedded MongoDB Shell"
-            description={
-              'When expanded, mongosh enables you to run commands on your data. Click on the info icon to learn more about the keyboard shortcuts available to you when using mongosh.'
-            }
-            trigger={({ ref }) => (
-              <IconButton
-                ref={ref}
-                data-testid="shell-info-button"
-                aria-label="Shell Info"
-                aria-haspopup="dialog"
-                onClick={showInfoModal}
-              >
-                <Icon glyph="InfoWithCircle" size="small" />
-              </IconButton>
-            )}
-          />
+          <IconButton
+            data-testid="shell-info-button"
+            aria-label="Shell Info"
+            aria-haspopup="dialog"
+            onClick={showInfoModal}
+          >
+            <Icon glyph="InfoWithCircle" size="small" />
+          </IconButton>
         )}
         <IconButton
           aria-label={isExpanded ? 'Close Shell' : 'Open Shell'}

diff --git a/packages/compass-sidebar/src/components/navigation-items.spec.tsx b/packages/compass-sidebar/src/components/navigation-items.spec.tsx
@@ -22,7 +22,6 @@ function renderNavigationItems(
           /* noop */
         }}
         currentLocation={null}
-        showCreateDatabaseGuideCue={false}
         {...props}
       />
     </Provider>
@@ -43,17 +42,6 @@ describe('NavigationItems [Component]', function () {
       renderNavigationItems();
       expect(screen.getByLabelText(refreshCTAText)).to.be.visible;
     });
-
-    it('shows guide cue when no databases are created', async function () {
-      renderNavigationItems({
-        showCreateDatabaseGuideCue: true,
-      });
-
-      await screen.findByRole('dialog', undefined, {
-        timeout: 2000,
-      });
-      expect(screen.getByText('It looks a bit empty around here')).to.exist;
-    });
   });
 
   describe('when rendered read only', function () {
@@ -63,13 +51,5 @@ describe('NavigationItems [Component]', function () {
       });
       expect(screen.queryByLabelText(createDatabaseText)).to.not.exist;
     });
-
-    it('does not show guide cue when no databases are created', function () {
-      renderNavigationItems({
-        readOnly: true,
-        showCreateDatabaseGuideCue: true,
-      });
-      expect(() => screen.getByRole('dialog')).to.throw;
-    });
   });
 });