feat(patients): add permission check to add button

src/__tests__/patients/related-persons/RelatedPersons.test.tsx

@@ -10,6 +10,7 @@ import Patient from 'model/Patient'
 import createMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 import { Provider } from 'react-redux'
+import Permissions from 'model/Permissions'
 import * as patientSlice from '../../../patients/patient-slice'
 
 const mockStore = createMockStore([thunk])
@@ -18,14 +19,20 @@ describe('Related Persons Tab', () => {
   let wrapper: ReactWrapper
 
   describe('Add New Related Person', () => {
-    const patient = {
-      id: '123',
-      rev: '123',
-    } as Patient
+    let patient: any
+    let user: any
 
     beforeEach(() => {
+      patient = {
+        id: '123',
+        rev: '123',
+      } as Patient
+
+      user = {
+        permissions: [Permissions.WritePatients, Permissions.ReadPatients],
+      }
       wrapper = mount(
-        <Provider store={mockStore({ patient })}>
+        <Provider store={mockStore({ patient, user })}>
           <RelatedPersonTab patient={patient} />
         </Provider>,
       )
@@ -38,6 +45,18 @@ describe('Related Persons Tab', () => {
       expect(newRelatedPersonButton.text().trim()).toEqual('patient.relatedPersons.new')
     })
 
+    it('should not render a New Related Person button if the user does not have write privileges for a patient', () => {
+      user = { permissions: [Permissions.ReadPatients] }
+      wrapper = mount(
+        <Provider store={mockStore({ patient, user })}>
+          <RelatedPersonTab patient={patient} />
+        </Provider>,
+      )
+
+      const newRelatedPersonButton = wrapper.find(Button)
+      expect(newRelatedPersonButton).toHaveLength(0)
+    })
+
     it('should render a New Related Person modal', () => {
       const newRelatedPersonModal = wrapper.find(NewRelatedPersonModal)
 
@@ -117,9 +136,13 @@ describe('Related Persons Tab', () => {
       relatedPersons: [{ fullName: 'test' }],
     } as Patient
 
+    const user = {
+      permissions: [Permissions.WritePatients, Permissions.ReadPatients],
+    }
+
     beforeEach(() => {
       wrapper = mount(
-        <Provider store={mockStore({ patient })}>
+        <Provider store={mockStore({ patient, user })}>
           <RelatedPersonTab patient={patient} />
         </Provider>,
       )

src/patients/related-persons/RelatedPersonTab.tsx

@@ -6,7 +6,9 @@ import { useTranslation } from 'react-i18next'
 import Patient from 'model/Patient'
 import { updatePatient } from 'patients/patient-slice'
 import { getPatientName } from 'patients/util/patient-name-util'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from 'store'
+import Permissions from 'model/Permissions'
 
 interface Props {
   patient: Patient
@@ -16,6 +18,7 @@ const RelatedPersonTab = (props: Props) => {
   const dispatch = useDispatch()
   const { patient } = props
   const { t } = useTranslation()
+  const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewRelatedPersonModal, setShowRelatedPersonModal] = useState<boolean>(false)
 
   const onNewRelatedPersonClick = () => {
@@ -54,15 +57,17 @@ const RelatedPersonTab = (props: Props) => {
     <div>
       <div className="row">
         <div className="col-md-12 d-flex justify-content-end">
-          <Button
-            outlined
-            color="success"
-            icon="add"
-            iconLocation="left"
-            onClick={onNewRelatedPersonClick}
-          >
-            {t('patient.relatedPersons.new')}
-          </Button>
+          {permissions.includes(Permissions.WritePatients) && (
+            <Button
+              outlined
+              color="success"
+              icon="add"
+              iconLocation="left"
+              onClick={onNewRelatedPersonClick}
+            >
+              {t('patient.relatedPersons.new')}
+            </Button>
+          )}
         </div>
       </div>
       <br />