[PRMP-1482] Implement user restrictions list page

Author: adamwhitingnhs

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsAddStage/UserPatientRestrictionsAddStage.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import UserPatientRestrictionsAddStage from './UserPatientRestrictionsAddStage';
+
+describe('UserPatientRestrictionsAddStage', () => {
+    it('renders correctly', () => {
+        render(<UserPatientRestrictionsAddStage />);
+
+        expect(screen.getByText('Add user patient restriction')).toBeInTheDocument();
+    });
+});

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsAddStage/UserPatientRestrictionsAddStage.tsx

@@ -0,0 +1,5 @@
+const UserPatientRestrictionsAddStage = (): React.JSX.Element => {
+    return <div>Add user patient restriction</div>;
+};
+
+export default UserPatientRestrictionsAddStage;

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsIndex/UserPatientRestrictionsIndex.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import UserPatientRestrictionsIndex from './UserPatientRestrictionsIndex';
 import { runAxeTest } from '../../../../helpers/test/axeTestHelper';
 import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
-import { routes } from '../../../../types/generic/routes';
+import { routeChildren, routes } from '../../../../types/generic/routes';
 
 vi.mock('../../../helpers/hooks/useTitle');
 vi.mock('../../../../styles/right-chevron-circle.svg', () => ({
@@ -59,6 +59,16 @@ describe('UserRestrictionsPage', (): void => {
             screen.getByTestId('user-restrictions-back-btn').click();
             expect(mockNavigate).toHaveBeenCalledWith(routes.ADMIN_ROUTE);
         });
+
+        it('navigates to add restriction page when add restriction button is clicked', (): void => {
+            screen.getByTestId('add-user-restriction-btn').click();
+            expect(mockNavigate).toHaveBeenCalledWith(routeChildren.USER_PATIENT_RESTRICTIONS_ADD);
+        });
+
+        it('navigates to view restrictions page when view restrictions button is clicked', (): void => {
+            screen.getByTestId('view-user-restrictions-btn').click();
+            expect(mockNavigate).toHaveBeenCalledWith(routeChildren.USER_PATIENT_RESTRICTIONS_LIST);
+        });
     });
 
     describe('Accessibility', (): void => {

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsIndex/UserPatientRestrictionsIndex.tsx

@@ -3,9 +3,11 @@ import { JSX } from 'react';
 import useTitle from '../../../../helpers/hooks/useTitle';
 import { ReactComponent as RightCircleIcon } from '../../../../styles/right-chevron-circle.svg';
 import BackButton from '../../../generic/backButton/BackButton';
-import { routes } from '../../../../types/generic/routes';
+import { routeChildren, routes } from '../../../../types/generic/routes';
+import { useNavigate } from 'react-router-dom';
 
 const UserPatientRestrictionsIndex = (): JSX.Element => {
+    const navigate = useNavigate();
     useTitle({ pageTitle: 'Restrict staff from accessing patient records' });
 
     return (
@@ -17,7 +19,14 @@ const UserPatientRestrictionsIndex = (): JSX.Element => {
                     <Card clickable cardType="primary">
                         <Card.Content>
                             <Card.Heading className="nhsuk-heading-m">
-                                <Card.Link data-testid="add-user-restriction-btn" href="#">
+                                <Card.Link
+                                    data-testid="add-user-restriction-btn"
+                                    href="#"
+                                    onClick={(e): void => {
+                                        e.preventDefault();
+                                        navigate(routeChildren.USER_PATIENT_RESTRICTIONS_ADD);
+                                    }}
+                                >
                                     Add a restriction
                                 </Card.Link>
                             </Card.Heading>
@@ -32,7 +41,14 @@ const UserPatientRestrictionsIndex = (): JSX.Element => {
                     <Card clickable cardType="primary">
                         <Card.Content>
                             <Card.Heading className="nhsuk-heading-m">
-                                <Card.Link data-testid="view-user-restrictions-btn" href="#">
+                                <Card.Link
+                                    data-testid="view-user-restrictions-btn"
+                                    href="#"
+                                    onClick={(e): void => {
+                                        e.preventDefault();
+                                        navigate(routeChildren.USER_PATIENT_RESTRICTIONS_LIST);
+                                    }}
+                                >
                                     View and remove a restriction
                                 </Card.Link>
                             </Card.Heading>

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsListStage/UserPatientRestrictionsListStage.scss

@@ -0,0 +1,5 @@
+.user-patient-restrictions-list-stage {
+    #search-input {
+        width: 300px;
+    }
+}

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsListStage/UserPatientRestrictionsListStage.test.tsx

@@ -0,0 +1,303 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import UserPatientRestrictionsListStage from './UserPatientRestrictionsListStage';
+import userEvent from '@testing-library/user-event';
+import { Mock } from 'vitest';
+import { routeChildren } from '../../../../types/generic/routes';
+import getUserPatientRestrictions from '../../../../helpers/requests/userPatientRestrictions/getUserPatientRestrictions';
+import { buildUserRestrictions } from '../../../../helpers/test/testBuilders';
+
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: (): Mock => mockNavigate,
+        Link: ({
+            children,
+            onClick,
+            'data-testid': dataTestId,
+        }: {
+            children: React.ReactNode;
+            onClick?: () => void;
+            'data-testid'?: string;
+        }): React.JSX.Element => (
+            <div onClick={onClick} data-testid={dataTestId}>
+                {children}
+            </div>
+        ),
+    };
+});
+vi.mock('../../../../helpers/requests/userPatientRestrictions/getUserPatientRestrictions');
+vi.mock('../../../../helpers/hooks/useBaseAPIHeaders');
+vi.mock('../../../../helpers/hooks/useBaseAPIUrl');
+
+const mockNavigate = vi.fn();
+const mockGetUserPatientRestrictions = getUserPatientRestrictions as Mock;
+
+describe('UserPatientRestrictionsListStage', () => {
+    it('renders correctly', () => {
+        render(<UserPatientRestrictionsListStage />);
+
+        expect(
+            screen.getByText('Manage restrictions on access to patient records'),
+        ).toBeInTheDocument();
+    });
+
+    it('should navigate to add restrictions stage when add restriction button is clicked', async () => {
+        render(<UserPatientRestrictionsListStage />);
+
+        const addRestrictionButton = screen.getByRole('button', { name: 'Add a restriction' });
+        expect(addRestrictionButton).toBeInTheDocument();
+
+        await userEvent.click(addRestrictionButton);
+
+        expect(mockNavigate).toHaveBeenCalledWith(routeChildren.USER_PATIENT_RESTRICTIONS_ADD);
+    });
+
+    it('should navigate to view restrictions stage when view restriction button is clicked', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(async () => {
+            const viewRestrictionButton = screen.getByTestId(
+                `view-record-link-${restrictions[0].id}`,
+            );
+            expect(viewRestrictionButton).toBeInTheDocument();
+
+            await userEvent.click(viewRestrictionButton);
+        });
+
+        expect(mockNavigate).toHaveBeenCalledWith(
+            routeChildren.USER_PATIENT_RESTRICTIONS_VIEW.replace(
+                ':restrictionId',
+                restrictions[0].id,
+            ),
+        );
+    });
+
+    it('should show error message when restrictions fail to load', async () => {
+        mockGetUserPatientRestrictions.mockRejectedValueOnce(
+            new Error('Failed to load restrictions'),
+        );
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('failed-to-load-error')).toBeInTheDocument();
+        });
+    });
+
+    it('should show loading state when restrictions are loading', async () => {
+        mockGetUserPatientRestrictions.mockReturnValue(
+            new Promise(() => {
+                // never resolves to simulate loading state
+            }),
+        );
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Searching...')).toBeInTheDocument();
+            expect(screen.getByText('Loading...')).toBeInTheDocument();
+        });
+    });
+
+    it('should show no restrictions message when there are no restrictions', async () => {
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions: [],
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(() => {
+            expect(screen.getByText('No user patient restrictions found')).toBeInTheDocument();
+        });
+    });
+
+    it('should show pagination when there are more than 10 restrictions', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token',
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Next')).toBeInTheDocument();
+        });
+    });
+
+    it('should load next page of restrictions when next button is clicked', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token',
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(async () => {
+            const nextButton = screen.getByText('Next');
+            expect(nextButton).toBeInTheDocument();
+            await userEvent.click(nextButton);
+        });
+
+        expect(mockGetUserPatientRestrictions).toHaveBeenCalledWith(
+            expect.objectContaining({
+                pageToken: 'next-page-token',
+            }),
+        );
+    });
+
+    it('should show previous button when on next page of restrictions', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token',
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Next')).toBeInTheDocument();
+        });
+
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token-2',
+        });
+
+        await waitFor(async () => {
+            const nextButton = screen.getByText('Next');
+            expect(nextButton).toBeInTheDocument();
+            await userEvent.click(nextButton);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Previous')).toBeInTheDocument();
+        });
+    });
+
+    it('should load previous page of restrictions when previous button is clicked', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token',
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(async () => {
+            const nextButton = screen.getByText('Next');
+            expect(nextButton).toBeInTheDocument();
+            await userEvent.click(nextButton);
+        });
+
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token-2',
+        });
+
+        await waitFor(async () => {
+            const previousButton = screen.getByText('Previous');
+            expect(previousButton).toBeInTheDocument();
+            await userEvent.click(previousButton);
+        });
+
+        expect(mockGetUserPatientRestrictions).toHaveBeenCalledWith(
+            expect.objectContaining({
+                pageToken: undefined, // should go back to first page
+            }),
+        );
+    });
+
+    it('should load selected page of restrictions when pagination buttons are clicked', async () => {
+        const restrictions = buildUserRestrictions();
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token',
+        });
+
+        render(<UserPatientRestrictionsListStage />);
+
+        await waitFor(async () => {
+            const nextButton = screen.getByText('Next');
+            expect(nextButton).toBeInTheDocument();
+            await userEvent.click(nextButton);
+        });
+
+        mockGetUserPatientRestrictions.mockResolvedValueOnce({
+            restrictions,
+            nextPageToken: 'next-page-token-2',
+        });
+
+        await waitFor(async () => {
+            const page1Button = screen.getByRole('link', { name: 'Page 1' });
+            expect(page1Button).toBeInTheDocument();
+            await userEvent.click(page1Button);
+        });
+
+        expect(mockGetUserPatientRestrictions).toHaveBeenCalledWith(
+            expect.objectContaining({
+                pageToken: undefined, // should load first page
+            }),
+        );
+    });
+
+    it('should send nhsNumber parameter when searching by valid nhs number', async () => {
+        render(<UserPatientRestrictionsListStage />);
+
+        const nhsNumber = '2222222222';
+        await userEvent.click(screen.getByTestId('nhs-number-radio-button'));
+        await userEvent.type(screen.getByTestId('search-input'), nhsNumber);
+        await userEvent.click(screen.getByRole('button', { name: 'Search' }));
+
+        await waitFor(() => {
+            expect(mockGetUserPatientRestrictions).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    nhsNumber,
+                    smartcardNumber: undefined,
+                }),
+            );
+        });
+    });
+
+    it('should send smartcardNumber parameter when searching by smartcard number', async () => {
+        render(<UserPatientRestrictionsListStage />);
+
+        const smartcardNumber = '1234567891234567';
+        await userEvent.click(screen.getByTestId('smartcard-number-radio-button'));
+        await userEvent.type(screen.getByTestId('search-input'), smartcardNumber);
+        await userEvent.click(screen.getByRole('button', { name: 'Search' }));
+
+        await waitFor(() => {
+            expect(mockGetUserPatientRestrictions).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    nhsNumber: undefined,
+                    smartcardNumber,
+                }),
+            );
+        });
+    });
+
+    it.each(['123', 'abc', '123456789', '12345678901', '1234567890'])(
+        'should show validation error when searching by invalid nhs number: %s',
+        async (invalidNhsNumber) => {
+            render(<UserPatientRestrictionsListStage />);
+
+            await userEvent.click(screen.getByTestId('nhs-number-radio-button'));
+            await userEvent.type(screen.getByTestId('search-input'), invalidNhsNumber);
+            await userEvent.click(screen.getByRole('button', { name: 'Search' }));
+
+            await waitFor(() => {
+                expect(
+                    screen.getByText('Please enter a valid 10-digit NHS number'),
+                ).toBeInTheDocument();
+            });
+        },
+    );
+});