From f29e13c8b7e14ddc916a5d314a86704a8b61c4a2 Mon Sep 17 00:00:00 2001
From: Martin <martin@moid.se>
Date: Fri, 14 Aug 2020 14:06:46 +0200
Subject: [PATCH] fix: Decimals and Steps options only allow positive values
 (DHIS2-9002, DHIS2-9194) (#1161)

* New base type PositiveNumberBaseType added that only allows positive whole numbers
* Math.round prevents decimal numbers and returns Number instead of String, which fixes DHIS2-9194
* parseInt(value, 10) to allow for clearing the value with backspace
* Applies to both typing manually and by using the browser's built-in "stepper arrows".
* New help text for Steps, as per Slack discussion, Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.
---
 packages/app/i18n/en.pot                      |  4 +-
 .../Options/PositiveNumberBaseType.js         | 67 +++++++++++++++++++
 .../Options/RangeAxisDecimals.js              |  5 +-
 .../Options/RangeAxisSteps.js                 |  7 +-
 4 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js

diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
index b796c10260..543e770478 100644
--- a/packages/app/i18n/en.pot
+++ b/packages/app/i18n/en.pot
@@ -471,7 +471,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"
diff --git a/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js b/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js
new file mode 100644
index 0000000000..bf770512ba
--- /dev/null
+++ b/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js
@@ -0,0 +1,67 @@
+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,
+    disabled,
+}) => (
+    <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
+                disabled={disabled}
+            />
+        </div>
+    </div>
+)
+
+PositiveNumberBaseType.propTypes = {
+    disabled: PropTypes.bool,
+    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)
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
index 4b5f49b594..7d5a91178f 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
@@ -2,11 +2,10 @@ import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 
-import TextBaseOption from './TextBaseOption'
+import PositiveNumberBaseType from './PositiveNumberBaseType'
 
 const RangeAxisDecimals = ({ disabled }) => (
-    <TextBaseOption
-        type="number"
+    <PositiveNumberBaseType
         width="96px"
         label={i18n.t('Decimals')}
         disabled={disabled}
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
index 7bd038dcfa..5bee613cb8 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
@@ -2,14 +2,13 @@ import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 
-import TextBaseOption from './TextBaseOption'
+import PositiveNumberBaseType from './PositiveNumberBaseType'
 
 export const RangeAxisSteps = ({ disabled }) => (
-    <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')}
         disabled={disabled}