fix: remove custom title when Auto is selected (DHIS2-8252) (#636)

* fix: remove custom title when Auto is selected (DHIS2-8252) Also fixed the subtitle option to work in the same way as the title. Before when no custom subtitle was specified, the Custom subtitle was selected with an empty value. Now Auto means not hidden subtitle but also not custom subtitle. The subtitle is actually auto generated in some situations (depending on vis type, presence of title...)
dhis2 · Feb 10, 2020 · 44ed1a5 · 44ed1a5
1 parent 7fddd76
commit 44ed1a5
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js b/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { createSelector } from 'reselect'
 
 import i18n from '@dhis2/d2-i18n'
 import { Label, Radio, RadioGroup } from '@dhis2/ui-core'
@@ -16,18 +17,27 @@ import {
     tabSectionOptionToggleable,
 } from '../styles/VisualizationOptions.style.js'
 
+const HIDE_SUBTITLE_AUTO = 'AUTO'
+const HIDE_SUBTITLE_NONE = 'NONE'
+const HIDE_SUBTITLE_CUSTOM = 'CUSTOM'
+
 class HideSubtitle extends Component {
     constructor(props) {
         super(props)
 
-        this.defaultState = { value: 'NONE' }
+        this.defaultState = { value: HIDE_SUBTITLE_AUTO }
 
         this.state = props.value ? { value: props.value } : this.defaultState
     }
 
     onChange = ({ value }) => {
         this.setState({ value })
-        this.props.onChange(value === 'NONE')
+        this.props.onChange(
+            value === HIDE_SUBTITLE_NONE,
+            value === HIDE_SUBTITLE_AUTO
+                ? undefined
+                : this.props.subtitle || undefined
+        )
     }
 
     render() {
@@ -48,13 +58,17 @@ class HideSubtitle extends Component {
                     dense
                 >
                     {[
-                        { id: 'NONE', label: i18n.t('None') },
-                        { id: 'CUSTOM', label: i18n.t('Custom') },
+                        {
+                            id: HIDE_SUBTITLE_AUTO,
+                            label: i18n.t('Auto generated'),
+                        },
+                        { id: HIDE_SUBTITLE_NONE, label: i18n.t('None') },
+                        { id: HIDE_SUBTITLE_CUSTOM, label: i18n.t('Custom') },
                     ].map(({ id, label }) => (
                         <Radio key={id} label={label} value={id} dense />
                     ))}
                 </RadioGroup>
-                {value === 'CUSTOM' ? (
+                {value === HIDE_SUBTITLE_CUSTOM ? (
                     <div className={tabSectionOptionToggleable.className}>
                         <Subtitle inline />
                     </div>
@@ -65,18 +79,29 @@ class HideSubtitle extends Component {
 }
 
 HideSubtitle.propTypes = {
+    subtitle: PropTypes.string,
     value: PropTypes.string,
     visualizationType: PropTypes.string,
     onChange: PropTypes.func,
 }
 
+const hideSubtitleSelector = createSelector([sGetUiOptions], uiOptions =>
+    uiOptions.hideSubtitle
+        ? HIDE_SUBTITLE_NONE
+        : uiOptions.subtitle === undefined
+        ? HIDE_SUBTITLE_AUTO
+        : HIDE_SUBTITLE_CUSTOM
+)
+
 const mapStateToProps = state => ({
     visualizationType: sGetUiType(state),
-    value: sGetUiOptions(state).hideSubtitle ? 'NONE' : 'CUSTOM',
+    value: hideSubtitleSelector(state),
+    subtitle: sGetUiOptions(state).subtitle,
 })
 
 const mapDispatchToProps = dispatch => ({
-    onChange: enabled => dispatch(acSetUiOptions({ hideSubtitle: enabled })),
+    onChange: (hideSubtitle, subtitle) =>
+        dispatch(acSetUiOptions({ hideSubtitle, subtitle })),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(HideSubtitle)
diff --git a/packages/app/src/components/VisualizationOptions/Options/HideTitle.js b/packages/app/src/components/VisualizationOptions/Options/HideTitle.js
@@ -17,18 +17,27 @@ import {
     tabSectionOptionToggleable,
 } from '../styles/VisualizationOptions.style.js'
 
+const HIDE_TITLE_AUTO = 'AUTO'
+const HIDE_TITLE_NONE = 'NONE'
+const HIDE_TITLE_CUSTOM = 'CUSTOM'
+
 class HideTitle extends Component {
     constructor(props) {
         super(props)
 
-        this.defaultState = { value: 'AUTO' }
+        this.defaultState = { value: HIDE_TITLE_AUTO }
 
         this.state = props.value ? { value: props.value } : this.defaultState
     }
 
-    onChange = ({ value }) => {
+    onRadioGroupChange = ({ value }) => {
         this.setState({ value })
-        this.props.onChange(value === 'NONE')
+        this.props.onChange(
+            value === HIDE_TITLE_NONE,
+            value === HIDE_TITLE_AUTO
+                ? undefined
+                : this.props.title || undefined
+        )
     }
 
     render() {
@@ -44,19 +53,22 @@ class HideTitle extends Component {
                 </Label>
                 <RadioGroup
                     name="hideTitle-selector"
-                    onChange={this.onChange}
+                    onChange={this.onRadioGroupChange}
                     value={value}
                     dense
                 >
                     {[
-                        { id: 'AUTO', label: i18n.t('Auto generated') },
-                        { id: 'NONE', label: i18n.t('None') },
-                        { id: 'CUSTOM', label: i18n.t('Custom') },
+                        {
+                            id: HIDE_TITLE_AUTO,
+                            label: i18n.t('Auto generated'),
+                        },
+                        { id: HIDE_TITLE_NONE, label: i18n.t('None') },
+                        { id: HIDE_TITLE_CUSTOM, label: i18n.t('Custom') },
                     ].map(({ id, label }) => (
                         <Radio key={id} label={label} value={id} dense />
                     ))}
                 </RadioGroup>
-                {value === 'CUSTOM' ? (
+                {value === HIDE_TITLE_CUSTOM ? (
                     <div className={tabSectionOptionToggleable.className}>
                         <Title inline />
                     </div>
@@ -67,26 +79,29 @@ class HideTitle extends Component {
 }
 
 HideTitle.propTypes = {
+    title: PropTypes.string,
     value: PropTypes.string,
     visualizationType: PropTypes.string,
     onChange: PropTypes.func,
 }
 
 const hideTitleSelector = createSelector([sGetUiOptions], uiOptions =>
     uiOptions.hideTitle
-        ? 'NONE'
+        ? HIDE_TITLE_NONE
         : uiOptions.title === undefined
-        ? 'AUTO'
-        : 'CUSTOM'
+        ? HIDE_TITLE_AUTO
+        : HIDE_TITLE_CUSTOM
 )
 
 const mapStateToProps = state => ({
     visualizationType: sGetUiType(state),
     value: hideTitleSelector(state),
+    title: sGetUiOptions(state).title,
 })
 
 const mapDispatchToProps = dispatch => ({
-    onChange: enabled => dispatch(acSetUiOptions({ hideTitle: enabled })),
+    onChange: (hideTitle, title) =>
+        dispatch(acSetUiOptions({ hideTitle, title })),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(HideTitle)