IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Migrate add and edit incoming webhook components to redux (#6885)

Browse Source 
* Migrate add incoming webhook components to redux

* Migrate edit incoming webhook components to redux

* Add tests
This commit is contained in:
Carlos Tadeu Panato Junior
2017-07-27 10:16:16 +02:00
committed by George Goldberg
parent ff0a790516
commit 3043b5d52a
13 changed files with 386 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
model/incoming_webhook.go
View File

@@ -7,6 +7,7 @@ import (
"bytes"
"encoding/json"
"io"
"net/http"
"regexp"
)
@@ -79,35 +80,36 @@ func IncomingWebhookListFromJson(data io.Reader) []*IncomingWebhook {
func (o *IncomingWebhook) IsValid() *AppError {
if len(o.Id) != 26 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.id.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.id.app_error", nil, "", http.StatusBadRequest)
}
if o.CreateAt == 0 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.create_at.app_error", nil, "id="+o.Id)
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.create_at.app_error", nil, "id="+o.Id, http.StatusBadRequest)
}
if o.UpdateAt == 0 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.update_at.app_error", nil, "id="+o.Id)
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.update_at.app_error", nil, "id="+o.Id, http.StatusBadRequest)
}
if len(o.UserId) != 26 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.user_id.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.user_id.app_error", nil, "", http.StatusBadRequest)
}
if len(o.ChannelId) != 26 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.channel_id.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.channel_id.app_error", nil, "", http.StatusBadRequest)
}
if len(o.TeamId) != 26 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.team_id.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.team_id.app_error", nil, "", http.StatusBadRequest)
}
if len(o.DisplayName) > 64 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.display_name.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.display_name.app_error", nil, "", http.StatusBadRequest)
}
if len(o.Description) > 128 {
return NewLocAppError("IncomingWebhook.IsValid", "model.incoming_hook.description.app_error", nil, "")
return NewAppError("IncomingWebhook.IsValid", "model.incoming_hook.description.app_error", nil, "", http.StatusBadRequest)
}
return nil

84
webapp/components/integrations/components/abstract_incoming_webhook.jsx
View File

@@ -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'

32
webapp/components/integrations/components/add_incoming_webhook.jsx
View File

@@ -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'};
}
}

68
webapp/components/integrations/components/add_incoming_webhook/add_incoming_webhook.jsx Normal file
View File

@@ -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}
/>
);
}
}

25
webapp/components/integrations/components/add_incoming_webhook/index.js Normal file
View File

@@ -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);

74
webapp/components/integrations/components/edit_incoming_webhook.jsx
View File

@@ -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'};
}
}

112
webapp/components/integrations/components/edit_incoming_webhook/edit_incoming_webhook.jsx Normal file
View File

@@ -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}
/>
);
}
}

30
webapp/components/integrations/components/edit_incoming_webhook/index.js Normal file
View File

@@ -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);

4
webapp/routes/route_integrations.jsx
View File

@@ -25,13 +25,13 @@ export default {
{
path: 'add',
getComponents: (location, callback) => {
System.import('components/integrations/components/add_incoming_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
System.import('components/integrations/components/add_incoming_webhook').then(RouteUtils.importComponentSuccess(callback));
}
},
{
path: 'edit',
getComponents: (location, callback) => {
System.import('components/integrations/components/edit_incoming_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
System.import('components/integrations/components/edit_incoming_webhook').then(RouteUtils.importComponentSuccess(callback));
}
}
]

26
webapp/tests/components/integrations/__snapshots__/add_incoming_hook.test.jsx.snap Normal file
View File

@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/integrations/AddIncomingWebhook should match snapshot 1`] = `
<AbstractIncomingWebhook
action={[Function]}
footer={
Object {
"defaultMessage": "Save",
"id": "add_incoming_webhook.save",
}
}
header={
Object {
"defaultMessage": "Add",
"id": "integrations.add",
}
}
serverError=""
team={
Object {
"id": "testteamid",
"name": "test",
}
}
/>
`;

7
webapp/tests/components/integrations/__snapshots__/edit_incoming_hook.test.jsx.snap Normal file
View File

@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/integrations/EditIncomingWebhook should match snapshot 1`] = `
<LoadingScreen
position="relative"
/>
`;

29
webapp/tests/components/integrations/add_incoming_hook.test.jsx Normal file
View File

@@ -0,0 +1,29 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import AddIncomingWebhook from 'components/integrations/components/add_incoming_webhook/add_incoming_webhook.jsx';
describe('components/integrations/AddIncomingWebhook', () => {
test('should match snapshot', () => {
function emptyFunction() {} //eslint-disable-line no-empty-function
const teamId = 'testteamid';
const wrapper = shallow(
<AddIncomingWebhook
team={{
id: teamId,
name: 'test'
}}
createIncomingHookRequest={{
status: 'not_started',
error: null
}}
actions={{createIncomingHook: emptyFunction}}
/>
);
expect(wrapper).toMatchSnapshot();
});
});

30
webapp/tests/components/integrations/edit_incoming_hook.test.jsx Normal file
View File

@@ -0,0 +1,30 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import EditIncomingWebhook from 'components/integrations/components/edit_incoming_webhook/edit_incoming_webhook.jsx';
describe('components/integrations/EditIncomingWebhook', () => {
test('should match snapshot', () => {
function emptyFunction() {} //eslint-disable-line no-empty-function
const teamId = 'testteamid';
const wrapper = shallow(
<EditIncomingWebhook
team={{
id: teamId,
name: 'test'
}}
hookId={'somehookid'}
updateIncomingHookRequest={{
status: 'not_started',
error: null
}}
actions={{updateIncomingHook: emptyFunction, getIncomingHook: emptyFunction}}
/>
);
expect(wrapper).toMatchSnapshot();
});
});