summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r--web/react/components/user_settings/manage_incoming_hooks.jsx64
-rw-r--r--web/react/components/user_settings/manage_outgoing_hooks.jsx97
-rw-r--r--web/react/components/user_settings/user_settings_integrations.jsx2
3 files changed, 87 insertions, 76 deletions
diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index 812169be4..6b8c09718 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -119,24 +119,23 @@ export default class ManageIncomingHooks extends React.Component {
hooks.push(
<div
key={hook.id}
- className='font--small'
+ className='webhook__item'
>
- <div className='padding-top x2 divider-light'></div>
- <div className='padding-top x2'>
- <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+ <div className='padding-top x2 webhook__url'>
+ <strong>{'URL: '}</strong>
+ <span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
</div>
<div className='padding-top'>
<strong>{'Channel: '}</strong>{c.display_name}
</div>
- <div className='padding-top'>
- <a
- className={'text-danger'}
- href='#'
- onClick={this.removeHook.bind(this, hook.id)}
- >
- {'Remove'}
- </a>
- </div>
+ <a
+ className={'webhook__remove'}
+ href='#'
+ onClick={this.removeHook.bind(this, hook.id)}
+ >
+ <span aria-hidden='true'>{'×'}</span>
+ </a>
+ <div className='padding-top x2 divider-light'></div>
</div>
);
}
@@ -148,35 +147,38 @@ export default class ManageIncomingHooks extends React.Component {
} else if (hooks.length > 0) {
displayHooks = hooks;
} else {
- displayHooks = <label>{': None'}</label>;
+ displayHooks = <div className='padding-top x2'>{'None'}</div>;
}
const existingHooks = (
- <div className='padding-top x2'>
+ <div className='webhooks__container'>
<label className='control-label padding-top x2'>{'Existing incoming webhooks'}</label>
- {displayHooks}
+ <div className='padding-top divider-light'></div>
+ <div className='webhooks__list'>
+ {displayHooks}
+ </div>
</div>
);
return (
<div key='addIncomingHook'>
{'Create webhook URLs for use in external integrations. Please see '}<a href='http://mattermost.org/webhooks'>{'http://mattermost.org/webhooks'}</a> {' to learn more.'}
- <br/>
- <br/>
- <label className='control-label'>{'Add a new incoming webhook'}</label>
- <div className='padding-top'>
- <select
- ref='channelName'
- className='form-control'
- value={this.state.channelId}
- onChange={this.updateChannelId}
- >
- {options}
- </select>
- {serverError}
- <div className='padding-top'>
+ <label className='control-label padding-top x2'>{'Add a new incoming webhook'}</label>
+ <div className='row padding-top'>
+ <div className='col-sm-10 padding-bottom'>
+ <select
+ ref='channelName'
+ className='form-control'
+ value={this.state.channelId}
+ onChange={this.updateChannelId}
+ >
+ {options}
+ </select>
+ {serverError}
+ </div>
+ <div className='col-sm-2 col-xs-4 no-padding--left padding-bottom'>
<a
- className={'btn btn-sm btn-primary' + disableButton}
+ className={'btn form-control no-padding btn-sm btn-primary' + disableButton}
href='#'
onClick={this.addNewHook}
>
diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx
index f6d6b515b..6e9b2205d 100644
--- a/web/react/components/user_settings/manage_outgoing_hooks.jsx
+++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx
@@ -6,6 +6,7 @@ var Constants = require('../../utils/constants.jsx');
var ChannelStore = require('../../stores/channel_store.jsx');
var LoadingScreen = require('../loading_screen.jsx');
+
export default class ManageOutgoingHooks extends React.Component {
constructor() {
super();
@@ -180,9 +181,8 @@ export default class ManageOutgoingHooks extends React.Component {
hooks.push(
<div
key={hook.id}
- className='font--small'
+ className='webhook__item'
>
- <div className='padding-top x2 divider-light'></div>
<div className='padding-top x2'>
<strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
</div>
@@ -199,15 +199,15 @@ export default class ManageOutgoingHooks extends React.Component {
>
{'Regen Token'}
</a>
- <span>{' - '}</span>
<a
- className='text-danger'
+ className='webhook__remove'
href='#'
onClick={this.removeHook.bind(this, hook.id)}
>
- {'Remove'}
+ <span aria-hidden='true'>{'×'}</span>
</a>
</div>
+ <div className='padding-top x2 divider-light'></div>
</div>
);
});
@@ -218,13 +218,16 @@ export default class ManageOutgoingHooks extends React.Component {
} else if (hooks.length > 0) {
displayHooks = hooks;
} else {
- displayHooks = <label>{': None'}</label>;
+ displayHooks = <div className='padding-top x2'>{'None'}</div>;
}
const existingHooks = (
- <div className='padding-top x2'>
+ <div className='webhooks__container'>
<label className='control-label padding-top x2'>{'Existing outgoing webhooks'}</label>
- {displayHooks}
+ <div className='padding-top divider-light'></div>
+ <div className='webhooks__list'>
+ {displayHooks}
+ </div>
</div>
);
@@ -234,41 +237,49 @@ export default class ManageOutgoingHooks extends React.Component {
<div key='addOutgoingHook'>
<label className='control-label'>{'Add a new outgoing webhook'}</label>
<div className='padding-top'>
- <strong>{'Channel:'}</strong>
- <select
- ref='channelName'
- className='form-control'
- value={this.state.channelId}
- onChange={this.updateChannelId}
- >
- {options}
- </select>
- <span>{'Only public channels can be used'}</span>
- <br/>
- <br/>
- <strong>{'Trigger Words:'}</strong>
- <input
- ref='triggerWords'
- className='form-control'
- value={this.state.triggerWords}
- onChange={this.updateTriggerWords}
- placeholder='Optional if channel selected'
- />
- <span>{'Comma separated words to trigger on'}</span>
- <br/>
- <br/>
- <strong>{'Callback URLs:'}</strong>
- <textarea
- ref='callbackURLs'
- className='form-control no-resize'
- value={this.state.callbackURLs}
- resize={false}
- rows={3}
- onChange={this.updateCallbackURLs}
- />
- <span>{'New line separated URLs that will receive the HTTP POST event'}</span>
- {serverError}
- <div className='padding-top'>
+ <div>
+ <label className='control-label'>{'Channel'}</label>
+ <div className='padding-top'>
+ <select
+ ref='channelName'
+ className='form-control'
+ value={this.state.channelId}
+ onChange={this.updateChannelId}
+ >
+ {options}
+ </select>
+ </div>
+ <div className='padding-top'>{'Only public channels can be used'}</div>
+ </div>
+ <div className='padding-top x2'>
+ <label className='control-label'>{'Trigger Words:'}</label>
+ <div className='padding-top'>
+ <input
+ ref='triggerWords'
+ className='form-control'
+ value={this.state.triggerWords}
+ onChange={this.updateTriggerWords}
+ placeholder='Optional if channel selected'
+ />
+ </div>
+ <div className='padding-top'>{'Comma separated words to trigger on'}</div>
+ </div>
+ <div className='padding-top x2'>
+ <label className='control-label'>{'Callback URLs:'}</label>
+ <div className='padding-top'>
+ <textarea
+ ref='callbackURLs'
+ className='form-control no-resize'
+ value={this.state.callbackURLs}
+ resize={false}
+ rows={3}
+ onChange={this.updateCallbackURLs}
+ />
+ </div>
+ <div className='padding-top'>{'New line separated URLs that will receive the HTTP POST event'}</div>
+ {serverError}
+ </div>
+ <div className='padding-top padding-bottom'>
<a
className={'btn btn-sm btn-primary'}
href='#'
diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx
index 83a6bf53a..4b1e5e532 100644
--- a/web/react/components/user_settings/user_settings_integrations.jsx
+++ b/web/react/components/user_settings/user_settings_integrations.jsx
@@ -43,7 +43,6 @@ export default class UserSettingsIntegrationsTab extends React.Component {
incomingHooksSection = (
<SettingItemMax
title='Incoming Webhooks'
- width = 'full'
inputs={inputs}
updateSection={(e) => {
this.updateSection('');
@@ -55,7 +54,6 @@ export default class UserSettingsIntegrationsTab extends React.Component {
incomingHooksSection = (
<SettingItemMin
title='Incoming Webhooks'
- width = 'full'
describe='Manage your incoming webhooks (Developer feature)'
updateSection={() => {
this.updateSection('incoming-hooks');