feat: testing a mock endpoint cancellation (Kong#7093)

* first pass

* update logs

* wait for response

* actually cancel

packages/insomnia-smoke-test/tests/smoke/mock.test.ts

@@ -19,6 +19,7 @@ test('can make a mock route', async ({ app, page }) => {
   await page.getByTestId('CodeEditor').getByRole('textbox').fill('123');
 
   await page.getByRole('button', { name: 'Test' }).click();
+  await page.getByText('No body returned for response').click();
   await page.getByRole('tab', { name: 'Timeline' }).click();
   await page.getByText('HTTP/2 200').click();
 });

packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx

@@ -2,6 +2,7 @@ import fs from 'fs';
 import * as Har from 'har-format';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { useRouteLoaderData } from 'react-router-dom';
+import { useFetcher } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
 import { getCurrentSessionId } from '../../../account/session';
@@ -12,12 +13,15 @@ import * as models from '../../../models';
 import { MockRoute } from '../../../models/mock-route';
 import { MockServer } from '../../../models/mock-server';
 import { Response } from '../../../models/response';
+import { cancelRequestById } from '../../../network/cancellation';
 import { jsonPrettify } from '../../../utils/prettify/json';
 import { MockRouteLoaderData } from '../../routes/mock-route';
 import { useRootLoaderData } from '../../routes/root';
 import { Dropdown, DropdownButton, DropdownItem, DropdownSection, ItemContent } from '../base/dropdown';
 import { TabItem, Tabs } from '../base/tabs';
 import { CodeEditor } from '../codemirror/code-editor';
+import { PlaceholderResponsePane } from '../panes/placeholder-response-pane';
+import { ResponseTimer } from '../response-timer';
 import { getTimeFromNow } from '../time-from-now';
 import { ResponseHeadersViewer } from '../viewers/response-headers-viewer';
 import { ResponseTimelineViewer } from '../viewers/response-timeline-viewer';
@@ -45,6 +49,7 @@ export const MockResponsePane = () => {
   const { settings } = useRootLoaderData();
   const [timeline, setTimeline] = useState<ResponseTimelineEntry[]>([]);
   const [previewMode, setPreviewMode] = useState<PreviewMode>(PREVIEW_MODE_FRIENDLY);
+  const requestFetcher = useFetcher({ key: 'mock-request-fetcher' });
 
   useEffect(() => {
     const fn = async () => {
@@ -55,7 +60,15 @@ export const MockResponsePane = () => {
     };
     fn();
   }, [activeResponse]);
-
+  if (requestFetcher.state !== 'idle') {
+    return (
+      <PlaceholderResponsePane>
+        {<ResponseTimer
+          handleCancel={() => activeResponse && cancelRequestById(activeResponse.parentId)}
+        />}
+      </PlaceholderResponsePane>
+    );
+  }
   return (
     <Tabs aria-label="Mock response">
       <TabItem

packages/insomnia/src/ui/routes/mock-route.tsx

@@ -94,7 +94,7 @@ export const MockRouteRoute = () => {
   const patchMockRoute = useMockRoutePatcher();
   const mockbinUrl = mockServer.useInsomniaCloud ? getMockServiceURL() : mockServer.url;
 
-  const requestFetcher = useFetcher();
+  const requestFetcher = useFetcher({ key: 'mock-request-fetcher' });
   const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
 
   const upsertBinOnRemoteFromResponse = async (compoundId: string | null): Promise<string> => {
@@ -118,7 +118,7 @@ export const MockRouteRoute = () => {
       });
       if (typeof res === 'object' && 'message' in res && 'error' in res) {
         console.error('error response', res);
-        return `${res.error}: ${res.message}`;
+        return `Mock API ${res.error}: ${res.message}`;
       }
 
       if (typeof res === 'string') {
@@ -128,7 +128,7 @@ export const MockRouteRoute = () => {
       return 'Unexpected response, see console for details';
     } catch (e) {
       console.log(e);
-      return 'Unhandled error: ' + e.message;
+      return 'Unhandled Mock API error: ' + e.message;
     }
   };