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

Anemy · Anemy · commit fb0d0fa9e53e · 2025-02-24T12:42:46.000-05:00
diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/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,
@@ -39,7 +37,7 @@ import type { RootState } from '../stores/store';
 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%',
@@ -371,27 +369,16 @@ const PerformanceAdvisorBanner = () => {
 
 const Schema: React.FunctionComponent<{
   analysisState: AnalysisState;
-  errorMessage?: string;
-  maxTimeMS?: number;
   schema: MongodbSchema | null;
-  count?: number;
-  resultId?: string;
-  onExportSchemaClicked: () => void;
   onStartAnalysis: () => Promise<void>;
   onStopAnalysis: () => void;
-}> = ({
-  analysisState,
-  errorMessage,
-  schema,
-  resultId,
-  onExportSchemaClicked,
-  onStartAnalysis,
-  onStopAnalysis,
-}) => {
+}> = ({ analysisState, schema, onStartAnalysis, onStopAnalysis }) => {
   const onApplyClicked = useCallback(() => {
     void onStartAnalysis();
   }, [onStartAnalysis]);
 
+  const [showLegacyExportTooltip, setShowLegacyExportTooltip] = useState(false);
+
   const outdated = useIsLastAppliedQueryOutdated('schema');
 
   const enablePerformanceAdvisorBanner = usePreference(
@@ -407,13 +394,10 @@ const Schema: React.FunctionComponent<{
           toolbar={
             <SchemaToolbar
               onAnalyzeSchemaClicked={onApplyClicked}
-              onExportSchemaClicked={onExportSchemaClicked}
               onResetClicked={onApplyClicked}
-              analysisState={analysisState}
-              errorMessage={errorMessage || ''}
+              showLegacyExportTooltip={showLegacyExportTooltip}
+              setShowLegacyExportTooltip={setShowLegacyExportTooltip}
               isOutdated={!!outdated}
-              sampleSize={schema ? schema.count : 0}
-              schemaResultId={resultId || ''}
             />
           }
         >
@@ -432,17 +416,19 @@ const Schema: React.FunctionComponent<{
         </WorkspaceContainer>
       </div>
       {enableExportSchema && <ExportSchemaModal />}
-      {enableExportSchema && <ExportSchemaLegacyBanner />}
+      {enableExportSchema && (
+        <ExportSchemaLegacyModal
+          setShowLegacyExportTooltip={setShowLegacyExportTooltip}
+        />
+      )}
     </>
   );
 };
 
 export default connect(
   (state: RootState) => ({
     analysisState: state.schemaAnalysis.analysisState,
-    errorMessage: state.schemaAnalysis.errorMessage,
     schema: state.schemaAnalysis.schema,
-    resultId: state.schemaAnalysis.resultId,
   }),
   {
     onStartAnalysis: startAnalysis,
diff --git a/packages/compass-schema/src/components/export-schema-legacy-modal.tsx b/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,31 @@ 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]);
   const handleSwitchToNew = useCallback(() => {
-    if (dontShowAgainChecked) stopShowingLegacyBanner('export');
+    if (dontShowAgainChecked) stopShowingLegacyModal('export');
     onSwitchToSchemaExport();
-  }, [onSwitchToSchemaExport, dontShowAgainChecked, stopShowingLegacyBanner]);
+  }, [onSwitchToSchemaExport, dontShowAgainChecked, stopShowingLegacyModal]);
   return (
     <Modal open={isOpen} setOpen={onClose} contentClassName={containerStyles}>
       <ModalHeader
@@ -535,13 +538,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);
diff --git a/packages/compass-schema/src/components/schema-toolbar.spec.tsx b/packages/compass-schema/src/components/schema-toolbar.spec.tsx
@@ -47,6 +47,8 @@ describe('SchemaToolbar', function () {
           sampleSize={10}
           schemaResultId="123"
           onExportSchemaClicked={() => {}}
+          setShowLegacyExportTooltip={() => {}}
+          showLegacyExportTooltip={false}
           {...props}
         />
       </MockQueryBarPlugin>,
diff --git a/packages/compass-schema/src/components/schema-toolbar.tsx b/packages/compass-schema/src/components/schema-toolbar.tsx
@@ -1,22 +1,26 @@
 import React, { useMemo } from 'react';
+import { connect } from 'react-redux';
 import {
   Body,
   Button,
   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 type { AnalysisState } from '../constants/analysis-states';
 import {
   ANALYSIS_STATE_ERROR,
   ANALYSIS_STATE_TIMEOUT,
   ANALYSIS_STATE_COMPLETE,
-} from '../../constants/analysis-states';
+} from '../constants/analysis-states';
 import { QueryBar } from '@mongodb-js/compass-query-bar';
+import type { RootState } from '../stores/store';
+import { openExportSchema } from '../stores/schema-export-reducer';
 
 const schemaToolbarStyles = css({
   display: 'flex',
@@ -67,9 +71,11 @@ type SchemaToolbarProps = {
   onResetClicked: () => void;
   sampleSize: number;
   schemaResultId: string;
+  setShowLegacyExportTooltip: (show: boolean) => void;
+  showLegacyExportTooltip: boolean;
 };
 
-const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
+export const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   analysisState,
   errorMessage,
   isOutdated,
@@ -78,6 +84,8 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   onResetClicked,
   sampleSize,
   schemaResultId,
+  setShowLegacyExportTooltip,
+  showLegacyExportTooltip,
 }) => {
   const documentsNoun = useMemo(
     () => (sampleSize === 1 ? 'document' : 'documents'),
@@ -101,15 +109,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
@@ -146,4 +165,14 @@ const SchemaToolbar: React.FunctionComponent<SchemaToolbarProps> = ({
   );
 };
 
-export { SchemaToolbar };
+export default connect(
+  (state: RootState) => ({
+    analysisState: state.schemaAnalysis.analysisState,
+    errorMessage: state.schemaAnalysis.errorMessage,
+    sampleSize: state.schemaAnalysis.schema?.count ?? 0,
+    schemaResultId: state.schemaAnalysis.resultId ?? '',
+  }),
+  {
+    onExportSchemaClicked: openExportSchema,
+  }
+)(SchemaToolbar);
diff --git a/packages/compass-schema/src/stores/schema-export-reducer.ts b/packages/compass-schema/src/stores/schema-export-reducer.ts
diff --git a/packages/compass-schema/src/stores/store.ts b/packages/compass-schema/src/stores/store.ts
