OHRI-1350 Move custom side nav links to utilize openmrs homepage (#1751)

packages/esm-commons-lib/src/components/ohri-home/welcome-section/ohri-welcome-section.scss

@@ -1,6 +1,7 @@
 .welcomeContainer {
   display: flex;
   flex-direction: column;
+  margin: 1rem;
 }
 
 .location {

packages/esm-commons-lib/src/components/tile/ohri-programme-summary-tiles.scss

@@ -1,6 +1,7 @@
 .desktopView {
   display: flex;
   gap: 8px;
+  margin: 1rem;
 }
 
 .tileView {

packages/esm-commons-lib/src/index.ts

@@ -29,6 +29,8 @@ export * from './components/tile/ohri-summary-tile-tablet.component';
 export * from './components/tile/ohri-summary-tile.component';
 export * from './utils/compare';
 export * from './utils/createOHRIDashboardLink';
+export * from './utils/createNewOHRIDashboardLink';
+export * from './utils/createOHRIGroupedLink';
 export * from './utils/events';
 export * from './utils/get-dosage';
 export * from './utils/helpers';

packages/esm-commons-lib/src/root.scss

@@ -97,3 +97,20 @@ div[class*='-esm-login__styles__center'] > img {
 :global(.cds--overflow-menu) > div {
   width: 15rem !important;
 }
+
+:global(.cds--tab-content) {
+  background-color: #F4F4F4;
+}
+
+:global(.cds--side-nav--expanded .cds--side-nav__items) {
+  padding: 0.125rem !important;
+}
+
+:global(.cds--side-nav__submenu) {
+  height: 1.5rem;
+
+  &:focus,
+  &:hover {
+    background-color: #e0e0e0;
+  }
+} 

packages/esm-commons-lib/src/utils/createNewOHRIDashboardLink.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink, navigate } from '@openmrs/esm-framework';
+import { SideNavLink, SideNavMenu, SideNavMenuItem, Button } from '@carbon/react';
+import styles from './sidenav-links.scss';
+
+interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  icon: React.ComponentType<any>;
+}
+
+function NewDashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  const { name, title, icon } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <SideNavLink
+      renderIcon={icon}
+      href={`${spaBasePath}/${name}`}
+      onClick={(e) => {
+        e.preventDefault();
+        navigate({ to: `${spaBasePath}/${name}` });
+      }}
+      className={navLink.match(name) ? styles.currentNavItem : ''}>
+      {title}
+    </SideNavLink>
+  );
+}
+
+export const createNewOHRIDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <NewDashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

packages/esm-commons-lib/src/utils/createOHRIGroupedLink.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { SideNavMenu, SideNavItems } from '@carbon/react';
+
+interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  isFolder: boolean;
+  folderTitle: string;
+  folderIcon: React.ComponentType<any>;
+  childLinks?: Array<any>;
+  isHidden?: boolean;
+}
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  const { t } = useTranslation();
+  const { name, title, isFolder, folderTitle, folderIcon, childLinks, isHidden } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  if (isHidden) {
+    return;
+  }
+
+  if (isFolder) {
+    return (
+      <SideNavItems>
+        <SideNavMenu title={folderTitle} renderIcon={folderIcon}>
+          <ConfigurableLink
+            className={classNames('cds--side-nav__link', {
+              'active-left-nav-link': navLink.match(name),
+            })}
+            to={`${spaBasePath}/${name}`}>
+            {t(title)}
+          </ConfigurableLink>
+          {Array.isArray(childLinks) &&
+            childLinks.map((childLink, childIndex) => (
+              <ConfigurableLink
+                key={childIndex}
+                className={classNames('cds--side-nav__link', {
+                  'active-left-nav-link': navLink.match(childLink.name),
+                })}
+                to={`${spaBasePath}/${childLink.name}`}>
+                {t(childLink.title)}
+              </ConfigurableLink>
+            ))}
+        </SideNavMenu>
+      </SideNavItems>
+    );
+  } else {
+    return (
+      <SideNavItems>
+        <ConfigurableLink
+          className={classNames('cds--side-nav__link', {
+            'active-left-nav-link': navLink.match(name),
+          })}
+          to={`${spaBasePath}/${name}`}>
+          {t(title)}
+        </ConfigurableLink>
+      </SideNavItems>
+    );
+  }
+}
+
+export const createOHRIGroupedLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

packages/esm-commons-lib/src/utils/sidenav-links.scss

@@ -8,4 +8,4 @@
   background-color: #e0e0e0 !important;
   color: #161616 !important;
   border-left-color: var(--brand-01) !important;
-}
+}

packages/esm-covid-app/src/dashboard.meta.tsx

@@ -42,7 +42,8 @@ export const covidClinicalViewDashboardMeta = {
 export const covid19CasesDashboardMeta = {
   name: 'covid-cases',
   slot: 'covid-cases-dashboard-slot',
-  config: { columns: 1, type: 'grid', programme: 'covid', dashboardTitle: 'COVID-19 Cases', icon: Coronavirus },
   title: 'COVID-19 Cases',
-  dashboardIcon: Coronavirus,
-};
+  isFolder: true,
+  folderTitle: 'COVID',
+  folderIcon: Coronavirus
+};

packages/esm-covid-app/src/home.component.tsx

@@ -0,0 +1,16 @@
+import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import React from 'react';
+import CovidHomePatientTabs from './views/dashboard/patient-list-tabs/covid-patient-list-tabs.component';
+import CovidSummaryTiles from './views/dashboard/summary-tiles/covid-summary-tiles.component';
+
+const Homecomponent = () => {
+  return (
+    <div>
+      <OHRIWelcomeSection title="COVID-19 Cases" />
+      <CovidSummaryTiles />
+      <CovidHomePatientTabs />
+    </div>
+  );
+};
+
+export default Homecomponent;

packages/esm-covid-app/src/index.ts

@@ -12,9 +12,10 @@ import {
   covid19CasesDashboardMeta,
   covidPatientChartMeta,
 } from './dashboard.meta';
-import { createOHRIDashboardLink, OHRIHome, OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { createOHRIDashboardLink, createOHRIGroupedLink, OHRIHome, OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { configSchema } from './config-schema';
+import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -80,8 +81,5 @@ export const covidClinicalViewDashboardLink = getSyncLifecycle(
   createOHRIDashboardLink(covidClinicalViewDashboardMeta),
   options,
 );
-export const covidCasesDashboardLink = getSyncLifecycle(createOHRIDashboardLink(covid19CasesDashboardMeta), options);
-export const covidCasesDashboard = getSyncLifecycle(OHRIHome, {
-  featureName: 'covid cases dashboard',
-  moduleName,
-});
+export const covidCasesDashboardLink = getSyncLifecycle(createOHRIGroupedLink(covid19CasesDashboardMeta), options);
+export const covidCasesDashboard = getSyncLifecycle(rootComponent, options);

packages/esm-covid-app/src/root.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './home.component';
+
+const swrConfiguration = {
+  // Maximum number of retries when the backend returns an error
+  errorRetryCount: 3,
+};
+
+const Root: React.FC = () => {
+  const covidBasename = window.getOpenmrsSpaBase() + 'home/covid-cases';
+
+  return (
+    <main>
+      <SWRConfig value={swrConfiguration}>
+        <BrowserRouter basename={covidBasename}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </BrowserRouter>
+      </SWRConfig>
+    </main>
+  );
+};
+
+export default Root;

packages/esm-covid-app/src/routes.json

@@ -16,38 +16,6 @@
         "title": "COVID"
       }
     },
-    {
-      "name": "covid-cases-dashboard-ext",
-      "slot": "ohri-covid-dashboard-slot",
-      "component": "covidCasesDashboardLink",
-      "meta": {
-        "name": "covid-cases",
-        "slot": "covid-cases-dashboard-slot",
-        "config": {
-          "columns": 1,
-          "type": "grid",
-          "programme": "covid",
-          "dashboardTitle": "COVID-19 Cases"
-        },
-        "path": "COVID-19",
-        "title": "COVID-19 Cases"
-      }
-    },
-    {
-      "name": "covid-cases-dashboard",
-      "slot": "covid-cases-dashboard-slot",
-      "component": "covidCasesDashboard",
-      "meta": {
-        "name": "covid-cases",
-        "slot": "covid-cases-dashboard-slot",
-        "config": {
-          "columns": 1,
-          "programme": "covid",
-          "dashboardTitle": "COVID-19 Home Page"
-        },
-        "title": "COVID-19 Cases"
-      }
-    },
     {
       "name": "covid-home-header-ext",
       "slot": "covid-home-header-slot",
@@ -115,6 +83,22 @@
       "name": "covid-vaccinations-ext",
       "slot": "covid-vaccinations-dashboard-slot",
       "component": "covidVaccinationsDashboard"
+    },
+    {
+      "name": "covid-cases-dashboard-ext",
+      "slot": "homepage-dashboard-slot",
+      "component": "covidCasesDashboardLink",
+      "meta": {
+        "name": "covid-cases",
+        "slot": "covid-cases-dashboard-slot",
+        "title": "TB Treatment"
+      },
+      "order": 5
+    },
+    {
+      "name": "covid-cases-dashboard",
+      "slot": "covid-cases-dashboard-slot",
+      "component": "covidCasesDashboard"
     }
   ]
 }

packages/esm-covid-app/src/views/dashboard/summary-tiles/covid-summary-tiles.component.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Outcomes } from './outcome-list-tile.component';
 import { useConfig } from '@openmrs/esm-framework';
 
-function CovidSummaryTiles({ launchWorkSpace }) {
+function CovidSummaryTiles() {
   const { t } = useTranslation();
   const config = useConfig();
   const [activeClientsCount, setActiveClientsCount] = useState(100);

packages/esm-hiv-app/src/dashboard.meta.tsx

@@ -80,16 +80,20 @@ export const appointmentsDashboardMeta = {
 // Clinical Dashboards
 export const hivCareAndTreatmentFolderDashboardMeta = {
   slot: 'ohri-hiv-care-and-treatment-dashboard-slot',
-  config: { columns: 1, type: 'grid', icon: Home },
   isFolder: true,
   title: 'HIV Care and Treatment',
+  name: 'care-and-treatment',
+  folderTitle: 'Care and Treatment',
+  folderIcon : Home
 };
 
 export const hivPreventionFolderDashboardMeta = {
   slot: 'ohri-hiv-prevention-dashboard-slot',
-  config: { columns: 1, type: 'grid', icon: Pills },
   isFolder: true,
-  title: 'HIV Prevention',
+  title: 'HIV Testing Services',
+  name: 'hts',
+  folderTitle: 'HIV Prevention',
+  folderIcon : Pills
 };
 
 export const htsDashboardMeta = {

packages/esm-hiv-app/src/hiv-treatment-home.component.tsx

@@ -0,0 +1,16 @@
+import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import React from 'react';
+import CTSummaryTiles from './views/hts/care-and-treatment/summary-tiles/ct-summary-tiles.component';
+import CTHomePatientTabs from './views/hts/patient-list-tabs/ct-patient-list-tabs.component';
+
+const Homecomponent = () => {
+  return (
+    <div>
+      <OHRIWelcomeSection title="Care and Treatment" />
+      <CTSummaryTiles />
+      <CTHomePatientTabs />
+    </div>
+  );
+};
+
+export default Homecomponent;

packages/esm-hiv-app/src/hiv-treatment-root.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './hiv-treatment-home.component';
+
+const swrConfiguration = {
+  // Maximum number of retries when the backend returns an error
+  errorRetryCount: 3,
+};
+
+const Root: React.FC = () => {
+  const hivTreatmentBasename = window.getOpenmrsSpaBase() + 'home/care-and-treatment';
+
+  return (
+    <main>
+      <SWRConfig value={swrConfiguration}>
+        <BrowserRouter basename={hivTreatmentBasename}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </BrowserRouter>
+      </SWRConfig>
+    </main>
+  );
+};
+
+export default Root;