Merge remote-tracking branch 'origin/develop' into develop

packages/insomnia-app/app/models/settings.js

@@ -8,6 +8,7 @@ import * as hotkeys from '../common/hotkeys';
 type BaseSettings = {
   showPasswords: boolean,
   useBulkHeaderEditor: boolean,
+  useBulkParametersEditor: boolean,
   followRedirects: boolean,
   editorFontSize: number,
   editorIndentSize: number,
@@ -56,6 +57,7 @@ export function init(): BaseSettings {
   return {
     showPasswords: false,
     useBulkHeaderEditor: false,
+    useBulkParametersEditor: false,
     followRedirects: true,
     editorFontSize: 11,
     editorIndentSize: 2,

packages/insomnia-app/app/ui/components/editors/request-parameters-editor.js

@@ -0,0 +1,120 @@
+// @flow
+
+import * as React from 'react';
+import autobind from 'autobind-decorator';
+import KeyValueEditor from '../key-value-editor/editor';
+import CodeEditor from '../codemirror/code-editor';
+import type { Request, RequestParameter } from '../../../models/request';
+
+type Props = {
+  onChange: (r: Request, parameters: Array<RequestParameter>) => Promise<Request>,
+  bulk: boolean,
+  editorFontSize: number,
+  editorIndentSize: number,
+  editorLineWrapping: boolean,
+  nunjucksPowerUserMode: boolean,
+  isVariableUncovered: boolean,
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  request: Request,
+};
+
+@autobind
+class RequestParametersEditor extends React.PureComponent<Props> {
+  _handleBulkUpdate(paramsString: string) {
+    const { onChange, request } = this.props;
+    const params = RequestParametersEditor._getParamsFromString(paramsString);
+
+    onChange(request, params);
+  }
+
+  _handleKeyValueUpdate(parameters: Array<RequestParameter>) {
+    const { onChange, request } = this.props;
+    onChange(request, parameters);
+  }
+
+  static _getParamsFromString(paramsString: string) {
+    const params = [];
+    const rows = paramsString.split(/\n+/);
+
+    for (const row of rows) {
+      const [rawName, rawValue] = row.split(/:(.*)$/);
+
+      const name = (rawName || '').trim();
+      const value = (rawValue || '').trim();
+
+      if (!name && !value) {
+        continue;
+      }
+
+      params.push({ name, value });
+    }
+
+    return params;
+  }
+
+  _getQueriesString() {
+    const { parameters } = this.props.request;
+
+    let paramsString = '';
+
+    for (const param of parameters) {
+      // Make sure it's not disabled
+      if (param.disabled) {
+        continue;
+      }
+
+      // Make sure it's not blank
+      if (!param.name && !param.value) {
+        continue;
+      }
+
+      paramsString += `${param.name}: ${param.value}\n`;
+    }
+
+    return paramsString;
+  }
+
+  render() {
+    const {
+      bulk,
+      request,
+      editorFontSize,
+      editorIndentSize,
+      editorLineWrapping,
+      handleRender,
+      handleGetRenderContext,
+      nunjucksPowerUserMode,
+      isVariableUncovered,
+    } = this.props;
+
+    return bulk ? (
+      <CodeEditor
+        getRenderContext={handleGetRenderContext}
+        render={handleRender}
+        nunjucksPowerUserMode={nunjucksPowerUserMode}
+        isVariableUncovered={isVariableUncovered}
+        fontSize={editorFontSize}
+        indentSize={editorIndentSize}
+        lineWrapping={editorLineWrapping}
+        onChange={this._handleBulkUpdate}
+        defaultValue={this._getQueriesString()}
+      />
+    ) : (
+      <KeyValueEditor
+        sortable
+        namePlaceholder="name"
+        valuePlaceholder="value"
+        descriptionPlaceholder="description"
+        pairs={request.parameters}
+        nunjucksPowerUserMode={nunjucksPowerUserMode}
+        isVariableUncovered={isVariableUncovered}
+        handleRender={handleRender}
+        handleGetRenderContext={handleGetRenderContext}
+        onChange={this._handleKeyValueUpdate}
+      />
+    );
+  }
+}
+
+export default RequestParametersEditor;

packages/insomnia-app/app/ui/components/request-pane.js

@@ -24,13 +24,13 @@ import BodyEditor from './editors/body/body-editor';
 import RequestHeadersEditor from './editors/request-headers-editor';
 import ErrorBoundary from './error-boundary';
 import Hotkey from './hotkey';
-import KeyValueEditor from './key-value-editor/editor';
 import MarkdownPreview from './markdown-preview';
 import { showModal } from './modals/index';
 import RequestSettingsModal from './modals/request-settings-modal';
 import RenderedQueryString from './rendered-query-string';
 import RequestUrlBar from './request-url-bar.js';
 import type { Settings } from '../../models/settings';
+import RequestParametersEditor from './editors/request-parameters-editor';
 
 type Props = {
   // Functions
@@ -52,6 +52,7 @@ type Props = {
   updateRequestMimeType: (r: Request, mimeType: string) => Promise<Request>,
   updateSettingsShowPasswords: Function,
   updateSettingsUseBulkHeaderEditor: Function,
+  updateSettingsUseBulkParametersEditor: Function,
   handleImport: Function,
   handleImportFile: Function,
 
@@ -104,6 +105,11 @@ class RequestPane extends React.PureComponent<Props> {
     updateSettingsUseBulkHeaderEditor(!settings.useBulkHeaderEditor);
   }
 
+  _handleUpdateSettingsUseBulkParametersEditor() {
+    const { settings, updateSettingsUseBulkParametersEditor } = this.props;
+    updateSettingsUseBulkParametersEditor(!settings.useBulkParametersEditor);
+  }
+
   _handleImportFile() {
     this.props.handleImportFile();
   }
@@ -112,13 +118,6 @@ class RequestPane extends React.PureComponent<Props> {
     this.props.handleCreateRequest();
   }
 
-  _handleUpdateRequestParameters(parameters: Array<RequestParameter>) {
-    const { request, updateRequestParameters } = this.props;
-    if (request) {
-      updateRequestParameters(request, parameters);
-    }
-  }
-
   _handleImportQueryFromUrl() {
     const { request, forceUpdateRequest } = this.props;
 
@@ -168,6 +167,7 @@ class RequestPane extends React.PureComponent<Props> {
       updateRequestMimeType,
       updateSettingsShowPasswords,
       updateRequestMethod,
+      updateRequestParameters,
       updateRequestUrl,
       headerEditorKey,
       downloadPath,
@@ -369,18 +369,18 @@ class RequestPane extends React.PureComponent<Props> {
               <ErrorBoundary
                 key={uniqueKey}
                 errorClassName="tall wide vertically-align font-error pad text-center">
-                <KeyValueEditor
-                  sortable
-                  allowMultiline
-                  namePlaceholder="name"
-                  valuePlaceholder="value"
-                  descriptionPlaceholder="description"
-                  pairs={request.parameters}
+                <RequestParametersEditor
+                  key={headerEditorKey}
                   handleRender={handleRender}
                   handleGetRenderContext={handleGetRenderContext}
                   nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
                   isVariableUncovered={isVariableUncovered}
-                  onChange={this._handleUpdateRequestParameters}
+                  editorFontSize={settings.editorFontSize}
+                  editorIndentSize={settings.editorIndentSize}
+                  editorLineWrapping={settings.editorLineWrapping}
+                  onChange={updateRequestParameters}
+                  request={request}
+                  bulk={settings.useBulkParametersEditor}
                 />
               </ErrorBoundary>
             </div>
@@ -391,6 +391,11 @@ class RequestPane extends React.PureComponent<Props> {
                 onClick={this._handleImportQueryFromUrl}>
                 Import from URL
               </button>
+              <button
+                className="margin-top-sm btn btn--clicky space-left"
+                onClick={this._handleUpdateSettingsUseBulkParametersEditor}>
+                {settings.useBulkParametersEditor ? 'Regular Edit' : 'Bulk Edit'}
+              </button>
             </div>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel header-editor">

packages/insomnia-app/app/ui/components/wrapper.js

@@ -264,6 +264,12 @@ class Wrapper extends React.PureComponent<Props, State> {
     return sUpdate(this.props.settings, { useBulkHeaderEditor });
   }
 
+  _handleUpdateSettingsUseBulkParametersEditor(
+    useBulkParametersEditor: boolean,
+  ): Promise<Settings> {
+    return sUpdate(this.props.settings, { useBulkParametersEditor });
+  }
+
   // Other Helpers
   _handleImportFile(): void {
     this.props.handleImportFileToWorkspace(this.props.activeWorkspace._id);
@@ -812,6 +818,9 @@ class Wrapper extends React.PureComponent<Props, State> {
             updateRequestMimeType={handleUpdateRequestMimeType}
             updateSettingsShowPasswords={this._handleUpdateSettingsShowPasswords}
             updateSettingsUseBulkHeaderEditor={this._handleUpdateSettingsUseBulkHeaderEditor}
+            updateSettingsUseBulkParametersEditor={
+              this._handleUpdateSettingsUseBulkParametersEditor
+            }
             forceRefreshCounter={this.state.forceRefreshKey}
             handleSend={this._handleSendRequestWithActiveEnvironment}
             handleSendAndDownload={this._handleSendAndDownloadRequestWithActiveEnvironment}