// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import * as AsyncClient from 'utils/async_client.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import IntegrationStore from 'stores/integration_store.jsx';
import * as Utils from 'utils/utils.jsx';
import {FormattedMessage} from 'react-intl';
import InstalledIncomingWebhook from './installed_incoming_webhook.jsx';
import InstalledOutgoingWebhook from './installed_outgoing_webhook.jsx';
import InstalledCommand from './installed_command.jsx';
import {Link} from 'react-router';
export default class InstalledIntegrations extends React.Component {
constructor(props) {
super(props);
this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
this.updateFilter = this.updateFilter.bind(this);
this.updateTypeFilter = this.updateTypeFilter.bind(this);
this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this);
this.regenOutgoingWebhookToken = this.regenOutgoingWebhookToken.bind(this);
this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
this.regenCommandToken = this.regenCommandToken.bind(this);
this.deleteCommand = this.deleteCommand.bind(this);
this.state = {
incomingWebhooks: [],
outgoingWebhooks: [],
commands: [],
typeFilter: '',
filter: ''
};
}
componentWillMount() {
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.EnableOutgoingWebhooks === 'true') {
if (IntegrationStore.hasReceivedOutgoingWebhooks()) {
this.setState({
outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
});
} else {
AsyncClient.listOutgoingHooks();
}
}
if (window.mm_config.EnableCommands === 'true') {
if (IntegrationStore.hasReceivedCommands()) {
this.setState({
commands: IntegrationStore.getCommands()
});
} else {
AsyncClient.listTeamCommands();
}
}
}
componentWillUnmount() {
IntegrationStore.removeChangeListener(this.handleIntegrationChange);
}
handleIntegrationChange() {
const incomingWebhooks = IntegrationStore.getIncomingWebhooks();
const outgoingWebhooks = IntegrationStore.getOutgoingWebhooks();
const commands = IntegrationStore.getCommands();
this.setState({
incomingWebhooks,
outgoingWebhooks,
commands
});
// reset the type filter if we were viewing a category that is now empty
if ((this.state.typeFilter === 'incomingWebhooks' && incomingWebhooks.length === 0) ||
(this.state.typeFilter === 'outgoingWebhooks' && outgoingWebhooks.length === 0) ||
(this.state.typeFilter === 'commands' && commands.length === 0)) {
this.setState({
typeFilter: ''
});
}
}
updateTypeFilter(e, typeFilter) {
e.preventDefault();
this.setState({
typeFilter
});
}
updateFilter(e) {
this.setState({
filter: e.target.value
});
}
deleteIncomingWebhook(incomingWebhook) {
AsyncClient.deleteIncomingHook(incomingWebhook.id);
}
regenOutgoingWebhookToken(outgoingWebhook) {
AsyncClient.regenOutgoingHookToken(outgoingWebhook.id);
}
deleteOutgoingWebhook(outgoingWebhook) {
AsyncClient.deleteOutgoingHook(outgoingWebhook.id);
}
regenCommandToken(command) {
AsyncClient.regenCommandToken(command.id);
}
deleteCommand(command) {
AsyncClient.deleteCommand(command.id);
}
renderTypeFilters(incomingWebhooks, outgoingWebhooks, commands) {
const fields = [];
if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0 || commands.length > 0) {
let filterClassName = 'filter-sort';
if (this.state.typeFilter === '') {
filterClassName += ' filter-sort--active';
}
fields.push(
this.updateTypeFilter(e, '')}
>