fix: show message to users with no authority to approve data (#102)

* fix: show message to users with no authority to approve data

* chore: remove unused import

src/auth/auth-wall.js

@@ -5,19 +5,23 @@ import { ErrorMessage } from '../shared/index.js'
 import { useIsAuthorized } from './use-is-authorized.js'
 
 const AuthWall = ({ children }) => {
-    const isAuthorized = useIsAuthorized()
+    const { hasAppAccess, hasApprovalAuthorities } = useIsAuthorized()
 
-    if (!isAuthorized) {
-        return (
-            <ErrorMessage title={i18n.t('Not authorized')}>
-                {i18n.t(
-                    "You don't have access to the Data Approval App. Contact a system administrator to request access."
-                )}
-            </ErrorMessage>
-        )
+    if (hasAppAccess && hasApprovalAuthorities) {
+        return children
     }
 
-    return children
+    const message = !hasAppAccess
+        ? i18n.t(
+              "You don't have access to the Data Approval App. Contact a system administrator to request access."
+          )
+        : i18n.t(
+              'You are not allowed to approve data. Contact a system administrator to request the appropriate authorities.'
+          )
+
+    return (
+        <ErrorMessage title={i18n.t('Not authorized')}>{message}</ErrorMessage>
+    )
 }
 
 AuthWall.propTypes = {

src/auth/auth-wall.test.js

@@ -14,15 +14,38 @@ afterEach(() => {
 
 describe('<AuthWall>', () => {
     it('shows a noticebox for unauthorized users', () => {
-        useIsAuthorized.mockImplementation(() => false)
+        useIsAuthorized.mockImplementation(() => ({
+            hasAppAccess: false,
+            hasApprovalAuthorities: false,
+        }))
 
         const wrapper = shallow(<AuthWall>Child</AuthWall>)
 
         expect(wrapper.find(ErrorMessage)).toHaveLength(1)
+        expect(wrapper.prop('children')).toBe(
+            "You don't have access to the Data Approval App. Contact a system administrator to request access."
+        )
+    })
+
+    it('shows a noticebox for users without appropriate authorities', () => {
+        useIsAuthorized.mockImplementation(() => ({
+            hasAppAccess: true,
+            hasApprovalAuthorities: false,
+        }))
+
+        const wrapper = shallow(<AuthWall>Child</AuthWall>)
+
+        expect(wrapper.find(ErrorMessage)).toHaveLength(1)
+        expect(wrapper.prop('children')).toBe(
+            'You are not allowed to approve data. Contact a system administrator to request the appropriate authorities.'
+        )
     })
 
     it('renders the children for authorised users', () => {
-        useIsAuthorized.mockImplementation(() => true)
+        useIsAuthorized.mockImplementation(() => ({
+            hasAppAccess: true,
+            hasApprovalAuthorities: true,
+        }))
 
         const wrapper = shallow(<AuthWall>Child</AuthWall>)
 

src/auth/use-is-authorized.js

@@ -2,7 +2,15 @@ import { useAppContext } from '../app-context/index.js'
 
 export const useIsAuthorized = () => {
     const { authorities } = useAppContext()
-    return authorities.some(
+    const hasAppAccess = authorities.some(
         authority => authority === 'ALL' || authority === 'M_dhis-web-approval'
     )
+    const hasApprovalAuthorities = authorities.some(
+        authority =>
+            authority === 'ALL' ||
+            authority === 'F_APPROVE_DATA' ||
+            authority === 'F_APPROVE_DATA_LOWER_LEVELS'
+    )
+
+    return { hasAppAccess, hasApprovalAuthorities }
 }

src/auth/use-is-authorized.test.js

@@ -4,7 +4,7 @@ import { AppContext } from '../app-context/index.js'
 import { useIsAuthorized } from './use-is-authorized.js'
 
 describe('useIsAuthorized', () => {
-    it('returns false for unauthorised users', () => {
+    it('returns the correct object for unauthorised users', () => {
         const value = {
             authorities: ['dummy'],
         }
@@ -15,10 +15,13 @@ describe('useIsAuthorized', () => {
 
         const { result } = renderHook(() => useIsAuthorized(), { wrapper })
 
-        expect(result.current).toEqual(false)
+        expect(result.current).toEqual({
+            hasAppAccess: false,
+            hasApprovalAuthorities: false,
+        })
     })
 
-    it('returns true for authorised users', () => {
+    it('returns the correct object for authorised users', () => {
         const value = {
             authorities: ['M_dhis-web-approval'],
         }
@@ -29,10 +32,47 @@ describe('useIsAuthorized', () => {
 
         const { result } = renderHook(() => useIsAuthorized(), { wrapper })
 
-        expect(result.current).toEqual(true)
+        expect(result.current).toEqual({
+            hasAppAccess: true,
+            hasApprovalAuthorities: false,
+        })
     })
 
-    it('returns true for superusers', () => {
+    it('returns the correct object for authorised users with F_APPROVE_DATA authority', () => {
+        const value = {
+            authorities: ['M_dhis-web-approval', 'F_APPROVE_DATA'],
+        }
+
+        const wrapper = ({ children }) => (
+            <AppContext.Provider value={value}>{children}</AppContext.Provider>
+        )
+
+        const { result } = renderHook(() => useIsAuthorized(), { wrapper })
+
+        expect(result.current).toEqual({
+            hasAppAccess: true,
+            hasApprovalAuthorities: true,
+        })
+    })
+
+    it('returns the correct object for authorised users with F_APPROVE_DATA_LOWER_LEVELS authority', () => {
+        const value = {
+            authorities: ['M_dhis-web-approval', 'F_APPROVE_DATA_LOWER_LEVELS'],
+        }
+
+        const wrapper = ({ children }) => (
+            <AppContext.Provider value={value}>{children}</AppContext.Provider>
+        )
+
+        const { result } = renderHook(() => useIsAuthorized(), { wrapper })
+
+        expect(result.current).toEqual({
+            hasAppAccess: true,
+            hasApprovalAuthorities: true,
+        })
+    })
+
+    it('returns the correct object for superusers', () => {
         const value = {
             authorities: ['ALL'],
         }
@@ -43,6 +83,9 @@ describe('useIsAuthorized', () => {
 
         const { result } = renderHook(() => useIsAuthorized(), { wrapper })
 
-        expect(result.current).toEqual(true)
+        expect(result.current).toEqual({
+            hasAppAccess: true,
+            hasApprovalAuthorities: true,
+        })
     })
 })