143 lines
4.0 KiB
JavaScript
Raw Normal View History

/**
2019-08-13 11:31:10 +02:00
*
* Plugin
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Collapse } from 'reactstrap';
2017-12-04 15:03:53 +01:00
import { capitalize, get, isEmpty, map } from 'lodash';
import { FormattedMessage } from 'react-intl';
2019-02-22 11:16:42 +01:00
import Controller from '../Controller';
import styles from './styles.scss';
2019-08-13 11:31:10 +02:00
class Plugin extends React.Component {
// eslint-disable-line react/prefer-stateless-function
state = { collapse: false };
componentDidMount() {
// Open the application's permissions section if there are APIs
2019-08-13 11:31:10 +02:00
if (
this.props.name === 'application' &&
!isEmpty(get(this.props.plugin, 'controllers'))
) {
this.props.changePluginSelected('application');
this.setState({ collapse: !this.state.collapse });
}
}
2019-08-13 11:31:10 +02:00
UNSAFE_componentWillReceiveProps(nextProps) {
if (
nextProps.pluginSelected !== this.props.pluginSelected &&
nextProps.pluginSelected !== this.props.name
) {
this.context.resetShouldDisplayPoliciesHint();
2017-11-16 15:13:46 +01:00
this.setState({ collapse: false });
}
}
handleClick = () => {
this.props.changePluginSelected(this.props.name);
2017-12-04 15:03:53 +01:00
if (!isEmpty(get(this.props.plugin, 'controllers'))) {
this.setState({ collapse: !this.state.collapse });
}
2017-11-30 15:01:19 +01:00
if (this.state.collapse) {
this.context.resetShouldDisplayPoliciesHint();
}
2019-08-13 11:31:10 +02:00
};
render() {
const divStyle = this.state.collapse ? { marginBottom: '.4rem' } : {};
2018-06-14 15:30:54 +02:00
const icon = get(this.props.plugin, ['information', 'logo']);
2017-12-14 17:06:26 +01:00
const emptyApplication = !isEmpty(get(this.props.plugin, 'controllers'));
if (!emptyApplication) {
return <div />;
}
return (
<div className={styles.plugin} style={divStyle}>
<div className={styles.banner} onClick={this.handleClick}>
<div>
2018-06-14 15:30:54 +02:00
{this.props.name !== 'application' && (
2017-11-23 16:27:41 +01:00
<div className={styles.iconContainer}>
2019-08-13 11:31:10 +02:00
{icon && <img src={icon} alt="icon" />}
2017-11-23 16:27:41 +01:00
</div>
2018-06-14 15:30:54 +02:00
)}
<div className={styles.name}>{this.props.name}</div>
&nbsp;&nbsp;
2017-12-04 15:03:53 +01:00
<div className={styles.description}>
2017-11-16 17:59:41 +01:00
{this.props.name === 'application' ? (
2019-08-13 11:31:10 +02:00
<FormattedMessage id="users-permissions.Plugin.permissions.application.description" />
2017-11-16 17:59:41 +01:00
) : (
<FormattedMessage
id="users-permissions.Plugin.permissions.plugins.description"
values={{ name: capitalize(this.props.name) }}
/>
)}
2017-12-04 15:03:53 +01:00
</div>
</div>
2019-08-13 11:31:10 +02:00
{emptyApplication && (
<div
className={
this.state.collapse ? styles.chevronUp : styles.chevronDown
}
></div>
)}
</div>
<Collapse isOpen={this.state.collapse}>
<div />
<div className={styles.controllerContainer}>
2019-08-13 11:31:10 +02:00
{map(
get(this.props.plugin, 'controllers'),
(controllerActions, key) => (
<Controller
inputNamePath={`permissions.${this.props.name}`}
isOpen={this.state.collapse}
key={key}
name={key}
actions={controllerActions}
resetInputBackground={this.state.resetInputBackground}
/>
)
)}
</div>
</Collapse>
</div>
);
}
}
2017-11-23 16:27:41 +01:00
Plugin.contextTypes = {
plugins: PropTypes.object.isRequired,
resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
2017-11-23 16:27:41 +01:00
};
Plugin.defaultProps = {
name: '',
plugin: {
description: 'users-permissions.Plugin.permissions.description.empty',
controllers: {},
information: {},
},
};
Plugin.propTypes = {
2017-11-16 15:13:46 +01:00
changePluginSelected: PropTypes.func.isRequired,
name: PropTypes.string,
plugin: PropTypes.shape({
description: PropTypes.string,
information: PropTypes.shape({
2018-01-12 17:50:18 +01:00
logo: PropTypes.string,
2018-01-11 17:13:09 +01:00
}),
}),
2017-11-16 15:13:46 +01:00
pluginSelected: PropTypes.string.isRequired,
};
export default Plugin;