From bfaf8a93a2ee45671abea0018504c3972ef9ef42 Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Tue, 21 Jan 2025 09:44:51 -0500
Subject: [PATCH 1/2] Allow Empty Tables when Filtering

---
 locust/webui/src/hooks/useSortByField.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/locust/webui/src/hooks/useSortByField.ts b/locust/webui/src/hooks/useSortByField.ts
index 5e38c1e88b..71c83b7d16 100644
--- a/locust/webui/src/hooks/useSortByField.ts
+++ b/locust/webui/src/hooks/useSortByField.ts
@@ -77,6 +77,9 @@ export default function useSortByField<Row>(
   useEffect(() => {
     if (rows.length) {
       sortStats(currentSortField.current || defaultSortKey);
+    } else if (sortStats.length) {
+      // allows tables to be empty in the case of filtering
+      setSortedRows(rows);
     }
   }, [rows]);
 

From 57b1c487e35d8a6c60a714a5d5d9a44b721255e9 Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Tue, 21 Jan 2025 09:52:32 -0500
Subject: [PATCH 2/2] Add test

---
 .../src/hooks/tests/useSortByField.test.tsx   | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/locust/webui/src/hooks/tests/useSortByField.test.tsx b/locust/webui/src/hooks/tests/useSortByField.test.tsx
index c1e76eebc9..ed2b45e6ab 100644
--- a/locust/webui/src/hooks/tests/useSortByField.test.tsx
+++ b/locust/webui/src/hooks/tests/useSortByField.test.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { act, render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
@@ -21,13 +22,12 @@ function MockHook({
   hasTotalRow?: boolean;
   defaultSortKey?: keyof (typeof mockStats)[0];
 }) {
-  const { onTableHeadClick, sortedRows, currentSortField } = useSortByField(
-    hasTotalRow ? mockStatsWithTotalRow : mockStats,
-    {
-      hasTotalRow,
-      defaultSortKey,
-    },
-  );
+  const [stats, setStats] = useState(hasTotalRow ? mockStatsWithTotalRow : mockStats);
+
+  const { onTableHeadClick, sortedRows, currentSortField } = useSortByField(stats, {
+    hasTotalRow,
+    defaultSortKey,
+  });
 
   return (
     <div>
@@ -45,6 +45,9 @@ function MockHook({
       >
         Sort by numFailures
       </button>
+      <button data-testid='emptyStats' onClick={() => setStats([])}>
+        Empty stats
+      </button>
       <span data-testid='sortedStats'>{JSON.stringify(sortedRows)}</span>
       <span data-testid='currentSortField'>{currentSortField}</span>
     </div>
@@ -127,4 +130,16 @@ describe('useSortByField', () => {
     expect(getByTestId('sortedStats').textContent).toBe(JSON.stringify(mockStats));
     expect(getByTestId('currentSortField').textContent).toBe('');
   });
+
+  test('should allow the sorted rows to be set to empty', () => {
+    const { getByTestId } = render(<MockHook />);
+
+    expect(getByTestId('sortedStats').textContent).toBe(JSON.stringify(mockStats));
+
+    act(() => {
+      getByTestId('emptyStats').click();
+    });
+
+    expect(getByTestId('sortedStats').textContent).toBe(JSON.stringify([]));
+  });
 });