fix: show format warning when json invalid [DHIS2-14202] (#117)

dhis2 · Dec 23, 2022 · 87179dc · 87179dc
1 parent 7e58b9b
commit 87179dc
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 14 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -220,6 +220,13 @@ export function rejectUpdateValue(namespace, key, value, error) {
     }
 }
 
+export function rejectFormat(error) {
+    return {
+        type: actions.FORMAT_VALUE_REJECTED,
+        error,
+    }
+}
+
 /**
  * requestDeleteKey - Request deleteion of a key
  *

diff --git a/src/components/display/edit/EditDisplay.js b/src/components/display/edit/EditDisplay.js
@@ -8,8 +8,13 @@ import {
     fetchAndToggleNamespace,
     updateValue,
     valueChange,
+    rejectFormat,
     rejectUpdateValue,
 } from '../../../actions/index.js'
+import {
+    jsonEditorCompact,
+    jsonEditorFormat,
+} from '../../../actions/jsonEditorActions.js'
 import ConfirmNavigationDialog from '../../dialog/ConfirmNavigationDialog.js'
 import styles from '../Display.module.css'
 import EditArea from './EditArea.js'
@@ -25,6 +30,10 @@ export class EditDisplay extends Component {
         this.state = {
             valueError: null,
         }
+        this.handleChangeValue = this.handleChangeValue.bind(this)
+        this.handleFormatValue = this.handleFormatValue.bind(this)
+        this.handleFormatValueCompact = this.handleFormatValueCompact.bind(this)
+        this.handleSaveValue = this.handleSaveValue.bind(this)
     }
 
     componentDidMount() {
@@ -96,6 +105,22 @@ export class EditDisplay extends Component {
         }
     }
 
+    handleFormatValue() {
+        if (this.state.valueError) {
+            this.props.rejectFormat('Failed to format value: Not valid JSON')
+        } else {
+            this.props.jsonFormat()
+        }
+    }
+
+    handleFormatValueCompact() {
+        if (this.state.valueError) {
+            this.props.rejectFormat('Failed to format value: Not valid JSON')
+        } else {
+            this.props.jsonCompact()
+        }
+    }
+
     render() {
         const { namespace, selectedKey } = this.props
         let path = ''
@@ -117,13 +142,15 @@ export class EditDisplay extends Component {
                 />
                 <EditToolbar
                     path={path}
-                    handleSave={this.handleSaveValue.bind(this)}
+                    handleSave={this.handleSaveValue}
+                    handleFormat={this.handleFormatValue}
+                    handleFormatCompact={this.handleFormatValueCompact}
                 />
                 <EditArea
                     namespace={namespace}
                     selectedKey={selectedKey}
                     value={this.props.value}
-                    valueChange={this.handleChangeValue.bind(this)}
+                    valueChange={this.handleChangeValue}
                 />
             </Paper>
         )
@@ -168,6 +195,15 @@ const mapDispatchToProps = (dispatch) => ({
     rejectUpdateValue(namespace, key, value, err) {
         dispatch(rejectUpdateValue(namespace, key, value, err))
     },
+    rejectFormat(err) {
+        dispatch(rejectFormat(err))
+    },
+    jsonFormat() {
+        dispatch(jsonEditorFormat())
+    },
+    jsonCompact() {
+        dispatch(jsonEditorCompact())
+    },
 })
 
 export default withRouter(

diff --git a/src/components/display/edit/EditToolbar.js b/src/components/display/edit/EditToolbar.js
@@ -20,8 +20,6 @@ import {
     jsonEditorUndo,
     jsonEditorRedo,
     jsonEditorChangeMode,
-    jsonEditorCompact,
-    jsonEditorFormat,
 } from '../../../actions/jsonEditorActions.js'
 import { debounce } from '../../../utils/utils.js'
 import JSONSearchBar from '../../utils/JSONSearchBar.js'
@@ -167,13 +165,13 @@ export class EditToolbar extends React.Component {
                             <MenuItem value={'code'} primaryText="Code" />
                         </DropDownMenu>
                         <IconButton
-                            onClick={this.props.jsonFormat}
+                            onClick={this.props.handleFormat}
                             tooltip="Format"
                         >
                             <FormatAlignLeftIcon />
                         </IconButton>
                         <IconButton
-                            onClick={this.props.jsonCompact}
+                            onClick={this.props.handleFormatCompact}
                             tooltip="Format Compact"
                         >
                             <FormatAlignJustifyIcon />
@@ -199,14 +197,14 @@ export class EditToolbar extends React.Component {
 }
 
 EditToolbar.propTypes = {
+    handleFormat: PropTypes.func,
+    handleFormatCompact: PropTypes.func,
     handleSave: PropTypes.func,
     path: PropTypes.string,
     mode: PropTypes.string,
-    jsonCompact: PropTypes.func,
     jsonSearchAction: PropTypes.func,
     jsonCollapse: PropTypes.func,
     jsonExpand: PropTypes.func,
-    jsonFormat: PropTypes.func,
     jsonUndo: PropTypes.func,
     jsonRedo: PropTypes.func,
     jsonChangeMode: PropTypes.func,
@@ -228,12 +226,6 @@ const mapDispatchToProps = (dispatch) => ({
     jsonExpand() {
         dispatch(jsonEditorExpand())
     },
-    jsonCompact() {
-        dispatch(jsonEditorCompact())
-    },
-    jsonFormat() {
-        dispatch(jsonEditorFormat())
-    },
     jsonUndo() {
         dispatch(jsonEditorUndo())
     },

diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
@@ -39,6 +39,8 @@ export const UPDATE_VALUE_FULFILLED = 'UPDATE_VALUE_FULFILLED'
 export const UPDATE_VALUE_PENDING = 'UPDATE_VALUE_PENDING'
 export const UPDATE_VALUE_REJECTED = 'UPDATE_VALUE_REJECTED'
 
+export const FORMAT_VALUE_REJECTED = 'FORMAT_VALUE_REJECTED'
+
 export const CREATE_VALUE_FULFILLED = 'CREATE_VALUE_FULFILLED'
 export const CREATE_VALUE_PENDING = 'CREATE_VALUE_PENDING'
 export const CREATE_VALUE_REJECTED = 'CREATE_VALUE_REJECTED'

diff --git a/src/reducers/snackbarReducer.js b/src/reducers/snackbarReducer.js
@@ -33,6 +33,15 @@ const snackbar = (state = initialState, action) => {
             }
         }
 
+        case actions.FORMAT_VALUE_REJECTED: {
+            const msg = action.error || 'Failed to format'
+
+            return {
+                ...state,
+                message: msg,
+            }
+        }
+
         case actions.FETCH_KEYS_REJECTED: {
             return {
                 ...state,