diff --git a/src/dashboard/Data/Config/AddArrayEntryDialog.react.js b/src/dashboard/Data/Config/AddArrayEntryDialog.react.js index 28791993c6..be1b392986 100644 --- a/src/dashboard/Data/Config/AddArrayEntryDialog.react.js +++ b/src/dashboard/Data/Config/AddArrayEntryDialog.react.js @@ -10,11 +10,17 @@ import Label from 'components/Label/Label.react'; import Modal from 'components/Modal/Modal.react'; import React from 'react'; import TextInput from 'components/TextInput/TextInput.react'; +import Checkbox from 'components/Checkbox/Checkbox.react'; export default class AddArrayEntryDialog extends React.Component { constructor() { super(); - this.state = { value: '' }; + this.state = { + value: '', + showMismatchRow: false, + mismatchConfirmed: false, + parsedType: '', + }; this.inputRef = React.createRef(); } @@ -24,9 +30,6 @@ export default class AddArrayEntryDialog extends React.Component { } } - valid() { - return this.state.value !== ''; - } getValue() { try { @@ -36,8 +39,57 @@ export default class AddArrayEntryDialog extends React.Component { } } + getType(value) { + if (Array.isArray(value)) { + return 'array'; + } + if (value === null) { + return 'null'; + } + return typeof value; + } + + handleConfirm() { + const parsed = this.getValue(); + const entryType = this.getType(parsed); + const lastType = this.props.lastType; + + if (lastType && entryType !== lastType) { + if (!this.state.showMismatchRow) { + this.setState( + { + showMismatchRow: true, + mismatchConfirmed: false, + parsedType: entryType, + }, + () => { + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + } + ); + return; + } + if (!this.state.mismatchConfirmed) { + return; + } + } + + this.props.onConfirm(parsed); + this.setState({ + value: '', + showMismatchRow: false, + mismatchConfirmed: false, + parsedType: '', + }); + } + render() { - return ( + const confirmDisabled = + this.state.value === '' || + (this.state.showMismatchRow && !this.state.mismatchConfirmed); + + const addEntryModal = ( this.props.onConfirm(this.getValue())} - disabled={!this.valid()} + onConfirm={this.handleConfirm.bind(this)} + disabled={confirmDisabled} > this.setState({ value })} + onChange={value => + this.setState({ + value, + showMismatchRow: false, + mismatchConfirmed: false, + }) + } /> } /> + {this.state.showMismatchRow && ( + + Previous item type is {this.props.lastType}, new entry type is {this.state.parsedType}. + + } + /> + } + input={ + this.setState({ mismatchConfirmed: checked })} + /> + } + /> + )} ); + + return addEntryModal; } } diff --git a/src/dashboard/Data/Config/Config.react.js b/src/dashboard/Data/Config/Config.react.js index c6c1145530..6981cfcf5c 100644 --- a/src/dashboard/Data/Config/Config.react.js +++ b/src/dashboard/Data/Config/Config.react.js @@ -48,6 +48,7 @@ class Config extends TableView { lastNote: null, showAddEntryDialog: false, addEntryParam: '', + addEntryLastType: null, }; this.noteTimeout = null; } @@ -122,6 +123,7 @@ class Config extends TableView { onConfirm={value => this.addArrayEntry(this.state.addEntryParam, value) } + lastType={this.state.addEntryLastType} /> ); } @@ -207,6 +209,16 @@ class Config extends TableView { }; } + getEntryType(value) { + if (Array.isArray(value)) { + return 'array'; + } + if (value === null) { + return 'null'; + } + return typeof value; + } + renderRow(data) { // Parse modal data const { value, modalValue, type } = this.parseValueForModal(data.value); @@ -491,11 +503,25 @@ class Config extends TableView { } openAddEntryDialog(param) { - this.setState({ showAddEntryDialog: true, addEntryParam: param }); + const params = this.props.config.data.get('params'); + const arr = params?.get(param); + let lastType = null; + if (Array.isArray(arr) && arr.length > 0) { + lastType = this.getEntryType(arr[arr.length - 1]); + } + this.setState({ + showAddEntryDialog: true, + addEntryParam: param, + addEntryLastType: lastType, + }); } closeAddEntryDialog() { - this.setState({ showAddEntryDialog: false, addEntryParam: '' }); + this.setState({ + showAddEntryDialog: false, + addEntryParam: '', + addEntryLastType: null, + }); } async addArrayEntry(param, value) {