Skip to content

Commit 2f7bb04

Browse files
harrim91harrim91
committed
CCM-11496: match updated design
1 parent 3f7824e commit 2f7bb04

File tree

15 files changed

+254
-390
lines changed

15 files changed

+254
-390
lines changed

‎frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -650,7 +650,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
650650
class="nhsuk-button"
651651
data-testid="move-to-production-cta"
652652
draggable="false"
653-
href="/message-plans/move-to-production/fbb81055-79b9-4759-ac07-d191ae57be34"
653+
href="/message-plans/get-ready-to-move/fbb81055-79b9-4759-ac07-d191ae57be34"
654654
role="button"
655655
>
656656
Move to production

frontend/src/__tests__/app/message-plans/move-to-production/__snapshots__/page.test.tsx.snap renamed to frontend/src/__tests__/app/message-plans/get-ready-to-move/__snapshots__/page.test.tsx.snap

Lines changed: 34 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,15 @@ exports[`matches snapshot 1`] = `
1313
<div
1414
class="nhsuk-grid-column-two-thirds"
1515
>
16+
<span
17+
class="nhsuk-caption-xl"
18+
>
19+
Step 1 of 2
20+
</span>
1621
<h1
1722
class="nhsuk-heading-xl"
1823
>
19-
Move message plan to production
24+
Get ready to move message plan to production
2025
</h1>
2126
<table
2227
class="nhsuk-u-margin-bottom-6 table"
@@ -37,21 +42,14 @@ exports[`matches snapshot 1`] = `
3742
>
3843
My Routing Config
3944
</td>
40-
<td
41-
class="nhsuk-table__cell"
42-
>
43-
<a
44-
data-testid="preview-link"
45-
href="/message-plans/preview-message-plan/routing-config-id"
46-
>
47-
Preview
48-
</a>
49-
</td>
5045
</tr>
5146
</tbody>
5247
</table>
5348
<p>
54-
Moving message plans from draft to production means that they are ready to send.
49+
Moving message plans from draft to production means they are ready to send.
50+
</p>
51+
<p>
52+
Any templates used in these message plans will be locked.
5553
</p>
5654
<p>
5755
Messages will only be sent to recipients when you make a request with
@@ -74,13 +72,10 @@ exports[`matches snapshot 1`] = `
7472
</p>
7573
<h2
7674
class="nhsuk-heading-m"
77-
id="before-you-move-message-plans-to-production"
75+
id="before-you-continue"
7876
>
79-
Before you move message plans to production
77+
Before you continue
8078
</h2>
81-
<p>
82-
Any templates used in these message plans will be locked.
83-
</p>
8479
<p>
8580
Make sure:
8681
</p>
@@ -114,50 +109,30 @@ exports[`matches snapshot 1`] = `
114109
If you need to edit your templates or message plans, you can copy and replace them.
115110
</p>
116111
</div>
117-
<form
118-
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
112+
<div
113+
class="nhsuk-form-group"
119114
>
120-
<input
121-
name="form-id"
122-
readonly=""
123-
type="hidden"
124-
value="move-message-plan-to-production"
125-
/>
126-
<input
127-
name="csrf_token"
128-
readonly=""
129-
type="hidden"
130-
value="no_token"
131-
/>
132-
<input
133-
name="routingConfigId"
134-
readonly=""
135-
type="hidden"
136-
value="routing-config-id"
137-
/>
138-
<div
139-
class="nhsuk-form-group"
115+
<a
116+
aria-disabled="false"
117+
class="nhsuk-button"
118+
data-testid="continue-link"
119+
draggable="false"
120+
href="/templates/message-plans/review-and-move-to-production/routing-config-id"
121+
role="button"
140122
>
141-
<button
142-
aria-disabled="false"
143-
class="nhsuk-button nhsuk-button--warning"
144-
data-testid="submit-button"
145-
type="submit"
146-
>
147-
Move to production
148-
</button>
149-
<a
150-
aria-disabled="false"
151-
class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-left-3"
152-
data-testid="cancel-link"
153-
draggable="false"
154-
href="/templates/message-plans"
155-
role="button"
156-
>
157-
Keep in draft
158-
</a>
159-
</div>
160-
</form>
123+
Continue
124+
</a>
125+
<a
126+
aria-disabled="false"
127+
class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-left-3"
128+
data-testid="cancel-link"
129+
draggable="false"
130+
href="/templates/message-plans"
131+
role="button"
132+
>
133+
Keep in draft
134+
</a>
135+
</div>
161136
</div>
162137
</div>
163138
</main>

frontend/src/__tests__/app/message-plans/move-to-production/page.test.tsx renamed to frontend/src/__tests__/app/message-plans/get-ready-to-move/page.test.tsx

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
import { render, screen } from '@testing-library/react';
2-
import userEvent from '@testing-library/user-event';
1+
import { render } from '@testing-library/react';
32
import { mock } from 'jest-mock-extended';
43
import { redirect, RedirectType } from 'next/navigation';
54
import { RoutingConfig } from 'nhs-notify-backend-client';
6-
import { verifyFormCsrfToken } from '@utils/csrf-utils';
7-
import { submitRoutingConfig } from '@utils/message-plans';
85
import { getRoutingConfig } from '@utils/message-plans';
96
import Page, {
107
metadata,
11-
} from '../../../../app/message-plans/move-to-production/[routingConfigId]/page';
8+
} from '../../../../app/message-plans/get-ready-to-move/[routingConfigId]/page';
129

1310
jest.mock('next/navigation');
14-
jest.mock('@utils/csrf-utils');
1511
jest.mock('@utils/message-plans');
16-
jest.mock('@utils/message-plans');
17-
jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
1812

1913
const routingConfig = mock<RoutingConfig>({
2014
name: 'My Routing Config',
@@ -26,7 +20,7 @@ beforeEach(() => {
2620

2721
test('metadata', () => {
2822
expect(metadata).toEqual({
29-
title: 'Move message plan to production - NHS Notify',
23+
title: 'Get ready to move message plan to production - NHS Notify',
3024
});
3125
});
3226

@@ -54,21 +48,3 @@ test('redirects if routing config is not found from path parameter', async () =>
5448
RedirectType.replace
5549
);
5650
});
57-
58-
test('submits the message plan and redirects when form is submitted', async () => {
59-
jest.mocked(getRoutingConfig).mockResolvedValueOnce(routingConfig);
60-
61-
const user = await userEvent.setup();
62-
63-
const page = await Page({
64-
params: Promise.resolve({ routingConfigId: 'routing-config-id' }),
65-
});
66-
67-
render(page);
68-
69-
await user.click(screen.getByTestId('submit-button'));
70-
71-
expect(redirect).toHaveBeenCalledWith('/message-plans', RedirectType.push);
72-
73-
expect(submitRoutingConfig).toHaveBeenCalledWith('routing-config-id');
74-
});

‎frontend/src/__tests__/components/organisms/__snapshots__/CreateEditMessagePlan.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -541,7 +541,7 @@ exports[`CreateEditMessagePlan should match snapshot for a typical message plan
541541
class="nhsuk-button"
542542
data-testid="move-to-production-cta"
543543
draggable="false"
544-
href="/message-plans/move-to-production/30fd1e1c-a608-47cf-9cc2-eabaeeeebeca"
544+
href="/message-plans/get-ready-to-move/30fd1e1c-a608-47cf-9cc2-eabaeeeebeca"
545545
role="button"
546546
>
547547
Move to production
@@ -1069,7 +1069,7 @@ exports[`CreateEditMessagePlan should match snapshot for a typical message plan
10691069
class="nhsuk-button"
10701070
data-testid="move-to-production-cta"
10711071
draggable="false"
1072-
href="/message-plans/move-to-production/30fd1e1c-a608-47cf-9cc2-eabaeeeebeca"
1072+
href="/message-plans/get-ready-to-move/30fd1e1c-a608-47cf-9cc2-eabaeeeebeca"
10731073
role="button"
10741074
>
10751075
Move to production

frontend/src/app/message-plans/move-to-production/[routingConfigId]/page.module.scss renamed to frontend/src/app/message-plans/get-ready-to-move/[routingConfigId]/page.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
background-color: var(--nhsuk-card-background-colour);
33
border: 1px solid var(--nhsuk-border-colour);
44

5+
tr {
6+
border-bottom: 1px solid var(--nhsuk-border-colour);
7+
}
8+
59
th {
610
width: 20%;
11+
color: var(--nhsuk-grey-1-colour);
712
}
813

914
th,

frontend/src/app/message-plans/move-to-production/[routingConfigId]/page.tsx renamed to frontend/src/app/message-plans/get-ready-to-move/[routingConfigId]/page.tsx

Lines changed: 19 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import classNames from 'classnames';
22
import type { Metadata } from 'next';
3-
import Link from 'next/link';
43
import { redirect, RedirectType } from 'next/navigation';
54
import type { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
65
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
76
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
87
import content from '@content/content';
98
import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
10-
import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
119
import { getRoutingConfig } from '@utils/message-plans';
1210
import styles from './page.module.scss';
13-
import { moveRoutingConfigToProduction } from './server-action';
1411

15-
const pageContent = content.pages.moveMessagePlanToProduction;
12+
const pageContent = content.pages.messagePlanGetReadyToMoveToProduction();
1613

1714
export const metadata: Metadata = {
1815
title: pageContent.title,
1916
};
2017

21-
export default async function MoveMessagePlanToProductionPage({
18+
export default async function MessagePlanGetReadyToMoveToProductionPage({
2219
params,
2320
}: MessagePlanPageProps) {
2421
const { routingConfigId } = await params;
@@ -33,6 +30,7 @@ export default async function MoveMessagePlanToProductionPage({
3330
<NHSNotifyMain>
3431
<div className='nhsuk-grid-row'>
3532
<div className='nhsuk-grid-column-two-thirds'>
33+
<span className='nhsuk-caption-xl'>{pageContent.stepCounter}</span>
3634
<h1 className='nhsuk-heading-xl'>{pageContent.heading}</h1>
3735
<table
3836
className={classNames('nhsuk-u-margin-bottom-6', styles.table)}
@@ -41,14 +39,6 @@ export default async function MoveMessagePlanToProductionPage({
4139
<tr className='nhsuk-table__row'>
4240
<th className='nhsuk-table__cell'>Name</th>
4341
<td className='nhsuk-table__cell'>{routingConfig.name}</td>
44-
<td className='nhsuk-table__cell'>
45-
<Link
46-
href={pageContent.previewLink.href(routingConfigId)}
47-
data-testid='preview-link'
48-
>
49-
{pageContent.previewLink.text}
50-
</Link>
51-
</td>
5242
</tr>
5343
</tbody>
5444
</table>
@@ -60,31 +50,23 @@ export default async function MoveMessagePlanToProductionPage({
6050
</h3>
6151
<ContentRenderer content={pageContent.callout.content} />
6252
</div>
63-
<NHSNotifyFormWrapper
64-
formId='move-message-plan-to-production'
65-
action={moveRoutingConfigToProduction}
66-
>
67-
<input
68-
type='hidden'
69-
name='routingConfigId'
70-
value={routingConfigId}
71-
readOnly
72-
/>
73-
<div className='nhsuk-form-group'>
74-
<NHSNotifyButton warning data-testid='submit-button'>
75-
{pageContent.submit.text}
76-
</NHSNotifyButton>
53+
<div className='nhsuk-form-group'>
54+
<NHSNotifyButton
55+
href={pageContent.continue.href(routingConfigId)}
56+
data-testid='continue-link'
57+
>
58+
{pageContent.continue.text}
59+
</NHSNotifyButton>
7760

78-
<NHSNotifyButton
79-
secondary
80-
href={pageContent.cancel.href}
81-
className='nhsuk-u-margin-left-3'
82-
data-testid='cancel-link'
83-
>
84-
{pageContent.cancel.text}
85-
</NHSNotifyButton>
86-
</div>
87-
</NHSNotifyFormWrapper>
61+
<NHSNotifyButton
62+
secondary
63+
href={pageContent.cancel.href}
64+
className='nhsuk-u-margin-left-3'
65+
data-testid='cancel-link'
66+
>
67+
{pageContent.cancel.text}
68+
</NHSNotifyButton>
69+
</div>
8870
</div>
8971
</div>
9072
</NHSNotifyMain>

‎frontend/src/app/message-plans/move-to-production/[routingConfigId]/server-action.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)