feat: dialog to confirm reload

Closes #3240 #3886

app/lib/index.js

@@ -344,6 +344,10 @@ renderer.on('client:error', function(...args) {
   done(null);
 });
 
+renderer.on('app:reload', async function() {
+  app.mainWindow.reload();
+});
+
 app.on('web-contents-created', (event, webContents) => {
 
   // open new window externally

app/lib/menu/menu-builder.js

@@ -445,7 +445,7 @@ class MenuBuilder {
     submenuTemplate.push({
       label: 'Reload',
       accelerator: 'CommandOrControl+R',
-      click: (_, browserWindow) => browserWindow.reload()
+      click: () => app.emit('menu:action', 'reload-modeler')
     });
 
     submenuTemplate.push({

app/lib/preload.js

@@ -16,6 +16,7 @@ const {
 const generateId = require('./util/generate-id');
 
 const allowedEvents = [
+  'app:reload',
   'app:quit-aborted',
   'app:quit-allowed',
   'client:error',

client/src/app/App.js

@@ -421,6 +421,46 @@ export class App extends PureComponent {
     return true;
   };
 
+  /**
+   * Reload modeler.
+   *
+   * @return {Promise<boolean>} resolved to true if modeler is reloaded
+   */
+  reloadModeler = async () => {
+    const dialog = this.getGlobal('dialog');
+    const hasUnsavedTabs = this.hasUnsavedTabs();
+
+    if (!hasUnsavedTabs) {
+      this.reload();
+      return;
+    }
+
+    const { button } = await dialog.showReloadDialog(hasUnsavedTabs);
+
+    if (button === 'save') {
+      await this.saveAllTabs();
+      this.reload();
+
+    } else if (button === 'reload') {
+      this.reload();
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+
+  hasUnsavedTabs = () => {
+    const { tabs } = this.state;
+    return tabs.some((tab) => {
+      return this.isDirty(tab) || this.isUnsaved(tab);
+    });
+  };
+
+  reload = async (options) => {
+    this.getGlobal('backend').send('app:reload', options);
+  };
+
   isEmptyTab = (tab) => {
     return tab === EMPTY_TAB;
   };
@@ -1453,7 +1493,6 @@ export class App extends PureComponent {
   }
 
   saveAllTabs = () => {
-
     const {
       tabs
     } = this.state;
@@ -1838,6 +1877,10 @@ export class App extends PureComponent {
       return this.resizeTab();
     }
 
+    if (action === 'reload-modeler') {
+      return this.reloadModeler(options);
+    }
+
     if (action === 'log') {
       const {
         action,

client/src/app/__tests__/AppSpec.js

@@ -3143,6 +3143,120 @@ describe('<App>', function() {
 
   });
 
+
+  describe('reload', function() {
+
+    describe('no unsaved changed', function() {
+
+      it('should not show dialog', async function() {
+
+        // given
+        const dialog = new Dialog();
+
+        const { app } = createApp({
+          globals: {
+            dialog
+          }
+        });
+
+        const reload = spy(app, 'reload');
+        const showReloadDialog = spy(dialog, 'showReloadDialog');
+
+        // when
+        dialog.setShowReloadModelerDialogResponse({ button: 'reload' });
+        app.reloadModeler();
+
+        // then
+        expect(reload).to.have.been.called;
+        expect(showReloadDialog).to.not.have.been.called;
+      });
+
+    });
+
+
+    describe('unsaved changes', function() {
+
+      it('should sve changes and reload app', async function() {
+
+        // given
+        const dialog = new Dialog();
+
+        const { app } = createApp({
+          globals: {
+            dialog
+          }
+        });
+
+        sinon.stub(app, 'hasUnsavedTabs').returns(true);
+
+        const reload = spy(app, 'reload');
+        const showReloadDialog = spy(dialog, 'showReloadDialog');
+        const save = spy(app, 'saveAllTabs');
+
+        // when
+        dialog.setShowReloadModelerDialogResponse({ button: 'save' });
+        await app.reloadModeler();
+
+        // then
+        expect(showReloadDialog).to.have.been.called;
+        expect(save).to.have.been.called;
+        expect(reload).to.have.been.called;
+      });
+
+      it('should reload app without saving', async function() {
+
+        // given
+        const dialog = new Dialog();
+
+        const { app } = createApp({
+          globals: {
+            dialog
+          }
+        });
+
+        sinon.stub(app, 'hasUnsavedTabs').returns(true);
+
+        const reload = spy(app, 'reload');
+        const showReloadDialog = spy(dialog, 'showReloadDialog');
+
+        // when
+        dialog.setShowReloadModelerDialogResponse({ button: 'reload' });
+        await app.reloadModeler();
+
+        // then
+        expect(showReloadDialog).to.have.been.called;
+        expect(reload).to.have.been.called;
+      });
+
+
+      it('should NOT reload app', async function() {
+
+        // given
+        const dialog = new Dialog();
+
+        const { app } = createApp({
+          globals: {
+            dialog
+          }
+        });
+
+        sinon.stub(app, 'hasUnsavedTabs').returns(true);
+
+        const reload = spy(app, 'reload');
+        const showReloadDialog = spy(dialog, 'showReloadDialog');
+
+        // when
+        dialog.setShowReloadModelerDialogResponse({ button: 'cancel' });
+        app.reloadModeler();
+
+        // then
+        expect(showReloadDialog).to.have.been.called;
+        expect(reload).to.not.have.been.called;
+      });
+
+    });
+  });
+
 });
 
 

client/src/app/__tests__/mocks/index.js

@@ -320,6 +320,7 @@ export class Dialog extends Mock {
     this.showCloseFileDialogResponse = new Response();
     this.showEmptyFileDialogResponse = new Response();
     this.showFileExplorerDialogResponse = new Response();
+    this.showReloadModelerDialogResponse = new Response();
   }
 
   setShowOpenFilesDialogResponse(index, response) {
@@ -350,6 +351,10 @@ export class Dialog extends Mock {
     this.showEmptyFileDialogResponse.setResponse(index, response);
   }
 
+  setShowReloadModelerDialogResponse(index, response) {
+    this.showReloadModelerDialogResponse.setResponse(index, response);
+  }
+
   showOpenFilesDialog() {
     return this.showOpenFilesDialogResponse.next();
   }
@@ -381,6 +386,11 @@ export class Dialog extends Mock {
   showFileExplorerDialog() {
     return this.showFileExplorerDialogResponse.next();
   }
+
+  showReloadDialog() {
+    return this.showReloadModelerDialogResponse.next();
+  }
+
 }
 
 export class FileSystem extends Mock {

client/src/remote/Dialog.js

@@ -176,4 +176,31 @@ export default class Dialog {
     });
   };
 
+  /**
+   * Shows dialog asking user for confirmation to reload the modeler.
+  */
+  showReloadDialog() {
+    const isLinux = this.backend.getPlatform() == 'linux';
+
+    const buttons = [
+      { id: 'save', label: 'Save' },
+      { id: 'reload', label: 'Continue without saving' },
+      { id: 'cancel', label: 'Cancel' },
+    ];
+
+    // Re-order buttons for linux
+    if (isLinux) {
+      buttons.push(buttons.shift());
+    }
+
+    return this.show({
+      buttons,
+      defaultId: isLinux ? 1 : 0,
+      message: 'Reloading the modeler will discard all unsaved changes. Do you want to save before reloading?',
+      type: 'warning',
+      title: 'Reload Modeler'
+    });
+  }
+
+
 }

client/src/remote/__tests__/DialogSpec.js

@@ -264,4 +264,45 @@ describe('dialog', function() {
     dialog.showFileExplorerDialog(options);
   });
 
+
+  it('#showReloadDialog', function() {
+
+    // given
+    const sendSpy = (type, opts) => {
+
+      // then
+      expect(type).to.equal('dialog:show');
+
+      const isLinux = process.platform === 'linux';
+
+      let buttons;
+
+      if (isLinux) {
+        buttons = [
+          { id: 'cancel', label: 'Cancel' },
+          { id: 'reload', label: 'Reload' }
+        ];
+      } else {
+        buttons = [
+          { id: 'reload', label: 'Reload' },
+          { id: 'cancel', label: 'Cancel' }
+        ];
+      }
+
+      expect(opts).to.eql({
+        buttons,
+        defaultId: isLinux ? 1 : 0,
+        type: 'warning',
+        title: 'Reload Modeler',
+        message: 'Reloading the modeler will discard all unsaved changes. Do you want to continue?'
+      });
+    };
+
+    const backend = new Backend({ send: sendSpy });
+    const dialog = new Dialog(backend);
+
+    // when
+    dialog.showEmptyFileDialog();
+
+  });
 });