// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import * as AsyncClient from 'utils/async_client.jsx';
import IntegrationStore from 'stores/integration_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import * as Utils from 'utils/utils.jsx';
import {loadTeamCommands} from 'actions/integration_actions.jsx';
import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
import {FormattedMessage} from 'react-intl';
import FormError from 'components/form_error.jsx';
import {browserHistory, Link} from 'react-router/es6';
import SpinnerButton from 'components/spinner_button.jsx';
import Constants from 'utils/constants.jsx';
import ConfirmModal from 'components/confirm_modal.jsx';
const REQUEST_POST = 'P';
const REQUEST_GET = 'G';
export default class EditCommand extends React.Component {
static get propTypes() {
return {
team: React.PropTypes.object,
location: React.PropTypes.object
};
}
constructor(props) {
super(props);
this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
this.submitCommand = this.submitCommand.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.handleConfirmModal = this.handleConfirmModal.bind(this);
this.confirmModalDismissed = this.confirmModalDismissed.bind(this);
this.updateDisplayName = this.updateDisplayName.bind(this);
this.updateDescription = this.updateDescription.bind(this);
this.updateTrigger = this.updateTrigger.bind(this);
this.updateUrl = this.updateUrl.bind(this);
this.updateMethod = this.updateMethod.bind(this);
this.updateUsername = this.updateUsername.bind(this);
this.updateIconUrl = this.updateIconUrl.bind(this);
this.updateAutocomplete = this.updateAutocomplete.bind(this);
this.updateAutocompleteHint = this.updateAutocompleteHint.bind(this);
this.updateAutocompleteDescription = this.updateAutocompleteDescription.bind(this);
this.originalCommand = null;
this.newCommand = null;
const teamId = TeamStore.getCurrentId();
this.state = {
displayName: '',
description: '',
trigger: '',
url: '',
method: REQUEST_POST,
username: '',
iconUrl: '',
autocomplete: false,
autocompleteHint: '',
autocompleteDescription: '',
saving: false,
serverError: '',
clientError: null,
showConfirmModal: false,
commands: IntegrationStore.getCommands(teamId),
loading: !IntegrationStore.hasReceivedCommands(teamId)
};
}
componentDidMount() {
IntegrationStore.addChangeListener(this.handleIntegrationChange);
if (window.mm_config.EnableCommands === 'true') {
loadTeamCommands();
}
}
componentWillUnmount() {
IntegrationStore.removeChangeListener(this.handleIntegrationChange);
}
handleConfirmModal() {
this.setState({showConfirmModal: true});
}
confirmModalDismissed() {
this.setState({showConfirmModal: false});
}
submitCommand() {
AsyncClient.editCommand(
this.newCmd,
browserHistory.push('/' + this.props.team.name + '/integrations/commands'),
(err) => {
this.setState({
saving: false,
serverError: err.message
});
}
);
}
handleUpdate() {
this.setState({
saving: true,
serverError: '',
clientError: ''
});
this.submitCommand();
}
handleIntegrationChange() {
const teamId = TeamStore.getCurrentId();
this.setState({
commands: IntegrationStore.getCommands(teamId),
loading: !IntegrationStore.hasReceivedCommands(teamId)
});
if (!this.state.loading) {
this.originalCommand = this.state.commands.filter((command) => command.id === this.props.location.query.id)[0];
this.setState({
displayName: this.originalCommand.display_name,
description: this.originalCommand.description,
trigger: this.originalCommand.trigger,
url: this.originalCommand.url,
method: this.originalCommand.method,
username: this.originalCommand.username,
iconUrl: this.originalCommand.icon_url,
autocomplete: this.originalCommand.auto_complete,
autocompleteHint: this.originalCommand.auto_complete_hint,
autocompleteDescription: this.originalCommand.auto_complete_desc
});
}
}
handleSubmit(e) {
e.preventDefault();
if (this.state.saving) {
return;
}
this.setState({
saving: true,
serverError: '',
clientError: ''
});
let triggerWord = this.state.trigger.trim().toLowerCase();
if (triggerWord.indexOf('/') === 0) {
triggerWord = triggerWord.substr(1);
}
const command = {
display_name: this.state.displayName,
description: this.state.description,
trigger: triggerWord,
url: this.state.url.trim(),
method: this.state.method,
username: this.state.username,
icon_url: this.state.iconUrl,
auto_complete: this.state.autocomplete
};
if (this.originalCommand.id) {
command.id = this.originalCommand.id;
}
if (command.auto_complete) {
command.auto_complete_desc = this.state.autocompleteDescription;
command.auto_complete_hint = this.state.autocompleteHint;
}
if (!command.trigger) {
this.setState({
saving: false,
clientError: (