fix: handle compulsory data element operands [DHIS2-17647]

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-10-18T12:58:59.146Z\n"
-"PO-Revision-Date: 2024-10-18T12:58:59.146Z\n"
+"POT-Creation-Date: 2024-11-29T16:17:15.582Z\n"
+"PO-Revision-Date: 2024-11-29T16:17:15.582Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -81,6 +81,9 @@ msgstr "Couldn't validate the form. This does not effect form completion!"
 msgid "The form can't be completed while invalid"
 msgstr "The form can't be completed while invalid"
 
+msgid "Compulsory fields must be filled out before completing the form"
+msgstr "Compulsory fields must be filled out before completing the form"
+
 msgid "1 comment required"
 msgstr "1 comment required"
 
@@ -213,6 +216,9 @@ msgstr "Warning, saved"
 msgid "Locked, not editable"
 msgstr "Locked, not editable"
 
+msgid "Compulsory field"
+msgstr "Compulsory field"
+
 msgid "Help"
 msgstr "Help"
 

src/bottom-bar/complete-button.test.js

@@ -0,0 +1,220 @@
+import { waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { useMetadata } from '../shared/metadata/use-metadata.js'
+import { useDataSetId } from '../shared/use-context-selection/use-context-selection.js'
+import { useDataValueSet } from '../shared/use-data-value-set/use-data-value-set.js'
+import { useImperativeValidate } from '../shared/validation/use-imperative-validate.js'
+import { render } from '../test-utils/render.js'
+import CompleteButton from './complete-button.js'
+
+const mockShow = jest.fn()
+const mockSetFormCompletion = jest
+    .fn()
+    .mockImplementation(() => Promise.resolve())
+const mockValidate = jest.fn().mockImplementation(() =>
+    Promise.resolve({
+        commentRequiredViolations: [],
+        validationRuleViolations: [],
+    })
+)
+const mockSetCompleteAttempted = jest.fn()
+const mockIsComplete = jest.fn()
+
+jest.mock('@dhis2/app-runtime', () => ({
+    ...jest.requireActual('@dhis2/app-runtime'),
+    useAlert: jest.fn(() => ({
+        show: mockShow,
+    })),
+}))
+
+jest.mock('../shared/use-context-selection/use-context-selection.js', () => ({
+    ...jest.requireActual(
+        '../shared/use-context-selection/use-context-selection.js'
+    ),
+    useDataSetId: jest.fn(),
+}))
+
+jest.mock('../shared/metadata/use-metadata.js', () => ({
+    useMetadata: jest.fn(),
+}))
+
+jest.mock('../shared/validation/use-imperative-validate.js', () => ({
+    useImperativeValidate: jest.fn(),
+}))
+
+jest.mock('../shared/completion/use-set-form-completion-mutation.js', () => ({
+    ...jest.requireActual(
+        '../shared/completion/use-set-form-completion-mutation.js'
+    ),
+    useSetFormCompletionMutation: jest.fn(() => ({
+        mutateAsync: mockSetFormCompletion,
+    })),
+}))
+
+jest.mock('../shared/stores/entry-form-store.js', () => ({
+    ...jest.requireActual('../shared/stores/entry-form-store.js'),
+    useEntryFormStore: jest.fn().mockImplementation((func) => {
+        const state = {
+            setCompleteAttempted: mockSetCompleteAttempted,
+        }
+        return func(state)
+    }),
+}))
+
+jest.mock('../shared/stores/data-value-store.js', () => ({
+    ...jest.requireActual('../shared/stores/data-value-store.js'),
+    useValueStore: jest.fn().mockImplementation((func) => {
+        const state = {
+            isComplete: mockIsComplete,
+        }
+        return func(state)
+    }),
+}))
+
+jest.mock('../shared/use-data-value-set/use-data-value-set.js', () => ({
+    useDataValueSet: jest.fn(),
+}))
+
+const MOCK_METADATA = {
+    dataSets: {
+        data_set_id_1: {
+            id: 'data_set_id_1',
+        },
+        data_set_id_compulsory_validation_without_cdeo: {
+            id: 'data_set_id_compulsory_validation_without_cdeo',
+            compulsoryDataElementOperands: [],
+            compulsoryFieldsCompleteOnly: true,
+        },
+        data_set_id_compulsory_validation_with_cdeo: {
+            id: 'data_set_id_compulsory_validation_without_cdeo',
+            compulsoryDataElementOperands: [
+                {
+                    dataElement: {
+                        id: 'de-id-1',
+                    },
+                    categoryOptionCombo: {
+                        id: 'coc-id-1',
+                    },
+                },
+                {
+                    dataElement: {
+                        id: 'de-id-2',
+                    },
+                    categoryOptionCombo: {
+                        id: 'coc-id-2',
+                    },
+                },
+            ],
+            compulsoryFieldsCompleteOnly: true,
+        },
+    },
+}
+
+const MOCK_DATA = {
+    dataValues: {
+        'de-id-1': {
+            'coc-id-1': {
+                value: '5',
+            },
+        },
+        'de-id-2': {
+            'coc-id-2': {
+                value: '10',
+            },
+        },
+    },
+}
+
+const MOCK_DATA_INCOMPLETE = {
+    dataValues: {
+        'de-id-1': {
+            'coc-id-1': {
+                value: '5',
+            },
+        },
+    },
+}
+
+describe('CompleteButton', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        useImperativeValidate.mockReturnValue(mockValidate)
+    })
+
+    it('validates form and completes when clicked', () => {
+        mockIsComplete.mockReturnValue(false)
+        useDataSetId.mockReturnValue(['data_set_id_1'])
+        useDataValueSet.mockReturnValue({ data: MOCK_DATA })
+        useMetadata.mockReturnValue({ data: MOCK_METADATA })
+        const { getByText } = render(<CompleteButton />)
+
+        userEvent.click(getByText('Mark complete'))
+        expect(mockValidate).toHaveBeenCalledOnce()
+        expect(mockSetFormCompletion).toHaveBeenCalledWith({ completed: true })
+    })
+
+    it('completes if the compulsoryFieldsCompleteOnly:true but there are no compulsory data element operands', () => {
+        mockIsComplete.mockReturnValue(false)
+        useDataSetId.mockReturnValue([
+            'data_set_id_compulsory_validation_without_cdeo',
+        ])
+        useDataValueSet.mockReturnValue({ data: MOCK_DATA })
+        useMetadata.mockReturnValue({ data: MOCK_METADATA })
+        const { getByText } = render(<CompleteButton />)
+
+        userEvent.click(getByText('Mark complete'))
+        expect(mockValidate).toHaveBeenCalledOnce()
+        expect(mockSetFormCompletion).toHaveBeenCalledWith({ completed: true })
+        // completeAttempted only set if the complete is rejected due to compulsory data element operands
+        expect(mockSetCompleteAttempted).not.toHaveBeenCalled()
+    })
+
+    it('does not complete and shows error if the compulsoryFieldsCompleteOnly:true and there are compulsory data element operands without values', async () => {
+        mockIsComplete.mockReturnValue(false)
+        useDataSetId.mockReturnValue([
+            'data_set_id_compulsory_validation_with_cdeo',
+        ])
+        useDataValueSet.mockReturnValue({ data: MOCK_DATA_INCOMPLETE })
+        useMetadata.mockReturnValue({ data: MOCK_METADATA })
+        const { getByText } = render(<CompleteButton />)
+
+        userEvent.click(getByText('Mark complete'))
+        expect(mockValidate).not.toHaveBeenCalled()
+        expect(mockSetFormCompletion).not.toHaveBeenCalled()
+        expect(mockSetCompleteAttempted).toHaveBeenCalledWith(true)
+        await waitFor(() =>
+            expect(mockShow).toHaveBeenCalledWith(
+                'Compulsory fields must be filled out before completing the form'
+            )
+        )
+    })
+
+    it('completes if the compulsoryFieldsCompleteOnly:true and there are compulsory data element operands but all have values', () => {
+        mockIsComplete.mockReturnValue(false)
+        useDataSetId.mockReturnValue([
+            'data_set_id_compulsory_validation_with_cdeo',
+        ])
+        useDataValueSet.mockReturnValue({ data: MOCK_DATA })
+        useMetadata.mockReturnValue({ data: MOCK_METADATA })
+        const { getByText } = render(<CompleteButton />)
+
+        userEvent.click(getByText('Mark complete'))
+        expect(mockValidate).toHaveBeenCalledOnce()
+        expect(mockSetFormCompletion).toHaveBeenCalledWith({ completed: true })
+        // completeAttempted only set if the complete is rejected due to compulsory data element operands
+        expect(mockSetCompleteAttempted).not.toHaveBeenCalled()
+    })
+
+    it('marks form as incomplete if form is completed', () => {
+        mockIsComplete.mockReturnValue(true)
+        useDataSetId.mockReturnValue(['data_set_id_1'])
+        useDataValueSet.mockReturnValue({ data: MOCK_DATA })
+        useMetadata.mockReturnValue({ data: MOCK_METADATA })
+        const { getByText } = render(<CompleteButton />)
+
+        userEvent.click(getByText('Mark incomplete'))
+        expect(mockValidate).not.toHaveBeenCalledOnce()
+        expect(mockSetFormCompletion).toHaveBeenCalledWith({ completed: false })
+    })
+})

src/bottom-bar/use-on-complete-callback.js

@@ -12,6 +12,8 @@ import {
     useSetFormCompletionMutation,
     useSetFormCompletionMutationKey,
     validationResultsSidebarId,
+    useHasCompulsoryDataElementOperandsToFillOut,
+    useEntryFormStore,
 } from '../shared/index.js'
 
 const validationFailedMessage = i18n.t(
@@ -121,7 +123,9 @@ export default function useOnCompleteCallback() {
     const { offline } = useConnectionStatus()
     const { data: metadata } = useMetadata()
     const [dataSetId] = useDataSetId()
-    const dataSet = selectors.getDataSetById(metadata, dataSetId)
+    const dataSet = dataSetId
+        ? selectors.getDataSetById(metadata, dataSetId)
+        : {}
     const { validCompleteOnly } = dataSet
     const { show: showErrorAlert } = useAlert((message) => message, {
         critical: true,
@@ -135,11 +139,26 @@ export default function useOnCompleteCallback() {
         useOnCompleteWhenValidNotRequiredClick()
     const onCompleteWithoutValidationClick =
         useOnCompleteWithoutValidationClick()
+    const hasCompulsoryDataElementOperandsToFillOut =
+        useHasCompulsoryDataElementOperandsToFillOut()
+    const setCompleteAttempted = useEntryFormStore(
+        (state) => state.setCompleteAttempted
+    )
 
     return () => {
         let promise
 
-        if (isLoading && offline) {
+        if (hasCompulsoryDataElementOperandsToFillOut) {
+            setCompleteAttempted(true)
+            cancelCompletionMutation()
+            promise = Promise.reject(
+                new Error(
+                    i18n.t(
+                        'Compulsory fields must be filled out before completing the form'
+                    )
+                )
+            )
+        } else if (isLoading && offline) {
             cancelCompletionMutation()
             // No need to complete when the completion request
             // hasn't been sent yet due to being offline.

src/context-selection/contextual-help-sidebar/cell.js

@@ -25,6 +25,9 @@ const Cell = ({ value, state }) => (
                 {state === 'SYNCED' && (
                     <div className={styles.topRightTriangle} />
                 )}
+                {state === 'COMPULSORY' && (
+                    <div className={styles.topRightAsterisk}>*</div>
+                )}
             </div>
             <div className={styles.bottomRightIndicator}>
                 {state === 'HAS_COMMENT' && (

src/context-selection/contextual-help-sidebar/cell.module.css

@@ -10,6 +10,7 @@
 .input {
     composes: densePadding from '../../data-workspace/inputs/inputs.module.css';
     composes: alignToEnd from '../../data-workspace/inputs/inputs.module.css';
+    padding-inline-end: 16px;
     outline: 1px solid var(--colors-grey400);
 }
 
@@ -45,3 +46,7 @@
 .bottomRightTriangle {
     composes: bottomRightTriangle from '../../data-workspace/data-entry-cell/data-entry-cell.module.css';
 }
+
+.topRightAsterisk {
+    composes: topRightAsterisk from '../../data-workspace/data-entry-cell/data-entry-cell.module.css';
+}

src/context-selection/contextual-help-sidebar/cells-legend.js

@@ -67,6 +67,12 @@ export default function CellsLegend() {
                 name={i18n.t('Locked, not editable')}
                 state="LOCKED"
             />
+            <Divider />
+
+            <CellsLegendSymbol
+                name={i18n.t('Compulsory field')}
+                state="COMPULSORY"
+            />
         </ExpandableUnit>
     )
 }

src/data-workspace/category-combo-table-body/category-combo-table-body.test.js

@@ -2,10 +2,21 @@ import { Table } from '@dhis2/ui'
 import { getAllByTestId, getByTestId, getByText } from '@testing-library/react'
 import React from 'react'
 import { useMetadata } from '../../shared/metadata/use-metadata.js'
+import { useDataSetId } from '../../shared/use-context-selection/use-context-selection.js'
 import { render } from '../../test-utils/index.js'
 import { FinalFormWrapper } from '../final-form-wrapper.js'
 import { CategoryComboTableBody } from './category-combo-table-body.js'
 
+jest.mock(
+    '../../shared/use-context-selection/use-context-selection.js',
+    () => ({
+        ...jest.requireActual(
+            '../../shared/use-context-selection/use-context-selection.js'
+        ),
+        useDataSetId: jest.fn(),
+    })
+)
+
 jest.mock('../../shared/metadata/use-metadata.js', () => ({
     useMetadata: jest.fn(),
 }))
@@ -453,6 +464,7 @@ const metadata = {
 
 describe('<CategoryComboTableBody />', () => {
     useMetadata.mockReturnValue({ data: metadata })
+    useDataSetId.mockReturnValue(['dataSet1'])
 
     it('should render rows and columns based on the data elements and categorycombo', () => {
         const tableDataElements = [

src/data-workspace/data-entry-cell/data-entry-cell.module.css

@@ -108,6 +108,11 @@
     border-inline-start: 3px solid transparent;
 }
 
+.topRightAsterisk {
+    color: var(--colors-grey600);
+    inline-size: 8px;
+}
+
 .locked {
     background-color: var(--colors-grey050);
 }