Experimental plugin system console UI (#7338)
* Add system console UI for uploading/listing/removing plugins * Add localization strings * Add banner to plugin settings * Updating UI for experimental plugins (#7362) * Text updates * Updating UI for experimental plugin stuff (#7377) * Properly clear file input after upload
Этот коммит содержится в:
Joram Wilander
коммит произвёл
GitHub
GitHub
родитель
e30e4cfe3d
Коммит
df085d273d
@@ -60,6 +60,7 @@ export default class AdminSidebar extends React.Component {
|
||||
let metricsSettings = null;
|
||||
let complianceSettings = null;
|
||||
let mfaSettings = null;
|
||||
let pluginSettings = null;
|
||||
|
||||
let license = null;
|
||||
let audits = null;
|
||||
@@ -277,6 +278,20 @@ export default class AdminSidebar extends React.Component {
|
||||
);
|
||||
}
|
||||
|
||||
if (window.mm_config.PluginsEnabled === 'true' && window.mm_license.IsLicensed === 'true') {
|
||||
pluginSettings = (
|
||||
<AdminSidebarSection
|
||||
name='plugins'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='admin.sidebar.plugins'
|
||||
defaultMessage='Plugins (experimental)'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const SHOW_CLIENT_VERSIONS = false;
|
||||
let clientVersions = null;
|
||||
if (SHOW_CLIENT_VERSIONS) {
|
||||
@@ -562,6 +577,7 @@ export default class AdminSidebar extends React.Component {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{pluginSettings}
|
||||
</AdminSidebarSection>
|
||||
<AdminSidebarSection
|
||||
name='files'
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
export default function Banner(props) {
|
||||
|
||||
27
webapp/components/admin_console/plugin_settings/index.js
Обычный файл
27
webapp/components/admin_console/plugin_settings/index.js
Обычный файл
@@ -0,0 +1,27 @@
|
||||
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import {uploadPlugin, removePlugin, getPlugins} from 'mattermost-redux/actions/admin';
|
||||
|
||||
import PluginSettings from './plugin_settings.jsx';
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
return {
|
||||
...ownProps,
|
||||
plugins: state.entities.admin.plugins
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
actions: bindActionCreators({
|
||||
uploadPlugin,
|
||||
removePlugin,
|
||||
getPlugins
|
||||
}, dispatch)
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PluginSettings);
|
||||
293
webapp/components/admin_console/plugin_settings/plugin_settings.jsx
Обычный файл
293
webapp/components/admin_console/plugin_settings/plugin_settings.jsx
Обычный файл
@@ -0,0 +1,293 @@
|
||||
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import LoadingScreen from 'components/loading_screen.jsx';
|
||||
import Banner from 'components/admin_console/banner.jsx';
|
||||
|
||||
import * as Utils from 'utils/utils.jsx';
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
|
||||
|
||||
export default class PluginSettings extends React.Component {
|
||||
static propTypes = {
|
||||
|
||||
/*
|
||||
* The config
|
||||
*/
|
||||
config: PropTypes.object.isRequired,
|
||||
|
||||
/*
|
||||
* Plugins object with ids as keys and manifests as values
|
||||
*/
|
||||
plugins: PropTypes.object.isRequired,
|
||||
|
||||
actions: PropTypes.shape({
|
||||
|
||||
/*
|
||||
* Function to upload a plugin
|
||||
*/
|
||||
uploadPlugin: PropTypes.func.isRequired,
|
||||
|
||||
/*
|
||||
* Function to remove a plugin
|
||||
*/
|
||||
removePlugin: PropTypes.func.isRequired,
|
||||
|
||||
/*
|
||||
* Function to get installed plugins
|
||||
*/
|
||||
getPlugins: PropTypes.func.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
loading: true,
|
||||
fileSelected: false,
|
||||
fileName: null,
|
||||
serverError: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.actions.getPlugins().then(
|
||||
() => this.setState({loading: false})
|
||||
);
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
const element = this.refs.fileInput;
|
||||
if (element.files.length > 0) {
|
||||
this.setState({fileSelected: true, fileName: element.files[0].name});
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const element = this.refs.fileInput;
|
||||
if (element.files.length === 0) {
|
||||
return;
|
||||
}
|
||||
const file = element.files[0];
|
||||
|
||||
this.setState({uploading: true});
|
||||
|
||||
const {error} = await this.props.actions.uploadPlugin(file);
|
||||
this.setState({fileSelected: false, fileName: null, uploading: false});
|
||||
Utils.clearFileInput(element);
|
||||
|
||||
if (error) {
|
||||
if (error.server_error_id === 'app.plugin.activate.app_error') {
|
||||
this.setState({serverError: Utils.localizeMessage('admin.plugin.error.activate', 'Unable to upload the plugin. It may conflict with another plugin on your server.')});
|
||||
} else if (error.server_error_id === 'app.plugin.extract.app_error') {
|
||||
this.setState({serverError: Utils.localizeMessage('admin.plugin.error.extract', 'Encountered an error when extracting the plugin. Review your plugin file content and try again.')});
|
||||
} else {
|
||||
this.setState({serverError: error.message});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleRemove = async (pluginId) => {
|
||||
this.setState({removing: pluginId});
|
||||
|
||||
const {error} = await this.props.actions.removePlugin(pluginId);
|
||||
this.setState({removing: null});
|
||||
|
||||
if (error) {
|
||||
this.setState({serverError: error.message});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let serverError = '';
|
||||
if (this.state.serverError) {
|
||||
serverError = <div className='col-sm-12'><div className='form-group has-error half'><label className='control-label'>{this.state.serverError}</label></div></div>;
|
||||
}
|
||||
|
||||
let btnClass = 'btn';
|
||||
if (this.state.fileSelected) {
|
||||
btnClass = 'btn btn-primary';
|
||||
}
|
||||
|
||||
let fileName;
|
||||
if (this.state.fileName) {
|
||||
fileName = this.state.fileName;
|
||||
}
|
||||
|
||||
let uploadButtonText;
|
||||
if (this.state.uploading) {
|
||||
uploadButtonText = (
|
||||
<FormattedMessage
|
||||
id='admin.plugin.uploading'
|
||||
defaultMessage='Uploading...'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
uploadButtonText = (
|
||||
<FormattedMessage
|
||||
id='admin.plugin.upload'
|
||||
defaultMessage='Upload'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let activePluginsList;
|
||||
let activePluginsContainer;
|
||||
const plugins = Object.values(this.props.plugins);
|
||||
if (this.state.loading) {
|
||||
activePluginsList = <LoadingScreen/>;
|
||||
} else if (plugins.length === 0) {
|
||||
activePluginsContainer = (
|
||||
<FormattedMessage
|
||||
id='admin.plugin.no_plugins'
|
||||
defaultMessage='No active plugins.'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
activePluginsList = plugins.map(
|
||||
(p) => {
|
||||
let removeButtonText;
|
||||
if (this.state.removing === p.id) {
|
||||
removeButtonText = (
|
||||
<FormattedMessage
|
||||
id='admin.plugin.removing'
|
||||
defaultMessage='Removing...'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
removeButtonText = (
|
||||
<FormattedMessage
|
||||
id='admin.plugin.remove'
|
||||
defaultMessage='Remove'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={p.id}>
|
||||
<div>
|
||||
<strong>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.id'
|
||||
defaultMessage='ID:'
|
||||
/>
|
||||
</strong>
|
||||
{' ' + p.id}
|
||||
</div>
|
||||
<div className='padding-top'>
|
||||
<strong>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.desc'
|
||||
defaultMessage='Description:'
|
||||
/>
|
||||
</strong>
|
||||
{' ' + p.description}
|
||||
</div>
|
||||
<div className='padding-top'>
|
||||
<a
|
||||
disabled={this.state.removing === p.id}
|
||||
onClick={() => this.handleRemove(p.id)}
|
||||
>
|
||||
{removeButtonText}
|
||||
</a>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
activePluginsContainer = (
|
||||
<div className='alert alert-transparent'>
|
||||
{activePluginsList}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='wrapper--fixed'>
|
||||
<h3 className='admin-console-header'>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.title'
|
||||
defaultMessage='Plugins (experimental)'
|
||||
/>
|
||||
</h3>
|
||||
<Banner
|
||||
title={<div/>}
|
||||
description={
|
||||
<FormattedHTMLMessage
|
||||
id='admin.plugin.banner'
|
||||
defaultMessage='Plugins are experimental stage and are not yet recommended for use in production environments. <br/><br/> Webapp plugins will require users to refresh their browsers or desktop apps before the plugin will take effect. Similarly when a plugin is removed, users will continue to see the plugin until they refresh their browser or app.'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<form
|
||||
className='form-horizontal'
|
||||
role='form'
|
||||
>
|
||||
<div className='form-group'>
|
||||
<label
|
||||
className='control-label col-sm-4'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.uploadTitle'
|
||||
defaultMessage='Upload Plugin: '
|
||||
/>
|
||||
</label>
|
||||
<div className='col-sm-8'>
|
||||
<div className='file__upload'>
|
||||
<button className='btn btn-primary'>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.choose'
|
||||
defaultMessage='Choose File'
|
||||
/>
|
||||
</button>
|
||||
<input
|
||||
ref='fileInput'
|
||||
type='file'
|
||||
accept='.gz'
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className={btnClass}
|
||||
disabled={!this.state.fileSelected}
|
||||
onClick={this.handleSubmit}
|
||||
>
|
||||
{uploadButtonText}
|
||||
</button>
|
||||
<div className='help-text no-margin'>
|
||||
{fileName}
|
||||
</div>
|
||||
{serverError}
|
||||
<p className='help-text'>
|
||||
<FormattedHTMLMessage
|
||||
id='admin.plugin.uploadDesc'
|
||||
defaultMessage='Upload a plugin for your Mattermost server. Adding or removing a webapp plugin requires users to refresh their browser or Desktop App before taking effect. See <a href="https://about.mattermost.com/default-plugins">documentation</a> to learn more.'
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label
|
||||
className='control-label col-sm-4'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='admin.plugin.activeTitle'
|
||||
defaultMessage='Active Plugins: '
|
||||
/>
|
||||
</label>
|
||||
<div className='col-sm-8 padding-top'>
|
||||
{activePluginsContainer}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Ссылка в новой задаче
Block a user