Add support for pasting curl commands into the Send page

Author: pimterry

package-lock.json

@@ -87,6 +87,7 @@
     "ajv-formats": "^2.1.1",
     "auth0-js": "^9.13.2",
     "base64-arraybuffer": "^0.2.0",
+    "curl-as-har-request": "^0.1.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^1.30.1",
     "dedent": "^0.7.0",

package.json

@@ -1,8 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { action, flow, observable, reaction } from 'mobx';
+import { action, reaction } from 'mobx';
 import { disposeOnUnmount, inject, observer } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
+import * as HarFormat from 'har-format';
 
 import { RawHeaders } from '../../types';
 
@@ -57,7 +58,8 @@ export class RequestPane extends React.Component<{
 
     requestInput: RequestInput,
     sendRequest: () => void,
-    isSending: boolean
+    isSending: boolean,
+    updateFromHar: (harRequest: HarFormat.Request) => void
 }> {
 
     get cardProps() {
@@ -103,6 +105,7 @@ export class RequestPane extends React.Component<{
                 updateUrl={this.updateUrl}
                 isSending={isSending}
                 sendRequest={sendRequest}
+                updateFromHar={this.props.updateFromHar}
             />
             <SendRequestHeadersCard
                 {...this.cardProps.requestHeaders}

src/components/send/request-pane.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { action } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
+import * as HarFormat from 'har-format';
 
 import { styled } from '../../styles';
 import { useHotkeys } from '../../util/ui';
@@ -9,6 +11,7 @@ import { WithInjected } from '../../types';
 import { ApiError } from '../../services/server-api-types';
 import { SendStore } from '../../model/send/send-store';
 import { UiStore } from '../../model/ui/ui-store';
+import { buildRequestInputFromHarRequest } from '../../model/send/send-request-model';
 
 import { ContainerSizedEditor } from '../editor/base-editor';
 
@@ -147,6 +150,7 @@ class SendPage extends React.Component<{
                             selectedRequest.pendingSend?.promise.state === 'pending'
                         }
                         editorNode={this.requestEditorNode}
+                        updateFromHar={this.updateFromHar}
                     />
                     <ResponsePane
                         requestInput={selectedRequest.request}
@@ -170,6 +174,12 @@ class SendPage extends React.Component<{
         </SendPageContainer>;
     }
 
+    @action.bound
+    updateFromHar(harRequest: HarFormat.Request) {
+        const { selectedRequest } = this.props.sendStore;
+        selectedRequest.request = buildRequestInputFromHarRequest(harRequest);
+    }
+
 }
 
 // Annoying cast required to handle the store prop nicely in our types

src/components/send/send-page.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Method } from 'mockttp';
+import * as HarFormat from 'har-format';
+import { parseCurlCommand } from 'curl-as-har-request';
 
 import { styled } from '../../styles';
 import { Icon, ArrowIcon } from '../../icons';
@@ -110,6 +112,8 @@ const SendButton = styled(Button)`
 `;
 
 export const SendRequestLine = (props: {
+    updateFromHar: (harRequest: HarFormat.Request) => void;
+
     method: string;
     updateMethod: (method: string) => void;
 
@@ -138,6 +142,28 @@ export const SendRequestLine = (props: {
         return false;
     }, [props.sendRequest]);
 
+    const onPaste = React.useCallback((event: React.ClipboardEvent<HTMLInputElement>) => {
+        const pastedText = event.clipboardData.getData('text/plain');
+        if (pastedText.match(/^\s*curl /)) {
+            event.preventDefault();
+
+            // Looks like you've pasted a curl command, try to parse it to HAR, then
+            // generate a request from there:
+            try {
+                // For now we use the first command, we could pop into multiple tabs if
+                // we want to support multiple commands here later:
+                const harRequest = parseCurlCommand(pastedText)[0];
+                if (!harRequest.url) {
+                    throw new Error('Could not extract URL from pasted curl command.');
+                }
+                props.updateFromHar(harRequest);
+            } catch (e: any) {
+                console.log(e);
+                alert(`Could not parse pasted curl command:\n\n${e.message || e}`);
+            }
+        }
+    }, [props.updateFromHar]);
+
     const borderColor = getMethodColor(props.method);
 
     return <SendRequestLineContainer
@@ -164,12 +190,13 @@ export const SendRequestLine = (props: {
         <UrlInput
             type='url'
             spellCheck='false'
-            placeholder='https://example.com/hello?name=world'
+            placeholder='https://example.com/hello?name=world or paste a cURL command'
             required={true}
 
             value={props.url}
             onFocus={prepopulateUrl}
             onChange={updateUrlFromEvent}
+            onPaste={onPaste}
         />
         <SendButton
             type='submit'

src/components/send/send-request-line.tsx

@@ -731,7 +731,7 @@ function cleanRawHarData(harContents: any) {
     return harContents;
 }
 
-function parseHarRequest(
+export function parseHarRequest(
     id: string,
     request: ExtendedHarRequest,
     timingEvents: TimingEvents

src/model/http/har.ts

@@ -1,18 +1,20 @@
 import * as Mockttp from 'mockttp';
 import * as serializr from 'serializr';
 import { observable } from 'mobx';
+import * as HarFormat from 'har-format';
 
 import { HttpExchange, RawHeaders, HttpExchangeView } from "../../types";
 import { ObservablePromise } from '../../util/observable';
-import { h2HeadersToH1 } from '../http/headers';
 
-import { EditableContentType, getEditableContentTypeFromViewable } from "../events/content-types";
+import { EditableContentType, getEditableContentType, getEditableContentTypeFromViewable } from "../events/content-types";
 import { EditableBody } from '../http/editable-body';
 import {
     syncBodyToContentLength,
     syncFormattingToContentType,
     syncUrlToHeaders
 } from '../http/editable-request-parts';
+import { getHeaderValue, h2HeadersToH1 } from '../http/headers';
+import { parseHarRequest } from '../http/har';
 
 // This is our model of a Request for sending. Smilar to the API model,
 // but not identical, as we add extra UI metadata etc.
@@ -132,6 +134,26 @@ export async function buildRequestInputFromExchange(exchange: HttpExchangeView):
     });
 }
 
+export function buildRequestInputFromHarRequest(requestData: HarFormat.Request): RequestInput {
+    const harRequest = parseHarRequest('', requestData, {} as any);
+
+    let headers = harRequest.rawHeaders;
+    if (parseInt(harRequest.httpVersion.split('.')[0], 10) >= 2) {
+        headers = h2HeadersToH1(headers, harRequest.method);
+    }
+
+    return new RequestInput({
+        method: harRequest.method,
+        url: harRequest.url,
+        headers: headers,
+        requestContentType: getEditableContentType(
+            getHeaderValue(harRequest.headers, 'content-type')
+            ?? 'application/octet-stream'
+        ) ?? 'text',
+        rawBody: harRequest.body.decoded
+    });
+}
+
 // These are the types that the sever client API expects. They are _not_ the same as
 // the Input type above, which is more flexible and includes various UI concerns that
 // we don't need to share with the server to actually send the request.