feat: enable run folder mode (#8004)

* feat: enable run folder mode

* fix: add folder param

packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx

@@ -1,7 +1,7 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useRef, useState } from 'react';
 import { Button, Collection, Header, Menu, MenuItem, MenuTrigger, Popover, Section } from 'react-aria-components';
-import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
+import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { toKebabCase } from '../../../common/misc';
 import { RENDER_PURPOSE_NO_RENDER } from '../../../common/render';
@@ -45,6 +45,7 @@ export const RequestGroupActionsDropdown = ({
   const [actionPlugins, setActionPlugins] = useState<RequestGroupAction[]>([]);
   const [loadingActions, setLoadingActions] = useState<Record<string, boolean>>({});
   const dropdownRef = useRef<DropdownHandle>(null);
+  const navigate = useNavigate();
 
   const requestFetcher = useFetcher();
   const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
@@ -262,6 +263,14 @@ export const RequestGroupActionsDropdown = ({
             action: () =>
               handleDeleteFolder(),
           },
+          {
+            id: 'RunFolder',
+            name: 'Run Folder',
+            icon: 'circle-play',
+            action: () => {
+              navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?folder=${requestGroup._id}`,);
+            },
+          },
         ],
       },
       ...(actionPlugins.length > 0 ? [

packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx

@@ -174,7 +174,7 @@ export const WorkspaceDropdown: FC<{}> = () => {
             name: 'Run Collection',
             icon: <Icon icon='circle-play' />,
             action: () => {
-              navigate(`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner`,);
+              navigate(`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner?folder=`,);
             },
           },
         ],

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

@@ -763,7 +763,7 @@ export const Debug: FC = () => {
                   <NavLink
                     data-testid="run-collection-btn-quick"
                     className="px-2 aria-[current]:hidden py-1 h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                    to={`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner`}
+                    to={`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner?folder=`}
                   >
                     <Icon icon="play" />
                     <span className='truncate'>Run</span>

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

@@ -3,7 +3,7 @@ import porderedJSON from 'json-order';
 import React, { type FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Checkbox, DropIndicator, GridList, GridListItem, type GridListItemProps, Heading, type Key, Tab, TabList, TabPanel, Tabs, Toolbar, TooltipTrigger, useDragAndDrop } from 'react-aria-components';
 import { Panel, PanelResizeHandle } from 'react-resizable-panels';
-import { type ActionFunction, redirect, useNavigate, useParams, useRouteLoaderData, useSearchParams, useSubmit } from 'react-router-dom';
+import { type ActionFunction, type LoaderFunction, redirect, useNavigate, useParams, useRouteLoaderData, useSearchParams, useSubmit } from 'react-router-dom';
 import { useListData } from 'react-stately';
 import { useInterval } from 'react-use';
 
@@ -106,20 +106,23 @@ interface RequestRow {
   ancestorNames: string[];
   method: string;
   url: string;
+  parentId: string;
 };
 
 export const Runner: FC<{}> = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [shouldRefresh, setShouldRefresh] = useState(false);
   const [errorMsg, setErrorMsg] = useState<null | string>(null);
+  const [targetFolderId, setTargetFolderId] = useState<string | null>(null);
 
   const { currentPlan } = useRouteLoaderData('/organization') as OrganizationLoaderData;
 
-  if (searchParams.has('refresh-pane') || searchParams.has('error')) {
+  if (searchParams.has('refresh-pane') || searchParams.has('error') || searchParams.has('folder')) {
     if (searchParams.has('refresh-pane')) {
       setShouldRefresh(true);
       searchParams.delete('refresh-pane');
     }
+
     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.
@@ -139,6 +142,13 @@ export const Runner: FC<{}> = () => {
       setErrorMsg(null);
     }
 
+    if (searchParams.has('folder')) {
+      setTargetFolderId(searchParams.get('folder'));
+      searchParams.delete('folder');
+    } else {
+      setTargetFolderId(null);
+    }
+
     setSearchParams({});
   }
 
@@ -186,6 +196,12 @@ export const Runner: FC<{}> = () => {
   const getEntityById = new Map<string, Child>();
 
   const requestRows: RequestRow[] = collection
+    .filter(item => {
+      if (targetFolderId) {
+        return item.doc.parentId === targetFolderId;
+      }
+      return true;
+    })
     .filter(item => {
       getEntityById.set(item.doc._id, item);
       return isRequest(item.doc);
@@ -209,11 +225,18 @@ export const Runner: FC<{}> = () => {
         ancestorNames,
         method: requestDoc.method,
         url: item.doc.url,
+        parentId: item.doc.parentId,
       };
     });
 
   const reqList = useListData({
     initialItems: requestRows,
+    filter: item => {
+      if (targetFolderId) {
+        return item.parentId === targetFolderId;
+      }
+      return true;
+    },
   });
 
   const { dragAndDropHooks: requestsDnD } = useDragAndDrop({
@@ -289,6 +312,7 @@ export const Runner: FC<{}> = () => {
       userUploadEnvs,
       delay,
       bail,
+      targetFolderId: targetFolderId || '',
     };
     submit(
       JSON.stringify(actionInput),
@@ -857,6 +881,7 @@ export interface runCollectionActionParams {
   delay: number;
   userUploadEnvs: UserUploadEnvironment[];
   bail: boolean;
+  targetFolderId: string;
 }
 
 // don't forget also apply modification on this function to the cli.ts at the moment
@@ -866,7 +891,7 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
   invariant(projectId, 'Project id is required');
   invariant(workspaceId, 'Workspace id is required');
 
-  const { requests, iterationCount, delay, userUploadEnvs, bail } = await request.json() as runCollectionActionParams;
+  const { requests, iterationCount, delay, userUploadEnvs, bail, targetFolderId } = await request.json() as runCollectionActionParams;
   const source: RunnerSource = 'runner';
 
   let testCtx: CollectionRunnerContext = {
@@ -1022,7 +1047,7 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
   } catch (e) {
     // the error could be from third party
     const errMsg = encodeURIComponent(e.error || e);
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?refresh-pane&error=${errMsg}`);
+    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?refresh-pane&error=${errMsg}&folder=${targetFolderId}`);
   } finally {
     cancelExecution(workspaceId);
 
@@ -1037,10 +1062,10 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
     });
   }
 
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?refresh-pane`);
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?refresh-pane&folder=${targetFolderId}`);
 };
 
-export const collectionRunnerStatusLoader: ActionFunction = async ({ params }) => {
+export const collectionRunnerStatusLoader: LoaderFunction = async ({ params }) => {
   const { workspaceId } = params;
   invariant(workspaceId, 'Workspace id is required');
   return null;