chore(components): allow to disable guide cues completely via provider props

But keep the actual state around so that we can show it when the value changes

Author: gribnoysup

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

@@ -44,6 +44,11 @@ type CompassComponentsProviderProps = {
    * Set to disable context menus in the application.
    */
   disableContextMenus?: boolean;
+
+  /**
+   * Set to disable guide cues in the application
+   */
+  disableGuideCues?: boolean;
 } & {
   onNextGuideGue?: GuideCueProviderProps['onNext'];
   onNextGuideCueGroup?: GuideCueProviderProps['onNextGroup'];
@@ -129,6 +134,7 @@ export const CompassComponentsProvider = ({
   stackedElementsZIndex,
   popoverPortalContainer: _popoverPortalContainer,
   disableContextMenus,
+  disableGuideCues,
   ...signalHooksProviderProps
 }: CompassComponentsProviderProps) => {
   const darkMode = useDarkMode(_darkMode);
@@ -166,6 +172,7 @@ export const CompassComponentsProvider = ({
             <GuideCueProvider
               onNext={onNextGuideGue}
               onNextGroup={onNextGuideCueGroup}
+              disabled={disableGuideCues}
             >
               <SignalHooksProvider {...signalHooksProviderProps}>
                 <ConfirmationModalArea>

packages/compass-components/src/components/guide-cue/guide-cue-service.spec.ts

@@ -602,38 +602,4 @@ describe('GuideCueService', function () {
       expect(onNextSpy.callCount).to.equal(1);
     });
   });
-
-  context('when disabled', function () {
-    const initialValue = process.env.DISABLE_GUIDE_CUES;
-    before(function () {
-      process.env.DISABLE_GUIDE_CUES = 'true';
-
-      guideCueService.addCue({ cueId: '1', isIntersecting: true, step: 1 });
-      guideCueService.addCue({
-        cueId: '3',
-        groupId: 'abc',
-        isIntersecting: true,
-        step: 1,
-      });
-      guideCueService.addCue({
-        cueId: '4',
-        groupId: 'abc',
-        isIntersecting: true,
-        step: 2,
-      });
-    });
-
-    after(function () {
-      process.env.DISABLE_GUIDE_CUES = initialValue;
-    });
-
-    it('does not add a cue', function () {
-      expect((guideCueService as any)._cues.length).to.equal(0);
-    });
-
-    it('returns undefined on onNext', function () {
-      const next = guideCueService.onNext();
-      expect(next).to.be.undefined;
-    });
-  });
 });

packages/compass-components/src/components/guide-cue/guide-cue-service.ts

@@ -43,9 +43,6 @@ export class GuideCueService extends EventTarget {
   }
 
   addCue(cue: Omit<Cue, 'isVisited'>) {
-    if (process.env.DISABLE_GUIDE_CUES === 'true') {
-      return;
-    }
     const cueIndex = this.getCueIndex(cue.cueId, cue.groupId);
     if (cueIndex !== -1) {
       // eslint-disable-next-line no-console

packages/compass-components/src/components/guide-cue/guide-cue.tsx

@@ -33,10 +33,14 @@ export type GroupCue = Cue & {
 type GuideCueContextValue = {
   onNext?: (cue: Cue) => void;
   onNextGroup?: (groupCue: GroupCue) => void;
+  disabled?: boolean;
 };
+
 const GuideCueContext = React.createContext<GuideCueContextValue>({});
+
 export const GuideCueProvider: React.FC<GuideCueContextValue> = ({
   children,
+  disabled = false,
   ...callbacks
 }) => {
   const callbacksRef = useRef(callbacks);
@@ -49,8 +53,9 @@ export const GuideCueProvider: React.FC<GuideCueContextValue> = ({
       onNextGroup(groupCue: GroupCue) {
         callbacksRef.current.onNextGroup?.(groupCue);
       },
+      disabled,
     }),
-    []
+    [disabled]
   );
   return (
     <GuideCueContext.Provider value={value}>
@@ -251,12 +256,15 @@ export const GuideCue = <T extends HTMLElement>({
     };
   }, [isCueOpen, cueData, onNext, setOpen]);
 
+  const isCueDisabled =
+    context.disabled || process.env.DISABLE_GUIDE_CUES === 'true';
+
   return (
     <>
       {readyToRender && (
         <LGGuideCue
           {...restOfCueProps}
-          open={isCueOpen}
+          open={!isCueDisabled && isCueOpen}
           numberOfSteps={guideCueService.getCountOfSteps(cueData.groupId)}
           onDismiss={() => {
             onDismiss?.();