[PRMP-1482] Implement user restrictions list page

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;
+    }
+}