add a reports navigation hidden behind a config

package.json

@@ -14,6 +14,7 @@
   },
   "scripts": {
     "start": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-*-app/'",
+    "start:commonslib": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-commons-lib/'",
     "start:core": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-ohri-core-app",
     "start:covid": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-covid-app",
     "start:hct": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-hiv-care-treatment-app",

packages/esm-commons-lib/src/components/extension-conditional-renderer/side-nav-renderer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+
+export function ConditionalNavLinkRenderer({ children, conditionalConfigKey }) {
+  const config = useConfig();
+
+  if (conditionalConfigKey) {
+    return <>{config[conditionalConfigKey] ? children : null}</>;
+  }
+  return <>{children}</>;
+}
+
+export default ConditionalNavLinkRenderer;

packages/esm-commons-lib/src/components/reports/reports-home.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { Reports } from './reports';
+
+const ReportsHomecomponent = () => {
+  return (
+    <div>
+      <OHRIWelcomeSection title="Reports" />
+      <Reports />
+    </div>
+  );
+};
+
+export default ReportsHomecomponent;

packages/esm-commons-lib/src/components/reports/reports-root.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ReportsHome from './reports-home.component';
+
+const swrConfiguration = {
+  errorRetryCount: 3,
+};
+
+const RootComponent: React.FC = () => {
+  const reportsBasename = window.getOpenmrsSpaBase() + 'home/reports';
+
+  return (
+    <main>
+      <SWRConfig value={swrConfiguration}>
+        <BrowserRouter basename={reportsBasename}>
+          <Routes>
+            <Route path="/" element={<ReportsHome />} />
+          </Routes>
+        </BrowserRouter>
+      </SWRConfig>
+    </main>
+  );
+};
+
+export default RootComponent;

packages/esm-commons-lib/src/components/reports/reports.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Reports() {
+  return <div>Reports view</div>;
+}
+
+export { Reports };

packages/esm-commons-lib/src/config-schema.ts

@@ -0,0 +1,13 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  showReports: {
+    _type: Type.Boolean,
+    _description: 'Show mamba reports',
+    _default: false,
+  },
+};
+
+export interface ConfigObject {
+  showReports: boolean;
+}

packages/esm-commons-lib/src/dashboard.meta.ts

@@ -0,0 +1,9 @@
+export const reportsDashboardMeta = {
+  name: 'reports',
+  slot: 'reports-dashboard-slot',
+  config: { columns: 1, type: 'grid', dashboardTitle: 'Reports Home Page' },
+  title: 'Reports',
+  isFolder: false,
+  icon: null,
+  layoutMode: 'anchored',
+};

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

@@ -1,5 +1,9 @@
 import { FormEngine } from '@openmrs/openmrs-form-engine-lib';
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createNewOHRIDashboardLink } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { reportsDashboardMeta } from './dashboard.meta';
+import reportsRoot from './components/reports/reports-root.component';
+import { configSchema } from './config-schema';
 
 export * from './constants';
 export * from './api.resource';
@@ -57,10 +61,24 @@ export * from './utils/cohort-list-config-builder';
 export * from './utils/patient-list-tabs-config-builder';
 export * from './components/encounter-list-tabs/encounter-list-tabs.component';
 // Workspace registration moved to the index.ts and routes.json
+
+const moduleName = '@ohri/openmrs-esm-ohri-commons-lib';
+
 const options = {
   featureName: 'ohri-forms-workspace-item',
-  moduleName: '@ohri/openmrs-esm-ohri-commons-lib',
+  moduleName,
 };
 
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
 // t('ohriForms', "OHRI Forms")
 export const ohriFormsWorkspace = getSyncLifecycle(FormEngine, options);
+
+// t('mambaReports', "Mamba Reports")
+export const reportsDashboardLink = getSyncLifecycle(
+  createNewOHRIDashboardLink({ ...reportsDashboardMeta, configKey: 'showReports' }),
+  options,
+);
+
+export const reportsDashboard = getSyncLifecycle(reportsRoot, options);

packages/esm-commons-lib/src/routes.json

@@ -6,6 +6,21 @@
   "pages": [
   ],
   "extensions": [
+    {
+      "name": "reports-dashboard-link",
+      "slot": "homepage-dashboard-slot",
+      "component": "reportsDashboardLink",
+      "meta": {
+        "name": "reports",
+        "slot": "reports-dashboard-slot",
+        "title": "Reports Dashboard"
+      }
+    },
+    {
+      "name": "reports-dashboard",
+      "slot": "reports-dashboard-slot",
+      "component": "reportsDashboard"
+    }
   ],
   "workspaces": [
     {

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

@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import classNames from 'classnames';
+import React, { useMemo } from 'react';
 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 { navigate } from '@openmrs/esm-framework';
+import { SideNavLink } from '@carbon/react';
+import ConditionalNavLinkRenderer from '../components/extension-conditional-renderer/side-nav-renderer';
+
 import styles from './sidenav-links.scss';
 
 interface DashboardLinkConfig {
   name: string;
   title: string;
   icon: React.ComponentType<any>;
+  configKey?: string;
 }
 
 function NewDashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
@@ -39,7 +40,9 @@ function NewDashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: D
 }
 
 export const createNewOHRIDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
-  <BrowserRouter>
-    <NewDashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
-  </BrowserRouter>
+  <ConditionalNavLinkRenderer conditionalConfigKey={dashboardLinkConfig.configKey}>
+    <BrowserRouter>
+      <NewDashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  </ConditionalNavLinkRenderer>
 );

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;
-}
+}