feat(focus-mode): show guide cue COMPASS-6497 (#4043)

Author: mabaasit

package-lock.json

@@ -95,7 +95,8 @@
     "rimraf": "^3.0.0",
     "semver": "^5.7.1",
     "sinon": "^9.2.3",
-    "xvfb-maybe": "^0.2.1"
+    "xvfb-maybe": "^0.2.1",
+    "react-intersection-observer": "^8.34.0"
   },
   "dependencies": {
     "@mongodb-js/compass-components": "^1.5.0",

packages/compass-aggregations/package.json

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { css, spacing, Link } from '@mongodb-js/compass-components';
+import { type AceEditor } from '@mongodb-js/compass-editor';
 
 import StageEditor from '../stage-editor/stage-editor';
 import { getStageHelpLink } from '../../utils/stage';
@@ -37,21 +38,26 @@ export const FocusModeStageEditor = ({
   index: number;
   operator: string | null;
 }) => {
+  const editorRef = useRef<AceEditor | undefined>(undefined);
   if (index === -1) {
     return null;
   }
   const link = getStageHelpLink(operator) || PIPELINE_HELP_URI;
   return (
     <div className={containerStyles}>
       <div className={headerStyles}>
-        <StageOperatorSelect index={index} />
+        <StageOperatorSelect editorRef={editorRef} index={index} />
         <Link hideExternalIcon={false} href={link} target="_blank">
           Open docs
         </Link>
       </div>
       <div className={editorStyles}>
-        {/* @ts-expect-error requires stage-editor.jsx to be converted */}
-        <StageEditor index={index} />
+        <StageEditor
+          onLoad={(editor) => {
+            editorRef.current = editor;
+          }}
+          index={index}
+        />
       </div>
     </div>
   );

packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx

@@ -16,7 +16,7 @@ const loadingOverlayStyles = css({
   left: 0,
   bottom: 0,
   right: 0,
-  zIndex: 1000,
+  zIndex: 1,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

packages/compass-aggregations/src/components/loading-overlay/loading-overlay.tsx

@@ -29,6 +29,6 @@ describe('StageEditor [Component]', function () {
   });
 
   it('renders the wrapper div', function () {
-    expect(component.find('UnthemedStageEditor')).to.be.present();
+    expect(component.find('StageEditor')).to.be.present();
   });
 });

packages/compass-aggregations/src/components/stage-editor/stage-editor.spec.jsx

@@ -19,7 +19,7 @@ import {
   spacing,
   palette,
   Banner,
-  withDarkMode,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import { changeStageValue } from '../../modules/pipeline-builder/stage-editor';
 import { mapPipelineModeToEditorViewType } from '../../modules/pipeline-builder/builder-helpers';
@@ -66,7 +66,6 @@ const bannerStyles = css({
 });
 
 type StageEditorProps = {
-  darkMode?: boolean;
   index: number;
   stageOperator: string | null;
   stageValue: string | null;
@@ -76,8 +75,9 @@ type StageEditorProps = {
   serverError: MongoServerError | null;
   num_stages: number;
   editor_view_type: string;
-  className: string;
+  className?: string;
   onChange: (index: number, value: string) => void;
+  onLoad?: (editor: AceEditor) => void;
 };
 
 function useStageCompleter(
@@ -99,20 +99,21 @@ function useStageCompleter(
   return completer.current;
 }
 
-const UnthemedStageEditor = ({
+export const StageEditor = ({
   stageValue,
   stageOperator,
   index,
   onChange,
   serverError,
   syntaxError,
-  darkMode,
   className,
   autocompleteFields,
   serverVersion,
   num_stages,
   editor_view_type,
+  onLoad,
 }: StageEditorProps) => {
+  const darkMode = useDarkMode();
   const editorInitialValueRef = useRef<string | null>(stageValue);
   const editorRef = useRef<AceEditor | undefined>(undefined);
   const completer = useStageCompleter(
@@ -122,10 +123,6 @@ const UnthemedStageEditor = ({
     stageOperator
   );
 
-  useEffect(() => {
-    editorRef.current?.focus();
-  }, [stageOperator]);
-
   useEffect(() => {
     let annotations: AceAnnotation[] = [];
     if (syntaxError && syntaxError.loc) {
@@ -182,6 +179,7 @@ const UnthemedStageEditor = ({
           completer={completer}
           onLoad={(editor) => {
             editorRef.current = editor;
+            onLoad?.(editor);
           }}
           onBlur={onBlurEditor}
         />
@@ -214,9 +212,6 @@ const UnthemedStageEditor = ({
   );
 };
 
-// exported for tests
-export const StageEditor = withDarkMode(UnthemedStageEditor);
-
 export default connect(
   (state: RootState, ownProps: { index: number }) => {
     const stages = state.pipelineBuilder.stageEditor.stages;

packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx

@@ -21,13 +21,15 @@ const renderStageToolbar = (
       })}
     >
       <StageToolbar
+        onFocusModeClicked={() => {}}
         hasServerError={false}
         hasSyntaxError={false}
         index={0}
         isAutoPreviewing={false}
         isCollapsed={false}
         isDisabled={false}
-        onFocusModeEnableClick={() => {}}
+        onOpenFocusMode={() => {}}
+        editorRef={React.createRef()}
         {...props}
       />
     </Provider>

packages/compass-aggregations/src/components/stage-toolbar/index.spec.tsx

@@ -10,7 +10,8 @@ import {
   useDarkMode,
   IconButton,
 } from '@mongodb-js/compass-components';
-import type { RootState } from '../../modules';
+import type { PipelineBuilderThunkDispatch, RootState } from '../../modules';
+import { type AceEditor } from '@mongodb-js/compass-editor';
 import ToggleStage from './toggle-stage';
 import StageCollapser from './stage-collapser';
 import StageOperatorSelect from './stage-operator-select';
@@ -90,7 +91,9 @@ type StageToolbarProps = {
   hasServerError?: boolean;
   isCollapsed?: boolean;
   isDisabled?: boolean;
-  onFocusModeEnableClick: (index: number) => void;
+  onFocusModeClicked: () => void;
+  onOpenFocusMode: () => void;
+  editorRef: React.RefObject<AceEditor | undefined>;
 };
 
 const DISABLED_TEXT = 'Stage disabled. Results not passed in the pipeline.';
@@ -103,7 +106,8 @@ export function StageToolbar({
   hasServerError,
   isCollapsed,
   isDisabled,
-  onFocusModeEnableClick,
+  onOpenFocusMode,
+  editorRef,
 }: StageToolbarProps) {
   const darkMode = useDarkMode();
   const showFocusMode = usePreference('showFocusMode', React);
@@ -123,7 +127,7 @@ export function StageToolbar({
         <StageCollapser index={index} />
         <Body weight="medium">Stage {index + 1}</Body>
         <div className={selectStyles}>
-          <StageOperatorSelect index={index} />
+          <StageOperatorSelect editorRef={editorRef} index={index} />
         </div>
         <ToggleStage index={index} />
       </div>
@@ -133,9 +137,10 @@ export function StageToolbar({
       <div className={rightStyles}>
         {showFocusMode && (
           <IconButton
-            onClick={() => onFocusModeEnableClick(index)}
+            onClick={onOpenFocusMode}
             aria-label="Open stage in focus mode"
             data-testid="focus-mode-button"
+            data-guide-cue-ref="focus-mode-button"
           >
             <Icon glyph="FullScreenEnter" size="small"></Icon>
           </IconButton>
@@ -146,8 +151,13 @@ export function StageToolbar({
   );
 }
 
+type StageToolbarOwnProps = Pick<
+  StageToolbarProps,
+  'index' | 'onFocusModeClicked'
+>;
+
 export default connect(
-  (state: RootState, ownProps: { index: number }) => {
+  (state: RootState, ownProps: StageToolbarOwnProps) => {
     const stage = state.pipelineBuilder.stageEditor.stages[ownProps.index];
     return {
       isAutoPreviewing: !!state.autoPreview,
@@ -157,5 +167,10 @@ export default connect(
       isDisabled: stage.disabled,
     };
   },
-  { onFocusModeEnableClick: enableFocusMode }
+  (dispatch: PipelineBuilderThunkDispatch, ownProps: StageToolbarOwnProps) => ({
+    onOpenFocusMode: () => {
+      dispatch(enableFocusMode(ownProps.index));
+      ownProps.onFocusModeClicked();
+    },
+  })
 )(StageToolbar);

packages/compass-aggregations/src/components/stage-toolbar/index.tsx

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import { usePreference } from 'compass-preferences-model';
 import { connect } from 'react-redux';
+import { type AceEditor } from '@mongodb-js/compass-editor';
 
 import {
   Combobox,
@@ -103,12 +104,14 @@ type EnvAwareStageOperatorSelectProps = {
   };
   onChange: (index: number, name: string) => void;
   index: number;
+  editorRef: React.RefObject<AceEditor | undefined>;
 };
 function EnvAwareStageOperatorSelect({
   envInfo: { serverVersion, env, isTimeSeries, isReadonly, sourceName },
   stage,
   onChange,
   index,
+  editorRef,
 }: EnvAwareStageOperatorSelectProps) {
   const preferencesReadOnly = usePreference('readOnly', React);
   const stages = useMemo(() => {
@@ -131,6 +134,7 @@ function EnvAwareStageOperatorSelect({
   const onChangeFilter = (index: number, name: string | null) => {
     if (name) {
       onChange(index, name);
+      editorRef.current?.focus();
     }
   };