#129 add X button to remove cases from search results with tests

Author: jayhill

frontend/src/components/app/SearchResult.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 import type { SearchResult as SearchResultType } from '../../../../shared/types';
 import { parseDateString, formatDisplayDate } from '../../../../shared/DateTimeUtils';
 import SearchStatus from './SearchStatus';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { ArrowTopRightOnSquareIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { PORTAL_CASE_URL } from '../../aws-exports';
+import { useRemoveCase } from '../../hooks/useCaseSearch';
+import { Button as HeadlessButton } from '@headlessui/react';
 
 interface SearchResultProps {
     searchResult: SearchResultType;
 }
 
 const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
+    const removeCase = useRemoveCase();
     // Add a safety check to ensure we have a properly structured case object
     if (!sr?.zipCase?.caseNumber) {
         console.error('Invalid case object received by SearchResult:', sr);
@@ -18,8 +21,21 @@ const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
 
     const { zipCase: c, caseSummary: summary } = sr;
 
+    const handleRemove = () => {
+        removeCase(c.caseNumber);
+    };
+
     return (
-        <div className="bg-white rounded-lg shadow overflow-hidden border-t border-gray-100">
+        <div className="bg-white rounded-lg shadow overflow-hidden border-t border-gray-100 relative group">
+            {/* Remove button - appears in upper right corner */}
+            <HeadlessButton
+                onClick={handleRemove}
+                className="absolute top-2 right-2 p-1.5 rounded text-gray-300 transition-colors duration-200 group-hover:text-gray-500 data-hover:text-gray-700 data-hover:bg-gray-100 data-focus:text-gray-700 data-focus:bg-gray-100 focus:outline-none data-focus:outline data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-gray-400"
+                aria-label="Remove case from results"
+                title="Remove case from results"
+            >
+                <XMarkIcon className="h-5 w-5" />
+            </HeadlessButton>
             <div className="p-4 sm:p-6">
                 <div className="flex items-start">
                     <div className="flex-shrink-0 mr-4">

frontend/src/components/app/__tests__/SearchResult.test.tsx

@@ -315,4 +315,14 @@ describe('SearchResult component', () => {
         expect(screen.getByText('Dept A')).toBeInTheDocument();
         expect(screen.getByText('Dept B')).toBeInTheDocument();
     });
+
+    it('renders remove button that appears on hover', () => {
+        const testCase = createTestCase();
+        render(<SearchResult searchResult={testCase} />, { wrapper: createWrapper() });
+
+        // Remove button should be present
+        const removeButton = screen.getByRole('button', { name: /remove case from results/i });
+        expect(removeButton).toBeInTheDocument();
+        expect(removeButton).toHaveAttribute('title', 'Remove case from results');
+    });
 });

frontend/src/hooks/__tests__/useCaseSearch.test.tsx

@@ -5,7 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import { useSearchResults, useConsolidatedPolling } from '../useCaseSearch';
+import { useSearchResults, useConsolidatedPolling, useRemoveCase } from '../useCaseSearch';
 
 vi.mock('../../aws-exports', () => ({
     API_URL: 'http://test-api.example.com',
@@ -167,3 +167,129 @@ describe('useConsolidatedPolling - state management', () => {
         });
     });
 });
+
+describe('useRemoveCase', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+
+    it('should remove a case from results and batches', () => {
+        const testData = {
+            results: {
+                case123: {
+                    zipCase: {
+                        caseNumber: 'case123',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+                case456: {
+                    zipCase: {
+                        caseNumber: 'case456',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+            },
+            searchBatches: [['case123', 'case456']],
+        };
+
+        const queryClient = createTestQueryClient();
+        queryClient.setQueryData(['searchResults'], testData);
+        const wrapper = createWrapper(queryClient);
+
+        const { result } = renderHook(() => useRemoveCase(), { wrapper });
+
+        // Remove case123
+        act(() => {
+            result.current('case123');
+        });
+
+        // Check that the case was removed
+        const updatedData = queryClient.getQueryData(['searchResults']);
+        expect(updatedData).toEqual({
+            results: {
+                case456: {
+                    zipCase: {
+                        caseNumber: 'case456',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+            },
+            searchBatches: [['case456']],
+        });
+    });
+
+    it('should remove empty batches after removing all cases', () => {
+        const testData = {
+            results: {
+                case123: {
+                    zipCase: {
+                        caseNumber: 'case123',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+            },
+            searchBatches: [['case123']],
+        };
+
+        const queryClient = createTestQueryClient();
+        queryClient.setQueryData(['searchResults'], testData);
+        const wrapper = createWrapper(queryClient);
+
+        const { result } = renderHook(() => useRemoveCase(), { wrapper });
+
+        // Remove case123
+        act(() => {
+            result.current('case123');
+        });
+
+        // Check that the batch was removed too
+        const updatedData = queryClient.getQueryData(['searchResults']);
+        expect(updatedData).toEqual({
+            results: {},
+            searchBatches: [],
+        });
+    });
+
+    it('should handle removing a non-existent case gracefully', () => {
+        const testData = {
+            results: {
+                case123: {
+                    zipCase: {
+                        caseNumber: 'case123',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+            },
+            searchBatches: [['case123']],
+        };
+
+        const queryClient = createTestQueryClient();
+        queryClient.setQueryData(['searchResults'], testData);
+        const wrapper = createWrapper(queryClient);
+
+        const { result } = renderHook(() => useRemoveCase(), { wrapper });
+
+        // Remove non-existent case
+        act(() => {
+            result.current('case999');
+        });
+
+        // Check that the state remains the same
+        const updatedData = queryClient.getQueryData(['searchResults']);
+        expect(updatedData).toEqual({
+            results: {
+                case123: {
+                    zipCase: {
+                        caseNumber: 'case123',
+                        fetchStatus: { status: 'complete' },
+                    },
+                },
+            },
+            searchBatches: [['case123']],
+        });
+    });
+});

frontend/src/hooks/useCaseSearch.ts

@@ -92,6 +92,33 @@ export function useSearchResults() {
     });
 }
 
+export function useRemoveCase() {
+    const queryClient = useQueryClient();
+
+    return (caseNumber: string) => {
+        const currentState = queryClient.getQueryData<ResultsState>(['searchResults']);
+
+        if (!currentState) {
+            return;
+        }
+
+        // Remove the case from results
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [caseNumber]: _removed, ...remainingResults } = currentState.results;
+
+        // Remove the case from all batches
+        const updatedBatches = currentState.searchBatches
+            .map(batch => batch.filter(cn => cn !== caseNumber))
+            .filter(batch => batch.length > 0); // Remove empty batches
+
+        // Update the query cache
+        queryClient.setQueryData(['searchResults'], {
+            results: remainingResults,
+            searchBatches: updatedBatches,
+        });
+    };
+}
+
 export function useConsolidatedPolling() {
     const queryClient = useQueryClient();