Queries now use AppHandle instead of Window (#189)

2026-03-20 00:23:58 +01:00 · 2025-03-20 09:43:14 -07:00
parent cf8f8743bb
commit 4c4eaba7d2
19 changed files with 1063 additions and 740 deletions
--- a/src-web/components/GrpcConnectionSetupPane.tsx
+++ b/src-web/components/GrpcConnectionSetupPane.tsx
@@ -1,12 +1,11 @@
 import type { GrpcMetadataEntry, GrpcRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
-import { useAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useContainerSize } from '../hooks/useContainerQuery';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useHttpAuthenticationSummaries } from '../hooks/useHttpAuthentication';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
 import { resolvedModelName } from '../lib/resolvedModelName';
@@ -52,8 +51,6 @@ const TAB_METADATA = 'metadata';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';

-const tabsAtom = atomWithStorage<Record<string, string>>('grpcRequestPaneActiveTabs', {});
-
 export function GrpcConnectionSetupPane({
  style,
  services,
@@ -70,7 +67,11 @@ export function GrpcConnectionSetupPane({
 }: Props) {
  const updateRequest = useUpdateAnyGrpcRequest();
  const authentication = useHttpAuthenticationSummaries();
-  const [activeTabs, setActiveTabs] = useAtom(tabsAtom);
+  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
+    namespace: 'no_sync',
+    key: 'grpcRequestActiveTabs',
+    fallback: {},
+  });
  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);

  const urlContainerEl = useRef<HTMLDivElement>(null);
@@ -183,8 +184,8 @@ export function GrpcConnectionSetupPane({

  const activeTab = activeTabs?.[activeRequest.id];
  const setActiveTab = useCallback(
-    (tab: string) => {
-      setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
+    async (tab: string) => {
+      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
    },
    [activeRequest.id, setActiveTabs],
  );
--- a/src-web/components/HttpRequestPane.tsx
+++ b/src-web/components/HttpRequestPane.tsx
@@ -1,8 +1,7 @@
 import type { HttpRequest } from '@yaakapp-internal/models';
 import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
-import { atom, useAtom, useAtomValue } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
+import { atom, useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
@@ -11,6 +10,7 @@ import { grpcRequestsAtom } from '../hooks/useGrpcRequests';
 import { useHttpAuthenticationSummaries } from '../hooks/useHttpAuthentication';
 import { httpRequestsAtom } from '../hooks/useHttpRequests';
 import { useImportCurl } from '../hooks/useImportCurl';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
@@ -27,7 +27,8 @@ import {
  BODY_TYPE_JSON,
  BODY_TYPE_NONE,
  BODY_TYPE_OTHER,
-  BODY_TYPE_XML, getContentTypeFromHeaders,
+  BODY_TYPE_XML,
+  getContentTypeFromHeaders,
 } from '../lib/model_util';
 import { prepareImportQuerystring } from '../lib/prepareImportQuerystring';
 import { resolvedModelName } from '../lib/resolvedModelName';
@@ -64,8 +65,6 @@ const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';

-const tabsAtom = atomWithStorage<Record<string, string>>('requestPaneActiveTabs', {});
-
 const nonActiveRequestUrlsAtom = atom((get) => {
  const activeRequestId = get(activeRequestIdAtom);
  const requests = [...get(httpRequestsAtom), ...get(grpcRequestsAtom)];
@@ -79,7 +78,11 @@ const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
 export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
  const activeRequestId = activeRequest.id;
  const { mutateAsync: updateRequestAsync, mutate: updateRequest } = useUpdateAnyHttpRequest();
-  const [activeTabs, setActiveTabs] = useAtom(tabsAtom);
+  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
+    namespace: 'no_sync',
+    key: 'httpRequestActiveTabs',
+    fallback: {},
+  });
  const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
  const [{ urlKey }, { focusParamsTab, forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
@@ -285,14 +288,14 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:

  const activeTab = activeTabs?.[activeRequestId];
  const setActiveTab = useCallback(
-    (tab: string) => {
-      setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
+    async (tab: string) => {
+      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
    },
    [activeRequest.id, setActiveTabs],
  );

-  useRequestEditorEvent('request_pane.focus_tab', () => {
-    setActiveTab(TAB_PARAMS);
+  useRequestEditorEvent('request_pane.focus_tab', async () => {
+    await setActiveTab(TAB_PARAMS);
  });

  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
--- a/src-web/components/WebsocketRequestPane.tsx
+++ b/src-web/components/WebsocketRequestPane.tsx
@@ -2,8 +2,7 @@ import type { HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
 import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
 import { closeWebsocket, connectWebsocket, sendWebsocket } from '@yaakapp-internal/ws';
 import classNames from 'classnames';
-import { atom, useAtom, useAtomValue } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
+import { atom, useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo } from 'react';
 import { upsertWebsocketRequest } from '../commands/upsertWebsocketRequest';
@@ -12,6 +11,7 @@ import { getActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useHttpAuthenticationSummaries } from '../hooks/useHttpAuthentication';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { requestsAtom } from '../hooks/useRequests';
@@ -50,8 +50,6 @@ const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';

-const tabsAtom = atomWithStorage<Record<string, string>>('requestPaneActiveTabs', {});
-
 const nonActiveRequestUrlsAtom = atom((get) => {
  const activeRequestId = get(activeRequestIdAtom);
  const requests = get(requestsAtom);
@@ -64,7 +62,11 @@ const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);

 export function WebsocketRequestPane({ style, fullHeight, className, activeRequest }: Props) {
  const activeRequestId = activeRequest.id;
-  const [activeTabs, setActiveTabs] = useAtom(tabsAtom);
+  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
+    namespace: 'no_sync',
+    key: 'websocketRequestActiveTabs',
+    fallback: {},
+  });
  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
  const [{ urlKey }, { focusParamsTab, forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
  const authentication = useHttpAuthenticationSummaries();
@@ -157,14 +159,14 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque

  const activeTab = activeTabs?.[activeRequestId];
  const setActiveTab = useCallback(
-    (tab: string) => {
-      setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
+    async (tab: string) => {
+      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
    },
    [activeRequest.id, setActiveTabs],
  );

-  useRequestEditorEvent('request_pane.focus_tab', () => {
-    setActiveTab(TAB_PARAMS);
+  useRequestEditorEvent('request_pane.focus_tab', async () => {
+    await setActiveTab(TAB_PARAMS);
  });

  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
--- a/src-web/hooks/useSyncModelStores.ts
+++ b/src-web/hooks/useSyncModelStores.ts
@@ -5,7 +5,7 @@ import type { AnyModel, KeyValue, ModelPayload } from '@yaakapp-internal/models'
 import { jotaiStore } from '../lib/jotai';
 import { buildKeyValueKey } from '../lib/keyValueStore';
 import { modelsEq } from '../lib/model_util';
-import { useActiveWorkspace } from './useActiveWorkspace';
+import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { cookieJarsAtom } from './useCookieJars';
 import { environmentsAtom } from './useEnvironments';
 import { foldersAtom } from './useFolders';
@@ -26,7 +26,6 @@ import { workspaceMetaAtom } from './useWorkspaceMeta';
 import { workspacesAtom } from './useWorkspaces';

 export function useSyncModelStores() {
-  const activeWorkspace = useActiveWorkspace();
  const queryClient = useQueryClient();
  const { wasUpdatedExternally } = useRequestUpdateKey(null);

@@ -45,16 +44,13 @@ export function useSyncModelStores() {
      (payload.model.model === 'http_request' ||
        payload.model.model === 'grpc_request' ||
        payload.model.model === 'websocket_request') &&
-      (payload.windowLabel !== getCurrentWebviewWindow().label || payload.updateSource !== 'window')
+      ((payload.updateSource.type === 'window' &&
+        payload.updateSource.label !== getCurrentWebviewWindow().label) ||
+        payload.updateSource.type !== 'window')
    ) {
      wasUpdatedExternally(payload.model.id);
    }

-    // Only sync models that belong to this workspace, if a workspace ID is present
-    if ('workspaceId' in payload.model && payload.model.workspaceId !== activeWorkspace?.id) {
-      return;
-    }
-
    if (shouldIgnoreModel(payload)) return;

    if (payload.model.model === 'workspace') {
@@ -160,7 +156,7 @@ export function removeModelById<T extends { id: string }>(model: T) {
  return (prevEntries: T[] | undefined) => {
    const entries = prevEntries?.filter((e) => e.id !== model.id) ?? [];

-    // Don't trigger an update if we didn't actually remove anything
+    // Don't trigger an update if we didn't remove anything
    if (entries.length === (prevEntries ?? []).length) {
      return prevEntries ?? [];
    }
@@ -181,17 +177,24 @@ export function removeModelByKv(model: KeyValue) {
    ) ?? [];
 }

-function shouldIgnoreModel({ model, windowLabel, updateSource }: ModelPayload) {
-  // Never ignore same-window updates
-  if (windowLabel === getCurrentWebviewWindow().label) {
+function shouldIgnoreModel({ model, updateSource }: ModelPayload) {
+  console.log('HELLO', updateSource);
+  // Never ignore updates from non-user sources
+  if (updateSource.type !== 'window') {
    return false;
  }

-  // Never ignore updates from non-user sources
-  if (updateSource !== 'window') {
+  // Never ignore same-window updates
+  if (updateSource.label === getCurrentWebviewWindow().label) {
    return false;
  }

+  const activeWorkspaceId = getActiveWorkspaceId();
+  // Only sync models that belong to this workspace, if a workspace ID is present
+  if ('workspaceId' in model && model.workspaceId !== activeWorkspaceId) {
+    return;
+  }
+
  if (model.model === 'key_value') {
    return model.namespace === 'no_sync';
  }