feat(compass): add confirmation dialog when quitting compass COMPASS-6435 (#5920)

Author: VivianTNT

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

@@ -58,6 +58,7 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     enableGenAISampleDocumentPassing: boolean;
     enablePerformanceAdvisorBanner: boolean;
     maximumNumberOfActiveConnections?: number;
+    enableShowDialogOnQuit: boolean;
   };
 
 export type InternalUserPreferences = {
@@ -747,6 +748,18 @@ export const storedUserPreferencesProps: Required<{
     type: 'number',
   },
 
+  enableShowDialogOnQuit: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short: 'Show Quit Confirmation Dialog',
+      long: 'Toggle whether confirmation dialog is shown when quitting Compass (cmd/ctrl-Q).',
+    },
+    validator: z.boolean().default(true),
+    type: 'boolean',
+  },
+
   ...allFeatureFlagsProps,
 };
 

packages/compass-settings/src/components/settings/general.tsx

@@ -11,6 +11,7 @@ const generalFields = [
   ...(['darwin', 'win32'].includes(process.platform)
     ? (['installURLHandlers'] as const)
     : []),
+  'enableShowDialogOnQuit',
 ] as const;
 
 export const GeneralSettings: React.FunctionComponent = () => {

packages/compass/src/main/menu.spec.ts

@@ -1,12 +1,13 @@
 import EventEmitter from 'events';
 import type { MenuItemConstructorOptions } from 'electron';
-import { BrowserWindow, ipcMain, Menu, app } from 'electron';
+import { BrowserWindow, ipcMain, Menu, app, dialog } from 'electron';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 
 import type { CompassApplication } from './application';
 import type { CompassMenu as _CompassMenu } from './menu';
+import { quitItem } from './menu';
 import { AutoUpdateManagerState } from './auto-update-manager';
 
 function serializable<T>(obj: T): T {
@@ -32,6 +33,7 @@ describe('CompassMenu', function () {
   afterEach(function () {
     App.removeAllListeners();
     ipcMain.removeAllListeners();
+    sinon.restore();
   });
 
   it('should create an instance of Compass menu handler with initial state where no window is loaded', function () {
@@ -131,10 +133,6 @@ describe('CompassMenu', function () {
   });
 
   describe('getTemplate', function () {
-    afterEach(function () {
-      sinon.restore();
-    });
-
     it('should generate a menu template that can be passed to the Electron Menu without errors', function () {
       expect(() => {
         const template = CompassMenu.getTemplate(0);
@@ -675,4 +673,57 @@ describe('CompassMenu', function () {
       });
     });
   });
+
+  describe('quitItem', () => {
+    it('should show box if enableShowDialogOnQuit is true, then cancels and does not save changes', async function () {
+      await App.preferences.savePreferences({
+        enableShowDialogOnQuit: true,
+      });
+      const showMessageBoxStub = sinon
+        .stub(dialog, 'showMessageBox')
+        .resolves({ response: 1, checkboxChecked: true });
+      const quitStub = sinon.stub(app, 'quit');
+      const item = quitItem('Quit', App);
+      await (item as any).click();
+
+      expect(showMessageBoxStub).to.have.been.called;
+      expect(quitStub).not.to.have.been.called;
+      expect(App.preferences.getPreferences().enableShowDialogOnQuit).to.be
+        .true;
+    });
+
+    it('should show box if enableShowDialogOnQuit is true, then quits app and saves changes', async function () {
+      await App.preferences.savePreferences({
+        enableShowDialogOnQuit: true,
+      });
+      const showMessageBoxStub = sinon
+        .stub(dialog, 'showMessageBox')
+        .resolves({ response: 0, checkboxChecked: true });
+      const quitStub = sinon.stub(app, 'quit');
+      const item = quitItem('Quit', App);
+      await (item as any).click();
+
+      expect(showMessageBoxStub).to.have.been.called;
+      expect(quitStub).to.have.been.called;
+      expect(App.preferences.getPreferences().enableShowDialogOnQuit).to.be
+        .false;
+    });
+
+    it('should quit app immediately if enableShowDialogOnQuit is false and keeps changes', async function () {
+      await App.preferences.savePreferences({
+        enableShowDialogOnQuit: false,
+      });
+      const showMessageBoxStub = sinon
+        .stub(dialog, 'showMessageBox')
+        .resolves({ response: 0, checkboxChecked: true });
+      const quitStub = sinon.stub(app, 'quit');
+      const item = quitItem('Quit', App);
+      (item as any).click();
+
+      expect(showMessageBoxStub).not.to.have.been.called;
+      expect(quitStub).to.have.been.called;
+      expect(App.preferences.getPreferences().enableShowDialogOnQuit).to.be
+        .false;
+    });
+  });
 });

packages/compass/src/main/menu.ts

@@ -24,12 +24,34 @@ function separator(): MenuItemConstructorOptions {
   };
 }
 
-function quitItem(label: string): MenuItemConstructorOptions {
+function quitItem(
+  label: string,
+  compassApp: typeof CompassApplication
+): MenuItemConstructorOptions {
   return {
     label: label,
     accelerator: 'CmdOrCtrl+Q',
     click() {
-      app.quit();
+      !compassApp.preferences.getPreferences().enableShowDialogOnQuit
+        ? app.quit()
+        : void dialog
+            .showMessageBox({
+              type: 'warning',
+              title: `Quit ${app.getName()}`,
+              icon: COMPASS_ICON,
+              message: 'Are you sure you want to quit?',
+              buttons: ['Quit', 'Cancel'],
+              checkboxLabel: 'Do not ask me again',
+            })
+            .then((result) => {
+              if (result.response === 0) {
+                if (result.checkboxChecked)
+                  void compassApp.preferences.savePreferences({
+                    enableShowDialogOnQuit: false,
+                  });
+                app.quit();
+              }
+            });
     },
   };
 }
@@ -98,7 +120,7 @@ function darwinCompassSubMenu(
         role: 'unhide',
       },
       separator(),
-      quitItem('Quit'),
+      quitItem('Quit', compassApp),
     ],
   };
 }
@@ -155,7 +177,7 @@ function connectSubMenu(
 
   if (nonDarwin) {
     subMenu.push(separator());
-    subMenu.push(quitItem('E&xit'));
+    subMenu.push(quitItem('E&xit', app));
   }
 
   return {
@@ -714,4 +736,4 @@ class CompassMenu {
   }
 }
 
-export { CompassMenu };
+export { CompassMenu, quitItem };