fix(approval-status-tag): show correct status texts and icons (#105)

* fix(approval-status-tag): show correct status texts and icons

* test(approval-status-tag): adjust test to new implementation

* test(approval-status-tag): adjust cypress tests to new implementation

* chore: update network fixtures

* fix(approval-satus-tag): adjust test to simplified implementation

cypress/fixtures/network/37/summary.json

@@ -1,8 +1,8 @@
 {
     "count": 340,
-    "totalResponseSize": 111020,
-    "duplicates": 232,
-    "nonDeterministicResponses": 11,
+    "totalResponseSize": 108017,
+    "duplicates": 233,
+    "nonDeterministicResponses": 19,
     "apiVersion": 37,
     "fixtureFiles": [
         "static_resources.json",

cypress/fixtures/network/38/summary.json

@@ -1,7 +1,7 @@
 {
-    "count": 340,
-    "totalResponseSize": 108277,
-    "duplicates": 233,
+    "count": 341,
+    "totalResponseSize": 111471,
+    "duplicates": 234,
     "nonDeterministicResponses": 11,
     "apiVersion": 38,
     "fixtureFiles": [

cypress/integration/actions.feature

@@ -25,10 +25,10 @@ Feature: Users can approve, accept, unapprove, and unaccept data
 
     # In "Approved" state the "Accept" action becomes available
     Scenario: User accepts data
-        Then the status tag shows the approval status "Approved"
+        Then the status tag shows the approval status "Approved by .+"
         When the user clicks the Accept button
         Then a circular loader is rendered
-        And the status tag shows the approval status "Ready for approval — Accepted"
+        And the status tag shows the approval status "Approval by .+ accepted .+"
         And the following buttons are available
             | label     | visible | disabled |
             | Approve   | yes     | yes      |
@@ -38,10 +38,10 @@ Feature: Users can approve, accept, unapprove, and unaccept data
 
     # In "Ready for approval — Accepted" state the "Unaccept" action becomes available
     Scenario: User unaccepts data
-        Then the status tag shows the approval status "Ready for approval — Accepted"
+        Then the status tag shows the approval status "Approval by .+ accepted .+"
         When the user clicks the Unaccept button
         Then a circular loader is rendered
-        And the status tag shows the approval status "Approved"
+        And the status tag shows the approval status "Approved by +."
         And the following buttons are available
             | label     | visible | disabled |
             | Approve   |         |          |
@@ -51,7 +51,7 @@ Feature: Users can approve, accept, unapprove, and unaccept data
 
     # After unaccepting the state jumps back to "Approved" and the "Unapprove" action becomes available
     Scenario: User unapproves data
-        Then the status tag shows the approval status "Approved"
+        Then the status tag shows the approval status "Approved by .+"
         When the user clicks the Unapprove button
         Then a circular loader is rendered
         And the status tag shows the approval status "Ready for approval"

cypress/integration/common/index.js

@@ -34,11 +34,12 @@ When('the user selects organisation unit "Badjia"', () => {
 
 const statuses = [
     'Ready for approval',
-    'Approved',
-    'Ready for approval — Accepted',
-    'Cannot be approved',
     'Waiting for lower level approval',
     'Waiting for higher level approval',
+    'Approval by .+ accepted .+',
+    'Approved by .+',
+    'Approved at higher level .+',
+    'Cannot be approved',
 ]
 defineParameterType({
     name: 'status',
@@ -48,5 +49,8 @@ defineParameterType({
 Then('the status tag shows the approval status "{status}"', status => {
     cy.get(
         '[data-test="bottom-bar"] [data-test="dhis2-uicore-tag-text"]'
-    ).should('contain.text', status)
+    ).should($tag => {
+        const statusRegex = new RegExp(status)
+        expect(statusRegex.test($tag.text())).to.be.true
+    })
 })

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-09-28T13:14:40.432Z\n"
-"PO-Revision-Date: 2021-09-28T13:14:40.432Z\n"
+"POT-Creation-Date: 2021-10-04T09:20:46.071Z\n"
+"PO-Revision-Date: 2021-10-04T09:20:46.071Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -122,30 +122,24 @@ msgstr "{{dataSetsCount}} data sets"
 msgid "Approved {{- dateTimeStr}}"
 msgstr "Approved {{- dateTimeStr}}"
 
-msgid "Approved by {{- name}} {{timeAgo}}"
-msgstr "Approved by {{- name}} {{timeAgo}}"
-
-msgid "Approved {{timeAgo}}"
-msgstr "Approved {{timeAgo}}"
-
-msgid "Approved by {{- name}}"
-msgstr "Approved by {{- name}}"
-
-msgid "Approved"
-msgstr "Approved"
-
 msgid "Ready for approval"
 msgstr "Ready for approval"
 
-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 "Approval by {{- name}} accepted {{timeAgo}}"
+msgstr "Approval by {{- name}} accepted {{timeAgo}}"
+
+msgid "Approved by {{- name}} {{timeAgo}}"
+msgstr "Approved by {{- name}} {{timeAgo}}"
+
+msgid "Approved at higher level {{timeAgo}}"
+msgstr "Approved at higher level {{timeAgo}}"
+
 msgid "Cannot be approved"
 msgstr "Cannot be approved"
 
@@ -251,6 +245,9 @@ msgstr "Clear selections"
 msgid "Waiting for approval"
 msgstr "Waiting for approval"
 
+msgid "Approved"
+msgstr "Approved"
+
 msgid "Failed to load approval state"
 msgstr "Failed to load approval state"
 

src/shared/approval-status/get-approval-status.js

@@ -18,7 +18,6 @@ const APPROVAL_STATUSES = {
 const getApprovalStatusIcon = approvalStatus => {
     switch (approvalStatus) {
         case APPROVAL_STATUSES.UNAPPROVED_READY:
-        case APPROVAL_STATUSES.ACCEPTED_HERE:
             return {
                 icon: Ready,
                 type: 'neutral',
@@ -29,6 +28,7 @@ const getApprovalStatusIcon = approvalStatus => {
                 icon: Waiting,
                 type: 'default',
             }
+        case APPROVAL_STATUSES.ACCEPTED_HERE:
         case APPROVAL_STATUSES.APPROVED_HERE:
         case APPROVAL_STATUSES.APPROVED_ABOVE:
             return {
@@ -50,20 +50,6 @@ const getApprovalStatusIcon = approvalStatus => {
     }
 }
 
-const getApprovedStatusText = ({ approvalDateTime, approvedBy: name }) => {
-    if (approvalDateTime) {
-        const timeAgo = moment(approvalDateTime).fromNow()
-
-        return name
-            ? i18n.t('Approved by {{- name}} {{timeAgo}}', { name, timeAgo })
-            : i18n.t('Approved {{timeAgo}}', { timeAgo })
-    }
-
-    return name
-        ? i18n.t('Approved by {{- name}}', { name })
-        : i18n.t('Approved')
-}
-
 const getApprovalStatusText = ({
     approvalStatus,
     approvalDateTime,
@@ -72,15 +58,24 @@ const getApprovalStatusText = ({
     switch (approvalStatus) {
         case APPROVAL_STATUSES.UNAPPROVED_READY:
             return i18n.t('Ready for approval')
-        case APPROVAL_STATUSES.ACCEPTED_HERE:
-            return i18n.t('Ready for approval — Accepted')
         case APPROVAL_STATUSES.UNAPPROVED_WAITING:
             return i18n.t('Waiting for lower level approval')
         case APPROVAL_STATUSES.UNAPPROVED_ABOVE:
             return i18n.t('Waiting for higher level approval')
+        case APPROVAL_STATUSES.ACCEPTED_HERE:
+            return i18n.t('Approval by {{- name}} accepted {{timeAgo}}', {
+                name: approvedBy,
+                timeAgo: moment(approvalDateTime).fromNow(),
+            })
         case APPROVAL_STATUSES.APPROVED_HERE:
+            return i18n.t('Approved by {{- name}} {{timeAgo}}', {
+                name: approvedBy,
+                timeAgo: moment(approvalDateTime).fromNow(),
+            })
         case APPROVAL_STATUSES.APPROVED_ABOVE:
-            return getApprovedStatusText({ approvalDateTime, approvedBy })
+            return i18n.t('Approved at higher level {{timeAgo}}', {
+                timeAgo: moment(approvalDateTime).fromNow(),
+            })
         case APPROVAL_STATUSES.UNAPPROVABLE:
             return i18n.t('Cannot be approved')
         case APPROVAL_STATUSES.ERROR:

src/shared/approval-status/get-approval-status.test.js

@@ -26,11 +26,12 @@ describe('getApprovalStatusDisplayData', () => {
         expect(
             getApprovalStatusDisplayData({
                 approvalStatus: APPROVAL_STATUSES.ACCEPTED_HERE,
+                approvedBy: 'Hendrik',
             })
         ).toEqual({
-            displayName: 'Ready for approval — Accepted',
-            icon: Ready,
-            type: 'neutral',
+            displayName: 'Approval by Hendrik accepted 2 years ago',
+            icon: Approved,
+            type: 'positive',
         })
     })
     it('returns the correct display data for approval status "UNAPPROVED_WAITING"', () => {
@@ -55,58 +56,32 @@ describe('getApprovalStatusDisplayData', () => {
             type: 'default',
         })
     })
-    describe('approved approval statuses "APPROVED_HERE" and "APPROVED_ABOVE"', () => {
-        for (const approvalStatus of [
-            APPROVAL_STATUSES.APPROVED_HERE,
-            APPROVAL_STATUSES.APPROVED_ABOVE,
-        ]) {
-            it(`returns the correct diplay data for ${approvalStatus} when only approvalStatus is supplied`, () => {
-                expect(
-                    getApprovalStatusDisplayData({ approvalStatus })
-                ).toEqual({
-                    displayName: 'Approved',
-                    icon: Approved,
-                    type: 'positive',
-                })
-            })
-            it(`returns the correct diplay data for ${approvalStatus} when approvalStatus and approvedBy are passed`, () => {
-                expect(
-                    getApprovalStatusDisplayData({
-                        approvalStatus,
-                        approvedBy: 'Hendrik',
-                    })
-                ).toEqual({
-                    displayName: 'Approved by Hendrik',
-                    icon: Approved,
-                    type: 'positive',
-                })
-            })
-            it(`returns the correct diplay data for ${approvalStatus} when approvalStatus and approvalDateTime are passed`, () => {
-                expect(
-                    getApprovalStatusDisplayData({
-                        approvalStatus,
-                        approvalDateTime: '2020-08-24T18:55:03.165Z',
-                    })
-                ).toEqual({
-                    displayName: 'Approved 2 years ago',
-                    icon: Approved,
-                    type: 'positive',
-                })
+    it('returns the correct diplay data for "APPROVED_HERE"', () => {
+        expect(
+            getApprovalStatusDisplayData({
+                approvalStatus: APPROVAL_STATUSES.APPROVED_HERE,
+                approvedBy: 'Hendrik',
+                // The actual value for this field is irrelevant due to the moment mock
+                approvalDateTime: 'Not empty',
             })
-            it(`returns the correct diplay data for ${approvalStatus} when only all options are passed`, () => {
-                expect(
-                    getApprovalStatusDisplayData({
-                        approvalStatus,
-                        approvedBy: 'Hendrik',
-                        approvalDateTime: '2020-08-24T18:55:03.165Z',
-                    })
-                ).toEqual({
-                    displayName: 'Approved by Hendrik 2 years ago',
-                    icon: Approved,
-                    type: 'positive',
-                })
+        ).toEqual({
+            displayName: 'Approved by Hendrik 2 years ago',
+            icon: Approved,
+            type: 'positive',
+        })
+    })
+    it('returns the correct diplay data for "APPROVED_ABOVE"', () => {
+        expect(
+            getApprovalStatusDisplayData({
+                approvalStatus: APPROVAL_STATUSES.APPROVED_ABOVE,
+                // The actual value for this field is irrelevant due to the moment mock
+                approvalDateTime: 'Not empty',
             })
-        }
+        ).toEqual({
+            displayName: 'Approved at higher level 2 years ago',
+            icon: Approved,
+            type: 'positive',
+        })
     })
     it('returns the correct display data for approval status "UNAPPROVABLE"', () => {
         expect(