From 0b986ed3147c885af6b2f33e1ff3eb6754e8f274 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Mon, 11 Jan 2016 12:31:13 -0600 Subject: Adding UI --- .../user_settings/manage_command_hooks.jsx | 260 +++++++++++++++++++++ .../user_settings/user_settings_integrations.jsx | 35 +++ 2 files changed, 295 insertions(+) create mode 100644 web/react/components/user_settings/manage_command_hooks.jsx (limited to 'web/react/components/user_settings') diff --git a/web/react/components/user_settings/manage_command_hooks.jsx b/web/react/components/user_settings/manage_command_hooks.jsx new file mode 100644 index 000000000..375ccb33f --- /dev/null +++ b/web/react/components/user_settings/manage_command_hooks.jsx @@ -0,0 +1,260 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import LoadingScreen from '../loading_screen.jsx'; + +import * as Client from '../../utils/client.jsx'; + +export default class ManageCommandHooks extends React.Component { + constructor() { + super(); + + this.getHooks = this.getHooks.bind(this); + this.addNewHook = this.addNewHook.bind(this); + this.updateTrigger = this.updateTrigger.bind(this); + this.updateURL = this.updateURL.bind(this); + + this.state = {hooks: [], channelId: '', trigger: '', URL: '', getHooksComplete: false}; + } + + componentDidMount() { + this.getHooks(); + } + + addNewHook(e) { + e.preventDefault(); + + if (this.state.trigger === '' || this.state.URL === '') { + return; + } + + const hook = {}; + if (this.state.trigger.length !== 0) { + hook.trigger = this.state.trigger.trim(); + } + hook.url = this.state.URL.trim(); + + Client.addCommand( + hook, + (data) => { + let hooks = Object.assign([], this.state.hooks); + if (!hooks) { + hooks = []; + } + hooks.push(data); + this.setState({hooks, addError: null, triggerWords: '', URL: ''}); + }, + (err) => { + this.setState({addError: err.message}); + } + ); + } + + removeHook(id) { + const data = {}; + data.id = id; + + Client.deleteCommand( + data, + () => { + const hooks = this.state.hooks; + let index = -1; + for (let i = 0; i < hooks.length; i++) { + if (hooks[i].id === id) { + index = i; + break; + } + } + + if (index !== -1) { + hooks.splice(index, 1); + } + + this.setState({hooks}); + }, + (err) => { + this.setState({editError: err.message}); + } + ); + } + + regenToken(id) { + const regenData = {}; + regenData.id = id; + + Client.regenCommandToken( + regenData, + (data) => { + const hooks = Object.assign([], this.state.hooks); + for (let i = 0; i < hooks.length; i++) { + if (hooks[i].id === id) { + hooks[i] = data; + break; + } + } + + this.setState({hooks, editError: null}); + }, + (err) => { + this.setState({editError: err.message}); + } + ); + } + + getHooks() { + Client.listCommands( + (data) => { + if (data) { + this.setState({hooks: data, getHooksComplete: true, editError: null}); + } + }, + (err) => { + this.setState({editError: err.message}); + } + ); + } + + updateTrigger(e) { + this.setState({trigger: e.target.value}); + } + + updateURL(e) { + this.setState({URL: e.target.value}); + } + + render() { + let addError; + if (this.state.addError) { + addError = ; + } + + let editError; + if (this.state.editError) { + addError = ; + } + + const hooks = []; + this.state.hooks.forEach((hook) => { + let triggerDiv; + if (hook.trigger && hook.trigger.length !== 0) { + triggerDiv = ( +
+ {'Trigger: '}{hook.trigger} +
+ ); + } + + hooks.push( +
+
+ {'URL: '}{hook.url} +
+ {triggerDiv} +
+ {'Token: '}{hook.token} +
+
+ + {'Regen Token'} + + + + +
+
+
+ ); + }); + + let displayHooks; + if (!this.state.getHooksComplete) { + displayHooks = ; + } else if (hooks.length > 0) { + displayHooks = hooks; + } else { + displayHooks =
{'None'}
; + } + + const existingHooks = ( +
+ +
+
+ {displayHooks} +
+
+ ); + + const disableButton = this.state.trigger === '' || this.state.URL === ''; + + return ( +
+ {'Create commands to send new message events to an external integration. Please see '} + + {'http://mattermost.org/commands'} + + {' to learn more.'} +
+
+
+
+ +
+ {'/'} + +
+
{'Word to trigger on'}
+
+
+ +
+