fix(runner): some minor fixes (#7923)

* fix(runner): some minor fixes

* fix: lint error

packages/insomnia/src/ui/routes/debug.tsx

@@ -153,7 +153,7 @@ export const loader: LoaderFunction = async ({ params, request }) => {
     // TODO(george): we should remove this after enabling the sidebar for the runner
     const startOfQuery = request.url.indexOf('?');
     const urlWithoutQuery = startOfQuery > 0 ? request.url.slice(0, startOfQuery) : request.url;
-    const isDisplayingRunner = urlWithoutQuery.endsWith('/runner');
+    const isDisplayingRunner = urlWithoutQuery.includes('/runner');
     if (activeRequest && !isDisplayingRunner) {
       return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequestId}`);
     }

packages/insomnia/src/ui/routes/runner.tsx

@@ -9,6 +9,7 @@ import { useInterval } from 'react-use';
 
 import { Tooltip } from '../../../src/ui/components/tooltip';
 import { JSON_ORDER_PREFIX, JSON_ORDER_SEPARATOR } from '../../common/constants';
+import { debounce } from '../../common/misc';
 import type { ResponseTimelineEntry } from '../../main/network/libcurl-promise';
 import type { TimingStep } from '../../main/network/request-timing';
 import * as models from '../../models';
@@ -21,6 +22,7 @@ import { invariant } from '../../utils/invariant';
 import { ErrorBoundary } from '../components/error-boundary';
 import { HelpTooltip } from '../components/help-tooltip';
 import { Icon } from '../components/icon';
+import { showAlert } from '../components/modals';
 import { UploadDataModal, type UploadDataType } from '../components/modals/upload-runner-data-modal';
 import { Pane, PaneBody, PaneHeader } from '../components/panes/pane';
 import { RunnerResultHistoryPane } from '../components/panes/runner-result-history-pane';
@@ -108,6 +110,18 @@ export const Runner: FC<{}> = () => {
     }
     if (searchParams.has('error')) {
       setErrorMsg(searchParams.get('error'));
+      // TODO: this should be removed when we are able categorized errors better and display them in different ways.
+      showAlert({
+        title: 'Unexpected Runner Failure',
+        message: (
+          <div>
+            <p>The runner failed due to an unhandled error:</p>
+            <code className="wide selectable">
+              <pre>{searchParams.get('error')}</pre>
+            </code>
+          </div>
+        ),
+      });
       searchParams.delete('error');
     }
 
@@ -226,38 +240,41 @@ export const Runner: FC<{}> = () => {
   });
 
   const submit = useSubmit();
-  const onRun = () => {
-    const selected = new Set(reqList.selectedKeys);
-    const requests = Array.from(reqList.items)
-      .filter(item => selected.has(item.id));
-    // convert uploadData to environment data
-    const userUploadEnvs = uploadData.map(data => {
-      const orderedJson = porderedJSON.parse<UploadDataType>(
-        JSON.stringify(data),
-        JSON_ORDER_PREFIX,
-        JSON_ORDER_SEPARATOR,
-      );
-      return {
-        name: file!.name,
-        data: orderedJson.object,
-        dataPropertyOrder: orderedJson.map || null,
-      };
-    });
+  const onRun = debounce(
+    () => {
+      const selected = new Set(reqList.selectedKeys);
+      const requests = Array.from(reqList.items)
+        .filter(item => selected.has(item.id));
+      // convert uploadData to environment data
+      const userUploadEnvs = uploadData.map(data => {
+        const orderedJson = porderedJSON.parse<UploadDataType>(
+          JSON.stringify(data),
+          JSON_ORDER_PREFIX,
+          JSON_ORDER_SEPARATOR,
+        );
+        return {
+          name: file!.name,
+          data: orderedJson.object,
+          dataPropertyOrder: orderedJson.map || null,
+        };
+      });
 
-    submit(
-      {
-        requests,
-        iterations,
-        userUploadEnvs,
-        delay,
-      },
-      {
-        method: 'post',
-        encType: 'application/json',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner/run/`,
-      }
-    );
-  };
+      submit(
+        {
+          requests,
+          iterations,
+          userUploadEnvs,
+          delay,
+        },
+        {
+          method: 'post',
+          encType: 'application/json',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner/run/`,
+        }
+      );
+    },
+    1000,
+  );
 
   const navigate = useNavigate();
   const goToRequest = (requestId: string) => {