diff options
author | Chris <ccbrown112@gmail.com> | 2017-08-02 01:36:54 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-08-02 01:36:54 -0700 |
commit | 65817e13c7900ea81947e40e177459cfea8acee4 (patch) | |
tree | 8dfc88db36844e4186b4110753be8de976da6371 /webapp | |
parent | c6bf235ec2a8613d8ef35607e2aeb8c0cb629f45 (diff) | |
download | chat-65817e13c7900ea81947e40e177459cfea8acee4.tar.gz chat-65817e13c7900ea81947e40e177459cfea8acee4.tar.bz2 chat-65817e13c7900ea81947e40e177459cfea8acee4.zip |
PLT-6965 jira integration (plus plugin scaffolding) (#6918)
* plugin scaffolding / jira integration
* add vendored testify packages
* webhook fix
* don't change i18n ids
* support configuration watching
* add basic jira plugin configuration to admin console
* fix eslint errors
* fix another eslint warning
* polish
* undo unintentional config.json commit >:(
* test fix
* add jira plugin diagnostics, remove dm support, add bot tag, generate web-safe secrets
* rebase, implement requested changes
* requested changes
* remove tests and minimize makefile change
* add missing license headers
* add missing comma
* remove bad line from Makefile
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/admin_console/admin_sidebar.jsx | 9 | ||||
-rw-r--r-- | webapp/components/admin_console/generated_setting.jsx | 13 | ||||
-rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 49 | ||||
-rwxr-xr-x | webapp/i18n/en.json | 14 | ||||
-rw-r--r-- | webapp/plugins/jira/components/settings.jsx | 251 | ||||
-rw-r--r-- | webapp/plugins/jira/components/style.scss | 60 | ||||
-rw-r--r-- | webapp/routes/route_admin_console.jsx | 5 | ||||
-rw-r--r-- | webapp/sass/routes/_admin-console.scss | 4 |
8 files changed, 394 insertions, 11 deletions
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index 9b27ab81e..f035424b6 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -522,6 +522,15 @@ export default class AdminSidebar extends React.Component { /> } /> + <AdminSidebarSection + name='jira' + title={ + <FormattedMessage + id='admin.sidebar.jira' + defaultMessage='JIRA (Beta)' + /> + } + /> {webrtcSettings} <AdminSidebarSection name='external' diff --git a/webapp/components/admin_console/generated_setting.jsx b/webapp/components/admin_console/generated_setting.jsx index b6a495f93..2fed2f42f 100644 --- a/webapp/components/admin_console/generated_setting.jsx +++ b/webapp/components/admin_console/generated_setting.jsx @@ -20,7 +20,8 @@ export default class GeneratedSetting extends React.Component { disabled: PropTypes.bool.isRequired, disabledText: PropTypes.node, helpText: PropTypes.node.isRequired, - regenerateText: PropTypes.node + regenerateText: PropTypes.node, + regenerateHelpText: PropTypes.node }; } @@ -58,6 +59,15 @@ export default class GeneratedSetting extends React.Component { ); } + let regenerateHelpText = null; + if (this.props.regenerateHelpText) { + regenerateHelpText = ( + <div className='help-text'> + {this.props.regenerateHelpText} + </div> + ); + } + return ( <div className='form-group'> <label @@ -88,6 +98,7 @@ export default class GeneratedSetting extends React.Component { {this.props.regenerateText} </button> </div> + {regenerateHelpText} </div> </div> ); diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index e9dc698aa..008fc2ffb 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -80,7 +80,12 @@ export default class SuggestionBox extends React.Component { /** * Function called when @mention is clicked */ - popoverMentionKeyClick: PropTypes.bool + popoverMentionKeyClick: PropTypes.bool, + + /** + * The number of characters required to show the suggestion list, defaults to 1 + */ + requiredCharacters: PropTypes.number } static defaultProps = { @@ -88,13 +93,15 @@ export default class SuggestionBox extends React.Component { listStyle: 'top', renderDividers: false, completeOnTab: true, - isRHS: false + isRHS: false, + requiredCharacters: 1 } constructor(props) { super(props); this.handleBlur = this.handleBlur.bind(this); + this.handleFocus = this.handleFocus.bind(this); this.handlePopoverMentionKeyClick = this.handlePopoverMentionKeyClick.bind(this); this.handleCompleteWord = this.handleCompleteWord.bind(this); @@ -163,11 +170,22 @@ export default class SuggestionBox extends React.Component { } } + handleFocus() { + setTimeout(() => { + const textbox = this.getTextbox(); + const pretext = textbox.value.substring(0, textbox.selectionEnd); + + if (pretext.length >= this.props.requiredCharacters) { + GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext); + } + }); + } + handleChange(e) { const textbox = this.getTextbox(); const pretext = textbox.value.substring(0, textbox.selectionEnd); - if (!this.composing && SuggestionStore.getPretext(this.suggestionId) !== pretext) { + if (!this.composing && SuggestionStore.getPretext(this.suggestionId) !== pretext && pretext.length >= this.props.requiredCharacters) { GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext); } @@ -228,7 +246,8 @@ export default class SuggestionBox extends React.Component { const suffix = text.substring(caret); - this.refs.textbox.value = prefix + term + ' ' + suffix; + const newValue = prefix + term + ' ' + suffix; + this.refs.textbox.value = newValue; if (this.props.onChange) { // fake an input event to send back to parent components @@ -242,9 +261,10 @@ export default class SuggestionBox extends React.Component { if (this.props.onItemSelected) { const items = SuggestionStore.getItems(this.suggestionId); - for (const i of items) { - if (i.name === term) { - this.props.onItemSelected(i); + const terms = SuggestionStore.getTerms(this.suggestionId); + for (let i = 0; i < terms.length; i++) { + if (terms[i] === term) { + this.props.onItemSelected(items[i]); break; } } @@ -254,7 +274,9 @@ export default class SuggestionBox extends React.Component { // set the caret position after the next rendering window.requestAnimationFrame(() => { - Utils.setCaretPosition(textbox, prefix.length + term.length + 1); + if (textbox.value === newValue) { + Utils.setCaretPosition(textbox, newValue.length); + } }); for (const provider of this.props.providers) { @@ -277,7 +299,9 @@ export default class SuggestionBox extends React.Component { e.preventDefault(); } else if (e.which === KeyCodes.ENTER || (this.props.completeOnTab && e.which === KeyCodes.TAB)) { this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId)); - this.props.onKeyDown(e); + if (this.props.onKeyDown) { + this.props.onKeyDown(e); + } e.preventDefault(); } else if (e.which === KeyCodes.ESCAPE) { GlobalActions.emitClearSuggestions(this.suggestionId); @@ -321,11 +345,14 @@ export default class SuggestionBox extends React.Component { Reflect.deleteProperty(props, 'completeOnTab'); Reflect.deleteProperty(props, 'isRHS'); Reflect.deleteProperty(props, 'popoverMentionKeyClick'); + Reflect.deleteProperty(props, 'requiredCharacters'); const childProps = { ref: 'textbox', onBlur: this.handleBlur, + onFocus: this.handleFocus, onInput: this.handleChange, + onChange() { /* this is only here to suppress warnings about onChange not being implemented for read-write inputs */ }, onCompositionStart: this.handleCompositionStart, onCompositionUpdate: this.handleCompositionUpdate, onCompositionEnd: this.handleCompositionEnd, @@ -337,6 +364,7 @@ export default class SuggestionBox extends React.Component { textbox = ( <input type='text' + autoComplete='off' {...props} {...childProps} /> @@ -345,6 +373,7 @@ export default class SuggestionBox extends React.Component { textbox = ( <input type='search' + autoComplete='off' {...props} {...childProps} /> @@ -364,7 +393,7 @@ export default class SuggestionBox extends React.Component { return ( <div ref='container'> {textbox} - {this.props.value && + {this.props.value.length >= this.props.requiredCharacters && <SuggestionListComponent suggestionId={this.suggestionId} location={listStyle} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 58674dd3c..77206c161 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -481,6 +481,7 @@ "admin.integrations.custom": "Custom Integrations", "admin.integrations.external": "External Services", "admin.integrations.webrtc": "Mattermost WebRTC", + "admin.plugins.jira": "JIRA (Beta)", "admin.ldap.baseDesc": "The Base DN is the Distinguished Name of the location where Mattermost should start its search for users in the AD/LDAP tree.", "admin.ldap.baseEx": "E.g.: \"ou=Unit Name,dc=corp,dc=example,dc=com\"", "admin.ldap.baseTitle": "BaseDN:", @@ -626,6 +627,18 @@ "admin.password.requirementsDescription": "Character types required in a valid password.", "admin.password.symbol": "At least one symbol (e.g. \"~!@#$%^&*()\")", "admin.password.uppercase": "At least one uppercase letter", + "admin.plugins.jira.enabledLabel": "Enabled:", + "admin.plugins.jira.enabledDescription": "When true, you can configure JIRA webhooks to post message in Mattermost. To help combat phishing attacks, all posts are labelled by a BOT tag.", + "admin.plugins.jira.secretLabel": "Secret:", + "admin.plugins.jira.secretDescription": "This secret is used to authenticate to Mattermost.", + "admin.plugins.jira.secretRegenerateDescription": "Regenerates the secret for the webhook URL endpoint. Regenerating the secret invalidates your existing JIRA integrations.", + "admin.plugins.jira.userLabel": "User:", + "admin.plugins.jira.userDescription": "Select the username that this integration is attached to.", + "admin.plugins.jira.setupDescription": "Use this webhook URL to set up the JIRA integration. See {webhookDocsLink} to learn more.", + "admin.plugins.jira.webhookDocsLink": "documentation", + "admin.plugins.jira.secretParamPlaceholder": "secret", + "admin.plugins.jira.teamParamPlaceholder": "teamname", + "admin.plugins.jira.channelParamNamePlaceholder": "channelname", "admin.privacy.showEmailDescription": "When false, hides the email address of members from everyone except System Administrators.", "admin.privacy.showEmailTitle": "Show Email Address: ", "admin.privacy.showFullNameDescription": "When false, hides the full name of members from everyone except System Administrators. Username is shown in place of full name.", @@ -832,6 +845,7 @@ "admin.sidebar.general": "General", "admin.sidebar.gitlab": "GitLab", "admin.sidebar.integrations": "Integrations", + "admin.sidebar.jira": "JIRA (Beta)", "admin.sidebar.ldap": "AD/LDAP", "admin.sidebar.legalAndSupport": "Legal and Support", "admin.sidebar.license": "Edition and License", diff --git a/webapp/plugins/jira/components/settings.jsx b/webapp/plugins/jira/components/settings.jsx new file mode 100644 index 000000000..5e5b5fac6 --- /dev/null +++ b/webapp/plugins/jira/components/settings.jsx @@ -0,0 +1,251 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import crypto from 'crypto'; + +import Suggestion from 'components/suggestion/suggestion.jsx'; +import Provider from 'components/suggestion/provider.jsx'; +import SuggestionBox from 'components/suggestion/suggestion_box.jsx'; +import SuggestionList from 'components/suggestion/suggestion_list.jsx'; +import {autocompleteUsersInTeam} from 'actions/user_actions.jsx'; + +import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; +import {Client4} from 'mattermost-redux/client'; +import {ActionTypes} from 'utils/constants.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import AdminSettings from 'components/admin_console/admin_settings.jsx'; +import {FormattedMessage} from 'react-intl'; +import SettingsGroup from 'components/admin_console/settings_group.jsx'; +import BooleanSetting from 'components/admin_console/boolean_setting.jsx'; +import GeneratedSetting from 'components/admin_console/generated_setting.jsx'; +import Setting from 'components/admin_console/setting.jsx'; + +import './style.scss'; + +class UserSuggestion extends Suggestion { + render() { + const {item, isSelection} = this.props; + + let className = 'jirabots__name'; + if (isSelection) { + className += ' suggestion--selected'; + } + + const username = item.username; + let description = ''; + + if ((item.first_name || item.last_name) && item.nickname) { + description = `- ${Utils.getFullName(item)} (${item.nickname})`; + } else if (item.nickname) { + description = `- (${item.nickname})`; + } else if (item.first_name || item.last_name) { + description = `- ${Utils.getFullName(item)}`; + } + + return ( + <div + className={className} + onClick={this.handleClick} + > + <div className='pull-left'> + <img + className='jirabot__image' + src={Client4.getUsersRoute() + '/' + item.id + '/image?_=' + (item.last_picture_update || 0)} + /> + </div> + <div className='pull-left jirabot--align'> + <span> + {'@' + username} + </span> + <span className='jirabot__fullname'> + {' '} + {description} + </span> + </div> + </div> + ); + } +} + +class UserProvider extends Provider { + handlePretextChanged(suggestionId, pretext) { + const normalizedPretext = pretext.toLowerCase(); + this.startNewRequest(suggestionId, normalizedPretext); + + autocompleteUsersInTeam( + normalizedPretext, + (data) => { + if (this.shouldCancelDispatch(normalizedPretext)) { + return; + } + + const users = Object.assign([], data.users); + + AppDispatcher.handleServerAction({ + type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS, + id: suggestionId, + matchedPretext: normalizedPretext, + terms: users.map((user) => user.username), + items: users, + component: UserSuggestion + }); + } + ); + + return true; + } +} + +export default class JIRASettings extends AdminSettings { + constructor(props) { + super(props); + + this.getConfigFromState = this.getConfigFromState.bind(this); + this.renderSettings = this.renderSettings.bind(this); + this.handleSecretChange = this.handleSecretChange.bind(this); + this.handleEnabledChange = this.handleEnabledChange.bind(this); + this.handleUserSelected = this.handleUserSelected.bind(this); + + this.userSuggestionProviders = [new UserProvider()]; + } + + getConfigFromState(config) { + config.PluginSettings.Plugins = { + jira: { + Enabled: this.state.enabled, + Secret: this.state.secret, + UserName: this.state.userName + } + }; + + return config; + } + + getStateFromConfig(config) { + const settings = config.PluginSettings; + + const ret = { + enabled: false, + secret: '', + userName: '', + siteURL: config.ServiceSettings.SiteURL + }; + + if (typeof settings.Plugins !== 'undefined' && typeof settings.Plugins.jira !== 'undefined') { + ret.enabled = settings.Plugins.jira.Enabled || settings.Plugins.jira.enabled || false; + ret.secret = settings.Plugins.jira.Secret || settings.Plugins.jira.secret || ''; + ret.userName = settings.Plugins.jira.UserName || settings.Plugins.jira.username || ''; + } + + return ret; + } + + handleSecretChange(id, secret) { + this.handleChange(id, secret.replace('+', '-').replace('/', '_')); + } + + handleEnabledChange(enabled) { + if (enabled && this.state.secret === '') { + this.handleSecretChange('secret', crypto.randomBytes(256).toString('base64').substring(0, 32)); + } + this.handleChange('enabled', enabled); + } + + handleUserSelected(user) { + this.handleChange('userName', user.username); + } + + renderTitle() { + return Utils.localizeMessage('admin.plugins.jira', 'JIRA (Beta)'); + } + + renderSettings() { + var webhookDocsLink = ( + <a + href='https://about.mattermost.com/default-jira-plugin' + target='_blank' + rel='noopener noreferrer' + > + <FormattedMessage + id='admin.plugins.jira.webhookDocsLink' + defaultMessage='documentation' + /> + </a> + ); + + return ( + <SettingsGroup> + <BooleanSetting + id='enabled' + label={Utils.localizeMessage('admin.plugins.jira.enabledLabel', 'Enabled:')} + helpText={Utils.localizeMessage('admin.plugins.jira.enabledDescription', 'When true, you can configure JIRA webhooks to post message in Mattermost. To help combat phishing attacks, all posts are labelled by a BOT tag.')} + value={this.state.enabled} + onChange={(id, value) => this.handleEnabledChange(value)} + /> + <Setting + label={Utils.localizeMessage('admin.plugins.jira.userLabel', 'User:')} + helpText={Utils.localizeMessage('admin.plugins.jira.userDescription', 'Select the username that this integration is attached to.')} + inputId='userName' + > + <div + className='jirabots__dropdown' + > + <SuggestionBox + id='userName' + className='form-control' + placeholder={Utils.localizeMessage('search_bar.search', 'Search')} + value={this.state.userName} + onChange={(e) => this.handleChange('userName', e.target.value)} + onItemSelected={this.handleUserSelected} + listComponent={SuggestionList} + listStyle='bottom' + providers={this.userSuggestionProviders} + disabled={!this.state.enabled} + type='input' + requiredCharacters={0} + /> + </div> + </Setting> + <GeneratedSetting + id='secret' + label={Utils.localizeMessage('admin.plugins.jira.secretLabel', 'Secret:')} + helpText={Utils.localizeMessage('admin.plugins.jira.secretDescription', 'This secret is used to authenticate to Mattermost.')} + regenerateHelpText={Utils.localizeMessage('admin.plugins.jira.secretRegenerateDescription', 'Regenerates the secret for the webhook URL endpoint. Regenerating the secret invalidates your existing JIRA integrations.')} + value={this.state.secret} + onChange={this.handleSecretChange} + disabled={!this.state.enabled} + /> + <div className='banner'> + <div className='banner__content'> + <p> + <FormattedMessage + id='admin.plugins.jira.setupDescription' + defaultMessage='Use this webhook URL to set up the JIRA integration. See {webhookDocsLink} to learn more.' + values={{ + webhookDocsLink + }} + /> + </p> + <p> + <code + dangerouslySetInnerHTML={{ + __html: encodeURI(this.state.siteURL) + + '/plugins/jira/webhook?secret=' + + (this.state.secret ? encodeURIComponent(this.state.secret) : ('<b>' + Utils.localizeMessage('admin.plugins.jira.secretParamPlaceholder', 'secret') + '</b>')) + + '&team=<b>' + + Utils.localizeMessage('admin.plugins.jira.teamParamPlaceholder', 'teamname') + + '</b>&channel=<b>' + + Utils.localizeMessage('admin.plugins.jira.channelParamNamePlaceholder', 'channelname') + + '</b>' + }} + /> + </p> + </div> + </div> + </SettingsGroup> + ); + } +} diff --git a/webapp/plugins/jira/components/style.scss b/webapp/plugins/jira/components/style.scss new file mode 100644 index 000000000..477328316 --- /dev/null +++ b/webapp/plugins/jira/components/style.scss @@ -0,0 +1,60 @@ +@charset 'UTF-8'; + +@import 'compass/utilities'; +@import 'compass/css3'; + +.jirabots__dropdown { + position: relative; +} + +.jirabots__dropdown::before { + position: absolute; + top: 13px; + right: 8px; + content: " "; + pointer-events: none; + + width: 0; + height: 0; + + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #e2e2e2; +} + +.jirabots__name { + @include clearfix; + cursor: pointer; + font-size: 13px; + line-height: 20px; + margin: 0; + padding: 6px 10px; + position: relative; + white-space: nowrap; + width: 100%; + z-index: 101; +} + +.jirabot__image { + @include border-radius(20px); + display: block; + font-size: 15px; + height: 16px; + line-height: 16px; + margin-right: 7px; + margin-top: 3px; + text-align: center; + width: 16px; + + .jirabot--align { + display: inline-block; + max-width: 80%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.jirabot__fullname { + @include opacity(.5); +} diff --git a/webapp/routes/route_admin_console.jsx b/webapp/routes/route_admin_console.jsx index 17e0290c2..15081a1d9 100644 --- a/webapp/routes/route_admin_console.jsx +++ b/webapp/routes/route_admin_console.jsx @@ -46,6 +46,7 @@ import LicenseSettings from 'components/admin_console/license_settings.jsx'; import Audits from 'components/admin_console/audits'; import Logs from 'components/admin_console/server_logs'; import ElasticsearchSettings from 'components/admin_console/elasticsearch_settings.jsx'; +import JIRASettings from 'plugins/jira/components/settings.jsx'; export default ( <Route> @@ -159,6 +160,10 @@ export default ( path='webrtc' component={WebrtcSettings} /> + <Route + path='jira' + component={JIRASettings} + /> </Route> <Route path='files'> <IndexRedirect to='storage'/> diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 2d4ca6be1..829ed107e 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -305,6 +305,10 @@ .status-icon-error { color: #ea6262; } + + .suggestion--selected { + background-color: #e2e2e2; + } } .brand-img { |