From 7e0aba7d1a3fe14db48f55e6250cfbca75ed7ad8 Mon Sep 17 00:00:00 2001
From: AlexTan331 <40738727+AlexTan331@users.noreply.github.com>
Date: Thu, 9 Jul 2020 19:14:47 -0400
Subject: [PATCH] feat(navbar): add icons to 'quick add' icon in navbar (#2220)

---
 .../shared/components/navbar/Navbar.test.tsx   | 18 ++++++++++++++----
 src/shared/components/navbar/Navbar.tsx        |  1 +
 src/shared/components/navbar/pageMap.tsx       | 12 +++++++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/shared/components/navbar/Navbar.test.tsx b/src/__tests__/shared/components/navbar/Navbar.test.tsx
index 36d7487247..d3c7b78d5d 100644
--- a/src/__tests__/shared/components/navbar/Navbar.test.tsx
+++ b/src/__tests__/shared/components/navbar/Navbar.test.tsx
@@ -59,9 +59,16 @@ describe('Navbar', () => {
       const hamberger = hospitalRunNavbar.find('.nav-hamberger')
       const { children } = hamberger.first().props() as any
 
-      expect(children[0].props.children).toEqual([undefined, 'dashboard.label'])
-      expect(children[1].props.children).toEqual([undefined, 'patients.newPatient'])
-      expect(children[children.length - 1].props.children).toEqual([undefined, 'settings.label'])
+      const [dashboardIcon, dashboardLabel] = children[0].props.children
+      const [newPatientIcon, newPatientLabel] = children[1].props.children
+      const [settingsIcon, settingsLabel] = children[children.length - 1].props.children
+
+      expect(dashboardIcon.props.icon).toEqual('dashboard')
+      expect(dashboardLabel).toEqual('dashboard.label')
+      expect(newPatientIcon.props.icon).toEqual('patient-add')
+      expect(newPatientLabel).toEqual('patients.newPatient')
+      expect(settingsIcon.props.icon).toEqual('setting')
+      expect(settingsLabel).toEqual('settings.label')
     })
 
     it('should not show an item if user does not have a permission', () => {
@@ -142,7 +149,10 @@ describe('Navbar', () => {
       const addNew = hospitalRunNavbar.find('.nav-add-new')
       const { children } = addNew.first().props() as any
 
-      expect(children[0].props.children).toEqual([undefined, 'patients.newPatient'])
+      const [icon, label] = children[0].props.children
+
+      expect(icon.props.icon).toEqual('patient-add')
+      expect(label).toEqual('patients.newPatient')
     })
 
     it('should not show a shortcut if user does not have a permission', () => {
diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx
index fa534d0320..e77262ce25 100644
--- a/src/shared/components/navbar/Navbar.tsx
+++ b/src/shared/components/navbar/Navbar.tsx
@@ -31,6 +31,7 @@ const Navbar = () => {
       .map((page) => ({
         type: 'link',
         label: t(page.label),
+        icon: `${page.icon}`,
         onClick: () => {
           navigateTo(page.path)
         },
diff --git a/src/shared/components/navbar/pageMap.tsx b/src/shared/components/navbar/pageMap.tsx
index 37c889edeb..0c5564eafc 100644
--- a/src/shared/components/navbar/pageMap.tsx
+++ b/src/shared/components/navbar/pageMap.tsx
@@ -1,6 +1,6 @@
 import Permissions from '../../model/Permissions'
 
-type Page = { permission: Permissions | null; label: string; path: string }
+type Page = { permission: Permissions | null; label: string; path: string; icon: string }
 
 const pageMap: {
   [key: string]: Page
@@ -9,51 +9,61 @@ const pageMap: {
     permission: null,
     label: 'dashboard.label',
     path: '/',
+    icon: 'dashboard',
   },
   newPatient: {
     permission: Permissions.WritePatients,
     label: 'patients.newPatient',
     path: '/patients/new',
+    icon: 'patient-add',
   },
   viewPatients: {
     permission: Permissions.ReadPatients,
     label: 'patients.patientsList',
     path: '/patients',
+    icon: 'patients',
   },
   newAppointment: {
     permission: Permissions.WriteAppointments,
     label: 'scheduling.appointments.new',
     path: '/appointments/new',
+    icon: 'appointment-add',
   },
   viewAppointments: {
     permission: Permissions.ReadAppointments,
     label: 'scheduling.appointments.schedule',
     path: '/appointments',
+    icon: 'appointment',
   },
   newLab: {
     permission: Permissions.RequestLab,
     label: 'labs.requests.new',
     path: '/labs/new',
+    icon: 'add',
   },
   viewLabs: {
     permission: Permissions.ViewLabs,
     label: 'labs.requests.label',
     path: '/labs',
+    icon: 'lab',
   },
   newIncident: {
     permission: Permissions.ReportIncident,
     label: 'incidents.reports.new',
     path: '/incidents/new',
+    icon: 'add',
   },
   viewIncidents: {
     permission: Permissions.ViewIncidents,
     label: 'incidents.reports.label',
     path: '/incidents',
+    icon: 'incident',
   },
   settings: {
     permission: null,
     label: 'settings.label',
     path: '/settings',
+    icon: 'setting',
   },
 }