Add layout setting and fix dns

app/backend/database/models/settings.js

@@ -14,6 +14,7 @@ export function init () {
     timeout: 0,
     validateSSL: true,
     optSyncBeta: false,
+    forceVerticalLayout: false,
   });
 }
 

app/backend/dns.js

@@ -1,11 +1,25 @@
 import dns from 'dns';
 import {parse as urlParse, format as urlFormat} from 'url';
 
-function lookup (url) {
+/**
+ * Try to find a supported IPv6 address. Will throw if none found.
+ *
+ * @param url
+ * @returns {Promise}
+ */
+function lookupIPv6 (url) {
   return new Promise((resolve, reject) => {
     const {hostname} = urlParse(url);
-    dns.lookup(hostname, (err, ip) => {
-      err ? reject(err) : resolve(ip)
+    const options = {
+      hints: dns.ADDRCONFIG,
+      family: 6,
+    };
+    dns.lookup(hostname, options, (err, results) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(results);
+      }
     });
   })
 }
@@ -14,7 +28,7 @@ export async function swapHost (url) {
   let ip;
 
   try {
-    ip = await lookup(url);
+    ip = await lookupIPv6(url);
     const parsedUrl = urlParse(url);
     delete parsedUrl.host; // So it doesn't build with old host
     parsedUrl.hostname = ip;

app/ui/components/modals/SettingsModal.js

@@ -195,26 +195,22 @@ class SettingsTabs extends Component {
             </div>
           </div>
 
-          {/*<hr/>*/}
-          {/*<h2 className="txt-md pad-top-sm">*/}
-          {/*<label className="label--small">Beta Features</label>*/}
-          {/*</h2>*/}
-          {/*<div className="pad-top-sm">*/}
-          {/*<input*/}
-          {/*id="setting-opt-sync-beta"*/}
-          {/*type="checkbox"*/}
-          {/*checked={settings.optSyncBeta}*/}
-          {/*onChange={e => db.settings.update(settings, {optSyncBeta: e.target.checked})}*/}
-          {/*/>*/}
-          {/*&nbsp;&nbsp;*/}
-          {/*<label htmlFor="setting-opt-sync-beta">*/}
-          {/*Cloud sync beta*/}
-          {/*{" "}*/}
-          {/*<span className="faint txt-sm pad-top">*/}
-          {/*(experimental and will be paid once out of beta)*/}
-          {/*</span>*/}
-          {/*</label>*/}
-          {/*</div>*/}
+          <br/>
+          <h2 className="txt-md pad-top-sm">
+            <label className="label--small">Layout Settings</label>
+          </h2>
+          <div>
+            <input
+              id="setting-stacked-layout"
+              type="checkbox"
+              checked={settings.forceVerticalLayout}
+              onChange={e => db.settings.update(settings, {forceVerticalLayout: e.target.checked})}
+            />
+            &nbsp;&nbsp;
+            <label htmlFor="setting-stacked-layout">
+              Force stacked layout
+            </label>
+          </div>
           <br/>
         </TabPanel>
 

app/ui/components/modals/WorkspaceEnvironmentsEditModal.js

@@ -57,7 +57,8 @@ class WorkspaceEnvironmentsEditModal extends Component {
 
   async _handleAddEnvironment () {
     const {rootEnvironment, workspace} = this.state;
-    const environment = await db.environment.create({parentId: rootEnvironment._id})
+    const parentId = rootEnvironment._id;
+    const environment = await db.environment.create({parentId});
     this._load(workspace, environment);
   }
 
@@ -87,7 +88,11 @@ class WorkspaceEnvironmentsEditModal extends Component {
 
   async _handleChangeEnvironmentName (environment, name) {
     const {workspace} = this.state;
-    await db.environment.update(environment, {name});
+
+    // NOTE: Fetch the environment first because it might not be up to date.
+    // For example, editing the body updates silently.
+    const realEnvironment = await db.environment.getById(environment._id);
+    await db.environment.update(realEnvironment, {name});
     this._load(workspace);
   }
 
@@ -117,10 +122,10 @@ class WorkspaceEnvironmentsEditModal extends Component {
       return;
     }
 
-    const environment = this._envEditor.getValue();
+    const data = this._envEditor.getValue();
     const activeEnvironment = this._getActiveEnvironment();
 
-    db.environment.update(activeEnvironment, {data: environment});
+    db.environment.update(activeEnvironment, {data});
   }
 
   render () {

app/ui/components/viewers/ResponseError.js

@@ -34,7 +34,7 @@ class ResponseError extends Component {
 
     return (
       <div>
-        <pre className="selectable pad">
+        <pre className="selectable pad force-word-wrap">
           {error}
         </pre>
         <hr/>

app/ui/containers/App.js

@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import {ipcRenderer} from 'electron';
 import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
+import classnames from 'classnames';
 import {bindActionCreators} from 'redux';
 import HTML5Backend from 'react-dnd-html5-backend';
 import {DragDropContext} from 'react-dnd';
@@ -501,7 +502,7 @@ class App extends Component {
 
     return (
       <div id="wrapper"
-           className="wrapper"
+           className={classnames('wrapper', {'wrapper--vertical': settings.forceVerticalLayout})}
            style={{gridTemplateColumns: gridTemplateColumns}}>
         <Sidebar
           ref={n => this._sidebar = n}

app/ui/css/components/wrapper.less

@@ -53,24 +53,28 @@
   }
 }
 
-@media (max-width: @breakpoint-md) {
-  .wrapper {
-    .request-pane {
-      grid-column-start: 3;
-      grid-column-end: span 3;
-      grid-row-start: 1;
-      grid-row-end: span 1;
-    }
+.wrapper--vertical {
+  .request-pane {
+    grid-column-start: 3;
+    grid-column-end: span 3;
+    grid-row-start: 1;
+    grid-row-end: span 1;
+  }
 
-    .response-pane {
-      grid-column-start: 3;
-      grid-column-end: span 3;
-      grid-row-start: 2;
-      grid-row-end: span 1;
-    }
+  .response-pane {
+    grid-column-start: 3;
+    grid-column-end: span 3;
+    grid-row-start: 2;
+    grid-row-end: span 1;
+  }
 
-    .drag--pane {
-      display: none;
-    }
+  .drag--pane {
+    display: none;
+  }
+}
+
+@media (max-width: @breakpoint-md) {
+  .wrapper {
+    .wrapper--vertical();
   }
 }

app/ui/css/layout/base.less

@@ -164,6 +164,10 @@ i.fa {
   white-space: pre-wrap;
 }
 
+.force-word-wrap {
+  white-space: normal;
+}
+
 .no-wrap {
   white-space: nowrap;
 }