From 7be00e281e26fd18b80c21510570be531d181586 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Fri, 17 Jun 2022 01:24:07 +0300
Subject: [PATCH 1/4] Wrap dashboard extension in router. Use location from
 react-router

---
 .../src/dashboards/DashboardExtension.tsx     | 15 +++++++++++---
 .../src/dashboards/createDashboardLink.tsx    |  7 ++++++-
 .../src/dashboards/dashboardextension.scss    | 20 +++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss

diff --git a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
index 384d10cf92..7f9ffccce1 100644
--- a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
@@ -1,14 +1,23 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { last } from 'lodash';
+import { useLocation } from 'react-router-dom';
 import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './dashboardextension.scss';
 
 export interface DashboardExtensionProps {
   title: string;
   basePath: string;
 }
 
-export const DashboardExtension = ({ title, basePath }: DashboardExtensionProps) => {
+export const DashboardExtension = ({ title, basePath, ...props }: DashboardExtensionProps) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+  const navLink = useMemo(() => decodeURIComponent(last(currentPath.split('/'))), [location.pathname]);
+
+  const activeClassName = title === navLink ? styles.activeNavItem : styles.notActive;
+
   return (
-    <div key={title}>
+    <div key={title} className={activeClassName}>
       <ConfigurableLink to={`${basePath}/${encodeURIComponent(title)}`} className="bx--side-nav__link">
         {title}
       </ConfigurableLink>
diff --git a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
index 97ce3a4b2b..df603441b0 100644
--- a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import { DashboardLinkConfig } from '../types';
 import { DashboardExtension } from './DashboardExtension';
 
 export const createDashboardLink = (db: DashboardLinkConfig) => {
   const Dashboard = ({ basePath }: { basePath: string }) => {
-    return <DashboardExtension title={db.title} basePath={basePath} />;
+    return (
+      <BrowserRouter>
+        <DashboardExtension title={db.title} basePath={basePath} />
+      </BrowserRouter>
+    );
   };
   return Dashboard;
 };
diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
new file mode 100644
index 0000000000..146194249c
--- /dev/null
+++ b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
@@ -0,0 +1,20 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.activeNavItem {
+  background-color: $ui-03;
+  outline: none;
+  color: $ui-05;
+  border-left: 4px solid var(--brand-01);
+
+  a {
+    color: $ui-05 !important;
+    outline: none !important;
+  }
+}
+
+.notActive {
+  background-color: white;
+}
+

From 8106bf1118800b4eeaceba63c266ddd6384bd544 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Fri, 17 Jun 2022 22:25:14 +0300
Subject: [PATCH 2/4] Remove the !important and remove the overriding styles
 from core

---
 .../src/dashboards/dashboardextension.scss       | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
index 146194249c..4a5c2dcac9 100644
--- a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
+++ b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
@@ -7,11 +7,19 @@
   outline: none;
   color: $ui-05;
   border-left: 4px solid var(--brand-01);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .activeNavItem a:nth-child(1) {
+  height: 2rem;
+  color: $ui-05;
+  outline: none;
+  padding: 0 0 0 1rem;
+}
 
-  a {
-    color: $ui-05 !important;
-    outline: none !important;
-  }
+:global(.omrs-breakpoint-gt-tablet) .notActive a:nth-child(1) {
+  height: 2rem;
+  color: $ui-04;
+  padding: 0 0 0 1rem;
 }
 
 .notActive {

From ebc3a3191766623bc207204361ad83fe713f4197 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Mon, 27 Jun 2022 00:54:03 +0300
Subject: [PATCH 3/4] Use global active class

---
 .../src/dashboards/DashboardExtension.tsx     | 13 +++++-----
 .../src/dashboards/createDashboardLink.tsx    |  9 ++-----
 .../src/dashboards/dashboardextension.scss    | 24 ++++---------------
 3 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
index 7f9ffccce1..0a664fa121 100644
--- a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
@@ -1,24 +1,23 @@
 import React, { useMemo } from 'react';
 import { last } from 'lodash';
-import { useLocation } from 'react-router-dom';
+
 import { ConfigurableLink } from '@openmrs/esm-framework';
 import styles from './dashboardextension.scss';
 
 export interface DashboardExtensionProps {
   title: string;
   basePath: string;
+  currentPath: string;
 }
 
-export const DashboardExtension = ({ title, basePath, ...props }: DashboardExtensionProps) => {
-  const location = useLocation();
-  const currentPath = location.pathname;
-  const navLink = useMemo(() => decodeURIComponent(last(currentPath.split('/'))), [location.pathname]);
+export const DashboardExtension = ({ title, basePath, currentPath }: DashboardExtensionProps) => {
+  const navLink = useMemo(() => decodeURIComponent(last(currentPath.split('/'))), [currentPath]);
 
-  const activeClassName = title === navLink ? styles.activeNavItem : styles.notActive;
+  const activeClassName = title === navLink ? 'active-left-nav-link' : 'non-active';
 
   return (
     <div key={title} className={activeClassName}>
-      <ConfigurableLink to={`${basePath}/${encodeURIComponent(title)}`} className="bx--side-nav__link">
+      <ConfigurableLink to={`${basePath}/${encodeURIComponent(title)}`} className={'bx--side-nav__link ' + styles.link}>
         {title}
       </ConfigurableLink>
     </div>
diff --git a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
index df603441b0..4302d346ea 100644
--- a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { DashboardLinkConfig } from '../types';
 import { DashboardExtension } from './DashboardExtension';
 
 export const createDashboardLink = (db: DashboardLinkConfig) => {
-  const Dashboard = ({ basePath }: { basePath: string }) => {
-    return (
-      <BrowserRouter>
-        <DashboardExtension title={db.title} basePath={basePath} />
-      </BrowserRouter>
-    );
+  const Dashboard = ({ basePath, currentPath }: { basePath: string; currentPath: string }) => {
+    return <DashboardExtension title={db.title} basePath={basePath} currentPath={currentPath} />;
   };
   return Dashboard;
 };
diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
index 4a5c2dcac9..acd82a7518 100644
--- a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
+++ b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
@@ -2,27 +2,13 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-.activeNavItem {
+:global(.active-left-nav-link) {
   background-color: $ui-03;
   outline: none;
   color: $ui-05;
   border-left: 4px solid var(--brand-01);
+  .link:nth-child(1) {
+    color: $ui-05;
+    padding: 1.2rem 0 1.2rem 1.2rem;
+  }
 }
-
-:global(.omrs-breakpoint-gt-tablet) .activeNavItem a:nth-child(1) {
-  height: 2rem;
-  color: $ui-05;
-  outline: none;
-  padding: 0 0 0 1rem;
-}
-
-:global(.omrs-breakpoint-gt-tablet) .notActive a:nth-child(1) {
-  height: 2rem;
-  color: $ui-04;
-  padding: 0 0 0 1rem;
-}
-
-.notActive {
-  background-color: white;
-}
-

From 3cc1860ba9d3ce062aa67341046fa4edad9d4d79 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Mon, 27 Jun 2022 19:27:01 +0300
Subject: [PATCH 4/4] remove duplicate styles for the active global class

---
 .../src/dashboards/dashboardextension.scss             | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
index acd82a7518..6d3d844e68 100644
--- a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
+++ b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
@@ -2,13 +2,7 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-:global(.active-left-nav-link) {
-  background-color: $ui-03;
-  outline: none;
+:global(.active-left-nav-link) .link:nth-child(1) {
   color: $ui-05;
-  border-left: 4px solid var(--brand-01);
-  .link:nth-child(1) {
-    color: $ui-05;
-    padding: 1.2rem 0 1.2rem 1.2rem;
-  }
+  padding: 1.2rem 0 1.2rem 1.2rem;
 }