diff options
Diffstat (limited to 'webapp')
5 files changed, 104 insertions, 53 deletions
diff --git a/webapp/components/integrations/components/add_command.jsx b/webapp/components/integrations/components/add_command.jsx index e01358aa7..6ca1cf100 100644 --- a/webapp/components/integrations/components/add_command.jsx +++ b/webapp/components/integrations/components/add_command.jsx @@ -166,7 +166,7 @@ export default class AddCommand extends React.Component { AsyncClient.addCommand( command, (data) => { - browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=commands&id=' + data.id); + browserHistory.push('/' + this.props.team.name + '/integrations/commands/confirm?type=commands&id=' + data.id); }, (err) => { this.setState({ diff --git a/webapp/components/integrations/components/commands_container.jsx b/webapp/components/integrations/components/commands_container.jsx new file mode 100644 index 000000000..1c2b7af3e --- /dev/null +++ b/webapp/components/integrations/components/commands_container.jsx @@ -0,0 +1,74 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import IntegrationStore from 'stores/integration_store.jsx'; +import TeamStore from 'stores/team_store.jsx'; +import UserStore from 'stores/user_store.jsx'; + +import {loadTeamCommands} from 'actions/integration_actions.jsx'; + +import React from 'react'; + +export default class CommandsContainer extends React.Component { + static get propTypes() { + return { + team: React.propTypes.object.isRequired, + children: React.propTypes.node.isRequired + }; + } + + constructor(props) { + super(props); + + this.handleIntegrationChange = this.handleIntegrationChange.bind(this); + this.handleUserChange = this.handleUserChange.bind(this); + + const teamId = TeamStore.getCurrentId(); + + this.state = { + commands: IntegrationStore.getCommands(teamId), + loading: !IntegrationStore.hasReceivedCommands(teamId), + users: UserStore.getProfiles() + }; + } + + componentDidMount() { + IntegrationStore.addChangeListener(this.handleIntegrationChange); + UserStore.addChangeListener(this.handleUserChange); + + if (window.mm_config.EnableCommands === 'true') { + loadTeamCommands(); + } + } + + componentWillUnmount() { + IntegrationStore.removeChangeListener(this.handleIntegrationChange); + UserStore.removeChangeListener(this.handleUserChange); + } + + handleIntegrationChange() { + const teamId = TeamStore.getCurrentId(); + + this.setState({ + commands: IntegrationStore.getCommands(teamId), + loading: !IntegrationStore.hasReceivedCommands(teamId) + }); + } + + handleUserChange() { + this.setState({users: UserStore.getProfiles()}); + } + + render() { + return ( + <div> + {React.cloneElement(this.props.children, { + commands: this.state.commands, + users: this.state.users, + loading: this.state.loading, + team: this.props.team + })} + </div> + ); + } +} diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx index de419341e..1f043ca83 100644 --- a/webapp/components/integrations/components/confirm_integration.jsx +++ b/webapp/components/integrations/components/confirm_integration.jsx @@ -16,7 +16,8 @@ export default class ConfirmIntegration extends React.Component { static get propTypes() { return { team: React.propTypes.object.isRequired, - location: React.PropTypes.object + location: React.PropTypes.object, + loading: React.PropTypes.bool }; } @@ -56,6 +57,11 @@ export default class ConfirmIntegration extends React.Component { let headerText = null; let helpText = null; let tokenText = null; + + if (this.props.loading === true) { + return (<div/>); + } + if (this.state.type === Constants.Integrations.COMMAND) { headerText = ( <FormattedMessage diff --git a/webapp/components/integrations/components/installed_commands.jsx b/webapp/components/integrations/components/installed_commands.jsx index 1c5ef9000..da4d871fa 100644 --- a/webapp/components/integrations/components/installed_commands.jsx +++ b/webapp/components/integrations/components/installed_commands.jsx @@ -4,12 +4,6 @@ import BackstageList from 'components/backstage/components/backstage_list.jsx'; import InstalledCommand from './installed_command.jsx'; -import IntegrationStore from 'stores/integration_store.jsx'; -import TeamStore from 'stores/team_store.jsx'; -import UserStore from 'stores/user_store.jsx'; - -import {loadTeamCommands} from 'actions/integration_actions.jsx'; - import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -19,52 +13,18 @@ import {FormattedMessage} from 'react-intl'; export default class InstalledCommands extends React.Component { static get propTypes() { return { - team: React.propTypes.object.isRequired + team: React.propTypes.object.isRequired, + users: React.propTypes.object.isRequired, + commands: React.propTypes.array.isRequired, + loading: React.propTypes.bool.isRequired }; } constructor(props) { super(props); - this.handleIntegrationChange = this.handleIntegrationChange.bind(this); - this.handleUserChange = this.handleUserChange.bind(this); this.regenCommandToken = this.regenCommandToken.bind(this); this.deleteCommand = this.deleteCommand.bind(this); - - const teamId = TeamStore.getCurrentId(); - - this.state = { - commands: IntegrationStore.getCommands(teamId), - loading: !IntegrationStore.hasReceivedCommands(teamId), - users: UserStore.getProfiles() - }; - } - - componentDidMount() { - IntegrationStore.addChangeListener(this.handleIntegrationChange); - UserStore.addChangeListener(this.handleUserChange); - - if (window.mm_config.EnableCommands === 'true') { - loadTeamCommands(); - } - } - - componentWillUnmount() { - IntegrationStore.removeChangeListener(this.handleIntegrationChange); - UserStore.removeChangeListener(this.handleUserChange); - } - - handleIntegrationChange() { - const teamId = TeamStore.getCurrentId(); - - this.setState({ - commands: IntegrationStore.getCommands(teamId), - loading: !IntegrationStore.hasReceivedCommands(teamId) - }); - } - - handleUserChange() { - this.setState({users: UserStore.getProfiles()}); } regenCommandToken(command) { @@ -76,14 +36,14 @@ export default class InstalledCommands extends React.Component { } render() { - const commands = this.state.commands.map((command) => { + const commands = this.props.commands.map((command) => { return ( <InstalledCommand key={command.id} command={command} onRegenToken={this.regenCommandToken} onDelete={this.deleteCommand} - creator={this.state.users[command.creator_id] || {}} + creator={this.props.users[command.creator_id] || {}} /> ); }); @@ -130,7 +90,7 @@ export default class InstalledCommands extends React.Component { /> } searchPlaceholder={Utils.localizeMessage('installed_commands.search', 'Search Slash Commands')} - loading={this.state.loading} + loading={this.props.loading} > {commands} </BackstageList> diff --git a/webapp/routes/route_integrations.jsx b/webapp/routes/route_integrations.jsx index afaf284e9..0feb13bb7 100644 --- a/webapp/routes/route_integrations.jsx +++ b/webapp/routes/route_integrations.jsx @@ -48,17 +48,28 @@ export default { }, { path: 'commands', - indexRoute: { - getComponents: (location, callback) => { - System.import('components/integrations/components/installed_commands.jsx').then(RouteUtils.importComponentSuccess(callback)); - } + getComponents: (location, callback) => { + System.import('components/integrations/components/commands_container.jsx').then(RouteUtils.importComponentSuccess(callback)); }, + indexRoute: {onEnter: (nextState, replace) => replace(nextState.location.pathname + '/installed')}, childRoutes: [ { + path: 'installed', + getComponents: (location, callback) => { + System.import('components/integrations/components/installed_commands.jsx').then(RouteUtils.importComponentSuccess(callback)); + } + }, + { path: 'add', getComponents: (location, callback) => { System.import('components/integrations/components/add_command.jsx').then(RouteUtils.importComponentSuccess(callback)); } + }, + { + path: 'confirm', + getComponents: (location, callback) => { + System.import('components/integrations/components/confirm_integration.jsx').then(RouteUtils.importComponentSuccess(callback)); + } } ] }, |