From 893a65040f2fa8910d7ffa5556f22c6adddb3d25 Mon Sep 17 00:00:00 2001
From: kyampeire Hadijah <30952856+hadijahkyampeire@users.noreply.github.com>
Date: Mon, 8 Jul 2024 08:44:37 +0300
Subject: [PATCH] refactor tabs for hct, hp and covid (#1899)

---
 .../cacx-visits-services.component.tsx        |  4 +-
 .../encounter-list-tabs.component.tsx         | 13 ++++--
 .../case-assessment.component.tsx             |  6 ---
 .../src/covid/patient-chart/common.scss       | 11 -----
 .../covid-vaccinations.component.tsx          |  2 -
 .../patient-chart/lab-results.component.tsx   | 44 +++----------------
 .../general-conselling-config.json            |  3 ++
 .../general-counselling-summary.component.tsx | 37 +++-------------
 ...artner-notification-services.component.tsx | 37 +++-------------
 .../program-management-summary.component.tsx  | 35 +++------------
 .../visits/visits-summary.component.tsx       | 31 +------------
 .../hts-prevention-summary.component.tsx      | 33 +-------------
 12 files changed, 46 insertions(+), 210 deletions(-)
 delete mode 100644 packages/esm-covid-app/src/covid/patient-chart/common.scss

diff --git a/packages/esm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx b/packages/esm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx
index a86391ba1..2d2ed4800 100644
--- a/packages/esm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx
+++ b/packages/esm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
 import cacxConfigSchema from './cacx-config.json';
 
@@ -10,7 +10,7 @@ interface OverviewListProps {
 const CaCxCervicalCancerServices: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
 
-  return <TabsComponent patientUuid={patientUuid} configSchema={cacxConfigSchema} config={config} />;
+  return <EncounterListTabsComponent patientUuid={patientUuid} configSchema={cacxConfigSchema} config={config} />;
 };
 
 export default CaCxCervicalCancerServices;
diff --git a/packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx b/packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx
index e53722bed..46717f52b 100644
--- a/packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx
+++ b/packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx
@@ -3,13 +3,19 @@ import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import styles from './encounter-list-tabs.scss';
 
-interface TabsComponentProps {
+interface EncounterListTabsComponentProps {
   patientUuid: string;
   configSchema: any;
   config: any;
+  filter?: (encounter: any, formName?: string) => boolean;
 }
 
-export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, configSchema, config }) => {
+export const EncounterListTabsComponent: React.FC<EncounterListTabsComponentProps> = ({
+  patientUuid,
+  configSchema,
+  config,
+  filter,
+}) => {
   const tabsConfig = getMenuItemTabConfiguration(configSchema, config);
 
   return (
@@ -24,6 +30,7 @@ export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, confi
           {tabsConfig.map((tab) => (
             <TabPanel key={tab.name}>
               <EncounterList
+                filter={tab.hasFilter ? (encounter) => filter(encounter, tab.formList[0].name) : null}
                 patientUuid={patientUuid}
                 formList={tab.formList}
                 columns={tab.columns}
@@ -40,4 +47,4 @@ export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, confi
   );
 };
 
-export default TabsComponent;
+export default EncounterListTabsComponent;
diff --git a/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx
index 8bd9522ac..7d48c289b 100644
--- a/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx
+++ b/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx
@@ -3,12 +3,6 @@ import { useConfig } from '@openmrs/esm-framework';
 import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import caseAssessmentSchemaConfig from './case-assessment-schema-config.json';
 
-export const covidFormSlot = 'hts-encounter-form-slot';
-export const covidEncounterRepresentation =
-  'custom:(uuid,encounterDatetime,location:(uuid,name),' +
-  'encounterProviders:(uuid,provider:(uuid,name)),' +
-  'obs:(uuid,obsDatetime,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name))))';
-
 interface CovidAssessmentWidgetProps {
   patientUuid: string;
 }
diff --git a/packages/esm-covid-app/src/covid/patient-chart/common.scss b/packages/esm-covid-app/src/covid/patient-chart/common.scss
deleted file mode 100644
index ad20368d6..000000000
--- a/packages/esm-covid-app/src/covid/patient-chart/common.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use '@carbon/styles/scss/spacing';
-@import "../../root.scss";
-
-
-.tabContainer div[role='tabpanel'] {
-  padding: 0 !important;
-}
-
-.tabContainer li button {
-  width: 100% !important;
-}
diff --git a/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx
index cec3f02fd..2e0f1a9c2 100644
--- a/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx
+++ b/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx
@@ -7,8 +7,6 @@ interface CovidVaccinationsWidgetProps {
   patientUuid: string;
 }
 
-export const covidFormSlot = 'hts-encounter-form-slot';
-
 const CovidVaccinations: React.FC<CovidVaccinationsWidgetProps> = ({ patientUuid }) => {
   const config = useConfig();
   const tabs = getMenuItemTabConfiguration(covidVaccinationsSchemaConfig, config);
diff --git a/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx
index 34e151a6c..07752470d 100644
--- a/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx
+++ b/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx
@@ -1,17 +1,8 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { EncounterList, getObsFromEncounter, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { getObsFromEncounter, EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
 import covidLabTestSchemaConfig from './lab-results-schema-config.json';
 
-import styles from './common.scss';
-
-export const covidFormSlot = 'hts-encounter-form-slot';
-export const covidEncounterRepresentation =
-  'custom:(uuid,encounterDatetime,location:(uuid,name),' +
-  'encounterProviders:(uuid,provider:(uuid,name)),' +
-  'obs:(uuid,obsDatetime,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name))))';
-
 interface CovidLabWidgetProps {
   patientUuid: string;
 }
@@ -19,38 +10,17 @@ interface CovidLabWidgetProps {
 const CovidLabResults: React.FC<CovidLabWidgetProps> = ({ patientUuid }) => {
   const config = useConfig();
 
-  const tabs = getMenuItemTabConfiguration(covidLabTestSchemaConfig, config);
-
   let pendingLabOrdersFilter = (encounter) => {
     return getObsFromEncounter(encounter, config.obsConcepts.covidTestStatusConcept_UUID) === 'Pending';
   };
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                filter={tab.hasFilter ? (encounter) => pendingLabOrdersFilter(encounter) : null}
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={covidLabTestSchemaConfig}
+      config={config}
+      filter={pendingLabOrdersFilter}
+    />
   );
 };
 
diff --git a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json
index e46432ec3..75efba3fe 100644
--- a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json
+++ b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json
@@ -6,6 +6,7 @@
       "headerTitle": "Mental Health Assessment",
       "displayText": "Mental Health Assessment",
       "encounterType": "MentalHealthAssessmentEncounter_UUID",
+      "hasFilter": true,
       "columns": [
         {
           "id": "screeningDate",
@@ -68,6 +69,7 @@
       "headerTitle": "Intimate Partner Violence",
       "displayText": "Intimate Partner Violence",
       "encounterType": "IntimatePartnerEncounterType_UUID",
+      "hasFilter": true,
       "columns": [
         {
           "id": "screeningDate",
@@ -126,6 +128,7 @@
     {
       "tabName": "Disclosure",
       "headerTitle": "Disclosure",
+      "hasFilter": true,
       "displayText": "Disclosure",
       "encounterType": "PeadsDisclosureEncounterType_UUID",
       "columns": [
diff --git a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx
index efa67dbf3..73118061d 100644
--- a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx
+++ b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx
@@ -1,49 +1,26 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import generalConsellingConfigSchema from './general-conselling-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const GeneralCounsellingSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(generalConsellingConfigSchema, config);
 
   const tabFilter = (encounter, formName) => {
     return encounter?.form?.name === formName;
   };
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                filter={(encounter) => tabFilter(encounter, tab.formList[0].name)}
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={generalConsellingConfigSchema}
+      config={config}
+      filter={tabFilter}
+    />
   );
 };
 
diff --git a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/partner-notification-services/partner-notification-services.component.tsx b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/partner-notification-services/partner-notification-services.component.tsx
index 28cfa798d..ea3558307 100644
--- a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/partner-notification-services/partner-notification-services.component.tsx
+++ b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/partner-notification-services/partner-notification-services.component.tsx
@@ -1,49 +1,26 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import partnerNotificationsConfigSchema from './patner-notification-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const PartnerNotificationServices: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(partnerNotificationsConfigSchema, config);
 
   const tabFilter = (encounter, formName) => {
     return encounter?.form?.name === formName;
   };
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                filter={tab.hasFilter ? (encounter) => tabFilter(encounter, tab.formList[0].name) : null}
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={partnerNotificationsConfigSchema}
+      config={config}
+      filter={tabFilter}
+    />
   );
 };
 
diff --git a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx
index 874341615..23cdb7b28 100644
--- a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx
+++ b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx
@@ -1,44 +1,21 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import programManagementTabConfigSchema from './program-management-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const ProgramManagementSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(programManagementTabConfigSchema, config);
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={programManagementTabConfigSchema}
+      config={config}
+    />
   );
 };
 
diff --git a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx
index 7af156619..a26546b12 100644
--- a/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx
+++ b/packages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import clinicalVisitConfigSchema from './clinical-visit-config.json';
-
-import styles from '../../common.scss';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 
 interface OverviewListProps {
   patientUuid: string;
@@ -12,33 +9,9 @@ interface OverviewListProps {
 
 const VisitsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(clinicalVisitConfigSchema, config);
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent patientUuid={patientUuid} configSchema={clinicalVisitConfigSchema} config={config} />
   );
 };
 
diff --git a/packages/esm-hiv-prevention-app/src/hts/hiv-testing-services/hts-prevention-summary.component.tsx b/packages/esm-hiv-prevention-app/src/hts/hiv-testing-services/hts-prevention-summary.component.tsx
index dff33912d..1be7e198d 100644
--- a/packages/esm-hiv-prevention-app/src/hts/hiv-testing-services/hts-prevention-summary.component.tsx
+++ b/packages/esm-hiv-prevention-app/src/hts/hiv-testing-services/hts-prevention-summary.component.tsx
@@ -1,45 +1,16 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import htsTestingSchemaConfig from './hts-prevention-schema-config.json';
 
-import styles from '../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const HTSPreventionSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(htsTestingSchemaConfig, config);
 
-  return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
-  );
+  return <EncounterListTabsComponent patientUuid={patientUuid} configSchema={htsTestingSchemaConfig} config={config} />;
 };
 
 export default HTSPreventionSummary;