fix: options with numeric values (sortOrder) (#564)

Fixes the issue of options with numerical values not working correctly.

Specifically, sortOrder, which has been also refactored to remove the None value in the select, since the checkbox already can tell if there is no sort order (option off).
The select then has only the 2 values for "low to high" and "high to low".
When the option is enabled via the checkboxes, "low to high" is preselected effectively changing the option value in the ui.

packages/app/src/components/VisualizationOptions/Options/RadioBaseOption.js

@@ -10,13 +10,13 @@ import { acSetUiOptions } from '../../../actions/ui'
 export const RadioBaseOption = ({ option, label, value, onChange }) => (
     <RadioGroupField
         name={option.name}
-        value={String(value)}
+        value={value}
         onChange={({ value }) => onChange(value)}
         label={label}
         dense
     >
         {option.items.map(({ id, label }) => (
-            <Radio key={id} label={label} value={String(id)} />
+            <Radio key={id} label={label} value={id} />
         ))}
     </RadioGroupField>
 )

packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js

@@ -22,7 +22,7 @@ export const SelectBaseOption = ({
     onChange,
     onToggle,
 }) => {
-    const selected = option.items.find(item => item.id === String(value))
+    const selected = option.items.find(item => item.id === value)
 
     return (
         <div
@@ -60,7 +60,7 @@ export const SelectBaseOption = ({
                         {option.items.map(({ id, label }) => (
                             <SingleSelectOption
                                 key={id}
-                                value={String(id)}
+                                value={id}
                                 label={label}
                             />
                         ))}

packages/app/src/components/VisualizationOptions/Options/SortOrder.js

@@ -1,27 +1,89 @@
-import React from 'react'
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 
 import i18n from '@dhis2/d2-i18n'
 
-import SelectBaseOption from './SelectBaseOption'
+import { Checkbox, SingleSelectField, SingleSelectOption } from '@dhis2/ui-core'
+
+import { sGetUiOptions } from '../../../reducers/ui'
+import { acSetUiOptions } from '../../../actions/ui'
+
+import {
+    tabSectionOptionItem,
+    tabSectionOptionToggleable,
+} from '../styles/VisualizationOptions.style.js'
+
 import { options } from '../../../modules/options'
 
 const optionName = 'sortOrder'
 const defaultValue = options[optionName].defaultValue
 
-const SortOrder = () => (
-    <SelectBaseOption
-        toggleable={true}
-        label={i18n.t('Custom sort order')}
-        option={{
-            name: optionName,
-            defaultValue: defaultValue,
-            items: [
-                { id: '-1', label: i18n.t('Low to high') },
-                { id: '1', label: i18n.t('High to low') },
-                { id: '0', label: i18n.t('None') },
-            ],
-        }}
-    />
-)
-
-export default SortOrder
+const SortOrder = ({ value, onChange }) => {
+    const [enabled, setEnabled] = useState(Boolean(value))
+
+    const options = [
+        { value: -1, label: i18n.t('Low to high') },
+        { value: 1, label: i18n.t('High to low') },
+    ]
+
+    const selected = options.find(option => option.value === value) || {}
+
+    const onToggle = checked => {
+        setEnabled(checked)
+
+        onChange({
+            sortOrder: checked ? -1 : defaultValue,
+        })
+    }
+
+    return (
+        <div className={enabled ? '' : tabSectionOptionItem.className}>
+            <Checkbox
+                checked={enabled}
+                label={i18n.t('Custom sort order')}
+                name="sortOrder-toggle"
+                onChange={({ checked }) => onToggle(checked)}
+                dense
+            />
+            {enabled ? (
+                <div className={tabSectionOptionToggleable.className}>
+                    <SingleSelectField
+                        name="sortOrder-select"
+                        selected={selected}
+                        onChange={({ selected }) =>
+                            onChange({
+                                sortOrder: selected.value,
+                            })
+                        }
+                        inputWidth="280px"
+                        dense
+                    >
+                        {options.map(({ value, label }) => (
+                            <SingleSelectOption
+                                key={value}
+                                value={value}
+                                label={label}
+                            />
+                        ))}
+                    </SingleSelectField>
+                </div>
+            ) : null}
+        </div>
+    )
+}
+
+SortOrder.propTypes = {
+    value: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = state => ({
+    value: sGetUiOptions(state)[optionName] || defaultValue,
+})
+
+const mapDispatchToProps = dispatch => ({
+    onChange: value => dispatch(acSetUiOptions(value)),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SortOrder)

packages/app/src/modules/options.js

@@ -23,7 +23,7 @@ export const options = {
     completedOnly: { defaultValue: false, requestable: true },
     hideSubtitle: { defaultValue: false, requestable: false },
     hideTitle: { defaultValue: false, requestable: false },
-    sortOrder: { defaultValue: '0', requestable: false },
+    sortOrder: { defaultValue: 0, requestable: false },
     subtitle: { defaultValue: undefined, requestable: false },
     title: { defaultValue: undefined, requestable: false },
 
@@ -57,7 +57,7 @@ export const options = {
     regression: { defaultValue: false, requestable: false },
     cumulative: { defaultValue: false, requestable: false },
     measureCriteria: { defaultValue: undefined, requestable: true },
-    topLimit: { defaultValue: '0', requestable: false },
+    topLimit: { defaultValue: 0, requestable: false },
 }
 
 export const computedOptions = {