fix: support non-gregory calendars [DHIS2-17617]

cypress/support/generateTestMatrix.js

@@ -30,6 +30,4 @@ const createGroups = (files, numberOfGroups = 6) => {
 
 const cypressSpecsPath = './cypress/e2e'
 const specs = getAllFiles(cypressSpecsPath)
-const groupedSpecs = createGroups(specs)
-
-console.log(JSON.stringify(groupedSpecs))
+createGroups(specs)

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: 2024-01-15T14:35:08.966Z\n"
-"PO-Revision-Date: 2024-01-15T14:35:08.966Z\n"
+"POT-Creation-Date: 2024-10-16T08:10:10.883Z\n"
+"PO-Revision-Date: 2024-10-16T08:10:10.883Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -54,9 +54,6 @@ msgstr "1 value failed to save"
 msgid "{{numberOfErrors}} values failed to save"
 msgstr "{{numberOfErrors}} values failed to save"
 
-msgid "This form closes and will be locked at {{-dateTime}}"
-msgstr "This form closes and will be locked at {{-dateTime}}"
-
 msgid "Closes {{-relativeTime}}"
 msgstr "Closes {{-relativeTime}}"
 
@@ -342,6 +339,18 @@ msgstr "Not available offline"
 msgid "No audit log for this data item."
 msgstr "No audit log for this data item."
 
+msgid "Date"
+msgstr "Date"
+
+msgid "User"
+msgstr "User"
+
+msgid "Change"
+msgstr "Change"
+
+msgid "audit dates are given in {{- timeZone}} time"
+msgstr "audit dates are given in {{- timeZone}} time"
+
 msgid "Unmark for follow-up"
 msgstr "Unmark for follow-up"
 
@@ -586,6 +595,9 @@ msgstr ""
 "Something went wrong while setting the form's completion to "
 "\"{{completed}}\": {{errorMessage}}"
 
+msgid "Invalid date ({{date}})"
+msgstr "Invalid date ({{date}})"
+
 msgid "{{title}} (disabled)"
 msgstr "{{title}} (disabled)"
 

package.json

@@ -34,6 +34,7 @@
         "@dhis2/cli-style": "10.5.1",
         "@dhis2/cypress-commands": "^10.0.1",
         "@dhis2/cypress-plugins": "^10.0.1",
+        "@dhis2/d2-i18n": "1.1.3",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "7.0.2",
@@ -48,7 +49,7 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.10.2",
-        "@dhis2/multi-calendar-dates": "^1.1.0",
+        "@dhis2/multi-calendar-dates": "^1.3.1",
         "@dhis2/ui": "^9.2.0",
         "@dhis2/ui-forms": "7.16.3",
         "@tanstack/react-query": "4.24.10",
@@ -79,8 +80,9 @@
         "node": ">=14.0.0"
     },
     "resolutions": {
-        "@dhis2/multi-calendar-dates": "^1.1.0",
+        "@dhis2/multi-calendar-dates": "^1.3.1",
         "@dhis2/ui": "^9.2.0",
-        "@dhis2/app-runtime": "^3.10.2"
+        "@dhis2/app-runtime": "^3.10.2",
+        "@dhis2/d2-i18n": "1.1.3"
     }
 }

src/bottom-bar/form-expiry-info.js

@@ -1,9 +1,9 @@
+import { useConfig } from '@dhis2/app-runtime'
 import { IconInfo16, colors, Tooltip } from '@dhis2/ui'
 import cx from 'classnames'
-import moment from 'moment'
 import React from 'react'
 import i18n from '../locales/index.js'
-import { useLockedContext } from '../shared/index.js'
+import { useLockedContext, getRelativeTime, DateText } from '../shared/index.js'
 import styles from './main-tool-bar.module.css'
 
 export default function FormExpiryInfo() {
@@ -12,14 +12,22 @@ export default function FormExpiryInfo() {
         lockStatus: { lockDate },
     } = useLockedContext()
 
+    const { systemInfo = {} } = useConfig()
+    const { serverTimeZoneId: timezone = 'Etc/UTC' } = systemInfo
+    // the lock date is returned in ISO calendar
+    const relativeTime = getRelativeTime({
+        startDate: lockDate,
+        calendar: 'gregory',
+        timezone,
+    })
+
     return (
         <>
             {!locked && lockDate && (
                 <Tooltip
-                    content={i18n.t(
-                        'This form closes and will be locked at {{-dateTime}}',
-                        { dateTime: lockDate.toLocaleString() }
-                    )}
+                    content={
+                        <DateText date={lockDate} includeTimeZone={true} />
+                    }
                 >
                     <span
                         className={cx(
@@ -33,7 +41,7 @@ export default function FormExpiryInfo() {
 
                         <span>
                             {i18n.t('Closes {{-relativeTime}}', {
-                                relativeTime: moment(lockDate).fromNow(),
+                                relativeTime,
                             })}
                         </span>
                     </span>

src/bottom-bar/form-expiry-info.test.js

@@ -0,0 +1,75 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { render as testingLibraryRender } from '@testing-library/react'
+import React from 'react'
+import { useLockedContext } from '../shared/locked-status/use-locked-context.js'
+import { render } from '../test-utils/render.js'
+import FormExpiryInfo from './form-expiry-info.js'
+
+jest.mock('@dhis2/app-runtime', () => ({
+    ...jest.requireActual('@dhis2/app-runtime'),
+    useConfig: jest.fn(() => ({
+        systemInfo: { serverTimeZoneId: 'Etc/UTC', calendar: 'gregory' },
+    })),
+}))
+
+jest.mock('../shared/locked-status/use-locked-context.js', () => ({
+    ...jest.requireActual('../shared/locked-status/use-locked-context.js'),
+    useLockedContext: jest.fn(() => ({
+        locked: false,
+        lockStatus: { lockDate: '2024-03-15T14:15:00' },
+    })),
+}))
+
+describe('FormExpiryInfo', () => {
+    beforeEach(() => {
+        jest.useFakeTimers('modern')
+        jest.setSystemTime(new Date('2024-03-15T12:15:00'))
+    })
+
+    afterEach(() => {
+        jest.useRealTimers()
+        jest.clearAllMocks()
+    })
+
+    it('shows nothing if locked', () => {
+        useLockedContext.mockImplementationOnce(() => ({
+            locked: true,
+            lockStatus: { lockDate: '2024-03-15T14:15:00' },
+        }))
+        // render without the wrapper as we just want to test this element is empty and wrapper introduces some extra divs
+        const { container } = testingLibraryRender(<FormExpiryInfo />)
+
+        expect(container).toBeEmptyDOMElement()
+    })
+
+    it('shows relative time for lockedDate, if not locked, there is a lockDate, and calendar:gregory', () => {
+        const { getByText } = render(<FormExpiryInfo />)
+
+        expect(getByText('Closes in 2 hours')).toBeInTheDocument()
+    })
+
+    it('shows relative time for lockedDate, if not locked, there is a lockDate, and calendar not gregory', () => {
+        useConfig.mockImplementation(() => ({
+            systemInfo: {
+                calendar: 'ethiopian',
+            },
+        }))
+        const { getByText } = render(<FormExpiryInfo />)
+
+        expect(getByText('Closes in 2 hours')).toBeInTheDocument()
+    })
+
+    it('corrects relative time for time zone differences', () => {
+        useConfig.mockImplementation(() => ({
+            systemInfo: {
+                serverTimeZoneId: 'America/Port-au-Prince',
+                calendar: 'gregory',
+            },
+        }))
+        const { getByText } = render(<FormExpiryInfo />)
+
+        // current browser time: 2024-03-15T12:15:00 UTC
+        // which is 2024-03-15T08:15:00 Port-au-Prince (GMT-4 due to DST)
+        expect(getByText('Closes in 6 hours')).toBeInTheDocument()
+    })
+})

src/context-selection/attribute-option-combo-selector-bar-item/attribute-option-combo-selector-bar-item.js

@@ -1,11 +1,10 @@
-import { useAlert } from '@dhis2/app-runtime'
+import { useAlert, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { SelectorBarItem } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import {
     selectors,
-    useClientServerDateUtils,
     useDataSetId,
     useMetadata,
     useOrgUnitId,
@@ -57,14 +56,16 @@ export default function AttributeOptionComboSelectorBarItem({
     )
     const [attributeOptionComboSelection, setAttributeOptionComboSelection] =
         useAttributeOptionComboSelection()
-    const { fromClientDate } = useClientServerDateUtils()
+    const { systemInfo = {} } = useConfig()
+    const { calendar = 'gregory' } = systemInfo
+
     const relevantCategoriesWithOptions =
         selectors.getCategoriesWithOptionsWithinPeriodWithOrgUnit(
             metadata,
             dataSetId,
             periodId,
             orgUnitId,
-            fromClientDate
+            calendar
         )
 
     const [open, setOpen] = useState(false)