Merge branch 'feature/CCM-11474_message-plan-name-screen' of https://github.com/NHSDigital/nhs-notify-web-template-management into feature/CCM-11492-create-edit-message-plans

Author: nicki-nhs

frontend/src/__tests__/components/forms/MessagePlan/__snapshots__/MessagePlan.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`renders error if form is submitted with empty name 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -163,6 +163,10 @@ exports[`renders error if form is submitted with empty name 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"
@@ -227,7 +231,7 @@ exports[`renders error if form is submitted with name too long 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -312,6 +316,10 @@ exports[`renders error if form is submitted with name too long 1`] = `
           value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"
@@ -376,7 +384,7 @@ exports[`renders error if form is submitted with no campaign id selected 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -449,6 +457,10 @@ exports[`renders error if form is submitted with no campaign id selected 1`] = `
           value="My template"
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <div
         class="nhsuk-form-group nhsuk-form-group--error"
       >
@@ -540,7 +552,7 @@ exports[`renders form with select for multiple campaign ids 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -613,6 +625,10 @@ exports[`renders form with select for multiple campaign ids 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <div
         class="nhsuk-form-group"
       >
@@ -693,7 +709,7 @@ exports[`renders form with single campaign id displayed 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -766,6 +782,10 @@ exports[`renders form with single campaign id displayed 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"

frontend/src/components/forms/MessagePlan/MessagePlan.tsx

@@ -34,7 +34,7 @@ export function MessagePlanForm({
 
   return (
     <NHSNotifyFormWrapper formId='message-plan' action={action}>
-      <div className='nhsuk-form-group'>
+      <div className='nhsuk-form-group nhsuk-u-margin-bottom-6'>
         <input
           type='hidden'
           name='messageOrder'
@@ -70,6 +70,8 @@ export function MessagePlanForm({
           error={state.errorState?.fieldErrors?.name?.join(',')}
           data-testid='name-field'
         />
+      </div>
+      <div className='nhsuk-form-group nhsuk-u-margin-bottom-6'>
         {campaignIds.length === 1 ? (
           <>
             <Label htmlFor='campaignId' size='s'>

frontend/src/components/molecules/MessagePlansList/MessagePlansList.tsx

@@ -22,7 +22,7 @@ type MessagePlansListProps = {
 };
 
 const {
-  components: { messagePlanComponent },
+  components: { messagePlansListComponent },
 } = content;
 
 export const MessagePlansList = (props: MessagePlansListProps) => {
@@ -32,7 +32,7 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
 
   const header = (
     <Table.Row>
-      {messagePlanComponent.tableHeadings.map((item) => (
+      {messagePlansListComponent.tableHeadings.map((item) => (
         <Table.Cell key={item}>{item}</Table.Cell>
       ))}
     </Table.Row>
@@ -41,7 +41,7 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
   const rows = props.plans.map((plan) => (
     <Table.Row key={plan.id}>
       <Table.Cell>
-        <Link href={messagePlanComponent.previewLink(plan.id)}>
+        <Link href={messagePlansListComponent.previewLink(plan.id)}>
           {plan.name}
         </Link>
       </Table.Cell>
@@ -69,7 +69,7 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
           </Table>
         ) : (
           <MarkdownContent
-            content={messagePlanComponent.noMessagePlansMessage}
+            content={messagePlansListComponent.noMessagePlansMessage}
             variables={{ status: statusDisplayLower }}
           />
         )}

frontend/src/content/content.ts

@@ -1172,7 +1172,7 @@ const messagePlansPage = {
   },
 };
 
-const messagePlanComponent = {
+const messagePlansListComponent = {
   tableHeadings: ['Name', 'Routing Plan ID', 'Last edited'],
   noMessagePlansMessage: 'You do not have any message plans in {{status}} yet.',
   previewLink: (id: string) => `/message-plan/${id}`,
@@ -1243,9 +1243,9 @@ const content = {
     messageFormatting,
     messagePlanBlock,
     messagePlanChannelTemplate,
-    messagePlanComponent,
     messagePlanFallbackConditions,
     messagePlanForm,
+    messagePlansListComponent,
     nameYourTemplate,
     personalisation,
     previewDigitalTemplate,

lambdas/backend-client/src/routing-config-api-client.ts

@@ -3,8 +3,8 @@ import type {
   GetV1RoutingConfigurationsCountData,
   GetV1RoutingConfigurationsData,
   RoutingConfig,
-  RoutingConfigStatusActive,
   RoutingConfigSuccess,
+  RoutingConfigStatusActive,
   RoutingConfigSuccessList,
 } from './types/generated';
 import { ErrorCase } from './types/error-cases';

tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts

@@ -33,10 +33,10 @@ import { TemplateMgmtTemplateSubmittedLetterPage } from '../pages/letter/templat
 import { TemplateMgmtTemplateSubmittedNhsAppPage } from '../pages/nhs-app/template-mgmt-template-submitted-nhs-app-page';
 import { TemplateMgmtTemplateSubmittedSmsPage } from '../pages/sms/template-mgmt-template-submitted-sms-page';
 import { TemplateMgmtUploadLetterMissingCampaignClientIdPage } from '../pages/letter/template-mgmt-upload-letter-missing-campaign-client-id-page';
+import { RoutingChooseMessageOrderPage } from '../pages/routing/choose-message-order-page';
 import { RoutingCreateMessagePlanPage } from '../pages/routing/create-message-plan-page';
 import { RoutingMessagePlanCampaignIdRequiredPage } from '../pages/routing/campaign-id-required-page';
-import { RoutingChooseMessageOrderPage } from '../pages/routing/choose-message-order-page';
-import { RoutingMessagePlansPage } from 'pages/routing-message-plans-page';
+import { RoutingMessagePlansPage } from '../pages/routing-message-plans-page';
 
 // Reset storage state for this file to avoid being authenticated
 test.use({ storageState: { cookies: [], origins: [] } });