fix(status-tag): align approval state classification with design specs (

#44)

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-07-23T07:15:00.023Z\n"
-"PO-Revision-Date: 2021-07-23T07:15:00.023Z\n"
+"POT-Creation-Date: 2021-08-12T11:12:06.430Z\n"
+"PO-Revision-Date: 2021-08-12T11:12:06.430Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -94,12 +94,8 @@ msgstr "Retry loading data set"
 msgid "Loading data set"
 msgstr "Loading data set"
 
-msgid ""
-"This data set doesn't have any data for the selected period and "
-"organisation unit."
-msgstr ""
-"This data set doesn't have any data for the selected period and "
-"organisation unit."
+msgid "This data set doesn't have any data for {{- period}} in {{- orgUnit}}."
+msgstr "This data set doesn't have any data for {{- period}} in {{- orgUnit}}."
 
 msgid "1 data set"
 msgstr "1 data set"
@@ -200,20 +196,26 @@ msgstr "Financial year (Start July)"
 msgid "Financial year (Start April)"
 msgstr "Financial year (Start April)"
 
-msgid "Approved"
-msgstr "Approved"
-
-msgid "Ready for approval and accepted"
-msgstr "Ready for approval and accepted"
-
 msgid "Ready for approval"
 msgstr "Ready for approval"
 
-msgid "Waiting"
-msgstr "Waiting"
+msgid "Ready for approval — Accepted"
+msgstr "Ready for approval — Accepted"
+
+msgid "Waiting for lower level approval"
+msgstr "Waiting for lower level approval"
+
+msgid "Waiting for higher level approval"
+msgstr "Waiting for higher level approval"
+
+msgid "Approved"
+msgstr "Approved"
+
+msgid "Cannot be approved"
+msgstr "Cannot be approved"
 
-msgid "Cannot approve"
-msgstr "Cannot approve"
+msgid "Could not retrieve approval status"
+msgstr "Could not retrieve approval status"
 
 msgid "Clear selections"
 msgstr "Clear selections"

src/shared/status-tag/get-tag-display-data.js

@@ -1,57 +1,69 @@
 import i18n from '@dhis2/d2-i18n'
+import { IconBlock16, IconError16 } from '@dhis2/ui'
 import { Approved, Ready, Waiting } from './icons.js'
 
-/*
- * TODO: The current classification logic was discussed with
- * Joe Cooper, but needs to be confirmed by either Lars or Jim.
- * Specifically these cases are not clear:
- * A. Do ACCEPTED_HERE and ACCEPTED_ELSEWHERE fall into "Ready for
- *    approval and accepted"? This doesn't seem to match the webapi docs.
- * B. Should we show a red tag for UNAPPROVABLE and show a negative tag?
- *    This was not included in the design specs.
- */
-const getTagDisplayData = approvalState => {
+const getApprovalStateIcon = approvalState => {
     switch (approvalState) {
-        case 'APPROVED_HERE':
-        case 'APPROVED_ABOVE':
-            return {
-                icon: Approved,
-                displayName: i18n.t('Approved'),
-                type: 'positive',
-            }
-
-        case 'ACCEPTED_HERE':
-            return {
-                icon: Ready,
-                displayName: i18n.t('Ready for approval and accepted'),
-                type: 'neutral',
-            }
-
         case 'UNAPPROVED_READY':
+        case 'ACCEPTED_HERE':
             return {
                 icon: Ready,
-                displayName: i18n.t('Ready for approval'),
                 type: 'neutral',
             }
-
         case 'UNAPPROVED_WAITING':
         case 'UNAPPROVED_ABOVE':
             return {
                 icon: Waiting,
-                displayName: i18n.t('Waiting'),
                 type: 'default',
             }
-
+        case 'APPROVED_HERE':
+        case 'APPROVED_ABOVE':
+            return {
+                icon: Approved,
+                type: 'positive',
+            }
         case 'UNAPPROVABLE':
             return {
-                icon: Waiting,
-                displayName: i18n.t('Cannot approve'),
+                icon: IconBlock16,
+                type: 'negative',
+            }
+        case 'ERROR':
+            return {
+                icon: IconError16,
                 type: 'negative',
             }
+        default:
+            throw new Error(`Unknown approval state: '${approvalState}'`)
+    }
+}
 
+const getApprovalStateText = approvalState => {
+    switch (approvalState) {
+        case 'UNAPPROVED_READY':
+            return i18n.t('Ready for approval')
+        case 'ACCEPTED_HERE':
+            return i18n.t('Ready for approval — Accepted')
+        case 'UNAPPROVED_WAITING':
+            return i18n.t('Waiting for lower level approval')
+        case 'UNAPPROVED_ABOVE':
+            return i18n.t('Waiting for higher level approval')
+        case 'APPROVED_HERE':
+        case 'APPROVED_ABOVE':
+            return i18n.t('Approved')
+        case 'UNAPPROVABLE':
+            return i18n.t('Cannot be approved')
+        case 'ERROR':
+            return i18n.t('Could not retrieve approval status')
         default:
             throw new Error(`Unknown approval state: '${approvalState}'`)
     }
 }
 
-export { getTagDisplayData }
+const getTagDisplayData = approvalState => {
+    const displayName = getApprovalStateText(approvalState)
+    const { icon, type } = getApprovalStateIcon(approvalState)
+
+    return { displayName, icon, type }
+}
+
+export { getTagDisplayData, getApprovalStateIcon }

src/shared/status-tag/get-tag-display-data.test.js

@@ -1,54 +1,63 @@
+import { IconBlock16, IconError16 } from '@dhis2/ui'
 import { getTagDisplayData } from './get-tag-display-data.js'
 import { Approved, Ready, Waiting } from './icons.js'
 
 describe('getTagDisplayData', () => {
-    it('returns "approved" display data for the correct approval states', () => {
-        const expectedDisplayData = {
-            icon: Approved,
-            displayName: 'Approved',
-            type: 'positive',
-        }
-        expect(getTagDisplayData('APPROVED_HERE')).toEqual(expectedDisplayData)
-        expect(getTagDisplayData('APPROVED_ABOVE')).toEqual(expectedDisplayData)
-    })
-    it('returns "ready for approval and accepted" display data for the correct approval states', () => {
-        const expectedDisplayData = {
+    it('returns the correct display data for approval state "UNAPPROVED_READY"', () => {
+        expect(getTagDisplayData('UNAPPROVED_READY')).toEqual({
+            displayName: 'Ready for approval',
             icon: Ready,
-            displayName: 'Ready for approval and accepted',
             type: 'neutral',
-        }
-        expect(getTagDisplayData('ACCEPTED_HERE')).toEqual(expectedDisplayData)
+        })
     })
-    it('returns "ready for approval" display data for the correct approval states', () => {
-        const expectedDisplayData = {
+    it('returns the correct display data for approval state "ACCEPTED_HERE"', () => {
+        expect(getTagDisplayData('ACCEPTED_HERE')).toEqual({
+            displayName: 'Ready for approval — Accepted',
             icon: Ready,
-            displayName: 'Ready for approval',
             type: 'neutral',
-        }
-        expect(getTagDisplayData('UNAPPROVED_READY')).toEqual(
-            expectedDisplayData
-        )
+        })
     })
-    it('returns "waiting" display data for the correct approval states', () => {
-        const expectedDisplayData = {
+    it('returns the correct display data for approval state "UNAPPROVED_WAITING"', () => {
+        expect(getTagDisplayData('UNAPPROVED_WAITING')).toEqual({
+            displayName: 'Waiting for lower level approval',
             icon: Waiting,
-            displayName: 'Waiting',
             type: 'default',
-        }
-        expect(getTagDisplayData('UNAPPROVED_WAITING')).toEqual(
-            expectedDisplayData
-        )
-        expect(getTagDisplayData('UNAPPROVED_ABOVE')).toEqual(
-            expectedDisplayData
-        )
+        })
     })
-    it('returns "cannot approve" display data for the correct approval states', () => {
-        const expectedDisplayData = {
+    it('returns the correct display data for approval state "UNAPPROVED_ABOVE"', () => {
+        expect(getTagDisplayData('UNAPPROVED_ABOVE')).toEqual({
+            displayName: 'Waiting for higher level approval',
             icon: Waiting,
-            displayName: 'Cannot approve',
+            type: 'default',
+        })
+    })
+    it('returns the correct display data for approval state "APPROVED_HERE"', () => {
+        expect(getTagDisplayData('APPROVED_HERE')).toEqual({
+            displayName: 'Approved',
+            icon: Approved,
+            type: 'positive',
+        })
+    })
+    it('returns the correct display data for approval state "APPROVED_ABOVE"', () => {
+        expect(getTagDisplayData('APPROVED_ABOVE')).toEqual({
+            displayName: 'Approved',
+            icon: Approved,
+            type: 'positive',
+        })
+    })
+    it('returns the correct display data for approval state "UNAPPROVABLE"', () => {
+        expect(getTagDisplayData('UNAPPROVABLE')).toEqual({
+            displayName: 'Cannot be approved',
+            icon: IconBlock16,
+            type: 'negative',
+        })
+    })
+    it('returns the correct display data for approval state "ERROR"', () => {
+        expect(getTagDisplayData('ERROR')).toEqual({
+            displayName: 'Could not retrieve approval status',
+            icon: IconError16,
             type: 'negative',
-        }
-        expect(getTagDisplayData('UNAPPROVABLE')).toEqual(expectedDisplayData)
+        })
     })
     it('throws an error when encountering an unknown approval state', () => {
         expect(() => getTagDisplayData('bad input')).toThrow(

src/shared/status-tag/index.js

@@ -1 +1,2 @@
 export { StatusTag } from './status-tag.js'
+export { getApprovalStateIcon } from './get-tag-display-data.js'