fix: use correct component for skipprograms param

src/components/FormFields/ListFieldMulti.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MultiSelectFieldFF, ReactFinalForm, MultiSelectField } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import { useParameterOption } from '../../hooks/parameter-options'
+
+const { Field } = ReactFinalForm
+
+// This field has options that have both an id and a label.
+const ListFieldMulti = ({ label, name, parameterName }) => {
+    const { loading, error, data } = useParameterOption(parameterName)
+    const disabledProps = { disabled: true, label }
+
+    if (loading) {
+        return (
+            <MultiSelectField
+                {...disabledProps}
+                helpText={i18n.t('Loading options')}
+            />
+        )
+    }
+
+    if (error) {
+        return (
+            <MultiSelectField
+                {...disabledProps}
+                helpText={i18n.t('Something went wrong whilst loading options')}
+            />
+        )
+    }
+
+    if (data.length === 0) {
+        return (
+            <MultiSelectField
+                {...disabledProps}
+                helpText={i18n.t('No options available')}
+            />
+        )
+    }
+
+    const labeledOptions = data.map(({ id, displayName }) => ({
+        value: id,
+        label: displayName,
+    }))
+
+    return (
+        <Field
+            name={name}
+            component={MultiSelectFieldFF}
+            options={labeledOptions}
+            label={label}
+        />
+    )
+}
+
+const { string } = PropTypes
+
+ListFieldMulti.propTypes = {
+    label: string.isRequired,
+    name: string.isRequired,
+    parameterName: string.isRequired,
+}
+
+export default ListFieldMulti

src/components/FormFields/LabeledOptionsField.test.js → src/components/FormFields/ListFieldMulti.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useParameterOption } from '../../hooks/parameter-options'
-import LabeledOptionsField from './LabeledOptionsField'
+import ListFieldMulti from './ListFieldMulti'
 
 const { Form } = ReactFinalForm
 
@@ -14,7 +14,7 @@ afterEach(() => {
     jest.resetAllMocks()
 })
 
-describe('<LabeledOptionsField>', () => {
+describe('<ListFieldMulti>', () => {
     it('shows a message when there are no options', () => {
         useParameterOption.mockImplementation(() => ({
             loading: false,
@@ -30,7 +30,7 @@ describe('<LabeledOptionsField>', () => {
             <Form onSubmit={() => {}}>
                 {() => (
                     <form>
-                        <LabeledOptionsField {...props} />
+                        <ListFieldMulti {...props} />
                     </form>
                 )}
             </Form>
@@ -60,13 +60,13 @@ describe('<LabeledOptionsField>', () => {
             <Form onSubmit={() => {}}>
                 {() => (
                     <form>
-                        <LabeledOptionsField {...props} />
+                        <ListFieldMulti {...props} />
                     </form>
                 )}
             </Form>
         )
 
-        const actual = wrapper.find('LabeledOptionsField')
+        const actual = wrapper.find('ListFieldMulti')
 
         expect(actual).toHaveLength(1)
     })

src/components/FormFields/LabeledOptionsField.js → src/components/FormFields/ListFieldSingle.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-    MultiSelectFieldFF,
     SingleSelectFieldFF,
     ReactFinalForm,
     SingleSelectField,
@@ -11,8 +10,8 @@ import { useParameterOption } from '../../hooks/parameter-options'
 
 const { Field } = ReactFinalForm
 
-// A labeled options field has options that have both an id and a label.
-const LabeledOptionsField = ({ label, name, parameterName, multiple }) => {
+// This field has options that have both an id and a label.
+const ListFieldSingle = ({ label, name, parameterName }) => {
     const { loading, error, data } = useParameterOption(parameterName)
     const disabledProps = { disabled: true, label }
 
@@ -51,20 +50,19 @@ const LabeledOptionsField = ({ label, name, parameterName, multiple }) => {
     return (
         <Field
             name={name}
-            component={multiple ? MultiSelectFieldFF : SingleSelectFieldFF}
+            component={SingleSelectFieldFF}
             options={labeledOptions}
             label={label}
         />
     )
 }
 
-const { string, bool } = PropTypes
+const { string } = PropTypes
 
-LabeledOptionsField.propTypes = {
+ListFieldSingle.propTypes = {
     label: string.isRequired,
     name: string.isRequired,
     parameterName: string.isRequired,
-    multiple: bool,
 }
 
-export default LabeledOptionsField
+export default ListFieldSingle

src/components/FormFields/ListFieldSingle.test.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { ReactFinalForm } from '@dhis2/ui'
+import { useParameterOption } from '../../hooks/parameter-options'
+import ListFieldSingle from './ListFieldSingle'
+
+const { Form } = ReactFinalForm
+
+jest.mock('../../hooks/parameter-options', () => ({
+    useParameterOption: jest.fn(),
+}))
+
+afterEach(() => {
+    jest.resetAllMocks()
+})
+
+describe('<ListFieldSingle>', () => {
+    it('shows a message when there are no options', () => {
+        useParameterOption.mockImplementation(() => ({
+            loading: false,
+            error: undefined,
+            data: [],
+        }))
+        const props = {
+            label: 'label',
+            name: 'name',
+            parameterName: 'parameterName',
+        }
+        const wrapper = mount(
+            <Form onSubmit={() => {}}>
+                {() => (
+                    <form>
+                        <ListFieldSingle {...props} />
+                    </form>
+                )}
+            </Form>
+        )
+
+        const actual = wrapper
+            .find({
+                'data-test': 'dhis2-uiwidgets-singleselectfield-help',
+            })
+            .text()
+
+        expect(actual).toEqual(expect.stringContaining('No options available'))
+    })
+
+    it('renders the field when there are options', () => {
+        useParameterOption.mockImplementation(() => ({
+            loading: false,
+            error: undefined,
+            data: [{ id: 'id', displayName: 'displayName' }],
+        }))
+        const props = {
+            label: 'label',
+            name: 'fieldName',
+            parameterName: 'parameterName',
+        }
+        const wrapper = mount(
+            <Form onSubmit={() => {}}>
+                {() => (
+                    <form>
+                        <ListFieldSingle {...props} />
+                    </form>
+                )}
+            </Form>
+        )
+
+        const actual = wrapper.find('ListFieldSingle')
+
+        expect(actual).toHaveLength(1)
+    })
+})

src/components/FormFields/ParameterFields.js

@@ -15,7 +15,8 @@ import DataIntegrityReportTypeField from './Custom/DataIntegrityReportTypeField'
 import AggregatedDataExchangeField from './Custom/AggregatedDataExchangeField'
 import PushAnalyticsModeField from './Custom/PushAnalyticsModeField'
 import styles from './ParameterFields.module.css'
-import LabeledOptionsField from './LabeledOptionsField'
+import ListFieldSingle from './ListFieldSingle'
+import ListFieldMulti from './ListFieldMulti'
 import { formatToString } from './formatters'
 
 const { Field } = ReactFinalForm
@@ -44,7 +45,7 @@ const getCustomComponent = (jobType, parameterName) => {
             if (parameterName === 'skipTableTypes') {
                 return SkipTableTypesField
             } else if (parameterName === 'skipPrograms') {
-                return LabeledOptionsField
+                return ListFieldMulti
             }
 
             return null
@@ -56,9 +57,9 @@ const getCustomComponent = (jobType, parameterName) => {
             return null
         case 'HTML_PUSH_ANALYTICS':
             if (parameterName === 'dashboard') {
-                return LabeledOptionsField
+                return ListFieldSingle
             } else if (parameterName === 'receivers') {
-                return LabeledOptionsField
+                return ListFieldSingle
             } else if (parameterName === 'mode') {
                 return PushAnalyticsModeField
             }
@@ -152,10 +153,9 @@ const ParameterFields = ({ jobType }) => {
                     break
                 case 'java.util.List':
                     parameterComponent = (
-                        <LabeledOptionsField
+                        <ListFieldMulti
                             {...defaultProps}
                             parameterName={name}
-                            multiple
                         />
                     )
                     break

src/components/FormFields/ParameterFields.test.js

@@ -191,7 +191,7 @@ describe('<ParameterFields>', () => {
             </Form>
         )
 
-        const component = wrapper.find('LabeledOptionsField')
+        const component = wrapper.find('ListFieldSingle')
 
         expect(component).toHaveLength(1)
     })

src/hooks/parameter-options/use-parameter-options.js

@@ -39,7 +39,7 @@ const query = {
     },
     programs: {
         resource: 'programs',
-    }
+    },
 }
 
 const useParameterOptions = () => {
@@ -84,7 +84,7 @@ const useParameterOptions = () => {
             dataIntegrityChecks,
             dashboard,
             receivers,
-            skipPrograms
+            skipPrograms,
         }
 
         return { ...fetch, data }