#141 add copy button for case numbers in search results

Author: Copilot

frontend/src/components/app/SearchResult.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { SearchResult as SearchResultType } from '../../../../shared/types';
 import { parseDateString, formatDisplayDate } from '../../../../shared/DateTimeUtils';
 import SearchStatus from './SearchStatus';
-import { ArrowTopRightOnSquareIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { ArrowTopRightOnSquareIcon, DocumentDuplicateIcon, 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';
@@ -13,6 +13,8 @@ interface SearchResultProps {
 
 const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
     const removeCase = useRemoveCase();
+    const [copySuccess, setCopySuccess] = useState(false);
+
     // 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);
@@ -25,6 +27,20 @@ const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
         removeCase(c.caseNumber);
     };
 
+    const copyCaseNumber = async () => {
+        if (navigator.clipboard) {
+            try {
+                await navigator.clipboard.writeText(c.caseNumber);
+                setCopySuccess(true);
+                setTimeout(() => {
+                    setCopySuccess(false);
+                }, 2000);
+            } catch (error) {
+                console.error('Failed to copy case number:', error);
+            }
+        }
+    };
+
     return (
         <div className="bg-white rounded-lg shadow overflow-hidden border-t border-gray-100 relative group">
             {/* Remove button - appears in upper right corner */}
@@ -46,7 +62,7 @@ const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
                         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                             <div className="mb-2 sm:mb-0">
                                 {c.caseId ? (
-                                    <div className="inline-flex font-medium text-primary-dark underline">
+                                    <div className="inline-flex items-center font-medium text-primary-dark underline">
                                         <a
                                             href={`${PORTAL_CASE_URL}/#/${c.caseId}`}
                                             target="_blank"
@@ -56,9 +72,25 @@ const SearchResult: React.FC<SearchResultProps> = ({ searchResult: sr }) => {
                                             {c.caseNumber}
                                         </a>
                                         <ArrowTopRightOnSquareIcon className="h-4 w-4 ml-1 text-gray-500" />
+                                        <HeadlessButton
+                                            onClick={copyCaseNumber}
+                                            title={copySuccess ? 'Copied!' : 'Copy case number to clipboard'}
+                                            className="ml-1 text-gray-500 data-hover:text-gray-900 data-hover:scale-110 transition-all focus:outline-none"
+                                        >
+                                            <DocumentDuplicateIcon className={`h-4 w-4 ${copySuccess ? 'text-green-600' : ''}`} />
+                                        </HeadlessButton>
                                     </div>
                                 ) : (
-                                    <div className="font-medium text-gray-600">{c.caseNumber}</div>
+                                    <div className="inline-flex items-center font-medium text-gray-600">
+                                        {c.caseNumber}
+                                        <HeadlessButton
+                                            onClick={copyCaseNumber}
+                                            title={copySuccess ? 'Copied!' : 'Copy case number to clipboard'}
+                                            className="ml-1 text-gray-500 data-hover:text-gray-900 data-hover:scale-110 transition-all focus:outline-none"
+                                        >
+                                            <DocumentDuplicateIcon className={`h-4 w-4 ${copySuccess ? 'text-green-600' : ''}`} />
+                                        </HeadlessButton>
+                                    </div>
                                 )}
                             </div>
 

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import SearchResult from '../SearchResult';
 import { SearchResult as SearchResultType, ZipCase } from '../../../../../shared/types';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -19,9 +20,7 @@ const createTestQueryClient = () => {
 
 const createWrapper = (queryClient?: QueryClient) => {
     const testQueryClient = queryClient || createTestQueryClient();
-    return ({ children }: { children: React.ReactNode }) => (
-        <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>
-    );
+    return ({ children }: { children: React.ReactNode }) => <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>;
 };
 
 // Mock SearchStatus component
@@ -33,6 +32,11 @@ vi.mock('../SearchStatus', () => ({
     )),
 }));
 
+// Mock useCaseSearch hook
+vi.mock('../../../hooks/useCaseSearch', () => ({
+    useRemoveCase: () => vi.fn(),
+}));
+
 // Mock constants from aws-exports
 vi.mock('../../../aws-exports', () => ({
     API_URL: 'https://api.example.com',
@@ -325,4 +329,78 @@ describe('SearchResult component', () => {
         expect(removeButton).toBeInTheDocument();
         expect(removeButton).toHaveAttribute('title', 'Remove case from results');
     });
+
+    it('displays copy button when caseId is present', () => {
+        const testCase = createTestCase();
+        render(<SearchResult searchResult={testCase} />, { wrapper: createWrapper() });
+
+        // Check that copy button is rendered
+        const copyButton = screen.getByTitle('Copy case number to clipboard');
+        expect(copyButton).toBeInTheDocument();
+    });
+
+    it('displays copy button when caseId is not present', () => {
+        const testCase = createTestCase({
+            zipCase: {
+                caseNumber: '22CR123456-789',
+                caseId: undefined,
+                fetchStatus: {
+                    status: 'processing',
+                },
+            },
+        });
+        render(<SearchResult searchResult={testCase} />, { wrapper: createWrapper() });
+
+        // Check that copy button is rendered
+        const copyButton = screen.getByTitle('Copy case number to clipboard');
+        expect(copyButton).toBeInTheDocument();
+    });
+
+    it('copies case number to clipboard when copy button is clicked', async () => {
+        const user = userEvent.setup();
+
+        // Mock clipboard API
+        const writeTextMock = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            value: {
+                writeText: writeTextMock,
+            },
+            writable: true,
+            configurable: true,
+        });
+
+        const testCase = createTestCase();
+        render(<SearchResult searchResult={testCase} />, { wrapper: createWrapper() });
+
+        // Click the copy button
+        const copyButton = screen.getByTitle('Copy case number to clipboard');
+        await user.click(copyButton);
+
+        // Verify that clipboard.writeText was called with the correct case number
+        expect(writeTextMock).toHaveBeenCalledWith('22CR123456-789');
+    });
+
+    it('shows visual feedback when case number is copied', async () => {
+        const user = userEvent.setup();
+
+        // Mock clipboard API
+        const writeTextMock = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            value: {
+                writeText: writeTextMock,
+            },
+            writable: true,
+            configurable: true,
+        });
+
+        const testCase = createTestCase();
+        render(<SearchResult searchResult={testCase} />, { wrapper: createWrapper() });
+
+        // Click the copy button
+        const copyButton = screen.getByTitle('Copy case number to clipboard');
+        await user.click(copyButton);
+
+        // Check that the title changes to indicate success
+        expect(screen.getByTitle('Copied!')).toBeInTheDocument();
+    });
 });