From 586967b757a869dbb5f3677e605009a1f5c61005 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Thu, 14 Jan 2016 10:52:14 -0600 Subject: finishing up commands UI --- .../user_settings/manage_command_hooks.jsx | 316 ++++++++++++++++----- 1 file changed, 249 insertions(+), 67 deletions(-) (limited to 'web/react/components/user_settings/manage_command_hooks.jsx') diff --git a/web/react/components/user_settings/manage_command_hooks.jsx b/web/react/components/user_settings/manage_command_hooks.jsx index 375ccb33f..1fb3bf599 100644 --- a/web/react/components/user_settings/manage_command_hooks.jsx +++ b/web/react/components/user_settings/manage_command_hooks.jsx @@ -5,44 +5,66 @@ import LoadingScreen from '../loading_screen.jsx'; import * as Client from '../../utils/client.jsx'; -export default class ManageCommandHooks extends React.Component { +export default class ManageCommandCmds extends React.Component { constructor() { super(); - this.getHooks = this.getHooks.bind(this); - this.addNewHook = this.addNewHook.bind(this); + this.getCmds = this.getCmds.bind(this); + this.addNewCmd = this.addNewCmd.bind(this); + this.emptyCmd = this.emptyCmd.bind(this); this.updateTrigger = this.updateTrigger.bind(this); this.updateURL = this.updateURL.bind(this); + this.updateMethod = this.updateMethod.bind(this); + this.updateUsername = this.updateUsername.bind(this); + this.updateIconURL = this.updateIconURL.bind(this); + this.updateDisplayName = this.updateDisplayName.bind(this); + this.updateAutoComplete = this.updateAutoComplete.bind(this); + this.updateAutoCompleteDesc = this.updateAutoCompleteDesc.bind(this); + this.updateAutoCompleteHint = this.updateAutoCompleteHint.bind(this); - this.state = {hooks: [], channelId: '', trigger: '', URL: '', getHooksComplete: false}; + this.state = {cmds: [], cmd: this.emptyCmd(), getCmdsComplete: false}; + } + + emptyCmd() { + var cmd = {}; + cmd.url = ''; + cmd.trigger = ''; + cmd.method = 'P'; + cmd.username = ''; + cmd.icon_url = ''; + cmd.auto_complete = false; + cmd.auto_complete_desc = ''; + cmd.auto_complete_hint = ''; + cmd.display_name = ''; + return cmd; } componentDidMount() { - this.getHooks(); + this.getCmds(); } - addNewHook(e) { + addNewCmd(e) { e.preventDefault(); - if (this.state.trigger === '' || this.state.URL === '') { + if (this.state.cmd.trigger === '' || this.state.cmd.url === '') { return; } - const hook = {}; - if (this.state.trigger.length !== 0) { - hook.trigger = this.state.trigger.trim(); + var cmd = this.state.cmd; + if (cmd.trigger.length !== 0) { + cmd.trigger = cmd.trigger.trim(); } - hook.url = this.state.URL.trim(); + cmd.url = cmd.url.trim(); Client.addCommand( - hook, + cmd, (data) => { - let hooks = Object.assign([], this.state.hooks); - if (!hooks) { - hooks = []; + let cmds = Object.assign([], this.state.cmds); + if (!cmds) { + cmds = []; } - hooks.push(data); - this.setState({hooks, addError: null, triggerWords: '', URL: ''}); + cmds.push(data); + this.setState({cmds, addError: null, cmd: this.emptyCmd()}); }, (err) => { this.setState({addError: err.message}); @@ -50,27 +72,27 @@ export default class ManageCommandHooks extends React.Component { ); } - removeHook(id) { + removeCmd(id) { const data = {}; data.id = id; Client.deleteCommand( data, () => { - const hooks = this.state.hooks; + const cmds = this.state.cmds; let index = -1; - for (let i = 0; i < hooks.length; i++) { - if (hooks[i].id === id) { + for (let i = 0; i < cmds.length; i++) { + if (cmds[i].id === id) { index = i; break; } } if (index !== -1) { - hooks.splice(index, 1); + cmds.splice(index, 1); } - this.setState({hooks}); + this.setState({cmds}); }, (err) => { this.setState({editError: err.message}); @@ -85,15 +107,15 @@ export default class ManageCommandHooks extends React.Component { 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; + const cmds = Object.assign([], this.state.cmds); + for (let i = 0; i < cmds.length; i++) { + if (cmds[i].id === id) { + cmds[i] = data; break; } } - this.setState({hooks, editError: null}); + this.setState({cmds, editError: null}); }, (err) => { this.setState({editError: err.message}); @@ -101,11 +123,11 @@ export default class ManageCommandHooks extends React.Component { ); } - getHooks() { - Client.listCommands( + getCmds() { + Client.listTeamCommands( (data) => { if (data) { - this.setState({hooks: data, getHooksComplete: true, editError: null}); + this.setState({cmds: data, getCmdsComplete: true, editError: null}); } }, (err) => { @@ -115,11 +137,57 @@ export default class ManageCommandHooks extends React.Component { } updateTrigger(e) { - this.setState({trigger: e.target.value}); + var cmd = this.state.cmd; + cmd.trigger = e.target.value; + this.setState(cmd); } updateURL(e) { - this.setState({URL: e.target.value}); + var cmd = this.state.cmd; + cmd.url = e.target.value; + this.setState(cmd); + } + + updateMethod(e) { + var cmd = this.state.cmd; + cmd.method = e.target.value; + this.setState(cmd); + } + + updateUsername(e) { + var cmd = this.state.cmd; + cmd.username = e.target.value; + this.setState(cmd); + } + + updateIconURL(e) { + var cmd = this.state.cmd; + cmd.icon_url = e.target.value; + this.setState(cmd); + } + + updateDisplayName(e) { + var cmd = this.state.cmd; + cmd.display_name = e.target.value; + this.setState(cmd); + } + + updateAutoComplete(e) { + var cmd = this.state.cmd; + cmd.auto_complete = e.target.checked; + this.setState(cmd); + } + + updateAutoCompleteDesc(e) { + var cmd = this.state.cmd; + cmd.auto_complete_desc = e.target.value; + this.setState(cmd); + } + + updateAutoCompleteHint(e) { + var cmd = this.state.cmd; + cmd.auto_complete_hint = e.target.value; + this.setState(cmd); } render() { @@ -133,41 +201,62 @@ export default class ManageCommandHooks extends React.Component { addError = ; } - const hooks = []; - this.state.hooks.forEach((hook) => { + const cmds = []; + this.state.cmds.forEach((cmd) => { let triggerDiv; - if (hook.trigger && hook.trigger.length !== 0) { + if (cmd.trigger && cmd.trigger.length !== 0) { triggerDiv = (
- {'Trigger: '}{hook.trigger} + {'Trigger: '}{cmd.trigger}
); } - hooks.push( + cmds.push(
-
- {'URL: '}{hook.url} +
+ {'Display Name: '}{cmd.display_name} +
+
+ {'Username: '}{cmd.username} +
+
+ {'Icon URL: '}{cmd.icon_url} +
+
+ {'Auto Complete: '}{cmd.auto_complete ? 'yes' : 'no'} +
+
+ {'Auto Complete Description: '}{cmd.auto_complete_desc} +
+
+ {'Auto Complete Hint: '}{cmd.auto_complete_hint} +
+
+ {'Request Type: '}{cmd.method === 'P' ? 'POST' : 'GET'} +
+
+ {'URL: '}{cmd.url}
{triggerDiv}
- {'Token: '}{hook.token} + {'Token: '}{cmd.token}
{'Regen Token'} @@ -177,29 +266,29 @@ export default class ManageCommandHooks extends React.Component { ); }); - let displayHooks; - if (!this.state.getHooksComplete) { - displayHooks = ; - } else if (hooks.length > 0) { - displayHooks = hooks; + let displayCmds; + if (!this.state.getCmdsComplete) { + displayCmds = ; + } else if (cmds.length > 0) { + displayCmds = cmds; } else { - displayHooks =
{'None'}
; + displayCmds =
{'None'}
; } - const existingHooks = ( -
+ const existingCmds = ( +
-
- {displayHooks} +
+ {displayCmds}
); - const disableButton = this.state.trigger === '' || this.state.URL === ''; + const disableButton = this.state.cmd.trigger === '' || this.state.cmd.url === ''; return ( -
+
{'Create commands to send new message events to an external integration. Please see '}
+
+ +
+ +
+
{'Command display name.'}
+
+
+ +
+ +
+
{'The username to use when overriding the post.'}
+
+
+ +
+ +
+
{'URL to an icon'}
+
@@ -218,23 +346,77 @@ export default class ManageCommandHooks extends React.Component {
{'Word to trigger on'}
+
+ +
+ +
+
{'Show this command in autocomplete list.'}
+
+
+ +
+ +
+
{'A short description of what this commands does.'}
+
+
+ +
+ +
+
{'List parameters to be passed to the command.'}
+
+
+ +
+ +
+
{'Command request type issued to the callback URL.'}
+
-