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

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)

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)