Add response filter history with pinning (#338)

apps/yaak-client/hooks/useRecentFilters.ts

@@ -0,0 +1,67 @@
+import { useCallback } from "react";
+import { useKeyValue } from "./useKeyValue";
+
+export interface RecentFilter {
+  value: string;
+  pinned?: boolean;
+}
+
+const MAX_RECENT_FILTERS = 20;
+const kvKey = (filterStateKey: string) => `recent_filters::${filterStateKey}`;
+const namespace = "global";
+const fallback: RecentFilter[] = [];
+
+export function useRecentFilters(filterStateKey: string | null) {
+  const { value, set } = useKeyValue<RecentFilter[]>({
+    key: kvKey(filterStateKey ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const addFilter = useCallback(
+    async (rawValue: string) => {
+      const value = rawValue.trim();
+      if (filterStateKey == null || value === "") return;
+      await set((prev) => {
+        // Returning the same reference skips the write, so re-committing the
+        // expression already at the top (on every blur) costs nothing
+        if (prev[0]?.value === value) return prev;
+        const existing = prev.find((f) => f.value === value);
+        const rest = prev.filter((f) => f.value !== value);
+        return trim([{ value, pinned: existing?.pinned }, ...rest]);
+      });
+    },
+    [filterStateKey, set],
+  );
+
+  const removeFilter = useCallback(
+    async (value: string) => set((prev) => prev.filter((f) => f.value !== value)),
+    [set],
+  );
+
+  const togglePin = useCallback(
+    async (value: string) =>
+      set((prev) => prev.map((f) => (f.value === value ? { ...f, pinned: !f.pinned } : f))),
+    [set],
+  );
+
+  const clearFilters = useCallback(async () => set([]), [set]);
+
+  return { recentFilters: value ?? fallback, addFilter, removeFilter, togglePin, clearFilters };
+}
+
+/** Bound the list, evicting the oldest unpinned entries before any pinned ones */
+function trim(filters: RecentFilter[]): RecentFilter[] {
+  const excess = filters.length - MAX_RECENT_FILTERS;
+  if (excess <= 0) return filters;
+
+  const evicted = new Set<number>();
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    if (!filters[i]?.pinned) evicted.add(i);
+  }
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    evicted.add(i);
+  }
+
+  return filters.filter((_, i) => !evicted.has(i));
+}

apps/yaak-client/hooks/useResponseBodyText.ts

@@ -2,6 +2,25 @@ import { useQuery } from "@tanstack/react-query";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { getResponseBodyBytes, getResponseBodyText } from "../lib/responseBody";
 
+export function responseBodyTextQuery({
+  response,
+  filter,
+}: {
+  response: HttpResponse;
+  filter: string | null;
+}) {
+  return {
+    queryKey: [
+      "response_body_text",
+      response.id,
+      response.updatedAt,
+      response.contentLength,
+      filter ?? "",
+    ],
+    queryFn: () => getResponseBodyText({ response, filter }),
+  };
+}
+
 export function useResponseBodyText({
   response,
   filter,
@@ -11,14 +30,7 @@ export function useResponseBodyText({
 }) {
   return useQuery({
     placeholderData: (prev) => prev, // Keep previous data on refetch
-    queryKey: [
-      "response_body_text",
-      response.id,
-      response.updatedAt,
-      response.contentLength,
-      filter ?? "",
-    ],
-    queryFn: () => getResponseBodyText({ response, filter }),
+    ...responseBodyTextQuery({ response, filter }),
   });
 }
 

apps/yaak-client/hooks/useResponseFilter.ts

@@ -1,33 +1,57 @@
-import { useDebouncedValue } from "@yaakapp-internal/ui";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { createGlobalState } from "react-use";
+import type { RecentFilter } from "./useRecentFilters";
+import { useRecentFilters } from "./useRecentFilters";
 
 /** What's typed in the filter box. `null` means the filter box is closed */
 const useFilterTextMap = createGlobalState<Record<string, string | null>>({});
 
+/** What's actually applied to the response. Only changes on an explicit apply */
+const useAppliedFilterMap = createGlobalState<Record<string, string | null>>({});
+
 export interface ResponseFilterApi {
   stateKey: string | null;
-  /** What's typed in the filter box, or `null` when the box is closed */
+  /** Draft text in the filter box, or `null` when the box is closed */
   filterText: string | null;
-  /** The expression to actually filter with, lagging `filterText` by a debounce */
-  debouncedFilterText: string | null;
+  /** The expression currently filtering the response */
+  appliedFilter: string | null;
   isSearching: boolean;
+  /** The box holds an expression that isn't the one currently applied */
+  isDirty: boolean;
+  /** Bumped when the (uncontrolled) filter input must re-read its defaultValue */
+  filterUpdateKey: number;
   setFilterText: (value: string | null) => void;
+  /** Apply the expression to the response, recording it if the filter accepts it */
+  applyFilter: (value: string) => void;
+  /** Like applyFilter, but also replaces what's shown in the filter box */
+  replaceFilter: (value: string) => void;
   toggleSearch: () => void;
+  recentFilters: RecentFilter[];
+  removeRecentFilter: (value: string) => void;
+  togglePinRecentFilter: (value: string) => void;
+  clearRecentFilters: () => void;
 }
 
 /**
- * Filter state for a response viewer, keyed so it persists across responses of the
- * same request.
+ * Draft/applied state and history for a response filter (JSONPath/XPath).
  *
- * Owned by the component that runs the filter, so the viewer can stay presentational.
- * Evaluating the expression during the viewer's render (its previous shape) meant
- * updating the parent mid-render, which React warns about.
+ * History records at most one entry per apply gesture, and only after `runFilter`
+ * confirms the plugin accepts the expression — the plugin is the sole judge of
+ * validity. Because nothing but the gesture ever writes, refetches can't resurrect
+ * deleted entries and a gesture can't record into another request's history.
  */
-export function useResponseFilter({ stateKey }: { stateKey: string | null }): ResponseFilterApi {
+export function useResponseFilter({
+  stateKey,
+  runFilter,
+}: {
+  stateKey: string | null;
+  /** Evaluate an expression, rejecting if the filter plugin reports an error */
+  runFilter: (filter: string) => Promise<unknown>;
+}): ResponseFilterApi {
   const [filterTextMap, setFilterTextMap] = useFilterTextMap();
+  const [appliedFilterMap, setAppliedFilterMap] = useAppliedFilterMap();
   const filterText = stateKey ? (filterTextMap[stateKey] ?? null) : null;
-  const debouncedFilterText = useDebouncedValue(filterText);
+  const appliedFilter = stateKey ? (appliedFilterMap[stateKey] ?? null) : null;
 
   const setFilterText = useCallback(
     (v: string | null) => {
@@ -37,17 +61,69 @@ export function useResponseFilter({ stateKey }: { stateKey: string | null }): Re
     [stateKey, setFilterTextMap],
   );
 
+  const setAppliedFilter = useCallback(
+    (v: string | null) => {
+      if (!stateKey) return;
+      setAppliedFilterMap((m) => ({ ...m, [stateKey]: v }));
+    },
+    [stateKey, setAppliedFilterMap],
+  );
+
+  const {
+    recentFilters,
+    addFilter,
+    removeFilter: removeRecentFilter,
+    togglePin: togglePinRecentFilter,
+    clearFilters: clearRecentFilters,
+  } = useRecentFilters(stateKey);
+
+  const applyFilter = useCallback(
+    (value: string) => {
+      setFilterText(value);
+      const applied = value.trim() === "" ? null : value.trim();
+      setAppliedFilter(applied);
+      if (applied == null) return;
+      runFilter(applied).then(
+        () => addFilter(applied),
+        () => {}, // Rejected by the filter plugin — don't record
+      );
+    },
+    [setFilterText, setAppliedFilter, runFilter, addFilter],
+  );
+
+  const [filterUpdateKey, setFilterUpdateKey] = useState(0);
+  const replaceFilter = useCallback(
+    (value: string) => {
+      applyFilter(value);
+      setFilterUpdateKey((k) => k + 1);
+    },
+    [applyFilter],
+  );
+
   const isSearching = filterText != null;
   const toggleSearch = useCallback(() => {
-    setFilterText(isSearching ? null : "");
-  }, [isSearching, setFilterText]);
+    if (isSearching) {
+      setFilterText(null);
+      setAppliedFilter(null);
+    } else {
+      setFilterText("");
+    }
+  }, [isSearching, setFilterText, setAppliedFilter]);
 
   return {
     stateKey,
     filterText,
-    debouncedFilterText,
+    appliedFilter,
     isSearching,
+    isDirty: filterText != null && filterText.trim() !== (appliedFilter ?? ""),
+    filterUpdateKey,
     setFilterText,
+    applyFilter,
+    replaceFilter,
     toggleSearch,
+    recentFilters,
+    removeRecentFilter,
+    togglePinRecentFilter,
+    clearRecentFilters,
   };
 }