(feat) O3-4088: Sort diagnoses tags in visit summary by rank (#2064)

* feat: sort diagnoses by order

* feat: sort diagnoses by rank

* add suggestions

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

* add tests

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs, TabList, TabPanel, TabPanels, Tag } from '@carbon/react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs, Tag } from '@carbon/react';
 import {
   type AssignedExtension,
   Extension,
@@ -14,13 +14,13 @@ import {
   type Visit,
 } from '@openmrs/esm-framework';
 import {
-  type Order,
+  type Diagnosis,
   type Encounter,
+  mapEncounters,
   type Note,
   type Observation,
+  type Order,
   type OrderItem,
-  type Diagnosis,
-  mapEncounters,
 } from '../visit.resource';
 import VisitsTable from './visits-table/visits-table.component';
 import MedicationSummary from './medications-summary.component';
@@ -31,7 +31,8 @@ import styles from './visit-summary.scss';
 
 interface DiagnosisItem {
   diagnosis: string;
-  order: string;
+  rank: number;
+  type: string;
 }
 
 interface VisitSummaryProps {
@@ -70,14 +71,15 @@ const VisitSummary: React.FC<VisitSummaryProps> = ({ visit, patientUuid }) => {
         );
       }
 
-      //Check if there is a diagnosis associated with this encounter
+      // Check if there is a diagnosis associated with this encounter
       if (enc.hasOwnProperty('diagnoses')) {
         if (enc.diagnoses.length > 0) {
           enc.diagnoses.forEach((diagnosis: Diagnosis) => {
             // Putting all the diagnoses in a single array.
             diagnoses.push({
               diagnosis: diagnosis.display,
-              order: diagnosis.rank === 1 ? 'Primary' : 'Secondary',
+              type: diagnosis.rank === 1 ? 'red' : 'blue',
+              rank: diagnosis.rank,
             });
           });
         }
@@ -102,6 +104,9 @@ const VisitSummary: React.FC<VisitSummaryProps> = ({ visit, patientUuid }) => {
       }
     });
 
+    // Sort the diagnoses by rank, so that primary diagnoses come first
+    diagnoses.sort((a, b) => a.rank - b.rank);
+
     return [diagnoses, notes, medications];
   }, [config.notesConceptUuids, visit?.encounters]);
 
@@ -118,7 +123,7 @@ const VisitSummary: React.FC<VisitSummaryProps> = ({ visit, patientUuid }) => {
       <div className={styles.diagnosesList}>
         {diagnoses.length > 0 ? (
           diagnoses.map((diagnosis, i) => (
-            <Tag key={i} type={diagnosis.order === 'Primary' ? 'red' : 'blue'}>
+            <Tag key={`${diagnosis.diagnosis}-${i}`} type={diagnosis.type}>
               {diagnosis.diagnosis}
             </Tag>
           ))

packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.test.tsx

@@ -56,6 +56,24 @@ describe('VisitSummary', () => {
     expect(screen.getByText(/test-results-filtered-overview/)).toBeInTheDocument();
   });
 
+   it('renders diagnoses tags when there are diagnoses', () => {
+    const mockVisit = visitOverviewDetailMockDataNotEmpty.data.results[0];
+
+    render(<VisitSummary patientUuid={mockPatient.id} visit={mockVisit} />);
+
+    const malariaTag = screen.getByText(/^malaria, confirmed$/i);
+    const hivTag = screen.getByText(/human immunodeficiency virus \(hiv\)/i);
+
+    expect(screen.getByText(/^diagnoses$/i)).toBeInTheDocument();
+    expect(malariaTag).toBeInTheDocument();
+    expect(hivTag).toBeInTheDocument();
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(malariaTag.closest('div')).toHaveClass('cds--tag--red');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(hivTag.closest('div')).toHaveClass('cds--tag--blue');
+  });
+
   it('should display notes, tests and medication summary', async () => {
     const user = userEvent.setup();