clean up runner panel and rendering (#8000)

packages/insomnia/src/ui/index.tsx

@@ -44,7 +44,6 @@ const Debug = lazy(() => import('./routes/debug'));
 const Design = lazy(() => import('./routes/design'));
 const MockServer = lazy(() => import('./routes/mock-server'));
 const Environments = lazy(() => import('./routes/environments'));
-const Runner = lazy(() => import('./routes/runner'));
 
 initializeSentry();
 initializeLogging();
@@ -321,7 +320,7 @@ async function renderApp() {
                             ),
                             children: [
                               {
-                                path: `${ACTIVITY_DEBUG}`,
+                                path: `${ACTIVITY_DEBUG}/*`,
                                 loader: async (...args) =>
                                   (await import('./routes/debug')).loader(
                                     ...args,
@@ -464,10 +463,7 @@ async function renderApp() {
                                       (
                                         await import('./routes/runner')
                                       ).collectionRunnerStatusLoader(...args),
-                                    element:
-                                      <Suspense fallback={<AppLoadingIndicator />}>
-                                        <Runner />
-                                      </Suspense>,
+                                    element: <Outlet />,
                                     action: async (...args) =>
                                       (
                                         await import('./routes/runner')
@@ -705,6 +701,7 @@ async function renderApp() {
                                 children: [
                                   {
                                     index: true,
+                                    element: <Outlet />,
                                     loader: async (...args) =>
                                       (
                                         await import('./routes/test-suite')

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

@@ -31,8 +31,9 @@ import {
   type LoaderFunction,
   type NavigateFunction,
   NavLink,
-  Outlet,
   redirect,
+  Route,
+  Routes,
   useFetcher,
   useFetchers,
   useNavigate,
@@ -112,6 +113,7 @@ import type {
   WebSocketRequestLoaderData,
 } from './request';
 import { useRootLoaderData } from './root';
+import Runner from './runner';
 import type { Child, WorkspaceLoaderData } from './workspace';
 
 export interface GrpcMessage {
@@ -1114,62 +1116,76 @@ export const Debug: FC = () => {
       </Panel>
       <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
       <Panel>
-        <PanelGroup autoSaveId="insomnia-panels" direction={direction}>
-          <Panel id="pane-one" minSize={10} className='pane-one theme--pane'>
-            {workspaceId ? (
-              <ErrorBoundary showAlert>
-                {isRequestGroupId(requestGroupId) && (
-                  <RequestGroupPane settings={settings} />
-                )}
-                {isGrpcRequestId(requestId) && grpcState && (
-                  <GrpcRequestPane
-                    grpcState={grpcState}
-                    setGrpcState={setGrpcState}
-                    reloadRequests={reloadRequests}
-                  />
-                )}
-                {isWebSocketRequestId(requestId) && (
-                  <WebSocketRequestPane environment={activeEnvironment} />
-                )}
-                {isRequestId(requestId) && (
-                  <RequestPane
-                    environmentId={activeEnvironment ? activeEnvironment._id : ''}
-                    settings={settings}
-                    onPaste={text => {
-                      setPastedCurl(text);
-                      setPasteCurlModalOpen(true);
-                    }}
-                  />
-                )}
-                {Boolean(!requestId && !requestGroupId) && <PlaceholderRequestPane />}
-                {isRequestSettingsModalOpen && activeRequest && (
-                  <RequestSettingsModal
-                    request={activeRequest}
-                    onHide={() => setIsRequestSettingsModalOpen(false)}
-                  />
-                )}
-              </ErrorBoundary>
-            ) : null}
-          </Panel>
-          {
-            activeRequest ? (<>
-              <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-              <Panel id="pane-two" minSize={10} className='pane-two theme--pane'>
-                <ErrorBoundary showAlert>
-                  {activeRequest && isGrpcRequest(activeRequest) && grpcState && (
-                    <GrpcResponsePane grpcState={grpcState} />
-                  )}
-                  {isRealtimeRequest && (
-                    <RealtimeResponsePane requestId={activeRequest._id} />
-                  )}
-                  {activeRequest && isRequest(activeRequest) && !isRealtimeRequest && (
-                    <ResponsePane activeRequestId={activeRequest._id} />
-                  )}
-                </ErrorBoundary>
-              </Panel>
-            </>) : null
-          }
-          <Outlet />
+        <PanelGroup autoSaveId="insomnia-panels" id="insomnia-panels" direction={direction}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <>
+                  <Panel id="pane-one" order={1} minSize={10} className='pane-one theme--pane'>
+                    {workspaceId ? (
+                      <ErrorBoundary showAlert>
+                        {isRequestGroupId(requestGroupId) && (
+                          <RequestGroupPane settings={settings} />
+                        )}
+                        {isGrpcRequestId(requestId) && grpcState && (
+                          <GrpcRequestPane
+                            grpcState={grpcState}
+                            setGrpcState={setGrpcState}
+                            reloadRequests={reloadRequests}
+                          />
+                        )}
+                        {isWebSocketRequestId(requestId) && (
+                          <WebSocketRequestPane environment={activeEnvironment} />
+                        )}
+                        {isRequestId(requestId) && (
+                          <RequestPane
+                            environmentId={activeEnvironment ? activeEnvironment._id : ''}
+                            settings={settings}
+                            onPaste={text => {
+                              setPastedCurl(text);
+                              setPasteCurlModalOpen(true);
+                            }}
+                          />
+                        )}
+                        {Boolean(!requestId && !requestGroupId) && <PlaceholderRequestPane />}
+                        {isRequestSettingsModalOpen && activeRequest && (
+                          <RequestSettingsModal
+                            request={activeRequest}
+                            onHide={() => setIsRequestSettingsModalOpen(false)}
+                          />
+                        )}
+                      </ErrorBoundary>
+                    ) : null}
+                  </Panel>
+                  {
+                    activeRequest ? (<>
+                      <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
+                      <Panel id="pane-two" order={2} minSize={10} className='pane-two theme--pane'>
+                        <ErrorBoundary showAlert>
+                          {activeRequest && isGrpcRequest(activeRequest) && grpcState && (
+                            <GrpcResponsePane grpcState={grpcState} />
+                          )}
+                          {isRealtimeRequest && (
+                            <RealtimeResponsePane requestId={activeRequest._id} />
+                          )}
+                          {activeRequest && isRequest(activeRequest) && !isRealtimeRequest && (
+                            <ResponsePane activeRequestId={activeRequest._id} />
+                          )}
+                        </ErrorBoundary>
+                      </Panel>
+                    </>) : null
+                  }
+                </>
+              }
+            />
+            <Route
+              path="runner"
+              element={
+                <Runner />
+              }
+            />
+          </Routes>
         </PanelGroup>
       </Panel>
     </PanelGroup >

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

@@ -244,7 +244,9 @@ export const deleteRequestAction: ActionFunction = async ({ request, params }) =
   invariant(workspaceMeta, 'Workspace meta not found');
   if (workspaceMeta.activeRequestId === id) {
     await models.workspaceMeta.updateByParentId(workspaceId, { activeRequestId: null });
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
+    if (request.url.includes(id)) {
+      return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
+    }
   }
   return null;
 };

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

@@ -2,7 +2,7 @@ import type { RequestContext } from 'insomnia-sdk';
 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, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { Panel, PanelResizeHandle } from 'react-resizable-panels';
 import { type ActionFunction, redirect, useNavigate, useParams, useRouteLoaderData, useSearchParams, useSubmit } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -216,11 +216,15 @@ export const Runner: FC<{}> = () => {
   const [requestIds, setRequestIds] = useLocalStorage<string[]>(`runner:requestIds:${workspaceId}`, { defaultValue: requestRows.map(item => item.id) });
 
   useEffect(() => {
+    const areRequestsSameLength = requestIds.length === requestRows.length;
+    const areRequestIdsMatching = requestRows.map(requestRow => requestRow.id).every(id => requestIds.includes(id));
+    const areRequestsSynced = areRequestsSameLength && areRequestIdsMatching;
+
     // request was added or removed
-    if (requestIds.length !== requestRows.length) {
-      const newRequest = requestRows.find(item => !requestIds.includes(item.id));
-      if (newRequest) {
-        setRequestIds([...requestIds, newRequest.id]);
+    if (!areRequestsSynced) {
+      const newRequests = requestRows.filter(item => !requestIds.includes(item.id));
+      if (newRequests.length > 0) {
+        setRequestIds([...requestIds, ...newRequests.map(item => item.id)]);
       } else {
         setRequestIds(requestIds.filter(key => requestRows.map(r => r.id).includes(key)));
       }
@@ -439,10 +443,7 @@ export const Runner: FC<{}> = () => {
   const disabledKeys = useMemo(() => isRunning ? requestIds : [], [isRunning, requestIds]);
   const isDisabled = isRunning || selectedRequestIds.size === 0;
   return (
-    <PanelGroup autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="wrapper">
-        <PanelGroup autoSaveId="insomnia-panels" direction={direction}>
-
+    <>
           <Panel id="pane-one" className='pane-one theme--pane' minSize={35} maxSize={90}>
             <ErrorBoundary showAlert>
 
@@ -787,9 +788,7 @@ export const Runner: FC<{}> = () => {
             </Tabs>
 
           </Panel>
-        </PanelGroup>
-      </Panel>
-    </PanelGroup>
+    </>
   );
 };