fix(frontend): update navbar component to match new format

package.json

@@ -5,7 +5,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@hospitalrun/components": "~0.31.0",
+    "@hospitalrun/components": "^0.32.2",
     "@reduxjs/toolkit": "~1.2.1",
     "@semantic-release/changelog": "~5.0.0",
     "@semantic-release/git": "~7.0.16",

src/__tests__/components/Navbar.test.tsx

@@ -16,115 +16,103 @@ describe('Navbar', () => {
       </Router>,
     )
 
+  const wrapper = setup()
+  const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
+
   it('should render a HospitalRun Navbar', () => {
-    const wrapper = setup()
-    expect(wrapper.find(HospitalRunNavbar)).toHaveLength(1)
+    expect(hospitalRunNavbar).toHaveLength(1)
   })
 
-  describe('brand', () => {
-    it('should render a HospitalRun Navbar with the navbar brand', () => {
-      const wrapper = setup()
-
-      expect(wrapper.find(HospitalRunNavbar).prop('brand').label).toEqual('HospitalRun')
+  describe('header', () => {
+    const header = wrapper.find('.nav-header')
+    it('should render a HospitalRun Navbar with the navbar header', () => {
+      expect(header.first().props().children.props.children).toEqual('HospitalRun')
     })
-
-    it('should navigate to / when the brand is clicked', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
+    it('should navigate to / when the header is clicked', () => {
       act(() => {
-        ;(hospitalRunNavbar.prop('brand') as any).onClick()
+        header
+          .first()
+          .props()
+          .onClick()
       })
-
       expect(history.location.pathname).toEqual('/')
     })
   })
 
   describe('patients', () => {
-    it('should render a patients dropdown', () => {
-      const wrapper = setup()
-
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
-      expect(hospitalRunNavbar.prop('navLinks')[0].label).toEqual('patients.label')
-      expect(hospitalRunNavbar.prop('navLinks')[0].children[0].label).toEqual('actions.list')
-      expect(hospitalRunNavbar.prop('navLinks')[0].children[1].label).toEqual('actions.new')
+    const patientsLinkList = hospitalRunNavbar.find('.patients-link-list')
+    it('should render a patients link list', () => {
+      expect(patientsLinkList.first().props().title).toEqual('patients.label')
+      expect(patientsLinkList.first().props().children[0].props.children).toEqual('actions.list')
+      expect(patientsLinkList.first().props().children[1].props.children).toEqual('actions.new')
     })
-
     it('should navigate to /patients when the list option is selected', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
       act(() => {
-        ;(hospitalRunNavbar.prop('navLinks')[0].children[0] as any).onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
-
       expect(history.location.pathname).toEqual('/patients')
     })
-
     it('should navigate to /patients/new when the list option is selected', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
       act(() => {
-        ;(hospitalRunNavbar.prop('navLinks')[0].children[1] as any).onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
-
       expect(history.location.pathname).toEqual('/patients/new')
     })
   })
 
   describe('scheduling', () => {
-    it('should render a scheduling dropdown', () => {
-      const wrapper = setup()
+    const scheduleLinkList = hospitalRunNavbar.find('.scheduling-link-list')
 
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
-      expect(hospitalRunNavbar.prop('navLinks')[1].label).toEqual('scheduling.label')
-      expect(hospitalRunNavbar.prop('navLinks')[1].children[0].label).toEqual(
+    it('should render a scheduling dropdown', () => {
+      expect(scheduleLinkList.first().props().title).toEqual('scheduling.label')
+      expect(scheduleLinkList.first().props().children[0].props.children).toEqual(
         'scheduling.appointments.label',
       )
-      expect(hospitalRunNavbar.prop('navLinks')[1].children[1].label).toEqual(
+      expect(scheduleLinkList.first().props().children[1].props.children).toEqual(
         'scheduling.appointments.new',
       )
     })
 
     it('should navigate to to /appointments when the appointment list option is selected', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
       act(() => {
-        ;(hospitalRunNavbar.prop('navLinks')[1].children[0] as any).onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
-
       expect(history.location.pathname).toEqual('/appointments')
     })
 
     it('should navigate to /appointments/new when the new appointment list option is selected', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
       act(() => {
-        ;(hospitalRunNavbar.prop('navLinks')[1].children[1] as any).onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
-
       expect(history.location.pathname).toEqual('/appointments/new')
     })
   })
 
   describe('search', () => {
-    it('should render Search as the search button label', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
-
-      expect(hospitalRunNavbar.prop('search').buttonText).toEqual('actions.search')
-    })
+    const navSearch = hospitalRunNavbar.find('.nav-search')
 
     it('should render Search as the search box placeholder', () => {
-      const wrapper = setup()
-      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
+      expect(navSearch.at(2).props().children.props.children[0].props.placeholder).toEqual(
+        'actions.search',
+      )
+    })
 
-      expect(hospitalRunNavbar.prop('search').placeholderText).toEqual('actions.search')
+    it('should render Search as the search button label', () => {
+      expect(navSearch.at(2).props().children.props.children[1].props.children).toEqual(
+        'actions.search',
+      )
     })
   })
 })

src/__tests__/scheduling/appointments-slice.test.ts

@@ -2,11 +2,11 @@ import { AnyAction } from 'redux'
 import Appointment from 'model/Appointment'
 import { createMemoryHistory } from 'history'
 import AppointmentRepository from 'clients/db/AppointmentsRepository'
+import { mocked } from 'ts-jest/utils'
 import appointments, {
   createAppointmentStart,
   createAppointment,
 } from '../../scheduling/appointments/appointments-slice'
-import { mocked } from 'ts-jest/utils'
 
 describe('appointments slice', () => {
   describe('appointments reducer', () => {

src/components/Navbar.tsx

@@ -9,36 +9,40 @@ const Navbar = () => {
 
   return (
     <HospitalRunNavbar
-      brand={{
-        label: 'HospitalRun',
-        onClick: () => {
-          history.push('/')
-        },
-      }}
-      search={{
-        onClickButton: () => {
-          // no oop
-        },
-        onChangeInput: () => {
-          // no oop
+      bg="dark"
+      variant="dark"
+      navItems={[
+        {
+          type: 'icon',
+          src:
+            'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53%0D%0AMy5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5r%0D%0AIiB2aWV3Qm94PSIwIDAgMjk5IDI5OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGlu%0D%0AZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVu%0D%0AdCIgeDE9IjcyLjU4IiB5MT0iMTYuMDQiIHgyPSIyMjcuMzEiIHkyPSIyODQuMDIiIGdyYWRpZW50%0D%0AVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMDEiIHN0b3AtY29sb3I9IiM2%0D%0AMGQxYmIiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9m%0D%0AZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOWI5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0%0D%0AaXRsZT5jcm9zcy1pY29uPC90aXRsZT48cGF0aCBpZD0iY3Jvc3MiIGNsYXNzPSJjbHMtMSIgZD0i%0D%0ATTI5Mi45NCw5Ny40NkgyMDUuM1Y3LjA2QTYuNTYsNi41NiwwLDAsMCwxOTguNzQuNUgxMDEuMjZB%0D%0ANi41Niw2LjU2LDAsMCwwLDk0LjcsNy4wNnY5MC40SDcuMDZBNi41OCw2LjU4LDAsMCwwLC41LDEw%0D%0ANFYxOTYuM2E2LjIzLDYuMjMsMCwwLDAsNi4yMyw2LjI0aDg4djkwLjRhNi41Niw2LjU2LDAsMCww%0D%0ALDYuNTYsNi41Nmg5Ny40OGE2LjU2LDYuNTYsMCwwLDAsNi41Ni02LjU2di05MC40aDg4YTYuMjMs%0D%0ANi4yMywwLDAsMCw2LjIzLTYuMjRWMTA0QTYuNTgsNi41OCwwLDAsMCwyOTIuOTQsOTcuNDZaIiB0%0D%0AcmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIi8+PC9zdmc+',
+          onClick: () => {
+            history.push('/')
+          },
+          className: 'nav-icon',
         },
-        placeholderText: t('actions.search'),
-        buttonText: t('actions.search'),
-      }}
-      navLinks={[
         {
-          label: t('patients.label'),
+          type: 'header',
+          label: 'HospitalRun',
           onClick: () => {
-            // no oop
+            history.push('/')
           },
+          className: 'nav-header',
+        },
+        {
+          type: 'link-list',
+          label: t('patients.label'),
+          className: 'patients-link-list',
           children: [
             {
+              type: 'link',
               label: t('actions.list'),
               onClick: () => {
                 history.push('/patients')
               },
             },
             {
+              type: 'link',
               label: t('actions.new'),
               onClick: () => {
                 history.push('/patients/new')
@@ -47,25 +51,35 @@ const Navbar = () => {
           ],
         },
         {
+          type: 'link-list',
           label: t('scheduling.label'),
-          onClick: () => {
-            // no oop
-          },
+          className: 'scheduling-link-list',
           children: [
             {
+              type: 'link',
               label: t('scheduling.appointments.label'),
               onClick: () => {
                 history.push('/appointments')
               },
             },
             {
+              type: 'link',
               label: t('scheduling.appointments.new'),
               onClick: () => {
                 history.push('/appointments/new')
               },
             },
           ],
         },
+        {
+          type: 'search',
+          placeholderText: t('actions.search'),
+          className: 'ml-auto nav-search',
+          buttonText: t('actions.search'),
+          buttonColor: 'secondary',
+          onClickButton: () => undefined,
+          onChangeInput: () => undefined,
+        },
       ]}
     />
   )