From f40f41ed536edb76c9873c0cdd5dc8685b0f950f Mon Sep 17 00:00:00 2001 From: n1aba Date: Fri, 18 Aug 2017 08:42:10 -0500 Subject: PLT-6443 Migrate add_oauth_app.jsx to be pure and use Redux (#7232) * Migrate add_oauth_app.jsx to be pure and use Redux, add tests * Remove unused flux code for OAuthApps --- .../integrations/components/add_oauth_app.jsx | 437 -------------------- .../components/add_oauth_app/add_oauth_app.jsx | 441 +++++++++++++++++++++ .../integrations/components/add_oauth_app/index.js | 25 ++ 3 files changed, 466 insertions(+), 437 deletions(-) delete mode 100644 webapp/components/integrations/components/add_oauth_app.jsx create mode 100644 webapp/components/integrations/components/add_oauth_app/add_oauth_app.jsx create mode 100644 webapp/components/integrations/components/add_oauth_app/index.js (limited to 'webapp/components/integrations') diff --git a/webapp/components/integrations/components/add_oauth_app.jsx b/webapp/components/integrations/components/add_oauth_app.jsx deleted file mode 100644 index a74d577c3..000000000 --- a/webapp/components/integrations/components/add_oauth_app.jsx +++ /dev/null @@ -1,437 +0,0 @@ -import PropTypes from 'prop-types'; - -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import React from 'react'; - -import * as OAuthActions from 'actions/oauth_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'; - -export default class AddOAuthApp extends React.Component { - static get propTypes() { - return { - team: PropTypes.object - }; - } - - constructor(props) { - super(props); - - this.handleSubmit = this.handleSubmit.bind(this); - - this.updateName = this.updateName.bind(this); - this.updateTrusted = this.updateTrusted.bind(this); - this.updateDescription = this.updateDescription.bind(this); - this.updateHomepage = this.updateHomepage.bind(this); - this.updateIconUrl = this.updateIconUrl.bind(this); - this.updateCallbackUrls = this.updateCallbackUrls.bind(this); - - this.imageLoaded = this.imageLoaded.bind(this); - this.image = new Image(); - this.image.onload = this.imageLoaded; - - this.state = { - name: '', - description: '', - homepage: '', - icon_url: '', - callbackUrls: '', - is_trusted: false, - has_icon: false, - saving: false, - serverError: '', - clientError: null - }; - } - - imageLoaded() { - this.setState({ - has_icon: true, - icon_url: this.refs.icon_url.value - }); - } - - handleSubmit(e) { - e.preventDefault(); - - if (this.state.saving) { - return; - } - - this.setState({ - saving: true, - serverError: '', - clientError: '' - }); - - if (!this.state.name) { - this.setState({ - saving: false, - clientError: ( - - ) - }); - - return; - } - - if (!this.state.description) { - this.setState({ - saving: false, - clientError: ( - - ) - }); - - return; - } - - if (!this.state.homepage) { - this.setState({ - saving: false, - clientError: ( - - ) - }); - - return; - } - - const callbackUrls = []; - for (let callbackUrl of this.state.callbackUrls.split('\n')) { - callbackUrl = callbackUrl.trim(); - - if (callbackUrl.length > 0) { - callbackUrls.push(callbackUrl); - } - } - - if (callbackUrls.length === 0) { - this.setState({ - saving: false, - clientError: ( - - ) - }); - - return; - } - - const app = { - name: this.state.name, - callback_urls: callbackUrls, - homepage: this.state.homepage, - description: this.state.description, - is_trusted: this.state.is_trusted, - icon_url: this.state.icon_url - }; - - OAuthActions.registerOAuthApp( - app, - (data) => { - browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=oauth2-apps&id=' + data.id); - }, - (err) => { - this.setState({ - saving: false, - serverError: err.message - }); - } - ); - } - - updateName(e) { - this.setState({ - name: e.target.value - }); - } - - updateTrusted(e) { - this.setState({ - is_trusted: e.target.value === 'true' - }); - } - - updateDescription(e) { - this.setState({ - description: e.target.value - }); - } - - updateHomepage(e) { - this.setState({ - homepage: e.target.value - }); - } - - updateIconUrl(e) { - this.setState({ - has_icon: false, - icon_url: '' - }); - this.image.src = e.target.value; - } - - updateCallbackUrls(e) { - this.setState({ - callbackUrls: e.target.value - }); - } - - render() { - let icon; - if (this.state.has_icon) { - icon = ( -
- -
- ); - } - - return ( -
- - - - - - -
- {icon} -
-
- -
- - -
- -
-
-
-
- -
- -
- -
-
-
-
- -
- -
- -
-
-
-
- -
- -
- -
-
-
-
- -
- -
- -
-
-
-
- -
-