chore: hide the disclaimer if networkTraffic is false COMPASS-6150 (#3548)

* hide the disclaimer if networkTraffic is false

* set the defaults regardless if networkTraffic true/false

* reformat

Author: lerouxb

packages/compass-home/src/components/home.spec.tsx

@@ -62,7 +62,11 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" showWelcomeModal={false} />
+          <Home
+            appName="home-testing"
+            showWelcomeModal={false}
+            networkTraffic={true}
+          />
         </AppRegistryContext.Provider>
       );
     });
@@ -83,7 +87,11 @@ describe('Home [Component]', function () {
     ) {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" showWelcomeModal={false} />
+          <Home
+            appName="home-testing"
+            showWelcomeModal={false}
+            networkTraffic={true}
+          />
         </AppRegistryContext.Provider>
       );
       testAppRegistry.emit('data-service-connected', null, dataService, {
@@ -157,7 +165,11 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" showWelcomeModal={false} />
+          <Home
+            appName="home-testing"
+            showWelcomeModal={false}
+            networkTraffic={true}
+          />
         </AppRegistryContext.Provider>
       );
     });
@@ -185,7 +197,11 @@ describe('Home [Component]', function () {
     beforeEach(function () {
       const { unmount } = render(
         <AppRegistryContext.Provider value={testAppRegistry}>
-          <Home appName="home-testing" showWelcomeModal={false} />
+          <Home
+            appName="home-testing"
+            showWelcomeModal={false}
+            networkTraffic={true}
+          />
         </AppRegistryContext.Provider>
       );
       unmount();

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

@@ -280,18 +280,19 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
 }
 
 function ThemedHome(
-  props: React.ComponentProps<typeof Home> & { showWelcomeModal: boolean }
+  props: React.ComponentProps<typeof Home> & {
+    showWelcomeModal: boolean;
+    networkTraffic: boolean;
+  }
 ): ReturnType<typeof Home> {
-  const { showWelcomeModal } = props;
+  const { showWelcomeModal, networkTraffic } = props;
   const appRegistry = useAppRegistryContext();
 
   const [theme, setTheme] = useState<ThemeState>({
     theme:
       process.env.COMPASS_LG_DARKMODE === 'true'
         ? (global as any).hadronApp?.theme ?? Theme.Light
         : Theme.Light,
-    // useful for quickly testing the new dark sidebar without rebuilding
-    //theme: Theme.Dark, enabled: true
   });
 
   function onDarkModeEnabled() {
@@ -368,7 +369,11 @@ function ThemedHome(
     <LeafyGreenProvider>
       <ThemeProvider theme={theme}>
         {showWelcomeModal && (
-          <Welcome isOpen={isWelcomeOpen} closeModal={closeWelcomeModal} />
+          <Welcome
+            isOpen={isWelcomeOpen}
+            closeModal={closeWelcomeModal}
+            networkTraffic={networkTraffic}
+          />
         )}
         <Settings isOpen={isSettingsOpen} closeModal={closeSettingsModal} />
         <ToastArea>

packages/compass-home/src/plugin.tsx

@@ -9,14 +9,20 @@ function Plugin({
   appName,
   appRegistry,
   showWelcomeModal,
+  networkTraffic,
 }: {
   appName: string;
   appRegistry: AppRegistry;
   showWelcomeModal: boolean;
+  networkTraffic: boolean;
 }): React.ReactElement {
   return (
     <AppRegistryContext.Provider value={appRegistry}>
-      <Home appName={appName} showWelcomeModal={showWelcomeModal} />
+      <Home
+        appName={appName}
+        showWelcomeModal={showWelcomeModal}
+        networkTraffic={networkTraffic}
+      />
     </AppRegistryContext.Provider>
   );
 }

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

@@ -633,9 +633,8 @@ export class Preferences {
    */
   async ensureDefaultConfigurableUserPreferences(): Promise<void> {
     // Set the defaults and also update showedNetworkOptIn flag.
-    const { showedNetworkOptIn, networkTraffic } =
-      await this.fetchPreferences();
-    if (!showedNetworkOptIn && networkTraffic) {
+    const { showedNetworkOptIn } = await this.fetchPreferences();
+    if (!showedNetworkOptIn) {
       await this.savePreferences({
         autoUpdates: true,
         enableMaps: true,

packages/compass-welcome/src/components/modal.spec.tsx

@@ -21,7 +21,12 @@ describe('WelcomeModal', function () {
       props: Partial<ComponentProps<typeof WelcomeModal>> = {}
     ) => {
       render(
-        <WelcomeModal isOpen={false} closeModal={closeModalSpy} {...props} />
+        <WelcomeModal
+          networkTraffic={true}
+          isOpen={false}
+          closeModal={closeModalSpy}
+          {...props}
+        />
       );
     };
   });
@@ -30,13 +35,13 @@ describe('WelcomeModal', function () {
     renderWelcomeModal({ isOpen: true });
 
     const container = screen.queryByTestId('welcome-modal');
-    expect(container).to.exist;
+    expect(container).to.be.visible;
   });
 
   it('closes when clicking the Start button', function () {
     renderWelcomeModal({ isOpen: true });
     const startButton = screen.getByText('Start').closest('button');
-    expect(startButton).to.exist;
+    expect(startButton).to.be.visible;
     userEvent.click(startButton as Element);
     expect(closeModalSpy.calledOnceWith()).to.be.true;
   });
@@ -54,4 +59,10 @@ describe('WelcomeModal', function () {
     userEvent.click(settingsLink);
     expect(closeModalSpy.calledOnceWith(true)).to.be.true;
   });
+
+  it('has no settings link when networkTraffic is false', function () {
+    renderWelcomeModal({ isOpen: true, networkTraffic: false });
+    const settingsLink = screen.queryByText('Settings');
+    expect(settingsLink).to.not.exist;
+  });
 });

packages/compass-welcome/src/components/modal.tsx

@@ -20,11 +20,13 @@ const link = css({
 });
 
 type WelcomeModalProps = {
+  networkTraffic: boolean;
   isOpen: boolean;
   closeModal: (openSettings?: boolean) => void;
 };
 
 const WelcomeModal: React.FunctionComponent<WelcomeModalProps> = ({
+  networkTraffic,
   isOpen,
   closeModal,
 }) => {
@@ -53,16 +55,18 @@ const WelcomeModal: React.FunctionComponent<WelcomeModalProps> = ({
         Build aggregation pipelines, optimize queries, analyze schemas,
         and&nbsp;more. All with the GUI built by - and for - MongoDB.
       </Body>
-      <Disclaimer className={disclaimer}>
-        To help improve our products, anonymous usage data is collected and sent
-        to MongoDB in accordance with MongoDB&apos;s privacy policy.
-        <br />
-        Manage this behaviour on the Compass{' '}
-        <Link hideExternalIcon className={link} onClick={goToSettings}>
-          Settings
-        </Link>{' '}
-        page.
-      </Disclaimer>
+      {networkTraffic && (
+        <Disclaimer className={disclaimer}>
+          To help improve our products, anonymous usage data is collected and
+          sent to MongoDB in accordance with MongoDB&apos;s privacy policy.
+          <br />
+          Manage this behaviour on the Compass{' '}
+          <Link hideExternalIcon className={link} onClick={goToSettings}>
+            Settings
+          </Link>{' '}
+          page.
+        </Disclaimer>
+      )}
     </MarketingModal>
   );
 };

packages/compass/src/app/index.js

@@ -71,14 +71,6 @@ const { log, mongoLogId, debug, track } =
     'COMPASS-APP'
   );
 
-function shouldShowWelcomeModal(showedNetworkOptIn, networkTraffic) {
-  if (!showedNetworkOptIn && networkTraffic) {
-    return true;
-  }
-
-  return false;
-}
-
 /**
  * The top-level application singleton that brings everything together!
  */
@@ -170,7 +162,7 @@ const Application = View.extend({
    * start showing status indicators as
    * quickly as possible.
    */
-  render: function ({ showWelcomeModal }) {
+  render: function ({ showWelcomeModal, networkTraffic }) {
     log.info(
       mongoLogId(1_001_000_092),
       'Main Window',
@@ -193,7 +185,8 @@ const Application = View.extend({
       React.createElement(this.homeComponent, {
         appRegistry: app.appRegistry,
         appName: remote.app.getName(),
-        showWelcomeModal
+        showWelcomeModal,
+        networkTraffic
       }),
       this.queryByHook('layout-container')
     );
@@ -299,7 +292,8 @@ app.extend({
           );
           // as soon as dom is ready, render and set up the rest
           state.render({
-            showWelcomeModal: shouldShowWelcomeModal(showedNetworkOptIn, networkTraffic)
+            showWelcomeModal: !showedNetworkOptIn,
+            networkTraffic
           });
           marky.stop('Time to Connect rendered');
           state.postRender();