chore(schema): add tooltip showing folks the export button when they legacy export schema COMPASS-8971

packages/compass-schema/src/components/compass-schema.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { Schema as MongodbSchema } from 'mongodb-schema';
 import { connect } from 'react-redux';
 import type { AnalysisState } from '../constants/analysis-states';
@@ -7,11 +7,9 @@ import {
   ANALYSIS_STATE_ANALYZING,
   ANALYSIS_STATE_COMPLETE,
 } from '../constants/analysis-states';
-
-import { SchemaToolbar } from './schema-toolbar/schema-toolbar';
+import SchemaToolbar from './schema-toolbar';
 import Field from './field';
 import { ZeroGraphic } from './zero-graphic';
-
 import {
   Button,
   CancelLoader,
@@ -36,15 +34,10 @@ import { getAtlasPerformanceAdvisorLink } from '../utils';
 import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { RootState } from '../stores/store';
-import {
-  analysisErrorDismissed,
-  type SchemaAnalysisError,
-  startAnalysis,
-  stopAnalysis,
-} from '../stores/schema-analysis-reducer';
+import { startAnalysis, stopAnalysis } from '../stores/schema-analysis-reducer';
 import { openExportSchema } from '../stores/schema-export-reducer';
 import ExportSchemaModal from './export-schema-modal';
-import ExportSchemaLegacyBanner from './export-schema-legacy-banner';
+import ExportSchemaLegacyModal from './export-schema-legacy-modal';
 
 const rootStyles = css({
   width: '100%',
@@ -376,29 +369,23 @@ const PerformanceAdvisorBanner = () => {
 
 const Schema: React.FunctionComponent<{
   analysisState: AnalysisState;
-  error?: SchemaAnalysisError;
-  maxTimeMS?: number;
+  isExportSchemaModalOpen: boolean;
   schema: MongodbSchema | null;
-  count?: number;
-  resultId?: string;
-  onExportSchemaClicked: () => void;
   onStartAnalysis: () => Promise<void>;
   onStopAnalysis: () => void;
-  onDismissError: () => void;
 }> = ({
   analysisState,
-  error,
+  isExportSchemaModalOpen,
   schema,
-  resultId,
-  onExportSchemaClicked,
   onStartAnalysis,
   onStopAnalysis,
-  onDismissError,
 }) => {
   const onApplyClicked = useCallback(() => {
     void onStartAnalysis();
   }, [onStartAnalysis]);
 
+  const [showLegacyExportTooltip, setShowLegacyExportTooltip] = useState(false);
+
   const outdated = useIsLastAppliedQueryOutdated('schema');
 
   const enablePerformanceAdvisorBanner = usePreference(
@@ -414,14 +401,14 @@ const Schema: React.FunctionComponent<{
           toolbar={
             <SchemaToolbar
               onAnalyzeSchemaClicked={onApplyClicked}
-              onExportSchemaClicked={onExportSchemaClicked}
               onResetClicked={onApplyClicked}
-              analysisState={analysisState}
-              error={error}
-              onDismissError={onDismissError}
+              // Show the tooltip to indicate the new export button when
+              // the export modal is closed.
+              showLegacyExportTooltip={
+                showLegacyExportTooltip && !isExportSchemaModalOpen
+              }
+              setShowLegacyExportTooltip={setShowLegacyExportTooltip}
               isOutdated={!!outdated}
-              sampleSize={schema ? schema.count : 0}
-              schemaResultId={resultId || ''}
             />
           }
         >
@@ -440,22 +427,24 @@ const Schema: React.FunctionComponent<{
         </WorkspaceContainer>
       </div>
       {enableExportSchema && <ExportSchemaModal />}
-      {enableExportSchema && <ExportSchemaLegacyBanner />}
+      {enableExportSchema && (
+        <ExportSchemaLegacyModal
+          setShowLegacyExportTooltip={setShowLegacyExportTooltip}
+        />
+      )}
     </>
   );
 };
 
 export default connect(
   (state: RootState) => ({
     analysisState: state.schemaAnalysis.analysisState,
-    error: state.schemaAnalysis.error,
+    isExportSchemaModalOpen: state.schemaExport.isOpen,
     schema: state.schemaAnalysis.schema,
-    resultId: state.schemaAnalysis.resultId,
   }),
   {
     onStartAnalysis: startAnalysis,
     onStopAnalysis: () => stopAnalysis(),
     onExportSchemaClicked: openExportSchema,
-    onDismissError: analysisErrorDismissed,
   }
 )(Schema);

packages/compass-schema/src/components/export-schema-legacy-banner.tsx → packages/compass-schema/src/components/export-schema-legacy-modal.tsx

@@ -16,7 +16,7 @@ import {
   confirmedExportLegacySchemaToClipboard,
   switchToSchemaExport,
   SchemaExportActions,
-  stopShowingLegacyBanner,
+  stopShowingLegacyModal,
 } from '../stores/schema-export-reducer';
 
 const SchemaExportSVG = () => (
@@ -463,28 +463,42 @@ const optionHeaderStyles = css({
   margin: '0px',
 });
 
-const ExportSchemaLegacyBanner: React.FunctionComponent<{
+const ExportSchemaLegacyModal: React.FunctionComponent<{
   isOpen: boolean;
   onClose: () => void;
   onLegacyShare: () => void;
   onSwitchToSchemaExport: () => void;
-  stopShowingLegacyBanner: (choice: 'legacy' | 'export') => void;
+  setShowLegacyExportTooltip: (show: boolean) => void;
+  stopShowingLegacyModal: (choice: 'legacy' | 'export') => void;
 }> = ({
   isOpen,
   onClose,
   onLegacyShare,
   onSwitchToSchemaExport,
-  stopShowingLegacyBanner,
+  setShowLegacyExportTooltip,
+  stopShowingLegacyModal,
 }) => {
   const [dontShowAgainChecked, setDontShowAgainChecked] = useState(false);
   const handleLegacyShare = useCallback(() => {
-    if (dontShowAgainChecked) stopShowingLegacyBanner('legacy');
+    if (dontShowAgainChecked) stopShowingLegacyModal('legacy');
     onLegacyShare();
-  }, [onLegacyShare, dontShowAgainChecked, stopShowingLegacyBanner]);
+    setShowLegacyExportTooltip(true);
+  }, [
+    onLegacyShare,
+    dontShowAgainChecked,
+    stopShowingLegacyModal,
+    setShowLegacyExportTooltip,
+  ]);
   const handleSwitchToNew = useCallback(() => {
-    if (dontShowAgainChecked) stopShowingLegacyBanner('export');
+    if (dontShowAgainChecked) stopShowingLegacyModal('export');
+    setShowLegacyExportTooltip(true);
     onSwitchToSchemaExport();
-  }, [onSwitchToSchemaExport, dontShowAgainChecked, stopShowingLegacyBanner]);
+  }, [
+    onSwitchToSchemaExport,
+    dontShowAgainChecked,
+    stopShowingLegacyModal,
+    setShowLegacyExportTooltip,
+  ]);
   return (
     <Modal open={isOpen} setOpen={onClose} contentClassName={containerStyles}>
       <ModalHeader
@@ -535,13 +549,13 @@ const ExportSchemaLegacyBanner: React.FunctionComponent<{
 
 export default connect(
   (state: RootState) => ({
-    isOpen: state.schemaExport.isLegacyBannerOpen,
+    isOpen: state.schemaExport.isLegacyModalOpen,
   }),
   (dispatch: SchemaThunkDispatch) => ({
-    onClose: () => dispatch({ type: SchemaExportActions.closeLegacyBanner }),
+    onClose: () => dispatch({ type: SchemaExportActions.closeLegacyModal }),
     onLegacyShare: () => dispatch(confirmedExportLegacySchemaToClipboard()),
     onSwitchToSchemaExport: () => dispatch(switchToSchemaExport()),
-    stopShowingLegacyBanner: (choice: 'legacy' | 'export') =>
-      dispatch(stopShowingLegacyBanner(choice)),
+    stopShowingLegacyModal: (choice: 'legacy' | 'export') =>
+      dispatch(stopShowingLegacyModal(choice)),
   })
-)(ExportSchemaLegacyBanner);
+)(ExportSchemaLegacyModal);

packages/compass-schema/src/components/schema-toolbar/schema-toolbar.spec.tsx → packages/compass-schema/src/components/schema-toolbar.spec.tsx

@@ -47,6 +47,8 @@ describe('SchemaToolbar', function () {
           sampleSize={10}
           schemaResultId="123"
           onExportSchemaClicked={() => {}}
+          setShowLegacyExportTooltip={() => {}}
+          showLegacyExportTooltip={false}
           onDismissError={() => {}}
           {...props}
         />

packages/compass-schema/src/components/schema-toolbar/schema-toolbar.tsx → packages/compass-schema/src/components/schema-toolbar.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { connect } from 'react-redux';
 import {
   Banner,
   BannerVariant,
@@ -7,16 +8,22 @@ import {
   ErrorSummary,
   Icon,
   Link,
+  Tooltip,
   WarningSummary,
   css,
   spacing,
 } from '@mongodb-js/compass-components';
 import { usePreference } from 'compass-preferences-model/provider';
-import type { AnalysisState } from '../../constants/analysis-states';
-import { ANALYSIS_STATE_COMPLETE } from '../../constants/analysis-states';
+import type { AnalysisState } from '../constants/analysis-states';
+import { ANALYSIS_STATE_COMPLETE } from '../constants/analysis-states';
 import { QueryBar } from '@mongodb-js/compass-query-bar';
-import { type SchemaAnalysisError } from '../../stores/schema-analysis-reducer';
-import { DISTINCT_FIELDS_ABORT_THRESHOLD } from '../../modules/schema-analysis';
+import {
+  type SchemaAnalysisError,
+  analysisErrorDismissed,
+} from '../stores/schema-analysis-reducer';
+import { DISTINCT_FIELDS_ABORT_THRESHOLD } from '../modules/schema-analysis';
+import type { RootState } from '../stores/store';
+import { openExportSchema } from '../stores/schema-export-reducer';
 
 const schemaToolbarStyles = css({
   display: 'flex',
@@ -68,9 +75,11 @@ type SchemaToolbarProps = {
   onDismissError: () => void;
   sampleSize: number;
   schemaResultId: string;
+  setShowLegacyExportTooltip: (show: boolean) => void;
+  showLegacyExportTooltip: boolean;
 };
 
-const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
+export const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   analysisState,
   error,
   onDismissError,
@@ -80,6 +89,8 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   onResetClicked,
   sampleSize,
   schemaResultId,
+  setShowLegacyExportTooltip,
+  showLegacyExportTooltip,
 }) => {
   const documentsNoun = useMemo(
     () => (sampleSize === 1 ? 'document' : 'documents'),
@@ -103,15 +114,26 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
         <div className={schemaToolbarActionBarStyles}>
           {enableExportSchema && ANALYSIS_STATE_COMPLETE && (
             <div>
-              <Button
-                variant="default"
-                onClick={onExportSchemaClicked}
-                data-testid="open-schema-export-button"
-                size="xsmall"
-                leftGlyph={<Icon glyph="Export" />}
+              <Tooltip
+                id="export-schema-tooltip"
+                open={showLegacyExportTooltip}
+                onClose={() => setShowLegacyExportTooltip(false)}
+                triggerEvent="click"
+                trigger={
+                  <Button
+                    variant="default"
+                    onClick={onExportSchemaClicked}
+                    data-testid="open-schema-export-button"
+                    size="xsmall"
+                    leftGlyph={<Icon glyph="Export" />}
+                  >
+                    Export Schema
+                  </Button>
+                }
               >
-                Export Schema
-              </Button>
+                Next time, export the schema directly from Compass&apos; Schema
+                tab.
+              </Tooltip>
             </div>
           )}
           <div
@@ -171,4 +193,15 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   );
 };
 
-export { SchemaToolbar };
+export default connect(
+  (state: RootState) => ({
+    analysisState: state.schemaAnalysis.analysisState,
+    error: state.schemaAnalysis.error,
+    sampleSize: state.schemaAnalysis.schema?.count ?? 0,
+    schemaResultId: state.schemaAnalysis.resultId ?? '',
+  }),
+  {
+    onExportSchemaClicked: openExportSchema,
+    onDismissError: analysisErrorDismissed,
+  }
+)(SchemaToolbar);