(fix) O3-4116 use correct colours for service queue priority

openmrs · Nov 15, 2024 · 8b7cfcd · 8b7cfcd
1 parent 565a949
commit 8b7cfcd
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/__mocks__/queue-entry.mock.ts b/__mocks__/queue-entry.mock.ts
@@ -125,7 +125,7 @@ export const mockQueueEntryAlice: QueueEntry = {
   endedAt: null,
   locationWaitingFor: null,
   patient: mockPatientAlice,
-  priority: mockPriorityNonUrgent,
+  priority: mockPriorityUrgent,
   priorityComment: null,
   providerWaitingFor: null,
   queue: mockQueueSurgery,

diff --git a/packages/esm-service-queues-app/src/config-schema.ts b/packages/esm-service-queues-app/src/config-schema.ts
@@ -23,7 +23,7 @@ type ColumnType = (typeof columnTypes)[number];
 const statusIcons = ['Group', 'InProgress'] as const;
 type StatusIcon = (typeof statusIcons)[number];
 
-// Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview
+// Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview plus orange for priority tags
 const carbonTagColors = [
   'red',
   'magenta',
@@ -32,6 +32,7 @@ const carbonTagColors = [
   'teal',
   'cyan',
   'gray',
+  'orange',
   'green',
   'warm-gray',
   'cool-gray',
@@ -46,10 +47,29 @@ type TagStyle = (typeof tagStyles)[number];
 // equal to columnTypes but without extension
 export const builtInColumns = columnTypes.filter((columnType) => columnType !== 'extension');
 const defaultIdentifierTypeUuid = '05a29f94-c0ed-11e2-94be-8c13b969e334'; // OpenMRS ID
+const defaultPriorityUuid = 'f4620bfa-3625-4883-bd3f-84c2cce14470';
+const defaultEmergencyPriorityUuid = '04f6f7e0-e3cb-4e13-a133-4479f759574e';
+const defaultUrgentPriorityUuid = 'dc3492ef-24a5-4fd9-b58d-4fd2acf7071f';
 
 export const defaultColumnConfig: ColumnConfig = {
   identifierTypeUuid: defaultIdentifierTypeUuid,
-  priorityConfigs: [],
+  priorityConfigs: [
+    {
+      conceptUuid: defaultEmergencyPriorityUuid,
+      style: null,
+      color: 'red',
+    },
+    {
+      conceptUuid: defaultPriorityUuid,
+      style: null,
+      color: 'green',
+    },
+    {
+      conceptUuid: defaultUrgentPriorityUuid,
+      style: null,
+      color: 'orange',
+    },
+  ],
   statusConfigs: [],
   visitQueueNumberAttributeUuid: null,
 };
@@ -70,7 +90,7 @@ export const configSchema = {
     defaultPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the default priority for the queues eg Not urgent.',
-      _default: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+      _default: defaultPriorityUuid,
     },
     defaultStatusConceptUuid: {
       _type: Type.ConceptUuid,
@@ -93,7 +113,7 @@ export const configSchema = {
     emergencyPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
-      _default: '04f6f7e0-e3cb-4e13-a133-4479f759574e',
+      _default: defaultEmergencyPriorityUuid,
     },
     heightUuid: {
       _type: Type.ConceptUuid,

diff --git a/...ages/esm-service-queues-app/src/queue-entry-table-components/queue-priority.component.tsx b/...ages/esm-service-queues-app/src/queue-entry-table-components/queue-priority.component.tsx
@@ -19,15 +19,23 @@ const QueuePriority: React.FC<QueuePriorityProps> = ({ priority, priorityComment
         <DefinitionTooltip className={styles.tooltip} align="bottom-left" definition={priorityComment}>
           <Tag
             role="tooltip"
-            className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
-            type={priorityConfig?.color}>
+            className={classNames(
+              styles.tag,
+              priorityConfig?.style === 'bold' && styles.bold,
+              priorityConfig?.color === 'orange' && styles.orange,
+            )}
+            type={priorityConfig?.color !== 'orange' ? priorityConfig?.color : null}>
             {priority.display}
           </Tag>
         </DefinitionTooltip>
       ) : (
         <Tag
-          className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
-          type={priorityConfig?.color}>
+          className={classNames(
+            styles.tag,
+            priorityConfig?.style === 'bold' && styles.bold,
+            priorityConfig?.color === 'orange' && styles.orange,
+          )}
+          type={priorityConfig?.color !== 'orange' ? priorityConfig?.color : null}>
           {priority.display}
         </Tag>
       )}

diff --git a/packages/esm-service-queues-app/src/queue-entry-table-components/queue-priority.scss b/packages/esm-service-queues-app/src/queue-entry-table-components/queue-priority.scss
@@ -9,3 +9,7 @@
 .bold {
   font-weight: bold;
 }
+
+.orange {
+  background-color: #ffc9a3;
+}
diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table.test.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
 import { screen, within } from '@testing-library/react';
 import { type ConfigObject, configSchema } from '../config-schema';
-import { mockPriorityNonUrgent, mockQueueEntries, mockSession } from '__mocks__';
+import { mockPriorityNonUrgent, mockPriorityUrgent, mockQueueEntries, mockSession } from '__mocks__';
 import { renderWithSwr } from 'tools';
 import QueueTable from './queue-table.component';
 
@@ -176,6 +176,11 @@ describe('QueueTable', () => {
                   color: 'blue',
                   style: 'bold',
                 },
+                {
+                  conceptUuid: mockPriorityUrgent.uuid,
+                  color: 'orange',
+                  style: null,
+                },
               ],
               statusConfigs: [],
               visitQueueNumberAttributeUuid: 'queue-number-visit-attr-uuid',
@@ -200,6 +205,10 @@ describe('QueueTable', () => {
     const firstRow = rows[1];
     const cells = within(firstRow).getAllByRole('cell');
     expect(cells[1].childNodes[0]).toHaveClass('bold');
+
+    const secondRow = rows[2];
+    const secondCells = within(secondRow).getAllByRole('cell');
+    expect(secondCells[1].childNodes[0]).toHaveClass('orange');
   });
 
   it('uses the visitQueueNumberAttributeUuid defined at the top level', () => {