From 0fe29ee489693430beacab33a50836525ac019f9 Mon Sep 17 00:00:00 2001
From: Rodrigo Mansueli Nunes <rodrigo@mansueli.com>
Date: Thu, 16 Oct 2025 15:30:51 -0300
Subject: [PATCH 1/2] feat: add search

---
 .../pages/utilities/har-file-viewer.test.tsx  |  69 +++++
 components/har-waterfall/HarWaterfall.tsx     |  65 ++++-
 pages/utilities/har-file-viewer.tsx           | 260 ++++++++++++++----
 3 files changed, 341 insertions(+), 53 deletions(-)

diff --git a/__tests__/pages/utilities/har-file-viewer.test.tsx b/__tests__/pages/utilities/har-file-viewer.test.tsx
index 8a62239..150eba6 100644
--- a/__tests__/pages/utilities/har-file-viewer.test.tsx
+++ b/__tests__/pages/utilities/har-file-viewer.test.tsx
@@ -123,4 +123,73 @@ describe("HARFileViewer", () => {
     const row1 = within(rows[0]).getByTestId("column-status-code");
     expect(row1).toHaveTextContent("200");
   });
+
+  test("should filter requests based on search query", async () => {
+    const user = userEvent.setup();
+    render(<HARFileViewer />);
+
+    // Upload a HAR file
+    const file = new File([JSON.stringify(mockHarData)], "test.har", {
+      type: "application/json",
+    });
+    const fileInput = screen.getByTestId("input");
+    await user.upload(fileInput, file);
+
+    // Wait for all requests to be displayed
+    await screen.findByText("https://example.com/api/test");
+    await screen.findByText("https://example.com/css/style.css");
+
+    // Find the search input
+    const searchInput = screen.getByPlaceholderText(
+      "Search in URLs, headers, requests, and responses..."
+    );
+
+    // Search for "api" - should only show the first request
+    await user.type(searchInput, "api");
+
+    // Wait for debounce (300ms) + rendering time
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // Should still see the api request
+    expect(screen.getByText("https://example.com/api/test")).toBeInTheDocument();
+
+    // Should not see the css request (it should be filtered out)
+    const rows = screen.queryAllByTestId("table-row");
+    expect(rows.length).toBe(1);
+  });
+
+  test("should clear search query when clear button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<HARFileViewer />);
+
+    // Upload a HAR file
+    const file = new File([JSON.stringify(mockHarData)], "test.har", {
+      type: "application/json",
+    });
+    const fileInput = screen.getByTestId("input");
+    await user.upload(fileInput, file);
+
+    // Wait for requests to be displayed
+    await screen.findByText("https://example.com/api/test");
+
+    // Find and use the search input
+    const searchInput = screen.getByPlaceholderText(
+      "Search in URLs, headers, requests, and responses..."
+    );
+    await user.type(searchInput, "api");
+
+    // Wait for debounce
+    await new Promise((resolve) => setTimeout(resolve, 400));
+
+    // Find the clear button (it should appear when there's text)
+    const clearButton = screen.getByTitle("Clear search");
+    await user.click(clearButton);
+
+    // Search input should be empty
+    expect(searchInput).toHaveValue("");
+
+    // Both requests should be visible again
+    await screen.findByText("https://example.com/api/test");
+    await screen.findByText("https://example.com/css/style.css");
+  });
 });
diff --git a/components/har-waterfall/HarWaterfall.tsx b/components/har-waterfall/HarWaterfall.tsx
index e295585..e224ab6 100644
--- a/components/har-waterfall/HarWaterfall.tsx
+++ b/components/har-waterfall/HarWaterfall.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useCallback, useMemo } from "react";
-import { HarEntry, FilterType, getFilterType } from "../utils/har-utils";
+import { HarEntry, FilterType, getFilterType, isBase64 } from "../utils/har-utils";
 import { WaterfallCanvas } from "./WaterfallCanvas";
 import { WaterfallTooltip } from "./WaterfallTooltip";
 import { WaterfallLegend } from "./WaterfallLegend";
@@ -11,12 +11,14 @@ interface HarWaterfallProps {
   entries: HarEntry[];
   activeFilter: FilterType;
   className?: string;
+  searchQuery?: string;
 }
 
 export const HarWaterfall: React.FC<HarWaterfallProps> = ({
   entries,
   activeFilter,
   className = "",
+  searchQuery = "",
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoveredEntry, setHoveredEntry] = useState<{
@@ -36,11 +38,64 @@ export const HarWaterfall: React.FC<HarWaterfallProps> = ({
   } | null>(null);
   const [scrollOffset, setScrollOffset] = useState({ x: 0, y: 0 });
 
-  // Filter entries based on active filter
+  // Filter entries based on active filter and search query
   const filteredEntries = useMemo(() => {
-    if (activeFilter === "All") return entries;
-    return entries.filter((entry) => getFilterType(entry) === activeFilter);
-  }, [entries, activeFilter]);
+    let result = entries;
+
+    // Apply content type filter
+    if (activeFilter !== "All") {
+      result = result.filter((entry) => getFilterType(entry) === activeFilter);
+    }
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter((entry) => {
+        // Search in URL
+        if (entry.request.url.toLowerCase().includes(query)) return true;
+
+        // Search in request headers
+        const requestHeaderMatch = entry.request.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (requestHeaderMatch) return true;
+
+        // Search in response headers
+        const responseHeaderMatch = entry.response.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (responseHeaderMatch) return true;
+
+        // Search in request payload
+        if (entry.request.postData?.text) {
+          if (entry.request.postData.text.toLowerCase().includes(query))
+            return true;
+        }
+
+        // Search in response content
+        if (entry.response.content.text) {
+          // For base64 content, try to decode and search
+          let contentToSearch = entry.response.content.text;
+          if (isBase64(contentToSearch)) {
+            try {
+              contentToSearch = atob(contentToSearch);
+            } catch (e) {
+              // If decode fails, search in original
+            }
+          }
+          if (contentToSearch.toLowerCase().includes(query)) return true;
+        }
+
+        return false;
+      });
+    }
+
+    return result;
+  }, [entries, activeFilter, searchQuery]);
 
   // Calculate timings for all entries
   const timings = useMemo(() => {
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index 706740e..37ffda7 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -21,12 +21,13 @@ import PageHeader from "@/components/PageHeader";
 import CallToActionGrid from "@/components/CallToActionGrid";
 import HarFileViewerSEO from "@/components/seo/HarFileViewerSEO";
 import { HarWaterfall } from "@/components/har-waterfall";
-import { Table, BarChart3, Filter } from "lucide-react";
+import { Table, BarChart3, Filter, Search, X } from "lucide-react";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ds/PopoverComponent";
+import { Input } from "@/components/ds/InputComponent";
 import {
   Command,
   CommandEmpty,
@@ -111,6 +112,8 @@ export default function HARFileViewer() {
   const [viewMode, setViewMode] = useState<"table" | "waterfall">("table");
   const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
 
   // Load view mode from localStorage on component mount
   useEffect(() => {
@@ -136,6 +139,15 @@ export default function HARFileViewer() {
     }
   }, [viewMode, isInitialized]);
 
+  // Debounce search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
   const handleFileUpload = useCallback((file: File | undefined) => {
     if (!file) {
       return;
@@ -189,6 +201,73 @@ export default function HARFileViewer() {
     []
   );
 
+  // Calculate filtered results count
+  const getFilteredCount = useCallback(() => {
+    if (!harData) return 0;
+
+    let result = harData.log.entries;
+
+    // Apply content type filter
+    if (activeFilter !== "All") {
+      result = result.filter((entry) => getFilterType(entry) === activeFilter);
+    }
+
+    // Apply status code filter
+    if (statusFilter.length > 0) {
+      result = result.filter((entry) =>
+        statusFilter.includes(entry.response.status.toString())
+      );
+    }
+
+    // Apply search filter
+    if (debouncedSearchQuery) {
+      const query = debouncedSearchQuery.toLowerCase();
+      result = result.filter((entry) => {
+        // Search in URL
+        if (entry.request.url.toLowerCase().includes(query)) return true;
+
+        // Search in request headers
+        const requestHeaderMatch = entry.request.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (requestHeaderMatch) return true;
+
+        // Search in response headers
+        const responseHeaderMatch = entry.response.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (responseHeaderMatch) return true;
+
+        // Search in request payload
+        if (entry.request.postData?.text) {
+          if (entry.request.postData.text.toLowerCase().includes(query))
+            return true;
+        }
+
+        // Search in response content
+        if (entry.response.content.text) {
+          let contentToSearch = entry.response.content.text;
+          if (isBase64(contentToSearch)) {
+            try {
+              contentToSearch = atob(contentToSearch);
+            } catch (e) {
+              // If decode fails, search in original
+            }
+          }
+          if (contentToSearch.toLowerCase().includes(query)) return true;
+        }
+
+        return false;
+      });
+    }
+
+    return result.length;
+  }, [harData, activeFilter, statusFilter, debouncedSearchQuery]);
+
   return (
     <main>
       <Meta
@@ -232,54 +311,88 @@ export default function HARFileViewer() {
       {harData && (
         <>
           <section className="container max-w-7xl mb-6">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex space-x-2">
-                {(
-                  [
-                    "All",
-                    "XHR",
-                    "JS",
-                    "CSS",
-                    "Img",
-                    "Media",
-                    "Other",
-                    "Errors",
-                  ] as FilterType[]
-                ).map((type) => (
+            <div className="flex flex-col gap-4 mb-4">
+              {/* Search Input */}
+              <div className="flex flex-col gap-2">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="text"
+                    placeholder="Search in URLs, headers, requests, and responses..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9 pr-10"
+                  />
+                  {searchQuery && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSearchQuery("")}
+                      className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0"
+                      title="Clear search"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+                {/* Results count */}
+                {(debouncedSearchQuery || activeFilter !== "All" || statusFilter.length > 0) && (
+                  <p className="text-sm text-muted-foreground">
+                    Showing {getFilteredCount()} of {harData.log.entries.length} requests
+                  </p>
+                )}
+              </div>
+
+              {/* Filters and View Mode */}
+              <div className="flex items-center justify-between">
+                <div className="flex space-x-2">
+                  {(
+                    [
+                      "All",
+                      "XHR",
+                      "JS",
+                      "CSS",
+                      "Img",
+                      "Media",
+                      "Other",
+                      "Errors",
+                    ] as FilterType[]
+                  ).map((type) => (
+                    <Button
+                      key={type}
+                      variant="outline"
+                      className={cn(
+                        activeFilter === type && "bg-border hover:bg-border"
+                      )}
+                      onClick={() => setActiveFilter(type)}
+                    >
+                      {type}
+                    </Button>
+                  ))}
+                </div>
+                <div className="flex items-center gap-2">
                   <Button
-                    key={type}
-                    variant="outline"
-                    className={cn(
-                      activeFilter === type && "bg-border hover:bg-border"
-                    )}
-                    onClick={() => setActiveFilter(type)}
+                    size="sm"
+                    variant={viewMode === "waterfall" ? "default" : "outline"}
+                    onClick={() => setViewMode("waterfall")}
+                    className="h-8 relative"
                   >
-                    {type}
+                    <BarChart3 className="h-4 w-4 mr-2" />
+                    Waterfall
+                    <span className="ml-2 inline-flex items-center rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-600 dark:text-green-400">
+                      New
+                    </span>
                   </Button>
-                ))}
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="sm"
-                  variant={viewMode === "waterfall" ? "default" : "outline"}
-                  onClick={() => setViewMode("waterfall")}
-                  className="h-8 relative"
-                >
-                  <BarChart3 className="h-4 w-4 mr-2" />
-                  Waterfall
-                  <span className="ml-2 inline-flex items-center rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-600 dark:text-green-400">
-                    New
-                  </span>
-                </Button>
-                <Button
-                  size="sm"
-                  variant={viewMode === "table" ? "default" : "outline"}
-                  onClick={() => setViewMode("table")}
-                  className="h-8"
-                >
-                  <Table className="h-4 w-4 mr-2" />
-                  Table view
-                </Button>
+                  <Button
+                    size="sm"
+                    variant={viewMode === "table" ? "default" : "outline"}
+                    onClick={() => setViewMode("table")}
+                    className="h-8"
+                  >
+                    <Table className="h-4 w-4 mr-2" />
+                    Table view
+                  </Button>
+                </div>
               </div>
             </div>
           </section>
@@ -291,11 +404,13 @@ export default function HARFileViewer() {
                 activeFilter={activeFilter}
                 statusFilter={statusFilter}
                 onStatusFilterChange={setStatusFilter}
+                searchQuery={debouncedSearchQuery}
               />
             ) : (
               <HarWaterfall
                 entries={harData.log.entries}
                 activeFilter={activeFilter}
+                searchQuery={debouncedSearchQuery}
                 className="mb-6"
               />
             )}
@@ -318,6 +433,7 @@ interface HarTableComponentProps extends HarTableProps {
   activeFilter: FilterType;
   statusFilter: string[];
   onStatusFilterChange: (statusCodes: string[]) => void;
+  searchQuery: string;
 }
 
 const HarTable = ({
@@ -325,6 +441,7 @@ const HarTable = ({
   activeFilter,
   statusFilter,
   onStatusFilterChange,
+  searchQuery,
 }: HarTableComponentProps) => {
   const [expandedRow, setExpandedRow] = useState<number | null>(null);
   const [sortField, setSortField] = useState<SortField | null>(null);
@@ -332,7 +449,7 @@ const HarTable = ({
 
   useEffect(() => {
     setExpandedRow(null);
-  }, [activeFilter]);
+  }, [activeFilter, searchQuery]);
 
   // Helper function to get status text
   const getStatusText = (statusCode: number): string => {
@@ -389,6 +506,53 @@ const HarTable = ({
       );
     }
 
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter((entry) => {
+        // Search in URL
+        if (entry.request.url.toLowerCase().includes(query)) return true;
+
+        // Search in request headers
+        const requestHeaderMatch = entry.request.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (requestHeaderMatch) return true;
+
+        // Search in response headers
+        const responseHeaderMatch = entry.response.headers.some(
+          (header) =>
+            header.name.toLowerCase().includes(query) ||
+            header.value.toLowerCase().includes(query)
+        );
+        if (responseHeaderMatch) return true;
+
+        // Search in request payload
+        if (entry.request.postData?.text) {
+          if (entry.request.postData.text.toLowerCase().includes(query))
+            return true;
+        }
+
+        // Search in response content
+        if (entry.response.content.text) {
+          // For base64 content, try to decode and search
+          let contentToSearch = entry.response.content.text;
+          if (isBase64(contentToSearch)) {
+            try {
+              contentToSearch = atob(contentToSearch);
+            } catch (e) {
+              // If decode fails, search in original
+            }
+          }
+          if (contentToSearch.toLowerCase().includes(query)) return true;
+        }
+
+        return false;
+      });
+    }
+
     // Apply sorting
     if (sortField) {
       result.sort((a, b) => {
@@ -405,7 +569,7 @@ const HarTable = ({
     }
 
     return result;
-  }, [entries, activeFilter, statusFilter, sortField, sortOrder]);
+  }, [entries, activeFilter, statusFilter, searchQuery, sortField, sortOrder]);
 
   const handleSort = (field: SortField) => {
     if (sortField === field) {

From 2569284d66d7b8e4d7060306a8f8450468883e82 Mon Sep 17 00:00:00 2001
From: Petar Cirkovic <pekiseven@gmail.com>
Date: Sat, 18 Oct 2025 12:38:02 +0200
Subject: [PATCH 2/2] chore: run prettier

---
 __tests__/pages/utilities/har-file-viewer.test.tsx | 4 +++-
 components/har-waterfall/HarWaterfall.tsx          | 7 ++++++-
 pages/utilities/har-file-viewer.tsx                | 7 +++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/__tests__/pages/utilities/har-file-viewer.test.tsx b/__tests__/pages/utilities/har-file-viewer.test.tsx
index 150eba6..0924875 100644
--- a/__tests__/pages/utilities/har-file-viewer.test.tsx
+++ b/__tests__/pages/utilities/har-file-viewer.test.tsx
@@ -151,7 +151,9 @@ describe("HARFileViewer", () => {
     await new Promise((resolve) => setTimeout(resolve, 500));
 
     // Should still see the api request
-    expect(screen.getByText("https://example.com/api/test")).toBeInTheDocument();
+    expect(
+      screen.getByText("https://example.com/api/test")
+    ).toBeInTheDocument();
 
     // Should not see the css request (it should be filtered out)
     const rows = screen.queryAllByTestId("table-row");
diff --git a/components/har-waterfall/HarWaterfall.tsx b/components/har-waterfall/HarWaterfall.tsx
index e224ab6..5401ff6 100644
--- a/components/har-waterfall/HarWaterfall.tsx
+++ b/components/har-waterfall/HarWaterfall.tsx
@@ -1,5 +1,10 @@
 import React, { useRef, useState, useCallback, useMemo } from "react";
-import { HarEntry, FilterType, getFilterType, isBase64 } from "../utils/har-utils";
+import {
+  HarEntry,
+  FilterType,
+  getFilterType,
+  isBase64,
+} from "../utils/har-utils";
 import { WaterfallCanvas } from "./WaterfallCanvas";
 import { WaterfallTooltip } from "./WaterfallTooltip";
 import { WaterfallLegend } from "./WaterfallLegend";
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index 37ffda7..93f01fb 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -336,9 +336,12 @@ export default function HARFileViewer() {
                   )}
                 </div>
                 {/* Results count */}
-                {(debouncedSearchQuery || activeFilter !== "All" || statusFilter.length > 0) && (
+                {(debouncedSearchQuery ||
+                  activeFilter !== "All" ||
+                  statusFilter.length > 0) && (
                   <p className="text-sm text-muted-foreground">
-                    Showing {getFilteredCount()} of {harData.log.entries.length} requests
+                    Showing {getFilteredCount()} of {harData.log.entries.length}{" "}
+                    requests
                   </p>
                 )}
               </div>