DC-1907 New Generic Dialog Window

app/internal_packages/composer-signature/lib/signature-photo-picker.jsx

@@ -31,6 +31,9 @@ export default class SignaturePhotoPicker extends React.Component {
     AppEnv.showOpenDialog(
       { title: 'Choose an image', buttonLabel: 'Choose', properties: ['openFile'] },
       paths => {
+        if (!this._isMounted) {
+          return;
+        }
         if (paths && paths.length > 0) {
           this._onChooseImageFilePath(paths[0]);
         }

app/internal_packages/composer-templates/lib/preferences-templates.jsx

@@ -41,6 +41,12 @@ class TemplateEditor extends React.Component {
       readOnly: !props.template,
     };
   }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
 
   _onSave = () => {
     if (this.state.readOnly) {
@@ -74,7 +80,7 @@ class TemplateEditor extends React.Component {
 
   _onAddAttachment = () => {
     AppEnv.cachePreferenceFiles(paths => {
-      if (!paths || !paths.length) {
+      if (!paths || !paths.length || !this._mounted) {
         return;
       }
       const addAttachments = paths.map(p => {

app/internal_packages/composer-templates/lib/template-store.es6

@@ -432,7 +432,7 @@ class TemplateStore extends MailspringStore {
     AppEnv.reportError(new Error('Template Creation Error'), {
       errorData: message,
     });
-    remote.dialog.showErrorBox('Template Creation Error', message);
+    AppEnv.showErrorBox('Template Creation Error', message);
   }
 
   _getPureBodyForDraft(body) {

app/internal_packages/composer-translate/lib/main.jsx

@@ -54,7 +54,7 @@ class TranslateButton extends React.Component {
   _onError(error) {
     Actions.closePopover();
     const dialog = require('electron').remote.dialog;
-    dialog.showErrorBox('Language Conversion Failed', error.toString());
+    AppEnv.showErrorDialog({ title: 'Language Conversion Failed', message: error.toString() });
   }
 
   _onTranslate = async lang => {

app/internal_packages/edison-beijing-chat/components/messages/MessagesTopBar.jsx

@@ -72,7 +72,7 @@ export default class MessagesTopBar extends Component {
       return;
     }
     if (!conversationName.trim()) {
-      dialog.showMessageBox({
+      AppEnv.showMessageBox({
         type: 'warning',
         message: 'Group name should NOT be empty or blank.',
         buttons: ['OK'],

app/internal_packages/edison-beijing-chat/utils/electron-utils.es6

@@ -17,7 +17,7 @@ export const postNotification = (title, body, onActivate = () => {}) => {
 };
 
 export const alert = message => {
-  dialog.showMessageBox({
+  AppEnv.showMessageBox({
     type: 'warning',
     message,
     buttons: ['OK'],

app/internal_packages/jira-plugin/lib/jira-detail.jsx

@@ -265,7 +265,7 @@ export default class JiraDetail extends Component {
     currentWin.previewFile(path);
   };
   _showDialog(message, type = 'info') {
-    remote.dialog.showMessageBox({
+    AppEnv.showMessageBox({
       type,
       buttons: ['OK'],
       message,

app/internal_packages/message-window/lib/main.es6

@@ -0,0 +1,14 @@
+import { WorkspaceStore, ComponentRegistry } from 'mailspring-exports';
+import MessageWindowRoot from './message-window-root';
+
+export function activate() {
+  WorkspaceStore.defineSheet('Main', { root: true }, { list: ['Center'] });
+
+  ComponentRegistry.register(MessageWindowRoot, {
+    location: WorkspaceStore.Location.Center,
+  });
+}
+
+export function deactivate() {}
+
+export function serialize() {}

app/internal_packages/message-window/lib/message-window-root.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { MessageWindow } from 'mailspring-component-kit';
+import { Actions, Constant } from 'mailspring-exports';
+import { ipcRenderer } from 'electron';
+const minimumDetailHeight = 28;
+export default class MessageWindowRoot extends React.PureComponent {
+  static displayName = 'MessageWindowRoot';
+  static containerRequired = false;
+
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState();
+    this._mounted = false;
+    this._details = null;
+  }
+  defaultState = () => {
+    return {
+      title: '',
+      detail: '',
+      buttons: [
+        { label: 'Ok', order: 0, originalIndex: 0 },
+        { label: 'Cancel', order: 1, originalIndex: 1 },
+      ],
+      checkboxLabel: '',
+      checkboxChecked: false,
+      defaultId: 0,
+      cancelId: 1,
+      sourceWindowKey: '',
+      requestId: '',
+    };
+  };
+  componentDidMount() {
+    this._mounted = true;
+    ipcRenderer.on('reserveWindow-popout', this._onShowMessages);
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    AppEnv.logDebug(`requestId ${this.state.requestId}`);
+    this._updateBrowserWindowHeight();
+    if (this.state.requestId.length > 0) {
+      this.windowShow();
+    }
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+    ipcRenderer.removeListener('reserveWindow-popout', this._onShowMessages);
+  }
+  _onShowMessages = (
+    event,
+    {
+      title = '',
+      details = '',
+      checkLabel = '',
+      buttons,
+      defaultId,
+      cancelId,
+      targetWindowKey = '',
+      sourceWindowKey = '',
+      requestId = '',
+    } = {}
+  ) => {
+    // const currentKey = AppEnv.getCurrentWindowKey();
+    // if (targetWindowKey !== currentKey) {
+    //   AppEnv.logDebug(
+    //     `not for current window ${currentKey}, targetWindowKey ${targetWindowKey}, ignoring`
+    //   );
+    //   return;
+    // }
+    if (this._mounted) {
+      // this._updateBrowserWindowWidth(buttons.length, title.length);
+      this.setState({
+        title,
+        details,
+        checkLabel,
+        defaultId,
+        cancelId,
+        buttons,
+        sourceWindowKey,
+        requestId,
+      });
+      if (typeof title === 'string' && title.length > 0) {
+        AppEnv.setWindowTitle(title);
+      }
+    }
+    AppEnv.logDebug(`MessageWindow: on show Message ${requestId}`);
+  };
+  _updateBrowserWindowHeight = () => {
+    const currentSize = AppEnv.getSize();
+    if (this._details) {
+      const detailsHeight = this._details.getBoundingClientRect().height;
+      const extraHeight = detailsHeight - minimumDetailHeight;
+      // console.log(
+      //   `update height detailHeight: ${detailsHeight}, current height: ${currentSize.height}, extraHeight: ${extraHeight}`
+      // );
+      if (
+        extraHeight > 0 &&
+        currentSize.height - detailsHeight <=
+          Constant.MessageWindowSize.height - minimumDetailHeight
+      ) {
+        currentSize.height += extraHeight;
+        AppEnv.setSize(currentSize.width, currentSize.height);
+      }
+    }
+  };
+  _updateBrowserWindowWidth = (buttonsSize, titleLength) => {
+    const currentSize = AppEnv.getSize();
+    const extraTitleLength = Math.ceil((titleLength - 55) * 5.5);
+    const extraButtonLength = (buttonsSize - 2) * 112;
+    if (extraTitleLength > extraButtonLength && extraTitleLength > 0) {
+      currentSize.width += extraTitleLength;
+    } else if (extraButtonLength >= extraTitleLength && extraButtonLength > 0) {
+      currentSize.width += extraButtonLength;
+    }
+    AppEnv.setSize(currentSize.width, currentSize.height);
+  };
+  windowShow = () => {
+    AppEnv.center();
+    AppEnv.show();
+  };
+  windowHide = () => {
+    AppEnv.hide();
+    if (this._mounted) {
+      this.setState(this.defaultState());
+      AppEnv.setSize(Constant.MessageWindowSize.width, Constant.MessageWindowSize.height);
+    }
+  };
+  _onCancel = () => {
+    this.windowHide();
+  };
+  _onClick = () => {
+    this.windowHide();
+  };
+
+  render() {
+    return <MessageWindow {...this.state} onCanceled={this._onCancel} onClicked={this._onClick} />;
+  }
+}

app/internal_packages/message-window/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "messageWindow",
+  "version": "0.1.0",
+  "main": "./lib/main",
+  "description": "Message Window",
+  "syncInit": false,
+  "license": "GPL-3.0",
+  "private": true,
+  "engines": {
+    "mailspring": "*"
+  },
+  "windowTypes": {
+    "messageWindow": true
+  }
+}

app/internal_packages/preferences/lib/components/preferences-account-details.jsx

@@ -220,30 +220,31 @@ class PreferencesAccountDetails extends Component {
     if (drafts.length > 0) {
       details = `There are ${drafts.length} draft(s) for this account that are currently open.\n Do you want to proceed with deleting account ${account.emailAddress}?\n Deleting account will also close these drafts.`;
     }
-    const chosen = remote.dialog.showMessageBoxSync({
+    AppEnv.showMessageBox({
       type: 'info',
       message: 'Are you sure?',
       detail: details,
       buttons: ['Delete', 'Cancel'],
       defaultId: 0,
       cancelId: 1,
-    });
-    if (chosen !== 0) {
-      return;
-    }
-    const openWindowsCount = AppEnv.getOpenWindowsCountByAccountId(account.id);
-    if (openWindowsCount > 0) {
-      AppEnv.closeWindowsByAccountId(account.id, 'account deleted');
-    }
-    const index = this.props.accounts.indexOf(account);
-    if (account && typeof onRemoveAccount === 'function') {
-      // Move the selection 1 up or down after deleting
-      const newIndex = index === 0 ? index + 1 : index - 1;
-      onRemoveAccount(account);
-      if (this.props.accounts[newIndex] && typeof onSelectAccount === 'function') {
-        onSelectAccount(this.props.accounts[newIndex]);
+    }).then(({ response } = {}) => {
+      if (response !== 0) {
+        return;
       }
-    }
+      const openWindowsCount = AppEnv.getOpenWindowsCountByAccountId(account.id);
+      if (openWindowsCount > 0) {
+        AppEnv.closeWindowsByAccountId(account.id, 'account deleted');
+      }
+      const index = this.props.accounts.indexOf(account);
+      if (account && typeof onRemoveAccount === 'function') {
+        // Move the selection 1 up or down after deleting
+        const newIndex = index === 0 ? index + 1 : index - 1;
+        onRemoveAccount(account);
+        if (this.props.accounts[newIndex] && typeof onSelectAccount === 'function') {
+          onSelectAccount(this.props.accounts[newIndex]);
+        }
+      }
+    });
   };
 
   // Renderers

app/internal_packages/preferences/lib/components/preferences-general-components.jsx

@@ -212,6 +212,13 @@ export class DownloadSelection extends React.Component {
       ],
       fixedOptions: ['Downloads', 'Ask me every time'],
     };
+    this._mounted = false;
+  }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
   }
 
   _onChangeValue = ([value]) => {
@@ -234,6 +241,9 @@ export class DownloadSelection extends React.Component {
         }
       }
       AppEnv.showOpenDialog(openDirOption, newPaths => {
+        if (!this._mounted) {
+          return;
+        }
         if (newPaths && newPaths.length > 0) {
           this.props.config.set(this.props.keyPath, newPaths[0]);
         }

app/internal_packages/preferences/lib/components/preferences-keymaps.jsx

@@ -38,19 +38,20 @@ export class PreferencesKeymapsHearder extends React.Component {
   }
 
   _onDeleteUserKeymap() {
-    const chosen = remote.dialog.showMessageBoxSync(AppEnv.getCurrentWindow(), {
+    AppEnv.showMessageBox({
       type: 'info',
       message: 'Are you sure?',
       detail: 'Delete your custom key bindings and reset to the template defaults?',
       buttons: ['Cancel', 'Reset'],
       defaultId: 1,
       cancelId: 0,
+      blockWindowKey: AppEnv.getCurrentWindowKey(),
+    }).then(({ response }) => {
+      if (response === 1) {
+        const keymapsFile = AppEnv.keymaps.getUserKeymapPath();
+        fs.writeFileSync(keymapsFile, '{}');
+      }
     });
-
-    if (chosen === 1) {
-      const keymapsFile = AppEnv.keymaps.getUserKeymapPath();
-      fs.writeFileSync(keymapsFile, '{}');
-    }
   }
 
   render() {