Fix active cookie jar and improve routing

src-web/components/AppRouter.tsx

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
-import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
+import { paths, useAppRoutes } from '../hooks/useAppRoutes';
 import { DefaultLayout } from './DefaultLayout';
 import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 import RouteError from './RouteError';
@@ -19,19 +19,23 @@ const router = createBrowserRouter([
         element: <RedirectToLatestWorkspace />,
       },
       {
-        path: routePaths.workspaces(),
+        path: paths.workspaces(),
         element: <RedirectToLatestWorkspace />,
       },
       {
-        path: routePaths.workspace({
+        path: paths.workspace({
           workspaceId: ':workspaceId',
+          environmentId: null,
+          cookieJarId: null,
         }),
         element: <LazyWorkspace />,
       },
       {
-        path: routePaths.request({
+        path: paths.request({
           workspaceId: ':workspaceId',
           requestId: ':requestId',
+          environmentId: null,
+          cookieJarId: null,
         }),
         element: <LazyWorkspace />,
       },
@@ -40,8 +44,10 @@ const router = createBrowserRouter([
         element: <RedirectLegacyEnvironmentURLs />,
       },
       {
-        path: routePaths.workspaceSettings({
+        path: paths.workspaceSettings({
           workspaceId: ':workspaceId',
+          environmentId: null,
+          cookieJarId: null,
         }),
         element: <LazySettings />,
       },
@@ -64,13 +70,13 @@ function RedirectLegacyEnvironmentURLs() {
     workspaceId?: string;
     environmentId?: string;
   }>();
-  const environmentId = rawEnvironmentId === '__default__' ? undefined : rawEnvironmentId;
+  const environmentId = (rawEnvironmentId === '__default__' ? undefined : rawEnvironmentId) ?? null;
 
   let to;
   if (workspaceId != null && requestId != null) {
-    to = routes.paths.request({ workspaceId, environmentId, requestId });
+    to = routes.paths.request({ workspaceId, environmentId, requestId, cookieJarId: null });
   } else if (workspaceId != null) {
-    to = routes.paths.workspace({ workspaceId, environmentId });
+    to = routes.paths.workspace({ workspaceId, environmentId, cookieJarId: null });
   } else {
     to = routes.paths.workspaces();
   }

src-web/components/CommandPalette.tsx

@@ -271,7 +271,8 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
           return routes.navigate('request', {
             workspaceId: r.workspaceId,
             requestId: r.id,
-            environmentId: activeEnvironment?.id,
+            environmentId: activeEnvironment?.id ?? null,
+            cookieJarId: activeCookieJar?.id ?? null,
           });
         },
       });
@@ -313,7 +314,8 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
     workspaceCommands,
     sortedRequests,
     routes,
-    activeEnvironment,
+    activeEnvironment?.id,
+    activeCookieJar?.id,
     sortedEnvironments,
     setActiveEnvironmentId,
     sortedWorkspaces,

src-web/components/MoveToWorkspaceDialog.tsx

@@ -71,7 +71,11 @@ export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Pr
                 className="mr-auto min-w-[5rem]"
                 onClick={() => {
                   toast.hide('workspace-moved');
-                  routes.navigate('workspace', { workspaceId: selectedWorkspaceId });
+                  routes.navigate('workspace', {
+                    workspaceId: selectedWorkspaceId,
+                    cookieJarId: null,
+                    environmentId: null,
+                  });
                 }}
               >
                 Switch to Workspace

src-web/components/RecentRequestsDropdown.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useMemo, useRef } from 'react';
 import { useKeyPressEvent } from 'react-use';
+import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
@@ -20,6 +21,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
   const activeRequest = useActiveRequest();
   const activeWorkspace = useActiveWorkspace();
   const [activeEnvironment] = useActiveEnvironment();
+  const [activeCookieJar] = useActiveCookieJar();
   const routes = useAppRoutes();
   const allRecentRequestIds = useRecentRequests();
   const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);
@@ -57,8 +59,9 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
         onSelect: () => {
           routes.navigate('request', {
             requestId: request.id,
-            environmentId: activeEnvironment?.id,
             workspaceId: activeWorkspace.id,
+            environmentId: activeEnvironment?.id ?? null,
+            cookieJarId: activeCookieJar?.id ?? null,
           });
         },
       });
@@ -76,7 +79,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
     }
 
     return recentRequestItems.slice(0, 20);
-  }, [activeWorkspace, activeEnvironment?.id, recentRequestIds, requests, routes]);
+  }, [activeWorkspace, recentRequestIds, requests, routes, activeEnvironment?.id, activeCookieJar?.id]);
 
   return (
     <Dropdown ref={dropdownRef} items={items}>

src-web/components/RedirectToLatestWorkspace.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppRoutes } from '../hooks/useAppRoutes';
+import { getRecentCookieJars } from '../hooks/useRecentCookieJars';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { getRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
@@ -20,13 +21,14 @@ export function RedirectToLatestWorkspace() {
 
     (async function () {
       const workspaceId = recentWorkspaces[0] ?? workspaces[0]?.id ?? 'n/a';
-      const environmentId = (await getRecentEnvironments(workspaceId))[0];
-      const requestId = (await getRecentRequests(workspaceId))[0];
+      const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? null;
+      const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? null;
+      const requestId = (await getRecentRequests(workspaceId))[0] ?? null;
 
       if (workspaceId != null && requestId != null) {
-        navigate(routes.paths.request({ workspaceId, environmentId, requestId }));
+        navigate(routes.paths.request({ workspaceId, environmentId, requestId, cookieJarId }));
       } else {
-        navigate(routes.paths.workspace({ workspaceId, environmentId }));
+        navigate(routes.paths.workspace({ workspaceId, environmentId, cookieJarId }));
       }
     })();
   }, [navigate, recentWorkspaces, routes.paths, workspaces, workspaces.length]);

src-web/components/Sidebar.tsx

@@ -13,6 +13,7 @@ import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { useKey, useKeyPressEvent } from 'react-use';
+import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 
 import { useActiveRequest } from '../hooks/useActiveRequest';
@@ -73,6 +74,7 @@ export function Sidebar({ className }: Props) {
   const sidebarRef = useRef<HTMLLIElement>(null);
   const activeRequest = useActiveRequest();
   const [activeEnvironment] = useActiveEnvironment();
+  const [activeCookieJar] = useActiveCookieJar();
   const folders = useFolders();
   const requests = useRequests();
   const activeWorkspace = useActiveWorkspace();
@@ -221,14 +223,22 @@ export function Sidebar({ className }: Props) {
         routes.navigate('request', {
           requestId: id,
           workspaceId: item.workspaceId,
-          environmentId: activeEnvironment?.id,
+          environmentId: activeEnvironment?.id ?? null,
+          cookieJarId: activeCookieJar?.id ?? null,
         });
         setSelectedId(id);
         setSelectedTree(tree);
         if (!opts.noFocus) focusActiveRequest({ forced: { id, tree } });
       }
     },
-    [treeParentMap, collapsed, routes, activeEnvironment, focusActiveRequest],
+    [
+      treeParentMap,
+      collapsed,
+      routes,
+      activeEnvironment?.id,
+      activeCookieJar?.id,
+      focusActiveRequest,
+    ],
   );
 
   const handleClearSelected = useCallback(() => {
@@ -273,8 +283,9 @@ export function Sidebar({ className }: Props) {
     e.preventDefault();
     routes.navigate('request', {
       requestId: selected.id,
-      workspaceId: activeWorkspace?.id,
-      environmentId: activeEnvironment?.id,
+      workspaceId: activeWorkspace?.id ?? null,
+      environmentId: activeEnvironment?.id ?? null,
+      cookieJarId: activeCookieJar?.id ?? null,
     });
   });
 
@@ -747,8 +758,8 @@ function SidebarItem({
   }, [setEditing, itemModel]);
 
   const handleBlur = useCallback(
-    (e: React.FocusEvent<HTMLInputElement>) => {
-      handleSubmitNameEdit(e.currentTarget);
+    async (e: React.FocusEvent<HTMLInputElement>) => {
+      await handleSubmitNameEdit(e.currentTarget);
     },
     [handleSubmitNameEdit],
   );