Some fixes around environments

src-web/hooks/useActiveCookieJar.ts

@@ -1,4 +1,4 @@
-import { getRouteApi, useSearch } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useCookieJars } from './useCookieJars';
 
@@ -38,17 +38,15 @@ export function useEnsureActiveCookieJar() {
   }, [activeCookieJarId, cookieJars, setActiveCookieJarId]);
 }
 
-const routeApi = getRouteApi('/workspaces/$workspaceId/');
-
 function useActiveCookieJarId() {
   // NOTE: This query param is accessed from Rust side, so do not change
-  const { cookieJarId: id } = useSearch({ strict: false });
-  const navigate = routeApi.useNavigate();
+  const { cookie_jar_id: id } = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
 
   const setId = useCallback(
     (id: string) =>
       navigate({
-        search: (prev) => ({ ...prev, cookieJarId: id }),
+        search: (prev) => ({ ...prev, cookie_jar_id: id }),
       }),
     [navigate],
   );

src-web/hooks/useActiveEnvironment.ts

@@ -1,4 +1,4 @@
-import { getRouteApi, useSearch } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 import { useCallback } from 'react';
 import { useEnvironments } from './useEnvironments';
 
@@ -11,17 +11,15 @@ export function useActiveEnvironment() {
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
 
-const routeApi = getRouteApi('/workspaces/$workspaceId/');
-
 function useActiveEnvironmentId() {
   // NOTE: This query param is accessed from Rust side, so do not change
-  const { environmentId: id } = useSearch({ strict: false });
-  const navigate = routeApi.useNavigate();
+  const { environment_id: id} = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
 
   const setId = useCallback(
-    (environment_id: string | null) =>
+    (environmentId: string | null) =>
       navigate({
-        search: (prev) => ({ ...prev, environment_id: environment_id ?? undefined }),
+        search: (prev) => ({ ...prev, environment_id: environmentId ?? undefined }),
       }),
     [navigate],
   );

src-web/hooks/useCreateEnvironment.ts

@@ -1,13 +1,13 @@
-import { useFastMutation } from './useFastMutation';
 import type { Environment } from '@yaakapp-internal/models';
-import {useSetAtom} from "jotai";
+import { useSetAtom } from 'jotai';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironment } from './useActiveEnvironment';
 import { useActiveWorkspace } from './useActiveWorkspace';
-import {environmentsAtom} from "./useEnvironments";
+import { environmentsAtom } from './useEnvironments';
+import { useFastMutation } from './useFastMutation';
 import { usePrompt } from './usePrompt';
-import {updateModelList} from "./useSyncModelStores";
+import { updateModelList } from './useSyncModelStores';
 
 export function useCreateEnvironment() {
   const [, setActiveEnvironmentId] = useActiveEnvironment();
@@ -15,9 +15,9 @@ export function useCreateEnvironment() {
   const workspace = useActiveWorkspace();
   const setEnvironments = useSetAtom(environmentsAtom);
 
-  return useFastMutation<Environment | null, unknown, void>({
+  return useFastMutation<Environment | null, unknown, Environment>({
     mutationKey: ['create_environment'],
-    mutationFn: async () => {
+    mutationFn: async (baseEnvironment) => {
       const name = await prompt({
         id: 'new-environment',
         title: 'New Environment',
@@ -33,6 +33,7 @@ export function useCreateEnvironment() {
         name,
         variables: [],
         workspaceId: workspace?.id,
+        environmentId: baseEnvironment.id,
       });
     },
     onSettled: () => trackEvent('environment', 'create'),

src-web/hooks/useEnvironments.ts

@@ -7,9 +7,8 @@ export const environmentsAtom = atom<Environment[]>([]);
 export function useEnvironments() {
   const allEnvironments = useAtomValue(environmentsAtom);
   const baseEnvironment = allEnvironments.find((e) => e.environmentId == null);
-  const subEnvironments = allEnvironments.filter(
-    (e) => e.environmentId === (baseEnvironment?.id ?? 'n/a'),
-  );
+  const subEnvironments =
+    allEnvironments.filter((e) => e.environmentId === (baseEnvironment?.id ?? 'n/a')) ?? [];
 
   return { baseEnvironment, subEnvironments, allEnvironments } as const;
 }

src-web/hooks/useExportData.tsx

@@ -29,8 +29,6 @@ export function useExportData() {
         render: ({ hide }) => (
           <ExportDataDialog
             onHide={hide}
-            workspaces={workspaces}
-            activeWorkspace={activeWorkspace}
             onSuccess={() => {
               toast.show({
                 color: 'success',

src-web/hooks/useFastMutation.ts

@@ -1,5 +1,6 @@
 import type { MutationKey } from '@tanstack/react-query';
 import { useCallback } from 'react';
+import { useToast } from './useToast';
 
 export function useFastMutation<TData = unknown, TError = unknown, TVariables = void>({
   mutationKey,
@@ -7,13 +8,17 @@ export function useFastMutation<TData = unknown, TError = unknown, TVariables =
   onSuccess,
   onError,
   onSettled,
+  toastyError,
 }: {
   mutationKey: MutationKey;
   mutationFn: (vars: TVariables) => Promise<TData>;
   onSettled?: () => void;
   onError?: (err: TError) => void;
   onSuccess?: (data: TData) => void;
+  toastyError?: boolean;
 }) {
+  const toast = useToast();
+
   const mutateAsync = useCallback(
     async (variables: TVariables) => {
       try {
@@ -22,8 +27,14 @@ export function useFastMutation<TData = unknown, TError = unknown, TVariables =
         return data;
       } catch (err: unknown) {
         const e = err as TError;
-        console.log('MUTATION FAILED', mutationKey, e);
+        console.log('Fast mutation error', mutationKey, e);
         onError?.(e);
+        if (toastyError) {
+          toast.show({
+            id: 'error-' + mutationKey.join('.'),
+            message: String(e),
+          });
+        }
       } finally {
         onSettled?.();
       }

src-web/hooks/useSyncWorkspaceChildModels.ts

@@ -20,8 +20,11 @@ export function useSyncWorkspaceChildModels() {
   const setEnvironments = useSetAtom(environmentsAtom);
 
   const workspace = useActiveWorkspace();
-  const workspaceId = workspace?.id ?? 'n/a';
+  const workspaceId = workspace?.id;
   useEffect(() => {
+    if (workspaceId == null) {
+      return;
+    }
     (async function () {
       console.log('Syncing model stores', { workspaceId });
       // Set the things we need first, first

src-web/hooks/useUpdateEnvironment.ts

@@ -13,6 +13,7 @@ export function useUpdateEnvironment(id: string | null) {
     unknown,
     Partial<Environment> | ((r: Environment) => Environment)
   >({
+    toastyError: true,
     mutationKey: ['update_environment', id],
     mutationFn: async (v) => {
       const environment = await getEnvironment(id);