Fix code export of bodies in the context menu

This was broken, because if you haven't opened the request yet (common
for context menu items) then the body decoding hasn't started, so the
export always includes a "BODY NOT AVAILABLE" warning. If we just wait
for decoding like this first, that goes away.

Author: pimterry

src/components/view/view-context-menu-builder.ts

@@ -1,4 +1,4 @@
-import { action } from 'mobx';
+import { action, runInAction } from 'mobx';
 
 import { CollectedEvent } from '../../types';
 
@@ -77,10 +77,13 @@ export class ViewEventContextMenuBuilder {
                     ...(preferredExportFormat && isPaidUser ? [{
                         type: 'option',
                         label: `Copy as ${getCodeSnippetFormatName(preferredExportFormat)} Snippet`,
-                        callback: (data: HttpExchange) =>
+                        callback: async (data: HttpExchange) => {
                             copyToClipboard(
-                                generateCodeSnippet(data, preferredExportFormat)
-                            )
+                                await generateCodeSnippet(data, preferredExportFormat, {
+                                    waitForBodyDecoding: true
+                                })
+                            );
+                        }
                     }] as const : []),
                     {
                         type: 'submenu',
@@ -92,13 +95,18 @@ export class ViewEventContextMenuBuilder {
                             items: snippetExportOptions[snippetGroupName].map((snippetOption) => ({
                                 type: 'option',
                                 label: getCodeSnippetFormatName(snippetOption),
-                                callback: action((data: HttpExchange) => {
+                                callback: async (data: HttpExchange) => {
                                     // When you pick an option here, it updates your preferred default option
-                                    this.uiStore.exportSnippetFormat = getCodeSnippetFormatKey(snippetOption);
+                                    runInAction(() => {
+                                        this.uiStore.exportSnippetFormat = getCodeSnippetFormatKey(snippetOption);
+                                    });
+
                                     copyToClipboard(
-                                        generateCodeSnippet(data, snippetOption)
+                                        await generateCodeSnippet(data, snippetOption, {
+                                            waitForBodyDecoding: true
+                                        })
                                     );
-                                })
+                                }
                             }))
                         }))
                     },

src/model/ui/export.ts

@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import * as HTTPSnippet from "@httptoolkit/httpsnippet";
 
 import { saveFile } from "../../util/ui";
+import { ObservablePromise } from '../../util/observable';
 
 import { HttpExchange } from "../http/exchange";
 import { generateHarRequest, generateHar, ExtendedHarRequest } from '../http/har';
@@ -21,7 +22,31 @@ export const exportHar = async (exchange: HttpExchange) => {
     saveFile(filename, 'application/har+json;charset=utf-8', harContent);
 };
 
-export const generateCodeSnippet = (exchange: HttpExchange, snippetFormat: SnippetOption) => {
+export function generateCodeSnippet(
+    exchange: HttpExchange,
+    snippetFormat: SnippetOption,
+    options: { waitForBodyDecoding: true }
+): ObservablePromise<string>;
+export function generateCodeSnippet(
+    exchange: HttpExchange,
+    snippetFormat: SnippetOption,
+    options?: { waitForBodyDecoding?: boolean }
+): string;
+export function generateCodeSnippet(
+    exchange: HttpExchange,
+    snippetFormat: SnippetOption,
+    options: { waitForBodyDecoding?: boolean } = {}
+): string | ObservablePromise<string> {
+    // If the body isn't decoded yet, and it should be, wait for that decoding first.
+    if (options.waitForBodyDecoding && (
+        exchange.request.body.decodedPromise.state === 'pending' ||
+        exchange.request.body.decodedPromise.state === undefined
+    )) {
+        // Doesn't matter if this errors - we'll make that explicit in the export later.
+        return exchange.request.body.decodedPromise.catch(() => {})
+            .then(() => generateCodeSnippet(exchange, snippetFormat, options));
+    }
+
     // First, we need to get a HAR that appropriately represents this request as we
     // want to export it:
     const harRequest = generateHarRequest(exchange.request, false, {