Fix environment activation and setting active cookie jar

src-web/components/CommandPaletteDialog.tsx

@@ -30,6 +30,7 @@ import { useWorkspaces } from '../hooks/useWorkspaces';
 import { showDialog, toggleDialog } from '../lib/dialog';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { router } from '../lib/router';
+import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { CookieDialog } from './CookieDialog';
 import { Button } from './core/Button';
 import { Heading } from './core/Heading';
@@ -57,7 +58,7 @@ const MAX_PER_GROUP = 8;
 export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
   const [command, setCommand] = useDebouncedState<string>('', 150);
   const [selectedItemKey, setSelectedItemKey] = useState<string | null>(null);
-  const [activeEnvironment, setActiveEnvironmentId] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
   const httpRequestActions = useHttpRequestActions();
   const workspaces = useWorkspaces();
   const { subEnvironments } = useEnvironments();
@@ -300,7 +301,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       environmentGroup.items.push({
         key: `switch-environment-${e.id}`,
         label: e.name,
-        onSelect: () => setActiveEnvironmentId(e.id),
+        onSelect: () => setWorkspaceSearchParams({ environment_id: e.id }),
       });
     }
 
@@ -324,7 +325,6 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
     sortedRequests,
     sortedEnvironments,
     activeEnvironment?.id,
-    setActiveEnvironmentId,
     sortedWorkspaces,
   ]);
 

src-web/components/EnvironmentActionsDropdown.tsx

@@ -3,6 +3,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
 import { toggleDialog } from '../lib/dialog';
+import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
@@ -19,7 +20,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
   ...buttonProps
 }: Props) {
   const { subEnvironments, baseEnvironment } = useEnvironments();
-  const [activeEnvironment, setActiveEnvironmentId] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
 
   const showEnvironmentDialog = useCallback(() => {
     toggleDialog({
@@ -40,9 +41,9 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
           leftSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
           onSelect: async () => {
             if (e.id !== activeEnvironment?.id) {
-              await setActiveEnvironmentId(e.id);
+              setWorkspaceSearchParams({ environment_id: e.id });
             } else {
-              await setActiveEnvironmentId(null);
+              setWorkspaceSearchParams({ environment_id: null });
             }
           },
         }),
@@ -59,7 +60,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         onSelect: showEnvironmentDialog,
       },
     ],
-    [activeEnvironment?.id, subEnvironments, setActiveEnvironmentId, showEnvironmentDialog],
+    [activeEnvironment?.id, subEnvironments, showEnvironmentDialog],
   );
 
   const hasBaseVars =

src-web/components/WorkspaceActionsDropdown.tsx

@@ -34,16 +34,11 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const workspaceMeta = useWorkspaceMeta();
   const { mutate: deleteSendHistory } = useDeleteSendHistory();
 
-  const orderedWorkspaces = useMemo(
-    () => [...workspaces].sort((a, b) => (a.name.localeCompare(b.name) > 0 ? 1 : -1)),
-    [workspaces],
-  );
-
   const { workspaceItems, extraItems } = useMemo<{
     workspaceItems: RadioDropdownItem[];
     extraItems: DropdownItem[];
   }>(() => {
-    const workspaceItems: RadioDropdownItem[] = orderedWorkspaces.map((w) => ({
+    const workspaceItems: RadioDropdownItem[] = workspaces.map((w) => ({
       key: w.id,
       label: w.name,
       value: w.id,
@@ -100,7 +95,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
     ];
 
     return { workspaceItems, extraItems };
-  }, [orderedWorkspaces, deleteSendHistory, createWorkspace, workspaceMeta, workspace?.id]);
+  }, [workspaces, workspaceMeta, deleteSendHistory, createWorkspace, workspace?.id]);
 
   const handleChangeWorkspace = useCallback(async (workspaceId: string | null) => {
     if (workspaceId == null) return;

src-web/hooks/useActiveCookieJar.ts

@@ -36,6 +36,7 @@ export function useEnsureActiveCookieJar() {
   // Set the active cookie jar to the first one, if none set
   useEffect(() => {
     if (cookieJars == null) return; // Hasn't loaded yet
+
     if (cookieJars.find((j) => j.id === activeCookieJarId)) {
       return; // There's an active jar
     }
@@ -47,7 +48,13 @@ export function useEnsureActiveCookieJar() {
     }
 
     // There's no active jar, so set it to the first one
-    console.log('Setting active cookie jar to', cookieJars, activeCookieJarId, firstJar.id);
+    console.log('Defaulting active cookie jar to first jar', firstJar);
     setWorkspaceSearchParams({ cookie_jar_id: firstJar.id });
-  }, [activeCookieJarId, cookieJars]);
+
+    // NOTE: We only run this on cookieJars to prevent data races when switching workspaces since a lot of
+    //  things change when switching workspaces, and we don't currently have a good way to ensure that all
+    //  stores have updated.
+    // TODO: Create a global data store that can handle this case
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cookieJars]);
 }

src-web/hooks/useActiveEnvironment.ts

@@ -2,9 +2,8 @@ import { useSearch } from '@tanstack/react-router';
 import type { Environment } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { atom } from 'jotai/index';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
-import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { environmentsAtom } from './useEnvironments';
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
@@ -17,12 +16,7 @@ export const activeEnvironmentAtom = atom<Environment | null>((get) => {
 });
 
 export function useActiveEnvironment() {
-  const setId = useCallback(
-    (id: string | null) => setWorkspaceSearchParams({ environment_id: id }),
-    [],
-  );
-  const environment = useAtomValue(activeEnvironmentAtom);
-  return [environment, setId] as const;
+  return useAtomValue(activeEnvironmentAtom);
 }
 
 export function getActiveEnvironment() {

src-web/hooks/useCookieJars.ts

@@ -3,9 +3,9 @@ import { atom, useAtomValue } from 'jotai';
 
 export const cookieJarsAtom = atom<CookieJar[] | undefined>();
 
-export const sortedCookieJars = atom((get) =>
-  get(cookieJarsAtom)?.sort((a, b) => a.name.localeCompare(b.name)),
-);
+export const sortedCookieJars = atom((get) => {
+  return get(cookieJarsAtom)?.sort((a, b) => a.name.localeCompare(b.name));
+});
 
 export function useCookieJars() {
   return useAtomValue(sortedCookieJars);

src-web/hooks/useCreateEnvironment.ts

@@ -1,14 +1,12 @@
 import type { Environment } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
 import { showPrompt } from '../lib/prompt';
+import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { invokeCmd } from '../lib/tauri';
-import { useActiveEnvironment } from './useActiveEnvironment';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
 
 export function useCreateEnvironment() {
-  const [, setActiveEnvironmentId] = useActiveEnvironment();
-
   return useFastMutation<Environment | null, unknown, Environment | null>({
     mutationKey: ['create_environment'],
     mutationFn: async (baseEnvironment) => {
@@ -38,7 +36,7 @@ export function useCreateEnvironment() {
     onSettled: () => trackEvent('environment', 'create'),
     onSuccess: async (environment) => {
       if (environment == null) return;
-      await setActiveEnvironmentId(environment.id);
+      setWorkspaceSearchParams({ environment_id: environment.id });
     },
   });
 }

src-web/hooks/useGrpc.ts

@@ -19,7 +19,7 @@ export function useGrpc(
   protoFiles: string[],
 ) {
   const requestId = req?.id ?? 'n/a';
-  const [environment] = useActiveEnvironment();
+  const environment = useActiveEnvironment();
 
   const go = useMutation<void, string>({
     mutationKey: ['grpc_go', conn?.id],

src-web/hooks/useIntrospectGraphQL.ts

@@ -20,7 +20,7 @@ export function useIntrospectGraphQL(
   // Debounce the request because it can change rapidly and we don't
   // want to send so too many requests.
   const request = useDebouncedValue(baseRequest);
-  const [activeEnvironment] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
 

src-web/hooks/useRenderTemplate.ts

@@ -5,7 +5,7 @@ import { useActiveWorkspace } from './useActiveWorkspace';
 
 export function useRenderTemplate(template: string) {
   const workspaceId = useActiveWorkspace()?.id ?? 'n/a';
-  const environmentId = useActiveEnvironment()[0]?.id ?? null;
+  const environmentId = useActiveEnvironment()?.id ?? null;
   return useQuery<string>({
     placeholderData: (prev) => prev, // Keep previous data on refetch
     refetchOnWindowFocus: false,

src-web/hooks/useSyncWorkspaceRequestTitle.ts

@@ -10,7 +10,7 @@ import { useOsInfo } from './useOsInfo';
 
 export function useSyncWorkspaceRequestTitle() {
   const activeWorkspace = useActiveWorkspace();
-  const [activeEnvironment] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
   const osInfo = useOsInfo();
   const appInfo = useAppInfo();