PLT-2698 Integrations improvements (#2883)
* Fixed Integrations link to show up for non-admins (when enabled) and when only slash commands are enabled * Updated BackstageSidebar to only show enabled integrations * Added placeholder to integrations list when none exist * Added loading spinner to integrations pages when they're loading
Этот коммит содержится в:
коммит произвёл
Christopher Speller
родитель
fcb5b70eb3
Коммит
2c92540471
@@ -40,6 +40,10 @@ export default class BackstageCategory extends React.Component {
|
||||
<ul className='sections'>
|
||||
{
|
||||
React.Children.map(children, (child) => {
|
||||
if (!child) {
|
||||
return child;
|
||||
}
|
||||
|
||||
return React.cloneElement(child, {
|
||||
parentLink: link
|
||||
});
|
||||
|
||||
@@ -10,6 +10,51 @@ import {FormattedMessage} from 'react-intl';
|
||||
|
||||
export default class BackstageSidebar extends React.Component {
|
||||
render() {
|
||||
let incomingWebhooks = null;
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true') {
|
||||
incomingWebhooks = (
|
||||
<BackstageSection
|
||||
name='incoming_webhooks'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.incoming_webhooks'
|
||||
defaultMessage='Incoming Webhooks'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let outgoingWebhooks = null;
|
||||
if (window.mm_config.EnableOutgoingWebhooks === 'true') {
|
||||
outgoingWebhooks = (
|
||||
<BackstageSection
|
||||
name='outgoing_webhooks'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.outgoing_webhooks'
|
||||
defaultMessage='Outgoing Webhooks'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let commands = null;
|
||||
if (window.mm_config.EnableCommands === 'true') {
|
||||
commands = (
|
||||
<BackstageSection
|
||||
name='commands'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.commands'
|
||||
defaultMessage='Slash Commands'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='backstage-sidebar'>
|
||||
<ul>
|
||||
@@ -24,33 +69,9 @@ export default class BackstageSidebar extends React.Component {
|
||||
/>
|
||||
}
|
||||
>
|
||||
<BackstageSection
|
||||
name='incoming_webhooks'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.incoming_webhooks'
|
||||
defaultMessage='Incoming Webhooks'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<BackstageSection
|
||||
name='outgoing_webhooks'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.outgoing_webhooks'
|
||||
defaultMessage='Outgoing Webhooks'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<BackstageSection
|
||||
name='commands'
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='backstage_sidebar.integrations.commands'
|
||||
defaultMessage='Slash Commands'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{incomingWebhooks}
|
||||
{outgoingWebhooks}
|
||||
{commands}
|
||||
</BackstageCategory>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -21,21 +21,16 @@ export default class InstalledCommands extends React.Component {
|
||||
this.deleteCommand = this.deleteCommand.bind(this);
|
||||
|
||||
this.state = {
|
||||
commands: []
|
||||
commands: IntegrationStore.getCommands(),
|
||||
loading: !IntegrationStore.hasReceivedCommands()
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentDidMount() {
|
||||
IntegrationStore.addChangeListener(this.handleIntegrationChange);
|
||||
|
||||
if (window.mm_config.EnableCommands === 'true') {
|
||||
if (IntegrationStore.hasReceivedCommands()) {
|
||||
this.setState({
|
||||
commands: IntegrationStore.getCommands()
|
||||
});
|
||||
} else {
|
||||
AsyncClient.listTeamCommands();
|
||||
}
|
||||
if (window.mm_config.EnableCommands === 'true' && this.state.loading) {
|
||||
AsyncClient.listTeamCommands();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,10 +39,9 @@ export default class InstalledCommands extends React.Component {
|
||||
}
|
||||
|
||||
handleIntegrationChange() {
|
||||
const commands = IntegrationStore.getCommands();
|
||||
|
||||
this.setState({
|
||||
commands
|
||||
commands: IntegrationStore.getCommands(),
|
||||
loading: !IntegrationStore.hasReceivedCommands()
|
||||
});
|
||||
}
|
||||
|
||||
@@ -86,6 +80,13 @@ export default class InstalledCommands extends React.Component {
|
||||
/>
|
||||
}
|
||||
addLink={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/commands/add'}
|
||||
emptyText={
|
||||
<FormattedMessage
|
||||
id='installed_commands.empty'
|
||||
defaultMessage='No slash commands found'
|
||||
/>
|
||||
}
|
||||
loading={this.state.loading}
|
||||
>
|
||||
{commands}
|
||||
</InstalledIntegrations>
|
||||
|
||||
@@ -20,21 +20,16 @@ export default class InstalledIncomingWebhooks extends React.Component {
|
||||
this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this);
|
||||
|
||||
this.state = {
|
||||
incomingWebhooks: []
|
||||
incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
|
||||
loading: !IntegrationStore.hasReceivedIncomingWebhooks()
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentDidMount() {
|
||||
IntegrationStore.addChangeListener(this.handleIntegrationChange);
|
||||
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true') {
|
||||
if (IntegrationStore.hasReceivedIncomingWebhooks()) {
|
||||
this.setState({
|
||||
incomingWebhooks: IntegrationStore.getIncomingWebhooks()
|
||||
});
|
||||
} else {
|
||||
AsyncClient.listIncomingHooks();
|
||||
}
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true' && this.state.loading) {
|
||||
AsyncClient.listIncomingHooks();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,7 +39,8 @@ export default class InstalledIncomingWebhooks extends React.Component {
|
||||
|
||||
handleIntegrationChange() {
|
||||
this.setState({
|
||||
incomingWebhooks: IntegrationStore.getIncomingWebhooks()
|
||||
incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
|
||||
loading: !IntegrationStore.hasReceivedIncomingWebhooks()
|
||||
});
|
||||
}
|
||||
|
||||
@@ -78,6 +74,13 @@ export default class InstalledIncomingWebhooks extends React.Component {
|
||||
/>
|
||||
}
|
||||
addLink={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/incoming_webhooks/add'}
|
||||
emptyText={
|
||||
<FormattedMessage
|
||||
id='installed_incoming_webhooks.empty'
|
||||
defaultMessage='No incoming webhooks found'
|
||||
/>
|
||||
}
|
||||
loading={this.state.loading}
|
||||
>
|
||||
{incomingWebhooks}
|
||||
</InstalledIntegrations>
|
||||
|
||||
@@ -6,6 +6,7 @@ import React from 'react';
|
||||
import * as Utils from 'utils/utils.jsx';
|
||||
|
||||
import {Link} from 'react-router';
|
||||
import LoadingScreen from 'components/loading_screen.jsx';
|
||||
|
||||
export default class InstalledIntegrations extends React.Component {
|
||||
static get propTypes() {
|
||||
@@ -13,7 +14,9 @@ export default class InstalledIntegrations extends React.Component {
|
||||
children: React.PropTypes.node,
|
||||
header: React.PropTypes.node.isRequired,
|
||||
addLink: React.PropTypes.string.isRequired,
|
||||
addText: React.PropTypes.node.isRequired
|
||||
addText: React.PropTypes.node.isRequired,
|
||||
emptyText: React.PropTypes.node.isRequired,
|
||||
loading: React.PropTypes.bool.isRequired
|
||||
};
|
||||
}
|
||||
|
||||
@@ -36,9 +39,23 @@ export default class InstalledIntegrations extends React.Component {
|
||||
render() {
|
||||
const filter = this.state.filter.toLowerCase();
|
||||
|
||||
const children = React.Children.map(this.props.children, (child) => {
|
||||
return React.cloneElement(child, {filter});
|
||||
});
|
||||
let children;
|
||||
|
||||
if (this.props.loading) {
|
||||
children = <LoadingScreen/>;
|
||||
} else {
|
||||
children = React.Children.map(this.props.children, (child) => {
|
||||
return React.cloneElement(child, {filter});
|
||||
});
|
||||
|
||||
if (children.length === 0) {
|
||||
children = (
|
||||
<span className='backstage-list__item backstage-list_empty'>
|
||||
{this.props.emptyText}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='backstage-content'>
|
||||
|
||||
@@ -21,21 +21,16 @@ export default class InstalledOutgoingWebhooks extends React.Component {
|
||||
this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
|
||||
|
||||
this.state = {
|
||||
outgoingWebhooks: []
|
||||
outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
|
||||
loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentDidMount() {
|
||||
IntegrationStore.addChangeListener(this.handleIntegrationChange);
|
||||
|
||||
if (window.mm_config.EnableOutgoingWebhooks === 'true') {
|
||||
if (IntegrationStore.hasReceivedOutgoingWebhooks()) {
|
||||
this.setState({
|
||||
outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
|
||||
});
|
||||
} else {
|
||||
AsyncClient.listOutgoingHooks();
|
||||
}
|
||||
if (window.mm_config.EnableOutgoingWebhooks === 'true' && this.state.loading) {
|
||||
AsyncClient.listOutgoingHooks();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,7 +40,8 @@ export default class InstalledOutgoingWebhooks extends React.Component {
|
||||
|
||||
handleIntegrationChange() {
|
||||
this.setState({
|
||||
outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
|
||||
outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
|
||||
loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
|
||||
});
|
||||
}
|
||||
|
||||
@@ -84,6 +80,13 @@ export default class InstalledOutgoingWebhooks extends React.Component {
|
||||
/>
|
||||
}
|
||||
addLink={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/outgoing_webhooks/add'}
|
||||
emptyText={
|
||||
<FormattedMessage
|
||||
id='installed_outgoing_webhooks.empty'
|
||||
defaultMessage='No outgoing webhooks found'
|
||||
/>
|
||||
}
|
||||
loading={this.state.loading}
|
||||
>
|
||||
{outgoingWebhooks}
|
||||
</InstalledIntegrations>
|
||||
|
||||
@@ -143,19 +143,21 @@ export default class NavbarDropdown extends React.Component {
|
||||
);
|
||||
}
|
||||
|
||||
if (window.mm_config.EnableIncomingWebhooks === 'true' || window.mm_config.EnableOutgoingWebhooks === 'true') {
|
||||
if (isAdmin || window.EnableAdminOnlyIntegrations !== 'true') {
|
||||
integrationsLink = (
|
||||
<li>
|
||||
<Link to={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations'}>
|
||||
<FormattedMessage
|
||||
id='navbar_dropdown.integrations'
|
||||
defaultMessage='Integrations'
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const integrationsEnabled =
|
||||
window.mm_config.EnableIncomingWebhooks === 'true' ||
|
||||
window.mm_config.EnableOutgoingWebhooks === 'true' ||
|
||||
window.mm_config.EnableCommands === 'true';
|
||||
if (integrationsEnabled && (isAdmin || window.EnableOnlyAdminIntegrations !== 'true')) {
|
||||
integrationsLink = (
|
||||
<li>
|
||||
<Link to={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations'}>
|
||||
<FormattedMessage
|
||||
id='navbar_dropdown.integrations'
|
||||
defaultMessage='Integrations'
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
if (isSystemAdmin) {
|
||||
|
||||
Ссылка в новой задаче
Block a user