Parameter search & inline display for Past Runs and Run History pages (#3985)

skyvern-frontend/src/routes/workflows/hooks/useKeywordSearch.ts

@@ -0,0 +1,60 @@
+import { useCallback, useMemo } from "react";
+import type { ParameterDisplayItem } from "../components/ParameterDisplayInline";
+
+function normalize(value: unknown): string {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function useKeywordSearch(search: string) {
+  const normalizedSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+  const isSearchActive = normalizedSearch.length > 0;
+
+  const matchesText = useCallback(
+    (text: string | null | undefined) => {
+      if (!isSearchActive || !text) {
+        return false;
+      }
+      return text.toLowerCase().includes(normalizedSearch);
+    },
+    [isSearchActive, normalizedSearch],
+  );
+
+  const matchesParameter = useCallback(
+    (parameter: ParameterDisplayItem) => {
+      if (!isSearchActive) {
+        return false;
+      }
+
+      const valueString = normalize(parameter.value);
+
+      return (
+        matchesText(parameter.key) ||
+        matchesText(parameter.description ?? "") ||
+        matchesText(valueString)
+      );
+    },
+    [isSearchActive, matchesText],
+  );
+
+  return {
+    searchQuery: normalizedSearch,
+    isSearchActive,
+    matchesText,
+    matchesParameter,
+  };
+}
+
+export { useKeywordSearch };

skyvern-frontend/src/routes/workflows/hooks/useParameterExpansion.ts

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useState } from "react";
+
+function toSet(ids: Iterable<string>): Set<string> {
+  return new Set(ids);
+}
+
+function useParameterExpansion() {
+  const [manuallyExpandedRows, setManuallyExpandedRows] = useState<Set<string>>(
+    new Set(),
+  );
+  const [autoExpandedRows, setAutoExpandedRows] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const toggleExpanded = useCallback((id: string) => {
+    setManuallyExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const expandedRows = useMemo(() => {
+    const combined = new Set(autoExpandedRows);
+    for (const id of manuallyExpandedRows) {
+      combined.add(id);
+    }
+    return combined;
+  }, [autoExpandedRows, manuallyExpandedRows]);
+
+  const updateAutoExpandedRows = useCallback((ids: Iterable<string>) => {
+    setAutoExpandedRows(toSet(ids));
+  }, []);
+
+  return {
+    expandedRows,
+    toggleExpanded,
+    setManuallyExpandedRows,
+    manuallyExpandedRows,
+    setAutoExpandedRows: updateAutoExpandedRows,
+  };
+}
+
+export { useParameterExpansion };