Skip to content

Commit

Permalink
PRMDR 658 - upload button when no existing records (#284)
Browse files Browse the repository at this point in the history 
* prmdr-658 add button to upload when no records for BSOL admin user
  • Loading branch information
@NogaNHS
NogaNHS authored Feb 9, 2024
1 parent 17e1998 commit 213ea40
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 22 deletions.
50 changes: 36 additions & 14 deletions app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
import useRole from '../../../helpers/hooks/useRole';
import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
import { routes } from '../../../types/generic/routes';
import useIsBSOL from '../../../helpers/hooks/useIsBSOL';

const mockSetStage = jest.fn();
const mockNavigate = jest.fn();
jest.mock('../../../helpers/hooks/useIsBSOL');

jest.mock('react-router-dom', () => ({
__esModule: true,
Expand All @@ -22,6 +24,7 @@ jest.mock('react-router', () => ({

jest.mock('../../../helpers/hooks/useRole');
const mockUseRole = useRole as jest.Mock;
const mockedIsBSOL = useIsBSOL as jest.Mock;

describe('LloydGeorgeRecordError', () => {
beforeEach(() => {
Expand All @@ -37,67 +40,86 @@ describe('LloydGeorgeRecordError', () => {
it("renders an error when the document download status is 'Timeout'", () => {
const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

expect(
screen.getByText(/The Lloyd George document is too large to view in a browser/i),
screen.getByText(/The Lloyd George document is too large to view in a browser/i)
).toBeInTheDocument();
expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
});
it("renders an error when the document download status is 'Failed'", () => {
const timeoutStatus = DOWNLOAD_STAGE.FAILED;
render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

expect(
screen.getByText(/Sorry, the service is currently unavailable/i),
screen.getByText(/Sorry, the service is currently unavailable/i)
).toBeInTheDocument();
expect(
screen.getByText(/An error has occurred when creating the Lloyd George preview/i),
screen.getByText(/An error has occurred when creating the Lloyd George preview/i)
).toBeInTheDocument();
});
it("renders a message when the document download status is 'No records'", () => {
it("renders a message when the document download status is 'No records' and user is non BSOL", () => {
const timeoutStatus = DOWNLOAD_STAGE.NO_RECORDS;
mockedIsBSOL.mockReturnValue(false);

render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

expect(screen.getByText(/No documents are available/i)).toBeInTheDocument();
expect(
screen.queryByRole('button', { name: 'Upload patient record' })
).not.toBeInTheDocument();
});
it("renders a message and upload button when the document download status is 'No records' and user is admin BSOL", () => {
const timeoutStatus = DOWNLOAD_STAGE.NO_RECORDS;
mockedIsBSOL.mockReturnValue(true);
mockUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);

render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

expect(screen.getByText('No records available for this patient')).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Upload patient record' })
).toBeInTheDocument();
});
});

describe('Navigation', () => {
it("renders a link that can navigate to the download all stage, when download status is 'Timeout'", () => {
const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

expect(
screen.getByText(/The Lloyd George document is too large to view in a browser/i),
screen.getByText(/The Lloyd George document is too large to view in a browser/i)
).toBeInTheDocument();
expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
expect(
screen.getByRole('link', {
name: 'please download instead',
}),
})
).toBeInTheDocument();
});

it("navigates to the download all stage, when download status is 'Timeout' and the link is clicked: GP_ADMIN", () => {
const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

const downloadLink = screen.getByRole('link', {
name: 'please download instead',
});

expect(
screen.getByText(/The Lloyd George document is too large to view in a browser/i),
screen.getByText(/The Lloyd George document is too large to view in a browser/i)
).toBeInTheDocument();
expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
expect(downloadLink).toBeInTheDocument();
Expand All @@ -113,15 +135,15 @@ describe('LloydGeorgeRecordError', () => {
mockUseRole.mockReturnValue(REPOSITORY_ROLE.GP_CLINICAL);
const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
render(
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
<LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
);

const downloadLink = screen.getByRole('link', {
name: 'please download instead',
});

expect(
screen.getByText(/The Lloyd George document is too large to view in a browser/i),
screen.getByText(/The Lloyd George document is too large to view in a browser/i)
).toBeInTheDocument();
expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
expect(downloadLink).toBeInTheDocument();
Expand Down
22 changes: 22 additions & 0 deletions app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
import useRole from '../../../helpers/hooks/useRole';
import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
import { routes } from '../../../types/generic/routes';
import useIsBSOL from '../../../helpers/hooks/useIsBSOL';
import { ButtonLink } from 'nhsuk-react-components';

type Props = {
downloadStage: DOWNLOAD_STAGE;
Expand All @@ -15,6 +17,7 @@ type Props = {
function LloydGeorgeRecordError({ downloadStage, setStage }: Props) {
const role = useRole();
const navigate = useNavigate();
const isBSOL = useIsBSOL();

if (downloadStage === DOWNLOAD_STAGE.TIMEOUT) {
return (
Expand All @@ -37,6 +40,25 @@ function LloydGeorgeRecordError({ downloadStage, setStage }: Props) {
</p>
</span>
);
} else if (
downloadStage === DOWNLOAD_STAGE.NO_RECORDS &&
role === REPOSITORY_ROLE.GP_ADMIN &&
isBSOL
) {
return (
<span>
<h3>No records available for this patient</h3>
<p>
You can upload full or part of a patient record. You can upload supporting files
once the record is uploaded.
</p>
<div className="lloydgeorge_record-stage_header-content-no_record">
<ButtonLink className="lloydgeorge_record-stage_header-content-no_record-upload">
Upload patient record
</ButtonLink>
</div>
</span>
);
} else if (downloadStage === DOWNLOAD_STAGE.NO_RECORDS) {
return <span>No documents are available.</span>;
} else {
Expand Down
2 changes: 2 additions & 0 deletions app/src/components/blocks/lloydGeorgeRecordStage/LloydGeorgeRecordStage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import WarningText from '../../generic/warningText/WarningText';
import ErrorBox from '../../layout/errorBox/ErrorBox';
import { useForm } from 'react-hook-form';
import { InputRef } from '../../../types/generic/inputRef';
import BackButton from '../../generic/backButton/BackButton';

export type Props = {
downloadStage: DOWNLOAD_STAGE;
Expand Down Expand Up @@ -98,6 +99,7 @@ function LloydGeorgeRecordStage({

return (
<div className="lloydgeorge_record-stage">
<BackButton />
{formState.errors.confirmDownloadRemove && (
<ErrorBox
dataTestId="confirm-download-and-remove-error"
Expand Down
22 changes: 14 additions & 8 deletions app/src/styles/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,7 @@ $govuk-compatibility-govukelements: true;
}
&:focus {
background-color: #ffeb3b;
box-shadow:
0 -2px #ffeb3b,
0 4px #212b32;
box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
color: #212b32;
outline: 4px solid transparent;
text-decoration: none;
Expand Down Expand Up @@ -129,16 +127,15 @@ $govuk-compatibility-govukelements: true;
.lloydgeorge {
&_record-stage {
&_patient-info {
p {
font-size: 19px;
}
p:first-child {
margin-bottom: 5px;
font-weight: 700;
}
p:nth-child(1) {
font-size: 16px;
margin-bottom: 5px;
}
p:nth-child(2) {
font-size: 16px;
margin-bottom: 0;
}
}
&_header {
Expand All @@ -149,6 +146,15 @@ $govuk-compatibility-govukelements: true;
font-weight: 700;
font-size: 24px;
}
p {
margin-bottom: 0;
}
&-no_record {
text-align: right;
&-upload {
margin-bottom: 0;
}
}
}
}
&_expander {
Expand Down

0 comments on commit 213ea40

Please sign in to comment.