feat(mailbox): ability to use protonmail beta

In Settings sections its now possible to choose mail.protonmail.com for the MailBox

implements #180

Author: kontrollanten

src/renderer/components/MailBox/index.js

@@ -8,6 +8,7 @@ export default class MailBox extends React.Component {
     error: PropTypes.object,
     hideWebviews: PropTypes.func.isRequired,
     onReload: PropTypes.func.isRequired,
+    useProtonMailBeta: PropTypes.bool.isRequired,
     username: PropTypes.string.isRequired,
   };
 
@@ -50,6 +51,7 @@ export default class MailBox extends React.Component {
   handleDisplayWebview() {
     this.props.displayWebview({
       darkTheme: this.props.darkTheme,
+      useBeta: this.props.useProtonMailBeta,
     });
   }
 

src/renderer/components/MailBox/index.test.js

@@ -15,37 +15,48 @@ describe('components/MailBox', () => {
       hideWebviews: sinon.spy(),
       onReload: sinon.spy(),
       reloadWebview: sinon.spy(),
+      useProtonMailBeta: false,
       username: 'jan.banan',
     };
   });
 
   it('should call prop displayWebview upon mount if error is falsy', () => {
     const darkTheme = true;
     const displayWebview = sinon.spy();
+    const useProtonMailBeta = true;
     shallow(<MailBox
       {...defaultProps}
       darkTheme={darkTheme}
       displayWebview={displayWebview}
+      useProtonMailBeta={useProtonMailBeta}
     />);
 
-    expect(displayWebview).to.have.been.calledWith({ darkTheme });
+    expect(displayWebview).to.have.been.calledWith({
+      darkTheme,
+      useBeta: useProtonMailBeta,
+    });
   });
 
   it('should display view with updated username', () => {
     const displayWebview = sinon.spy();
     const darkTheme = false;
+    const useProtonMailBeta = true;
     const context = shallow(<MailBox
       {...defaultProps}
       darkTheme={darkTheme}
       username="jan"
       displayWebview={displayWebview}
+      useProtonMailBeta={useProtonMailBeta}
     />);
     displayWebview.resetHistory();
     const username = 'albert';
 
     context.setProps({ username });
 
-    expect(displayWebview).to.have.been.calledWith({ darkTheme });
+    expect(displayWebview).to.have.been.calledWith({
+      darkTheme,
+      useBeta: useProtonMailBeta,
+    });
 
     context.setProps({ username });
 
@@ -102,11 +113,13 @@ describe('components/MailBox', () => {
     const username = 'rudolf';
     const displayWebview = sinon.spy();
     const darkTheme = true;
+    const useProtonMailBeta = false;
     const context = shallow(<MailBox
       {...defaultProps}
       darkTheme={darkTheme}
       displayWebview={displayWebview}
       error={{ message: '' }}
+      useProtonMailBeta={useProtonMailBeta}
       username={username}
     />);
 
@@ -116,6 +129,7 @@ describe('components/MailBox', () => {
 
     expect(displayWebview).to.have.been.calledWith({
       darkTheme,
+      useBeta: useProtonMailBeta,
     });
   });
 });

src/renderer/components/Settings/index.js

@@ -7,6 +7,7 @@ export default class Settings extends React.Component {
   static propTypes = {
     darkTheme: PropTypes.bool.isRequired,
     onChangeSetting: PropTypes.func.isRequired,
+    useProtonMailBeta: PropTypes.bool.isRequired,
   };
 
   handleChangeCheckbox({ target }) {
@@ -18,16 +19,31 @@ export default class Settings extends React.Component {
       <div className={styles.Container}>
         <h1>Settings</h1>
 
-        <input
-          checked={this.props.darkTheme}
-          id="settings-dark-theme"
-          name="darkTheme"
-          type="checkbox"
-          onChange={this.handleChangeCheckbox.bind(this)}
-        />
-        <label htmlFor="settings-dark-theme">
-          Dark theme
-        </label>
+        <div className={styles.FormControl}>
+          <input
+            checked={this.props.darkTheme}
+            id="settings-dark-theme"
+            name="darkTheme"
+            type="checkbox"
+            onChange={this.handleChangeCheckbox.bind(this)}
+          />
+          <label htmlFor="settings-dark-theme">
+            Dark theme
+          </label>
+        </div>
+
+        <div className={styles.FormControl}>
+          <input
+            checked={this.props.useProtonMailBeta}
+            id="settings-use-beta"
+            name="useProtonMailBeta"
+            type="checkbox"
+            onChange={this.handleChangeCheckbox.bind(this)}
+          />
+          <label htmlFor="settings-use-beta">
+            Use beta.protonmail.com
+          </label>
+        </div>
       </div>
     );
   }

src/renderer/components/Settings/index.test.js

@@ -9,6 +9,7 @@ describe('components/Settings', () => {
   const defaultProps = {
     darkTheme: false,
     onChangeSetting: () => null,
+    useProtonMailBeta: false,
   };
 
   it('should call onChangeSetting upon toggling checkbox for dark theme', () => {
@@ -23,4 +24,15 @@ describe('components/Settings', () => {
     expect(onChangeSetting).to.have.been.calledWith(name, checked);
   });
 
+  it('should call onChangeSetting upon toggling checkbox for useProtonMailBeta', () => {
+    const onChangeSetting = sinon.spy();
+    const wrapper = shallow(<Settings {...defaultProps} onChangeSetting={onChangeSetting} />);
+
+    const name = 'useProtonMailBeta';
+    const checked = 'whatever';
+    const event = { target: { name, checked } };
+    wrapper.find({ name }).simulate('change', event);
+
+    expect(onChangeSetting).to.have.been.calledWith(name, checked);
+  });
 });

src/renderer/components/Settings/styles.scss

@@ -1,3 +1,11 @@
 .Container {
   padding: 20px;
 }
+
+.FormControl {
+  padding-bottom: 20px;
+
+  :global label {
+    padding-left: 10px;
+  }
+}

src/renderer/containers/App/reducer.js

@@ -6,6 +6,7 @@ const initialState = {
   settings: {
     darkTheme: false,
     hideSidebar: false,
+    useBeta: false,
   },
   webviewStatuses: {},
 };

src/renderer/containers/App/reducer.test.js

@@ -39,6 +39,7 @@ describe('containers/App/reducer', () => {
     expect(App(undefined, {}).settings).to.eql({
       darkTheme: false,
       hideSidebar: false,
+      useBeta: false,
     });
   });
 

src/renderer/containers/MailBox.js

@@ -9,14 +9,16 @@ import MailBox from '../components/MailBox';
 
 const mapStateToProps = (state, ownProps) => ({
   error: (state.webviewStatuses[ownProps.username] || {}).error,
-  darkTheme: state.settings.darkTheme
+  darkTheme: state.settings.darkTheme,
+  useProtonMailBeta: state.settings.useProtonMailBeta,
 });
 
 const mapDispatchToProps = (dispatch, { username }) => ({
-  displayWebview: ({ darkTheme }) => dispatch({
+  displayWebview: ({ darkTheme, useBeta }) => dispatch({
     type: DISPLAY_WEBVIEW,
     darkTheme,
     name: username,
+    useBeta,
   }),
   hideWebviews: () => dispatch({
     type: HIDE_WEBVIEWS,

src/renderer/containers/Settings.js

@@ -4,6 +4,7 @@ import Settings from '../components/Settings';
 
 const mapStateToProps = ({ settings }) => ({
   darkTheme: settings.darkTheme,
+  useProtonMailBeta: settings.useProtonMailBeta,
 });
 
 const mapDispatchToProps = dispatch => ({

src/renderer/lib/webview-handler.js

@@ -12,6 +12,9 @@ const containerStyleHidden = 'position: absolute; height: 0;';
  */
 
 export class WebviewHandler {
+  protonMailUrl =  'https://mail.protonmail.com/';
+  protonMailBetaUrl =  'https://beta.protonmail.com/';
+
   static create() {
     const webviewHandler = new WebviewHandler();
     webviewHandler.container = null;
@@ -52,6 +55,9 @@ export class WebviewHandler {
     }
 
     if (this.addedWebviews.indexOf(name) === -1) {
+      /**
+       * TODO: Remove? Is this ever reached?
+       */
       this.addWebview(name);
     }
 
@@ -84,13 +90,13 @@ export class WebviewHandler {
     return this.container.querySelector(`[data-name='${name}']`);
   }
 
-  addWebview(name) {
+  addWebview(name, url) {
     if (!this.container) {
-      return this._queueCommand(this.displayView.bind(this, name));
+      return this._queueCommand(this.displayView.bind(this, name, url));
     }
 
     const webview = document.createElement('webview');
-    webview.setAttribute('src', 'https://mail.protonmail.com/');
+    webview.setAttribute('src', url);
     webview.setAttribute('style', webviewStyle);
     webview.setAttribute('data-name', name);
 

src/renderer/lib/webview-handler.test.js

@@ -262,13 +262,14 @@ describe('lib/WebviewHandler', () => {
       };
       const name = 'beatrice';
       sandbox.stub(document, 'createElement').returns(mockElem);
+      const url =  'https://something.protonmail.com/';
 
-      const webview = webviewHandler.addWebview(name);
+      const webview = webviewHandler.addWebview(name, url);
 
       expect(webview).to.equal(mockElem);
 
       expect(document.createElement).to.have.been.calledWith('webview');
-      expect(mockElem.setAttribute).to.have.been.calledWith('src', 'https://mail.protonmail.com/');
+      expect(mockElem.setAttribute).to.have.been.calledWith('src', url);
       expect(mockElem.setAttribute).to.have.been.calledWith('style', sinon.match(/absolute/));
       expect(mockElem.setAttribute).to.have.been.calledWith('data-name', name);
 

src/renderer/middlewares/Webviews/index.js

@@ -13,7 +13,8 @@ const WebviewsMiddleware = ({ dispatch }) => next => action => {
   switch (action.type) {
   case DISPLAY_WEBVIEW:
     if (!createdWebviews[action.name]) {
-      const webview = WebviewHandler.addWebview(action.name);
+      const url = action.useBeta ? WebviewHandler.protonMailBetaUrl : WebviewHandler.protonMailUrl;
+      const webview = WebviewHandler.addWebview(action.name, url);
       dispatch(monitorWebview(webview, action.name));
       createdWebviews[action.name] = true;
     }

src/renderer/middlewares/Webviews/index.test.js

@@ -72,7 +72,7 @@ describe('middlewares/Webviews', () => {
     expect(WebviewHandler.displayView).to.have.been.calledWith(name, {
       classNames: {
         darkTheme
-      }
+      },
     });
   });