From 5b4768df04fcdee77f2ab2b9976240c8df42117f Mon Sep 17 00:00:00 2001 From: ismay Date: Wed, 13 Mar 2024 12:00:56 +0100 Subject: [PATCH] fix: use correct component for skipprograms param --- src/components/FormFields/ListFieldMulti.js | 64 ++++++++++++++++ ...nsField.test.js => ListFieldMulti.test.js} | 10 +-- ...eledOptionsField.js => ListFieldSingle.js} | 14 ++-- .../FormFields/ListFieldSingle.test.js | 73 +++++++++++++++++++ src/components/FormFields/ParameterFields.js | 12 +-- .../FormFields/ParameterFields.test.js | 2 +- .../use-parameter-options.js | 4 +- 7 files changed, 157 insertions(+), 22 deletions(-) create mode 100644 src/components/FormFields/ListFieldMulti.js rename src/components/FormFields/{LabeledOptionsField.test.js => ListFieldMulti.test.js} (86%) rename src/components/FormFields/{LabeledOptionsField.js => ListFieldSingle.js} (78%) create mode 100644 src/components/FormFields/ListFieldSingle.test.js diff --git a/src/components/FormFields/ListFieldMulti.js b/src/components/FormFields/ListFieldMulti.js new file mode 100644 index 00000000..862b9132 --- /dev/null +++ b/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 ( + + ) + } + + if (error) { + return ( + + ) + } + + if (data.length === 0) { + return ( + + ) + } + + const labeledOptions = data.map(({ id, displayName }) => ({ + value: id, + label: displayName, + })) + + return ( + + ) +} + +const { string } = PropTypes + +ListFieldMulti.propTypes = { + label: string.isRequired, + name: string.isRequired, + parameterName: string.isRequired, +} + +export default ListFieldMulti diff --git a/src/components/FormFields/LabeledOptionsField.test.js b/src/components/FormFields/ListFieldMulti.test.js similarity index 86% rename from src/components/FormFields/LabeledOptionsField.test.js rename to src/components/FormFields/ListFieldMulti.test.js index 91919d21..aafc19f3 100644 --- a/src/components/FormFields/LabeledOptionsField.test.js +++ b/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('', () => { +describe('', () => { it('shows a message when there are no options', () => { useParameterOption.mockImplementation(() => ({ loading: false, @@ -30,7 +30,7 @@ describe('', () => {
{}}> {() => ( - + )} @@ -60,13 +60,13 @@ describe('', () => {
{}}> {() => ( - + )} ) - const actual = wrapper.find('LabeledOptionsField') + const actual = wrapper.find('ListFieldMulti') expect(actual).toHaveLength(1) }) diff --git a/src/components/FormFields/LabeledOptionsField.js b/src/components/FormFields/ListFieldSingle.js similarity index 78% rename from src/components/FormFields/LabeledOptionsField.js rename to src/components/FormFields/ListFieldSingle.js index 41f6322b..5098e0ba 100644 --- a/src/components/FormFields/LabeledOptionsField.js +++ b/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 ( ) } -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 diff --git a/src/components/FormFields/ListFieldSingle.test.js b/src/components/FormFields/ListFieldSingle.test.js new file mode 100644 index 00000000..5c4427eb --- /dev/null +++ b/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('', () => { + 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( +
{}}> + {() => ( + + + + )} + + ) + + 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( +
{}}> + {() => ( + + + + )} + + ) + + const actual = wrapper.find('ListFieldSingle') + + expect(actual).toHaveLength(1) + }) +}) diff --git a/src/components/FormFields/ParameterFields.js b/src/components/FormFields/ParameterFields.js index 0f439f0e..b47772e2 100644 --- a/src/components/FormFields/ParameterFields.js +++ b/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 = ( - ) break diff --git a/src/components/FormFields/ParameterFields.test.js b/src/components/FormFields/ParameterFields.test.js index 2084b248..855323af 100644 --- a/src/components/FormFields/ParameterFields.test.js +++ b/src/components/FormFields/ParameterFields.test.js @@ -191,7 +191,7 @@ describe('', () => { ) - const component = wrapper.find('LabeledOptionsField') + const component = wrapper.find('ListFieldSingle') expect(component).toHaveLength(1) }) diff --git a/src/hooks/parameter-options/use-parameter-options.js b/src/hooks/parameter-options/use-parameter-options.js index 03b1e8c7..bada42ca 100644 --- a/src/hooks/parameter-options/use-parameter-options.js +++ b/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 }