Migrate add and edit incoming webhook components to redux (#6885)
* Migrate add incoming webhook components to redux * Migrate edit incoming webhook components to redux * Add tests
Этот коммит содержится в:
Carlos Tadeu Panato Junior
коммит произвёл
George Goldberg
George Goldberg
родитель
ff0a790516
Коммит
3043b5d52a
@@ -12,48 +12,57 @@ import SpinnerButton from 'components/spinner_button.jsx';
|
||||
import {Link} from 'react-router/es6';
|
||||
|
||||
export default class AbstractIncomingWebhook extends React.Component {
|
||||
static get propTypes() {
|
||||
return {
|
||||
team: PropTypes.object
|
||||
};
|
||||
static propTypes = {
|
||||
|
||||
/**
|
||||
* The current team
|
||||
*/
|
||||
team: PropTypes.object.isRequired,
|
||||
|
||||
/**
|
||||
* The header text to render, has id and defaultMessage
|
||||
*/
|
||||
header: PropTypes.object.isRequired,
|
||||
|
||||
/**
|
||||
* The footer text to render, has id and defaultMessage
|
||||
*/
|
||||
footer: PropTypes.object.isRequired,
|
||||
|
||||
/**
|
||||
* The server error text after a failed action
|
||||
*/
|
||||
serverError: PropTypes.string.isRequired,
|
||||
|
||||
/**
|
||||
* The hook used to set the initial state
|
||||
*/
|
||||
initialHook: PropTypes.object,
|
||||
|
||||
/**
|
||||
* The async function to run when the action button is pressed
|
||||
*/
|
||||
action: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.state = this.getStateFromHook(this.props.initialHook || {});
|
||||
}
|
||||
|
||||
this.updateDisplayName = this.updateDisplayName.bind(this);
|
||||
this.updateDescription = this.updateDescription.bind(this);
|
||||
this.updateChannelId = this.updateChannelId.bind(this);
|
||||
|
||||
this.state = {
|
||||
displayName: '',
|
||||
description: '',
|
||||
channelId: '',
|
||||
getStateFromHook = (hook) => {
|
||||
return {
|
||||
displayName: hook.display_name || '',
|
||||
description: hook.description || '',
|
||||
channelId: hook.channel_id || '',
|
||||
saving: false,
|
||||
serverError: '',
|
||||
clientError: null
|
||||
};
|
||||
|
||||
if (typeof this.performAction === 'undefined') {
|
||||
throw new TypeError('Subclasses must override performAction');
|
||||
}
|
||||
|
||||
if (typeof this.header === 'undefined') {
|
||||
throw new TypeError('Subclasses must override header');
|
||||
}
|
||||
|
||||
if (typeof this.footer === 'undefined') {
|
||||
throw new TypeError('Subclasses must override footer');
|
||||
}
|
||||
|
||||
this.performAction = this.performAction.bind(this);
|
||||
this.header = this.header.bind(this);
|
||||
this.footer = this.footer.bind(this);
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.state.saving) {
|
||||
@@ -86,30 +95,31 @@ export default class AbstractIncomingWebhook extends React.Component {
|
||||
description: this.state.description
|
||||
};
|
||||
|
||||
this.performAction(hook);
|
||||
this.props.action(hook).then(() => this.setState({saving: false}));
|
||||
}
|
||||
|
||||
updateDisplayName(e) {
|
||||
updateDisplayName = (e) => {
|
||||
this.setState({
|
||||
displayName: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
updateDescription(e) {
|
||||
updateDescription = (e) => {
|
||||
this.setState({
|
||||
description: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
updateChannelId(e) {
|
||||
updateChannelId = (e) => {
|
||||
this.setState({
|
||||
channelId: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
var headerToRender = this.header();
|
||||
var footerToRender = this.footer();
|
||||
var headerToRender = this.props.header;
|
||||
var footerToRender = this.props.footer;
|
||||
|
||||
return (
|
||||
<div className='backstage-content'>
|
||||
<BackstageHeader>
|
||||
@@ -212,7 +222,7 @@ export default class AbstractIncomingWebhook extends React.Component {
|
||||
<div className='backstage-form__footer'>
|
||||
<FormError
|
||||
type='backstage'
|
||||
errors={[this.state.serverError, this.state.clientError]}
|
||||
errors={[this.props.serverError, this.state.clientError]}
|
||||
/>
|
||||
<Link
|
||||
className='btn btn-sm'
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {addIncomingHook} from 'actions/integration_actions.jsx';
|
||||
import {browserHistory} from 'react-router/es6';
|
||||
|
||||
import AbstractIncomingWebhook from './abstract_incoming_webhook.jsx';
|
||||
|
||||
export default class AddIncomingWebhook extends AbstractIncomingWebhook {
|
||||
performAction(hook) {
|
||||
addIncomingHook(
|
||||
hook,
|
||||
(data) => {
|
||||
browserHistory.push(`/${this.props.team.name}/integrations/confirm?type=incoming_webhooks&id=${data.id}`);
|
||||
},
|
||||
(err) => {
|
||||
this.setState({
|
||||
saving: false,
|
||||
serverError: err.message
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
header() {
|
||||
return {id: 'integrations.add', defaultMessage: 'Add'};
|
||||
}
|
||||
|
||||
footer() {
|
||||
return {id: 'add_incoming_webhook.save', defaultMessage: 'Save'};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {browserHistory} from 'react-router/es6';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import AbstractIncomingWebhook from 'components/integrations/components/abstract_incoming_webhook.jsx';
|
||||
|
||||
const HEADER = {id: 'integrations.add', defaultMessage: 'Add'};
|
||||
const FOOTER = {id: 'add_incoming_webhook.save', defaultMessage: 'Save'};
|
||||
|
||||
export default class AddIncomingWebhook extends React.PureComponent {
|
||||
static propTypes = {
|
||||
|
||||
/**
|
||||
* The current team
|
||||
*/
|
||||
team: PropTypes.object.isRequired,
|
||||
|
||||
/**
|
||||
* The request state for createIncomingHook action. Contains status and error
|
||||
*/
|
||||
createIncomingHookRequest: PropTypes.object.isRequired,
|
||||
|
||||
actions: PropTypes.shape({
|
||||
|
||||
/**
|
||||
* The function to call to add a new incoming webhook
|
||||
*/
|
||||
createIncomingHook: PropTypes.func.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
serverError: ''
|
||||
};
|
||||
}
|
||||
|
||||
addIncomingHook = async (hook) => {
|
||||
this.setState({serverError: ''});
|
||||
|
||||
const data = await this.props.actions.createIncomingHook(hook);
|
||||
if (data) {
|
||||
browserHistory.push(`/${this.props.team.name}/integrations/confirm?type=incoming_webhooks&id=${data.id}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.createIncomingHookRequest.error) {
|
||||
this.setState({serverError: this.props.createIncomingHookRequest.error.message});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AbstractIncomingWebhook
|
||||
team={this.props.team}
|
||||
header={HEADER}
|
||||
footer={FOOTER}
|
||||
action={this.addIncomingHook}
|
||||
serverError={this.state.serverError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import {createIncomingHook} from 'mattermost-redux/actions/integrations';
|
||||
|
||||
import AddIncomingWebhook from './add_incoming_webhook.jsx';
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
return {
|
||||
...ownProps,
|
||||
createIncomingHookRequest: state.requests.integrations.createIncomingHook
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
actions: bindActionCreators({
|
||||
createIncomingHook
|
||||
}, dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AddIncomingWebhook);
|
||||
@@ -1,74 +0,0 @@
|
||||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {browserHistory} from 'react-router/es6';
|
||||
import IntegrationStore from 'stores/integration_store.jsx';
|
||||
import {updateIncomingHook, loadIncomingHooks} from 'actions/integration_actions.jsx';
|
||||
|
||||
import AbstractIncomingWebhook from './abstract_incoming_webhook.jsx';
|
||||
import TeamStore from 'stores/team_store.jsx';
|
||||
|
||||
export default class EditIncomingWebhook extends AbstractIncomingWebhook {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
|
||||
this.originalIncomingHook = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
IntegrationStore.addChangeListener(this.handleIntegrationChange);
|
||||
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true') {
|
||||
loadIncomingHooks();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
IntegrationStore.removeChangeListener(this.handleIntegrationChange);
|
||||
}
|
||||
|
||||
handleIntegrationChange() {
|
||||
const teamId = TeamStore.getCurrentId();
|
||||
|
||||
const hooks = IntegrationStore.getIncomingWebhooks(teamId);
|
||||
const loading = !IntegrationStore.hasReceivedIncomingWebhooks(teamId);
|
||||
|
||||
if (!loading) {
|
||||
this.originalIncomingHook = hooks.filter((hook) => hook.id === this.props.location.query.id)[0];
|
||||
|
||||
this.setState({
|
||||
displayName: this.originalIncomingHook.display_name,
|
||||
description: this.originalIncomingHook.description,
|
||||
channelId: this.originalIncomingHook.channel_id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
performAction(hook) {
|
||||
if (this.originalIncomingHook.id) {
|
||||
hook.id = this.originalIncomingHook.id;
|
||||
}
|
||||
|
||||
updateIncomingHook(
|
||||
hook,
|
||||
() => {
|
||||
browserHistory.push(`/${this.props.team.name}/integrations/incoming_webhooks`);
|
||||
},
|
||||
(err) => {
|
||||
this.setState({
|
||||
saving: false,
|
||||
serverError: err.message
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
header() {
|
||||
return {id: 'integrations.edit', defaultMessage: 'Edit'};
|
||||
}
|
||||
|
||||
footer() {
|
||||
return {id: 'update_incoming_webhook.update', defaultMessage: 'Update'};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {browserHistory} from 'react-router/es6';
|
||||
import LoadingScreen from 'components/loading_screen.jsx';
|
||||
|
||||
import AbstractIncomingWebhook from 'components/integrations/components/abstract_incoming_webhook.jsx';
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const HEADER = {id: 'integrations.edit', defaultMessage: 'Edit'};
|
||||
const FOOTER = {id: 'update_incoming_webhook.update', defaultMessage: 'Update'};
|
||||
|
||||
export default class EditIncomingWebhook extends React.PureComponent {
|
||||
static propTypes = {
|
||||
|
||||
/**
|
||||
* The current team
|
||||
*/
|
||||
team: PropTypes.object.isRequired,
|
||||
|
||||
/**
|
||||
* The incoming webhook to edit
|
||||
*/
|
||||
hook: PropTypes.object,
|
||||
|
||||
/**
|
||||
* The id of the incoming webhook to edit
|
||||
*/
|
||||
hookId: PropTypes.string.isRequired,
|
||||
|
||||
/**
|
||||
* The request state for updateIncomingHook action. Contains status and error
|
||||
*/
|
||||
updateIncomingHookRequest: PropTypes.object.isRequired,
|
||||
|
||||
actions: PropTypes.shape({
|
||||
|
||||
/**
|
||||
* The function to call to update an incoming webhook
|
||||
*/
|
||||
updateIncomingHook: PropTypes.func.isRequired,
|
||||
|
||||
/**
|
||||
* The function to call to get an incoming webhook
|
||||
*/
|
||||
getIncomingHook: PropTypes.func.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showConfirmModal: false,
|
||||
serverError: ''
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true') {
|
||||
this.props.actions.getIncomingHook(this.props.hookId);
|
||||
}
|
||||
}
|
||||
|
||||
editIncomingHook = async (hook) => {
|
||||
this.newHook = hook;
|
||||
|
||||
if (this.props.hook.id) {
|
||||
hook.id = this.props.hook.id;
|
||||
}
|
||||
|
||||
if (this.props.hook.token) {
|
||||
hook.token = this.props.hook.token;
|
||||
}
|
||||
|
||||
await this.submitHook();
|
||||
}
|
||||
|
||||
submitHook = async () => {
|
||||
this.setState({serverError: ''});
|
||||
|
||||
const data = await this.props.actions.updateIncomingHook(this.newHook);
|
||||
|
||||
if (data) {
|
||||
browserHistory.push(`/${this.props.team.name}/integrations/incoming_webhooks`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.updateIncomingHookRequest.error) {
|
||||
this.setState({serverError: this.props.updateIncomingHookRequest.error.message});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.hook) {
|
||||
return <LoadingScreen/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AbstractIncomingWebhook
|
||||
team={this.props.team}
|
||||
header={HEADER}
|
||||
footer={FOOTER}
|
||||
action={this.editIncomingHook}
|
||||
serverError={this.state.serverError}
|
||||
initialHook={this.props.hook}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import {updateIncomingHook, getIncomingHook} from 'mattermost-redux/actions/integrations';
|
||||
|
||||
import EditIncomingWebhook from './edit_incoming_webhook.jsx';
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
const hookId = ownProps.location.query.id;
|
||||
|
||||
return {
|
||||
...ownProps,
|
||||
hookId,
|
||||
hook: state.entities.integrations.incomingHooks[hookId],
|
||||
updateIncomingHookRequest: state.requests.integrations.createIncomingHook
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
actions: bindActionCreators({
|
||||
updateIncomingHook,
|
||||
getIncomingHook
|
||||
}, dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EditIncomingWebhook);
|
||||
Ссылка в новой задаче
Block a user