fix(welcome, components): disable guide cues in the app until welcome modal is hidden (#7529)

* 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

* chore(welcome): refactor welcome modal to a plugin; only change showedNetworkOptIn after welcome modal is closed

* fix(welcome): disable guide cues until network opt in was shown

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?.();

packages/compass-preferences-model/src/compass-web-preferences-access.ts

@@ -31,10 +31,6 @@ export class CompassWebPreferencesAccess implements PreferencesAccess {
     return this._preferences.getPreferences();
   }
 
-  ensureDefaultConfigurableUserPreferences() {
-    return this._preferences.ensureDefaultConfigurableUserPreferences();
-  }
-
   getConfigurableUserPreferences() {
     return Promise.resolve(this._preferences.getConfigurableUserPreferences());
   }

packages/compass-preferences-model/src/preferences-schema.tsx

@@ -594,7 +594,7 @@ export const storedUserPreferencesProps: Required<{
       long: 'Allow Compass to make requests to a 3rd party mapping service.',
     },
     deriveValue: deriveNetworkTrafficOptionState('enableMaps'),
-    validator: z.boolean().default(false),
+    validator: z.boolean().default(true),
     type: 'boolean',
   },
   enableGenAIFeatures: {
@@ -621,7 +621,7 @@ export const storedUserPreferencesProps: Required<{
       long: 'Enables a tool that our Product team can use to occasionally reach out for feedback about Compass.',
     },
     deriveValue: deriveNetworkTrafficOptionState('enableFeedbackPanel'),
-    validator: z.boolean().default(false),
+    validator: z.boolean().default(true),
     type: 'boolean',
   },
   /**
@@ -637,7 +637,7 @@ export const storedUserPreferencesProps: Required<{
       long: 'Allow Compass to send anonymous usage statistics.',
     },
     deriveValue: deriveNetworkTrafficOptionState('trackUsageStatistics'),
-    validator: z.boolean().default(false),
+    validator: z.boolean().default(true),
     type: 'boolean',
   },
   /**
@@ -652,7 +652,7 @@ export const storedUserPreferencesProps: Required<{
       long: 'Allow Compass to periodically check for new updates.',
     },
     deriveValue: deriveNetworkTrafficOptionState('autoUpdates'),
-    validator: z.boolean().default(false),
+    validator: z.boolean().default(true),
     type: 'boolean',
   },
   /**

packages/compass-preferences-model/src/preferences.spec.ts

@@ -50,7 +50,7 @@ describe('Preferences class', function () {
     const preferences = await setupPreferences(tmpdir);
     const result = preferences.getPreferences();
     expect(result.id).to.equal('General');
-    expect(result.enableMaps).to.equal(false);
+    expect(result.enableMaps).to.equal(true);
     expect(result.enableShell).to.equal(true);
   });
 
@@ -98,13 +98,12 @@ describe('Preferences class', function () {
     const preferences = await setupPreferences(tmpdir);
     const calls: any[] = [];
     preferences.onPreferencesChanged((prefs) => calls.push(prefs));
-    await preferences.savePreferences({ enableMaps: true });
-    expect(calls).to.deep.equal([{ enableMaps: true }]);
+    await preferences.savePreferences({ enableMaps: false });
+    expect(calls).to.deep.equal([{ enableMaps: false }]);
   });
 
   it('can return user-configurable preferences after setting their defaults', async function () {
     const preferences = await setupPreferences(tmpdir);
-    await preferences.ensureDefaultConfigurableUserPreferences();
     const result = preferences.getConfigurableUserPreferences();
     expect(result).not.to.have.property('id');
     expect(result.enableMaps).to.equal(true);
@@ -121,7 +120,6 @@ describe('Preferences class', function () {
         trackUsageStatistics: false,
       },
     });
-    await preferences.ensureDefaultConfigurableUserPreferences();
     const result = preferences.getConfigurableUserPreferences();
     expect(result).not.to.have.property('id');
     expect(result.autoUpdates).to.equal(true);
@@ -214,18 +212,10 @@ describe('Preferences class', function () {
     const preferences = await setupPreferences(tmpdir);
     const calls: any[] = [];
     preferences.onPreferencesChanged((prefs) => calls.push(prefs));
-    await preferences.ensureDefaultConfigurableUserPreferences();
     preferences.getConfigurableUserPreferences(); // set defaults
     await preferences.savePreferences({ networkTraffic: false });
     await preferences.savePreferences({ readOnly: true });
     expect(calls).to.deep.equal([
-      {
-        showedNetworkOptIn: true,
-        enableMaps: true,
-        enableFeedbackPanel: true,
-        trackUsageStatistics: true,
-        autoUpdates: true,
-      },
       {
         networkTraffic: false,
         enableMaps: false,

packages/compass-preferences-model/src/preferences.ts

@@ -22,7 +22,6 @@ export interface PreferencesAccess {
   ): Promise<AllPreferences>;
   refreshPreferences(): Promise<AllPreferences>;
   getPreferences(): AllPreferences;
-  ensureDefaultConfigurableUserPreferences(): Promise<void>;
   getConfigurableUserPreferences(): Promise<UserConfigurablePreferences>;
   getPreferenceStates(): Promise<PreferenceStateInformation>;
   onPreferenceValueChanged<K extends keyof AllPreferences>(
@@ -248,26 +247,6 @@ export class Preferences {
     return { values, states };
   }
 
-  /**
-   * If this is the first call to this method, this sets the defaults for
-   * user preferences.
-   */
-  async ensureDefaultConfigurableUserPreferences(): Promise<void> {
-    // Set the defaults and also update showedNetworkOptIn flag.
-    const { showedNetworkOptIn } = this.getPreferences();
-    if (!showedNetworkOptIn) {
-      await this.savePreferences({
-        autoUpdates: true,
-        enableGenAIFeatures: true,
-        enableMaps: true,
-        trackUsageStatistics: true,
-        enableFeedbackPanel: true,
-        showedNetworkOptIn: true,
-        theme: 'LIGHT',
-      });
-    }
-  }
-
   /**
    * Return the subset of preferences that can be edited through the UI.
    *

packages/compass-preferences-model/src/read-only-preferences-access.ts

@@ -29,10 +29,6 @@ export class ReadOnlyPreferenceAccess implements PreferencesAccess {
     return this._preferences.getPreferences();
   }
 
-  ensureDefaultConfigurableUserPreferences() {
-    return this._preferences.ensureDefaultConfigurableUserPreferences();
-  }
-
   getConfigurableUserPreferences() {
     return Promise.resolve(this._preferences.getConfigurableUserPreferences());
   }

packages/compass-preferences-model/src/renderer-ipc.spec.ts

@@ -10,9 +10,6 @@ describe('Renderer IPC', function () {
     'compass:get-preferences'() {
       return { getPreferences: 1 };
     },
-    'compass:ensure-default-configurable-user-preferences'() {
-      return { ensureDefaultConfigurableUserPreferences: 1 };
-    },
     'compass:get-configurable-user-preferences'() {
       return { getConfigurableUserPreferences: 1 };
     },
@@ -40,12 +37,6 @@ describe('Renderer IPC', function () {
     });
   });
 
-  it('should be able to call ensureDefaultConfigurableUserPreferences', async function () {
-    expect(
-      await preferencesIpc.ensureDefaultConfigurableUserPreferences()
-    ).to.deep.equal({ ensureDefaultConfigurableUserPreferences: 1 });
-  });
-
   it('should be able to call getConfigurableUserPreferences', async function () {
     expect(await preferencesIpc.getConfigurableUserPreferences()).to.deep.equal(
       { getConfigurableUserPreferences: 1 }