Environments in URL and better rendering

src-web/hooks/useActiveEnvironment.ts

@@ -3,17 +3,13 @@ import type { Environment } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useEnvironments } from './useEnvironments';
 
-export function useActiveEnvironment(): [Environment | null, (environment: Environment) => void] {
-  const [id, setId] = useActiveEnvironmentId();
+export function useActiveEnvironment(): Environment | null {
+  const id = useActiveEnvironmentId();
   const environments = useEnvironments();
   const environment = useMemo(
     () => environments.find((w) => w.id === id) ?? null,
     [environments, id],
   );
 
-  const setActiveEnvironment = useCallback((e: Environment) => {
-    setId(e.id)
-  }, [setId]);
-
-  return [environment, setActiveEnvironment];
+  return environment;
 }

src-web/hooks/useActiveEnvironmentId.ts

@@ -1,14 +1,12 @@
 import { useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
+import type { RouteParamsRequest } from './useAppRoutes';
 
-export function useActiveEnvironmentId(): [string | null, (id: string) => void] {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const id = searchParams.get('environmentId') ?? null;
+export function useActiveEnvironmentId(): string | null {
+  const { environmentId } = useParams<RouteParamsRequest>();
+  if (environmentId == null || environmentId === '__default__') {
+    return null;
+  }
 
-  const setId = useCallback((id: string) => {
-    searchParams.set('environmentId', id)
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams])
-
-  return [id, setId];
+  return environmentId;
 }

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],
   );
 }

src-web/hooks/useCreateEnvironment.ts

@@ -4,18 +4,21 @@ import type { Environment } from '../lib/models';
 import { environmentsQueryKey } from './useEnvironments';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
+import { useAppRoutes } from './useAppRoutes';
 
 export function useCreateEnvironment() {
+  const environmentId = useActiveEnvironmentId();
   const workspaceId = useActiveWorkspaceId();
   const queryClient = useQueryClient();
-  const [, setActiveEnvironmentId ] = useActiveEnvironmentId();
+  const routes = useAppRoutes();
+
   return useMutation<Environment, unknown, Pick<Environment, 'name'>>({
     mutationFn: (patch) => {
       return invoke('create_environment', { ...patch, workspaceId });
     },
     onSuccess: async (environment) => {
       if (workspaceId == null) return;
-      setActiveEnvironmentId(environment.id);
+      routes.navigate('workspace', { workspaceId, environmentId });
       queryClient.setQueryData<Environment[]>(
         environmentsQueryKey({ workspaceId }),
         (environments) => [...(environments ?? []), environment],