(fix) Dispensing ESM should not render conditions and diagnoses tab if no extensions are available for slot (#766)

Author: mseaton

src/prescriptions/prescription-expanded.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExtensionSlot, type PatientUuid } from '@openmrs/esm-framework';
+import { getAssignedExtensions, ExtensionSlot, type PatientUuid } from '@openmrs/esm-framework';
 import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import HistoryAndComments from '../history/history-and-comments.component';
@@ -16,16 +16,19 @@ const PrescriptionExpanded: React.FC<{
   patientUuid: PatientUuid;
 }> = ({ encounterUuid, patientUuid }) => {
   const { t } = useTranslation();
+  const conditionsAndDiagnosisExtensions = getAssignedExtensions('dispensing-condition-and-diagnoses');
 
   const tabs: TabItem[] = [
     {
       name: t('prescriptionDetails', 'Prescription details'),
       component: <PrescriptionDetails encounterUuid={encounterUuid} patientUuid={patientUuid} />,
     },
-    {
-      name: t('conditionsAndDiagnoses', 'Conditions and diagnoses'),
-      component: <ExtensionSlot name="dispensing-condition-and-diagnoses" state={{ patientUuid, encounterUuid }} />,
-    },
+    conditionsAndDiagnosisExtensions && conditionsAndDiagnosisExtensions.length > 0
+      ? {
+          name: t('conditionsAndDiagnoses', 'Conditions and diagnoses'),
+          component: <ExtensionSlot name="dispensing-condition-and-diagnoses" state={{ patientUuid, encounterUuid }} />,
+        }
+      : null,
     {
       name: t('historyComments', 'History and comments'),
       component: <HistoryAndComments encounterUuid={encounterUuid} patientUuid={patientUuid} />,
@@ -37,12 +40,12 @@ const PrescriptionExpanded: React.FC<{
       <div className={styles.verticalTabs}>
         <Tabs>
           <TabList aria-label={t('tabList', 'Tab List')}>
-            {tabs.map((tab: TabItem, index: number) => (
+            {tabs.filter(Boolean).map((tab: TabItem, index: number) => (
               <Tab key={index}>{tab.name}</Tab>
             ))}
           </TabList>
           <TabPanels>
-            {tabs.map((tab: TabItem, index) => (
+            {tabs.filter(Boolean).map((tab: TabItem, index) => (
               <TabPanel key={index}>{tab.component}</TabPanel>
             ))}
           </TabPanels>

yarn.lock

@@ -8150,9 +8150,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001716":
-  version: 1.0.30001718
-  resolution: "caniuse-lite@npm:1.0.30001718"
-  checksum: 10/e172a4c156f743cc947e659f353ad9edb045725cc109a02cc792dcbf98569356ebfa4bb4356e3febf87427aab0951c34c1ee5630629334f25ae6f76de7d86fd0
+  version: 1.0.30001774
+  resolution: "caniuse-lite@npm:1.0.30001774"
+  checksum: 10/63c87aeac08548847ecd12746144029761707d9eae57750f673543a2b2a6126bca98584dd551818e8dc2a480d11489bebe0027af26de4ee46466e7b216109862
   languageName: node
   linkType: hard