[PRMP-1442] Maximise width for Available Records Page

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/view_lloyd_george_is_bsol_workflow.cy.js

@@ -42,7 +42,7 @@ describe('GP Workflow: View Lloyd George record', () => {
     const assertPatientInfo = () => {
         cy.getByTestId('patient-name').should(
             'have.text',
-            `${searchPatientPayload.givenName} ${searchPatientPayload.familyName}`,
+            `${searchPatientPayload.givenName}, ${searchPatientPayload.familyName}`,
         );
         cy.getByTestId('patient-nhs-number').should('have.text', `NHS number: 900 000 0009`);
         cy.getByTestId('patient-dob').should('have.text', `Date of birth: 01 January 1970`);

app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx

@@ -64,7 +64,7 @@ describe('DeleteSubmitStage', () => {
         it.each(authorisedRoles)(
             "renders the page with patient details when user role is '%s'",
             async (role) => {
-                const patientName = `${mockPatientDetails.givenName} ${mockPatientDetails.familyName}`;
+                const patientName = `${mockPatientDetails.givenName}, ${mockPatientDetails.familyName}`;
                 const dob = getFormattedDate(new Date(mockPatientDetails.birthDate));
                 mockedUseRole.mockReturnValue(role);
 

app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.test.tsx

@@ -19,7 +19,6 @@ import LloydGeorgeViewRecordStage, { Props } from './LloydGeorgeViewRecordStage'
 import { createMemoryHistory } from 'history';
 import { LG_RECORD_STAGE } from '../../../../types/blocks/lloydGeorgeStages';
 import * as ReactRouter from 'react-router-dom';
-import { useRef } from 'react';
 const mockPdf = buildLgSearchResult();
 const mockPatientDetails = buildPatientDetails();
 jest.mock('../../../../helpers/hooks/useRole');
@@ -96,7 +95,7 @@ describe('LloydGeorgeViewRecordStage', () => {
     });
 
     it("renders 'full screen' mode correctly", async () => {
-        const patientName = `${mockPatientDetails.givenName} ${mockPatientDetails.familyName}`;
+        const patientName = `${mockPatientDetails.givenName}, ${mockPatientDetails.familyName}`;
         const dob = getFormattedDate(new Date(mockPatientDetails.birthDate));
 
         renderComponent();

app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import {
     BackLink,
     Button,
@@ -24,7 +24,6 @@ import {
     getNonBSOLUserRecordActionLinks,
 } from '../../../../types/blocks/lloydGeorgeActions';
 import RecordCard from '../../../generic/recordCard/RecordCard';
-import RecordMenuCard from '../../../generic/recordMenuCard/RecordMenuCard';
 import useTitle from '../../../../helpers/hooks/useTitle';
 import { routes, routeChildren } from '../../../../types/generic/routes';
 import { useNavigate } from 'react-router-dom';
@@ -213,21 +212,9 @@ function LloydGeorgeViewRecordStage({
 
             <h1>{pageHeader}</h1>
             <PatientSimpleSummary />
-            {fullScreen ? (
-                <p>
-                    To search within this record use <strong>Control</strong> and <strong>F</strong>
-                </p>
-            ) : (
-                <p />
-            )}
 
             {!fullScreen ? (
                 <div className="lloydgeorge_record-stage_flex">
-                    <RecordMenuCard
-                        recordLinks={recordLinksToShow}
-                        setStage={setStage}
-                        showMenu={showMenu}
-                    />
                     <div
                         className={`lloydgeorge_record-stage_flex-row lloydgeorge_record-stage_flex-row${menuClass}`}
                     >
@@ -239,6 +226,9 @@ function LloydGeorgeViewRecordStage({
                             refreshRecord={refreshRecord}
                             cloudFrontUrl={cloudFrontUrl}
                             resetDocStage={resetDocState}
+                            recordLinks={recordLinksToShow}
+                            setStage={setStage}
+                            showMenu={showMenu}
                         />
                     </div>
                 </div>

app/src/components/generic/patientSimpleSummary/PatientSimpleSummary.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import usePatient from '../../../helpers/hooks/usePatient';
 import { buildPatientDetails } from '../../../helpers/test/testBuilders';
 import { getFormattedDate } from '../../../helpers/utils/formatDate';
@@ -22,6 +23,13 @@ describe('PatientSummary', () => {
         birthDate: '1970-01-01',
     });
 
+    const mockLongName = buildPatientDetails({
+        familyName: 'AVeryLongFirstName',
+        givenName: ['AVeryLongSecondName'],
+        nhsNumber: '0000222000',
+        birthDate: '1970-01-01',
+    });
+
     it('renders provided patient information', () => {
         mockedUsePatient.mockReturnValue(mockDetails);
         render(<PatientSummary />);
@@ -38,7 +46,32 @@ describe('PatientSummary', () => {
         render(<PatientSummary />);
 
         expect(
-            screen.getByText(`${mockDetails.givenName[0]} ${mockDetails.familyName}`),
+            screen.getByText(`${mockDetails.givenName[0]}, ${mockDetails.familyName}`),
         ).toBeInTheDocument();
     });
+
+    it('displays a newline after name for very long names', () => {
+
+        mockedUsePatient.mockReturnValue(mockLongName);
+
+        render(<PatientSummary />);
+
+        const patientInfo = screen.getByTestId('patient-info');
+
+        expect(patientInfo.innerHTML).toContain('<br>');
+
+    });
+
+    it('displays patient details on same line for short names', () => {
+
+        mockedUsePatient.mockReturnValue(mockDetails);
+
+        render(<PatientSummary />);
+
+        const patientInfo = screen.getByTestId('patient-info');
+
+        expect(patientInfo.innerHTML).not.toContain('<br>');
+
+    });
+
 });

app/src/components/generic/patientSimpleSummary/PatientSimpleSummary.tsx

@@ -1,27 +1,45 @@
-import React from 'react';
 import usePatient from '../../../helpers/hooks/usePatient';
 import { formatNhsNumber } from '../../../helpers/utils/formatNhsNumber';
 import { getFormattedDate } from '../../../helpers/utils/formatDate';
+
 type Props = {
     separator?: boolean;
 };
+
 const PatientSimpleSummary = ({ separator = false }: Props) => {
     const patientDetails = usePatient();
     const nhsNumber: string = patientDetails?.nhsNumber ?? '';
     const formattedNhsNumber = formatNhsNumber(nhsNumber);
     const dob: string = patientDetails?.birthDate
         ? getFormattedDate(new Date(patientDetails.birthDate))
         : '';
+
+    const nameLengthLimit = 30;
+    const givenName = patientDetails?.givenName.join(' ') || '';
+    const familyName = patientDetails?.familyName || '';
+    const longname = givenName.length + familyName.length > nameLengthLimit;
+
     return (
         <div
             id="patient-info"
+            data-testid="patient-info"
             className={`lloydgeorge_record-stage_patient-info ${separator ? 'separator' : ''}`}
         >
-            <p data-testid="patient-name">
-                {`${patientDetails?.givenName} ${patientDetails?.familyName}`}
+            <p>
+                <span
+                    data-testid="patient-name"
+                    className="nhsuk-u-padding-right-9 nhsuk-u-font-weight-bold"
+                >
+                    {`${patientDetails?.givenName}, ${patientDetails?.familyName}`}
+                </span>
+
+                {longname && <br />}
+
+                <span data-testid="patient-nhs-number" className="nhsuk-u-padding-right-9">
+                    NHS number: {formattedNhsNumber}
+                </span>
+                <span data-testid="patient-dob">Date of birth: {dob}</span>
             </p>
-            <p data-testid="patient-nhs-number">NHS number: {formattedNhsNumber}</p>
-            <p data-testid="patient-dob">Date of birth: {dob}</p>
         </div>
     );
 };

app/src/components/generic/patientSummary/PatientSummary.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import usePatient from '../../../helpers/hooks/usePatient';
 import { getFormattedDate } from '../../../helpers/utils/formatDate';
 import { SummaryList } from 'nhsuk-react-components';

app/src/components/generic/pdfViewer/PdfViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 type Props = { fileUrl: String };
 
@@ -10,7 +10,7 @@ const PdfViewer = ({ fileUrl }: Props) => {
 
     if (!fileUrl) return null;
     return (
-        <div id="pdf-viewer" data-testid="pdf-viewer" tabIndex={0} style={{ height: 600 }}></div>
+        <div id="pdf-viewer" data-testid="pdf-viewer" tabIndex={0} style={{ height: 800 }}></div>
     );
 };
 

app/src/components/generic/recordCard/RecordCard.tsx

@@ -1,8 +1,11 @@
 import { Card } from 'nhsuk-react-components';
-import React, { ReactNode, useEffect, useRef } from 'react';
+import { Dispatch, ReactNode, SetStateAction, useEffect, useRef } from 'react';
 import PdfViewer from '../pdfViewer/PdfViewer';
 import useRole from '../../../helpers/hooks/useRole';
 import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
+import { LGRecordActionLink } from '../../../types/blocks/lloydGeorgeActions';
+import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
+import RecordMenuCard from '../recordMenuCard/RecordMenuCard';
 
 export type Props = {
     heading: string;
@@ -12,6 +15,9 @@ export type Props = {
     refreshRecord: () => void;
     cloudFrontUrl: string;
     resetDocStage: () => void;
+    recordLinks?: Array<LGRecordActionLink>;
+    setStage?: Dispatch<SetStateAction<LG_RECORD_STAGE>>;
+    showMenu?: boolean;
 };
 
 function RecordCard({
@@ -22,6 +28,9 @@ function RecordCard({
     cloudFrontUrl,
     refreshRecord,
     resetDocStage,
+    recordLinks = [],
+    setStage = () => {},
+    showMenu = false,
 }: Props) {
     const role = useRole();
     const userIsGpClinical = role === REPOSITORY_ROLE.GP_CLINICAL;
@@ -60,6 +69,12 @@ function RecordCard({
                         </Card.Heading>
                         {detailsElement}
 
+                        <RecordMenuCard
+                            recordLinks={recordLinks}
+                            setStage={setStage}
+                            showMenu={showMenu}
+                        />
+
                         {cloudFrontUrl && !userIsGpClinical && (
                             <button
                                 className="lloydgeorge_record-stage_pdf-content-button link-button clickable"
@@ -72,12 +87,6 @@ function RecordCard({
                                 View in full screen
                             </button>
                         )}
-                        {cloudFrontUrl && (
-                            <p>
-                                To search within this record use <strong>Control</strong> and{' '}
-                                <strong>F</strong>
-                            </p>
-                        )}
                     </Card.Content>
                     <div>{children}</div>
                 </Card>

app/src/components/generic/recordMenuCard/RecordMenuCard.test.tsx

@@ -69,8 +69,6 @@ describe('RecordMenuCard', () => {
             render(
                 <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
             );
-            expect(screen.getByRole('heading', { name: 'Download record' })).toBeInTheDocument();
-            expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Download files' })).toBeInTheDocument();
@@ -88,12 +86,8 @@ describe('RecordMenuCard', () => {
                     showMenu={true}
                 />,
             );
-            expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();
-            expect(
-                screen.queryByRole('heading', { name: 'Download record' }),
-            ).not.toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Download files' })).not.toBeInTheDocument();
 
             const mockLinksDownloadOnly = mockLinks.filter(
@@ -106,12 +100,8 @@ describe('RecordMenuCard', () => {
                     showMenu={true}
                 />,
             );
-            expect(screen.getByRole('heading', { name: 'Download record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Download files' })).toBeInTheDocument();
 
-            expect(
-                screen.queryByRole('heading', { name: 'Update record' }),
-            ).not.toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Upload files' })).not.toBeInTheDocument();
             expect(screen.queryByRole('link', { name: 'Remove files' })).not.toBeInTheDocument();
         });
@@ -151,7 +141,6 @@ describe('RecordMenuCard', () => {
             render(
                 <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
             );
-            expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
             act(() => {
                 userEvent.click(screen.getByRole('link', { name: 'Upload files' }));
@@ -163,7 +152,6 @@ describe('RecordMenuCard', () => {
             render(
                 <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
             );
-            expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();
 
             act(() => {

app/src/components/generic/recordMenuCard/RecordMenuCard.tsx

@@ -1,5 +1,4 @@
-import { Card } from 'nhsuk-react-components';
-import React, { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
 import { LGRecordActionLink, RECORD_ACTION } from '../../../types/blocks/lloydGeorgeActions';
 import { Link, useNavigate } from 'react-router-dom';
 import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
@@ -21,7 +20,7 @@ function RecordMenuCard({
     recordLinks,
     setStage,
     showMenu,
-    className = 'lloydgeorge_record-stage_flex-row',
+    className = 'lloydgeorge_record-stage_links',
 }: Props) {
     const updateActions = recordLinks.filter((link) => link.type === RECORD_ACTION.UPDATE);
     const downloadActions = recordLinks.filter((link) => link.type === RECORD_ACTION.DOWNLOAD);
@@ -35,32 +34,28 @@ function RecordMenuCard({
     }
     return (
         <div className={className} data-testid="record-menu-card">
-            <Card className="lloydgeorge_record-stage_menu">
-                <Card.Content className="lloydgeorge_record-stage_menu-content">
-                    {updateActions.length > 0 && (
-                        <SideMenuSubSection
-                            actionLinks={updateActions}
-                            heading="Update record"
-                            setStage={setStage}
-                        />
-                    )}
-                    {downloadActions.length > 0 && (
-                        <SideMenuSubSection
-                            actionLinks={downloadActions}
-                            heading="Download record"
-                            setStage={setStage}
-                        />
-                    )}
-                </Card.Content>
-            </Card>
+            {updateActions.length > 0 && (
+                <LinkSection
+                    actionLinks={updateActions}
+                    heading="Update record"
+                    setStage={setStage}
+                />
+            )}
+
+            {downloadActions.length > 0 && (
+                <LinkSection
+                    actionLinks={downloadActions}
+                    heading="Download record"
+                    setStage={setStage}
+                />
+            )}
         </div>
     );
 }
 
-const SideMenuSubSection = ({ actionLinks, heading, setStage }: SubSectionProps) => {
+const LinkSection = ({ actionLinks, setStage }: SubSectionProps) => {
     return (
         <>
-            <h2 className="nhsuk-heading-m">{heading}</h2>
             {actionLinks.map((link) => (
                 <LinkItem key={link.key} link={link} setStage={setStage} />
             ))}

app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.test.tsx

@@ -61,7 +61,7 @@ describe('LloydGeorgeRecordPage', () => {
     });
 
     it('renders patient details', async () => {
-        const patientName = `${mockPatientDetails.givenName} ${mockPatientDetails.familyName}`;
+        const patientName = `${mockPatientDetails.givenName}, ${mockPatientDetails.familyName}`;
         const dob = getFormattedDate(new Date(mockPatientDetails.birthDate));
         mockAxios.get.mockReturnValue(Promise.resolve({ data: buildLgSearchResult() }));