CCM-8588 Add tag colour mapping for new status

Author: nicki-nhs

frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.tsx

@@ -8,6 +8,7 @@ import {
   NHSAppTemplate,
   templateStatusToDisplayMappings,
   templateTypeDisplayMappings,
+  templateStatusToColourMappings,
 } from 'nhs-notify-web-template-management-utils';
 import styles from './PreviewTemplateDetails.module.scss';
 import { PreviewTemplateDetailsProps } from './preview-template-details.types';
@@ -53,9 +54,7 @@ export function PreviewTemplateDetails({
             <SummaryList.Key>{rowHeadings.templateStatus}</SummaryList.Key>
             <SummaryList.Value>
               <Tag
-                color={
-                  template.templateStatus === 'SUBMITTED' ? 'grey' : undefined
-                }
+                color={templateStatusToColourMappings(template.templateStatus)}
               >
                 {templateStatusToDisplayMappings(template.templateStatus)}
               </Tag>

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

@@ -1,14 +1,20 @@
-import { Language, LetterType } from 'nhs-notify-backend-client';
+import {
+  Language,
+  LetterType,
+  TemplateStatus,
+} from 'nhs-notify-backend-client';
 import {
   alphabeticalLanguageList,
   alphabeticalLetterTypeList,
   letterTypeDisplayMappings,
   previewTemplatePages,
+  templateStatusToColourMappings,
   templateStatusToDisplayMappings,
   templateTypeDisplayMappings,
   templateTypeToUrlTextMappings,
   viewSubmittedTemplatePages,
 } from '../enum';
+import { TEMPLATE_STATUS_LIST } from 'nhs-notify-backend-client';
 
 describe('templateTypeDisplayMappings', () => {
   test('NHS_APP', () => {
@@ -115,6 +121,24 @@ describe('templateStatusToDisplayMappings', () => {
   });
 });
 
+describe('templateStatusToColourMappings', () => {
+  it.each(TEMPLATE_STATUS_LIST)(
+    'should give the expected colour when templateType is %s',
+    (templateStatus) => {
+      const expectedColours: { [key in TemplateStatus]?: string } = {
+        SUBMITTED: 'grey',
+        PENDING_PROOF_REQUEST: 'blue',
+        VIRUS_SCAN_FAILED: 'red',
+        VALIDATION_FAILED: 'red',
+      };
+
+      expect(templateStatusToColourMappings(templateStatus)).toEqual(
+        expectedColours[templateStatus]
+      );
+    }
+  );
+});
+
 describe('templateTypeToUrlTextMappings', () => {
   test('NHS_APP', () => {
     expect(templateTypeToUrlTextMappings('NHS_APP')).toEqual('nhs-app');

utils/utils/src/enum.ts

@@ -84,6 +84,20 @@ export const templateStatusToDisplayMappings = (status: TemplateStatus) =>
     VALIDATION_FAILED: 'Validation Failed',
   })[status];
 
+export const templateStatusToColourMappings = (status: TemplateStatus) =>
+  (
+    ({
+      NOT_YET_SUBMITTED: undefined,
+      SUBMITTED: 'grey',
+      DELETED: undefined,
+      PENDING_UPLOAD: undefined,
+      PENDING_PROOF_REQUEST: 'blue',
+      PENDING_VALIDATION: undefined,
+      VIRUS_SCAN_FAILED: 'red',
+      VALIDATION_FAILED: 'red',
+    }) as const
+  )[status];
+
 export const templateTypeToUrlTextMappings = (type: TemplateType) =>
   ({
     NHS_APP: 'nhs-app',