Environments in URL and better rendering

src-web/hooks/useAppRoutes.ts

@@ -1,8 +1,12 @@
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useActiveRequestId } from './useActiveRequestId';
+import type { Environment } from '../lib/models';
 
 export type RouteParamsWorkspace = {
   workspaceId: string;
+  environmentId: string | null;
 };
 
 export type RouteParamsRequest = RouteParamsWorkspace & {
@@ -13,23 +17,48 @@ export const routePaths = {
   workspaces() {
     return '/workspaces';
   },
-  workspace({ workspaceId } = { workspaceId: ':workspaceId' } as RouteParamsWorkspace) {
-    return `/workspaces/${workspaceId}`;
+  workspace(
+    { workspaceId, environmentId } = {
+      workspaceId: ':workspaceId',
+      environmentId: ':environmentId',
+    } as RouteParamsWorkspace,
+  ) {
+    return `/workspaces/${workspaceId}/environments/${environmentId ?? '__default__'}`;
   },
   request(
-    { workspaceId, requestId } = {
+    { workspaceId, environmentId, requestId } = {
       workspaceId: ':workspaceId',
+      environmentId: ':environmentId',
       requestId: ':requestId',
     } as RouteParamsRequest,
   ) {
-    return `${this.workspace({ workspaceId })}/requests/${requestId}`;
+    return `${this.workspace({ workspaceId, environmentId })}/requests/${requestId}`;
   },
 };
 
 export function useAppRoutes() {
+  const workspaceId = useActiveWorkspaceId();
+  const requestId = useActiveRequestId();
+
   const navigate = useNavigate();
   return useMemo(
     () => ({
+      setEnvironment({ id: environmentId }: Environment) {
+        if (workspaceId == null) {
+          this.navigate('workspaces');
+        } else if (requestId == null) {
+          this.navigate('workspace', {
+            workspaceId: workspaceId,
+            environmentId: environmentId ?? null,
+          });
+        } else {
+          this.navigate('request', {
+            workspaceId,
+            environmentId: environmentId ?? null,
+            requestId: requestId,
+          });
+        }
+      },
       navigate<T extends keyof typeof routePaths>(
         path: T,
         ...params: Parameters<(typeof routePaths)[T]>
@@ -42,6 +71,6 @@ export function useAppRoutes() {
       },
       paths: routePaths,
     }),
-    [navigate],
+    [navigate, requestId, workspaceId],
   );
 }