add display mapping

Author: alexnuttall

frontend/src/__tests__/components/molecules/MessagePlans.test.tsx

@@ -74,7 +74,7 @@ describe('MessagePlans', () => {
       {
         count: draft.count,
         plans: draft.plans,
-        statusGroup: 'Draft',
+        status: 'DRAFT',
       },
       undefined
     );
@@ -84,7 +84,7 @@ describe('MessagePlans', () => {
       {
         count: production.count,
         plans: production.plans,
-        statusGroup: 'Production',
+        status: 'COMPLETED',
       },
       undefined
     );

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

@@ -16,7 +16,7 @@ describe('MessagePlansList', () => {
 
     const container = render(
       <MessagePlansList
-        statusGroup='Draft'
+        status='DRAFT'
         count={draft.count}
         plans={draft.plans}
       />
@@ -27,7 +27,7 @@ describe('MessagePlansList', () => {
 
   it('matches snapshot when no data is available', async () => {
     const container = render(
-      <MessagePlansList statusGroup='Draft' count={0} plans={[]} />
+      <MessagePlansList status='DRAFT' count={0} plans={[]} />
     );
 
     expect(container.asFragment()).toMatchSnapshot();
@@ -47,7 +47,7 @@ describe('MessagePlansList', () => {
 
     render(
       <MessagePlansList
-        statusGroup='Draft'
+        status='DRAFT'
         count={draft.count}
         plans={draft.plans}
       />

frontend/src/components/molecules/MessagePlans/MessagePlans.tsx

@@ -59,12 +59,12 @@ export const MessagePlans = (props: MessagePlansProps) => {
             <Button id='create-message-plan-button'>{button.text}</Button>
           </Link>
           <MessagePlansList
-            statusGroup='Draft'
+            status='DRAFT'
             plans={props.draft.plans}
             count={props.draft.count}
           />
           <MessagePlansList
-            statusGroup='Production'
+            status='COMPLETED'
             plans={props.production.plans}
             count={props.production.count}
           />

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

@@ -6,6 +6,8 @@ import { Details, Table } from 'nhsuk-react-components';
 import { format } from 'date-fns/format';
 import Link from 'next/link';
 import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent';
+import { RoutingConfigStatus } from 'nhs-notify-backend-client';
+import { messagePlanStatusToDisplayText } from 'nhs-notify-web-template-management-utils';
 
 export type MessagePlanListItem = {
   name: string;
@@ -14,7 +16,7 @@ export type MessagePlanListItem = {
 };
 
 type MessagePlansListProps = {
-  statusGroup: 'Draft' | 'Production';
+  status: Exclude<RoutingConfigStatus, 'DELETED'>;
   count: number;
   plans: MessagePlanListItem[];
 };
@@ -24,7 +26,9 @@ const {
 } = content;
 
 export const MessagePlansList = (props: MessagePlansListProps) => {
-  const { statusGroup, count } = props;
+  const { status, count } = props;
+  const statusDisplayMapping = messagePlanStatusToDisplayText(status);
+  const statusDisplayLower = statusDisplayMapping.toLowerCase();
 
   const header = (
     <Table.Row>
@@ -55,11 +59,11 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
   ));
 
   return (
-    <Details expander id={`message-plans-list-${statusGroup.toLowerCase()}`}>
+    <Details expander id={`message-plans-list-${statusDisplayLower}`}>
       <Details.Summary
         className={classNames('nhsuk-heading-s', 'nhsuk-u-margin-bottom-0')}
       >
-        {statusGroup} ({count})
+        {statusDisplayMapping} ({count})
       </Details.Summary>
       <Details.Text>
         {rows.length > 0 ? (
@@ -70,7 +74,7 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
         ) : (
           <MarkdownContent
             content={messagePlanComponent.noMessagePlansMessage}
-            variables={{ status: statusGroup.toLowerCase() }}
+            variables={{ status: statusDisplayLower }}
           />
         )}
       </Details.Text>

utils/utils/src/__tests__/enum.test.ts

@@ -8,18 +8,19 @@ import {
 import {
   alphabeticalLanguageList,
   alphabeticalLetterTypeList,
+  isRightToLeft,
+  languageMapping,
   letterTypeDisplayMappings,
-  previewTemplatePages,
-  templateTypeDisplayMappings,
-  templateTypeToUrlTextMappings,
+  messagePlanStatusToDisplayText,
   previewSubmittedTemplatePages,
+  previewTemplatePages,
+  statusToColourMapping,
+  statusToDisplayMapping,
+  templateCreationPages,
   templateDisplayCopyAction,
   templateDisplayDeleteAction,
-  isRightToLeft,
-  languageMapping,
-  templateCreationPages,
-  statusToDisplayMapping,
-  statusToColourMapping,
+  templateTypeDisplayMappings,
+  templateTypeToUrlTextMappings,
 } from '../enum';
 import { TEMPLATE_STATUS_LIST } from 'nhs-notify-backend-client';
 
@@ -335,3 +336,13 @@ describe('Right-to-left language indicator', () => {
     expect(result).toEqual(expectedRtlLanguages);
   });
 });
+
+describe('messagePlanStatusToDisplayText', () => {
+  test.each([
+    ['DRAFT', 'Draft'],
+    ['COMPLETED', 'Production'],
+    ['DELETED', ''],
+  ] as const)('should map %s to "%s"', (status, expected) => {
+    expect(messagePlanStatusToDisplayText(status)).toBe(expected);
+  });
+});

utils/utils/src/enum.ts

@@ -1,9 +1,10 @@
-import {
+import type {
   TemplateType,
   TemplateStatus,
   LetterType,
   Language,
   TemplateDto,
+  RoutingConfigStatus,
 } from 'nhs-notify-backend-client';
 
 /**
@@ -258,3 +259,14 @@ export const templateDisplayDeleteAction = ({
 export function isRightToLeft(language: Language): boolean {
   return languageMap[language].rtl;
 }
+
+const messagePlanStatusToDisplayMappings: Record<RoutingConfigStatus, string> =
+  {
+    DRAFT: 'Draft',
+    COMPLETED: 'Production',
+    DELETED: '',
+  } as const;
+
+export const messagePlanStatusToDisplayText = (
+  status: RoutingConfigStatus
+): string => messagePlanStatusToDisplayMappings[status];