Active environment in query param

src-web/components/AppRouter.tsx

@@ -1,19 +1,18 @@
-import { createBrowserRouter, Navigate, Outlet, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
-import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useHttpRequests } from '../hooks/useHttpRequests';
+import { useRecentRequests } from '../hooks/useRecentRequests';
+import { DialogProvider } from './DialogContext';
 import { GlobalHooks } from './GlobalHooks';
+import RouteError from './RouteError';
 import Workspace from './Workspace';
 import Workspaces from './Workspaces';
-import { DialogProvider } from './DialogContext';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
-import RouteError from './RouteError';
 
 const router = createBrowserRouter([
   {
     path: '/',
     errorElement: <RouteError />,
-    element: <Layout />,
+    element: <DefaultLayout />,
     children: [
       {
         path: '/',
@@ -26,18 +25,20 @@ const router = createBrowserRouter([
       {
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
-          environmentId: ':environmentId',
         }),
         element: <WorkspaceOrRedirect />,
       },
       {
         path: routePaths.request({
           workspaceId: ':workspaceId',
-          environmentId: ':environmentId',
           requestId: ':requestId',
         }),
         element: <Workspace />,
       },
+      {
+        path: '/workspaces/:workspaceId/environments/:environmentId/requests/:requestId',
+        element: <RedirectLegacyEnvironmentURLs />,
+      },
     ],
   },
 ]);
@@ -48,7 +49,6 @@ export function AppRouter() {
 
 function WorkspaceOrRedirect() {
   const recentRequests = useRecentRequests();
-  const activeEnvironmentId = useActiveEnvironmentId();
   const requests = useHttpRequests();
   const request = requests.find((r) => r.id === recentRequests[0]);
   const routes = useAppRoutes();
@@ -58,20 +58,43 @@ function WorkspaceOrRedirect() {
   }
 
   const { id: requestId, workspaceId } = request;
-  const environmentId = activeEnvironmentId ?? undefined;
 
   return (
     <Navigate
       to={routes.paths.request({
         workspaceId,
-        environmentId,
         requestId,
       })}
     />
   );
 }
 
-function Layout() {
+function RedirectLegacyEnvironmentURLs() {
+  const routes = useAppRoutes();
+  const {
+    requestId,
+    environmentId: rawEnvironmentId,
+    workspaceId,
+  } = useParams<{
+    requestId?: string;
+    workspaceId?: string;
+    environmentId?: string;
+  }>();
+  const environmentId = rawEnvironmentId === '__default__' ? undefined : rawEnvironmentId;
+
+  let to = '/';
+  if (workspaceId != null && requestId != null) {
+    to = routes.paths.request({ workspaceId, environmentId, requestId });
+  } else if (workspaceId != null) {
+    to = routes.paths.workspace({ workspaceId, environmentId });
+  } else {
+    to = routes.paths.workspaces();
+  }
+
+  return <Navigate to={to} />;
+}
+
+function DefaultLayout() {
   return (
     <DialogProvider>
       <Outlet />

src-web/hooks/useActiveEnvironmentId.ts

@@ -1,9 +1,11 @@
-import { useParams } from 'react-router-dom';
-import type { RouteParamsRequest } from './useAppRoutes';
+import { useSearchParams } from 'react-router-dom';
+
+export const QUERY_ENVIRONMENT_ID = 'environment_id';
 
 export function useActiveEnvironmentId(): string | null {
-  const { environmentId } = useParams<RouteParamsRequest>();
-  if (environmentId == null || environmentId === '__default__') {
+  const [params] = useSearchParams();
+  const environmentId = params.get(QUERY_ENVIRONMENT_ID);
+  if (environmentId == null) {
     return null;
   }
 

src-web/hooks/useAppRoutes.ts

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { QUERY_ENVIRONMENT_ID } from './useActiveEnvironmentId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useActiveRequestId } from './useActiveRequestId';
 import type { Environment } from '../lib/models';
@@ -23,7 +24,11 @@ export const routePaths = {
       environmentId: ':environmentId',
     } as RouteParamsWorkspace,
   ) {
-    return `/workspaces/${workspaceId}/environments/${environmentId ?? '__default__'}`;
+    let path = `/workspaces/${workspaceId}`;
+    if (environmentId != null) {
+      path += `?${QUERY_ENVIRONMENT_ID}=${encodeURIComponent(environmentId)}`;
+    }
+    return path;
   },
   request(
     { workspaceId, environmentId, requestId } = {
@@ -32,7 +37,11 @@ export const routePaths = {
       requestId: ':requestId',
     } as RouteParamsRequest,
   ) {
-    return `${this.workspace({ workspaceId, environmentId })}/requests/${requestId}`;
+    let path = `/workspaces/${workspaceId}/requests/${requestId}`;
+    if (environmentId != null) {
+      path += `?${QUERY_ENVIRONMENT_ID}=${encodeURIComponent(environmentId)}`;
+    }
+    return path;
   },
 };
 
@@ -41,16 +50,16 @@ export function useAppRoutes() {
   const requestId = useActiveRequestId();
   const nav = useNavigate();
 
-  const navigate = useCallback(<T extends keyof typeof routePaths>(
-    path: T,
-    ...params: Parameters<(typeof routePaths)[T]>
-  ) => {
-    // Not sure how to make TS work here, but it's good from the
-    // outside caller perspective.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const resolvedPath = routePaths[path](...(params as any));
-    nav(resolvedPath);
-  }, [nav]);
+  const navigate = useCallback(
+    <T extends keyof typeof routePaths>(path: T, ...params: Parameters<(typeof routePaths)[T]>) => {
+      // Not sure how to make TS work here, but it's good from the
+      // outside caller perspective.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const resolvedPath = routePaths[path](...(params as any));
+      nav(resolvedPath);
+    },
+    [nav],
+  );
 
   const setEnvironment = useCallback(
     (environment: Environment | null) => {