fix: Decimals and Steps options only allow positive values (DHIS2-9002, DHIS2-9194)

packages/app/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: 2020-07-28T10:55:58.947Z\n"
-"PO-Revision-Date: 2020-07-28T10:55:58.947Z\n"
+"POT-Creation-Date: 2020-07-28T11:59:27.684Z\n"
+"PO-Revision-Date: 2020-07-28T11:59:27.684Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -453,7 +453,9 @@ msgstr ""
 msgid "Auto"
 msgstr ""
 
-msgid "The number of axis steps between the min and max values"
+msgid ""
+"Number of axis tick steps, including the min and max. A value of 2 or lower "
+"will be ignored."
 msgstr ""
 
 msgid "Steps"

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { InputField } from '@dhis2/ui'
+
+import { sGetUiOptions } from '../../../reducers/ui'
+import { acSetUiOptions } from '../../../actions/ui'
+import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+
+export const PositiveNumberBaseType = ({
+    label,
+    placeholder,
+    helpText,
+    width,
+    option,
+    value,
+    onChange,
+}) => (
+    <div className={tabSectionOption.className}>
+        <div>
+            <InputField
+                type="number"
+                label={label}
+                onChange={({ value }) => {
+                    const parsedValue = parseInt(value, 10)
+                    parsedValue >= 0
+                        ? onChange(Math.round(value))
+                        : onChange(parsedValue ? 0 : null)
+                }}
+                name={option.name}
+                value={value || value === 0 ? value.toString() : ''}
+                helpText={helpText}
+                placeholder={placeholder}
+                inputWidth={width}
+                dense
+            />
+        </div>
+    </div>
+)
+
+PositiveNumberBaseType.propTypes = {
+    helpText: PropTypes.string,
+    label: PropTypes.string,
+    option: PropTypes.object,
+    placeholder: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.string,
+    onChange: PropTypes.func,
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    value: sGetUiOptions(state)[ownProps.option.name],
+    enabled: sGetUiOptions(state)[ownProps.option.name] !== undefined,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: value =>
+        dispatch(acSetUiOptions({ [ownProps.option.name]: value })),
+})
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PositiveNumberBaseType)

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

@@ -2,11 +2,10 @@ import React from 'react'
 
 import i18n from '@dhis2/d2-i18n'
 
-import TextBaseOption from './TextBaseOption'
+import PositiveNumberBaseType from './PositiveNumberBaseType'
 
 const RangeAxisDecimals = () => (
-    <TextBaseOption
-        type="number"
+    <PositiveNumberBaseType
         width="96px"
         label={i18n.t('Decimals')}
         placeholder={i18n.t('Auto')}

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

@@ -2,14 +2,13 @@ import React from 'react'
 
 import i18n from '@dhis2/d2-i18n'
 
-import TextBaseOption from './TextBaseOption'
+import PositiveNumberBaseType from './PositiveNumberBaseType'
 
 export const RangeAxisSteps = () => (
-    <TextBaseOption
-        type="number"
+    <PositiveNumberBaseType
         width="96px"
         helpText={i18n.t(
-            'The number of axis steps between the min and max values'
+            'Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.'
         )}
         label={i18n.t('Steps')}
         placeholder={i18n.t('Auto')}