diff --git a/src/dashboard/Data/Config/Config.react.js b/src/dashboard/Data/Config/Config.react.js index 273b0b8dc2..4f5a9e2dda 100644 --- a/src/dashboard/Data/Config/Config.react.js +++ b/src/dashboard/Data/Config/Config.react.js @@ -5,19 +5,20 @@ * This source code is licensed under the license found in the LICENSE file in * the root directory of this source tree. */ -import { ActionTypes } from 'lib/stores/ConfigStore'; -import Button from 'components/Button/Button.react'; -import ConfigDialog from 'dashboard/Data/Config/ConfigDialog.react'; -import EmptyState from 'components/EmptyState/EmptyState.react'; -import Icon from 'components/Icon/Icon.react'; -import { isDate } from 'lib/DateUtils'; -import Parse from 'parse'; -import React from 'react'; -import SidebarAction from 'components/Sidebar/SidebarAction'; -import subscribeTo from 'lib/subscribeTo'; -import TableHeader from 'components/Table/TableHeader.react'; -import TableView from 'dashboard/TableView.react'; -import Toolbar from 'components/Toolbar/Toolbar.react'; +import { ActionTypes } from 'lib/stores/ConfigStore'; +import Button from 'components/Button/Button.react'; +import ConfigDialog from 'dashboard/Data/Config/ConfigDialog.react'; +import DeleteParameterDialog from 'dashboard/Data/Config/DeleteParameterDialog.react'; +import EmptyState from 'components/EmptyState/EmptyState.react'; +import Icon from 'components/Icon/Icon.react'; +import { isDate } from 'lib/DateUtils'; +import Parse from 'parse'; +import React from 'react'; +import SidebarAction from 'components/Sidebar/SidebarAction'; +import subscribeTo from 'lib/subscribeTo'; +import TableHeader from 'components/Table/TableHeader.react'; +import TableView from 'dashboard/TableView.react'; +import Toolbar from 'components/Toolbar/Toolbar.react'; @subscribeTo('Config', 'config') class Config extends TableView { @@ -28,6 +29,7 @@ class Config extends TableView { this.action = new SidebarAction('Create a parameter', this.createParameter.bind(this)); this.state = { modalOpen: false, + showDeleteParameterDialog: false, modalParam: '', modalType: 'String', modalValue: '', @@ -56,20 +58,28 @@ class Config extends TableView { } renderExtras() { - if (!this.state.modalOpen) { - return null; - } const { currentApp = {} } = this.context; - return ( - this.setState({ modalOpen: false })} - param={this.state.modalParam} - type={this.state.modalType} - value={this.state.modalValue} - masterKeyOnly={this.state.modalMasterKeyOnly} - parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} /> - ); + let extras = null; + if (this.state.modalOpen) { + extras = ( + this.setState({ modalOpen: false })} + param={this.state.modalParam} + type={this.state.modalType} + value={this.state.modalValue} + masterKeyOnly={this.state.modalMasterKeyOnly} + parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} /> + ); + } else if (this.state.showDeleteParameterDialog) { + extras = ( + this.setState({ showDeleteParameterDialog: false })} + onConfirm={this.deleteParam.bind(this, this.state.modalParam)} /> + ); + } + return extras; } renderRow(data) { @@ -119,6 +129,11 @@ class Config extends TableView { } openModal() } + + let openDeleteParameterDialog = () => this.setState({ + showDeleteParameterDialog: true, + modalParam: data.param + }); return ( @@ -127,7 +142,7 @@ class Config extends TableView { {value} {data.masterKeyOnly.toString()} - + @@ -196,7 +211,9 @@ class Config extends TableView { this.props.config.dispatch( ActionTypes.DELETE, { param: name } - ) + ).then(() => { + this.setState({ showDeleteParameterDialog: false }); + }); } createParameter() { diff --git a/src/dashboard/Data/Config/DeleteParameterDialog.react.js b/src/dashboard/Data/Config/DeleteParameterDialog.react.js new file mode 100644 index 0000000000..4c4d76231d --- /dev/null +++ b/src/dashboard/Data/Config/DeleteParameterDialog.react.js @@ -0,0 +1,60 @@ +/* + * Copyright (c) 2016-present, Parse, LLC + * All rights reserved. + * + * This source code is licensed under the license found in the LICENSE file in + * the root directory of this source tree. + */ +import Field from 'components/Field/Field.react'; +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'; + +export default class DeleteParameterDialog extends React.Component { + constructor() { + super(); + + this.state = { + confirmation: '' + }; + } + + valid() { + if (this.state.confirmation === this.props.param) { + return true; + } + return false; + } + + render() { + let content = ( + + } + input={ + this.setState({ confirmation })} /> + } /> + ); + return ( + + {content} + + ); + } +}