2017-08-28 21:30:12 +02:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2021-03-30 15:14:02 +02:00
|
|
|
import { Grid, List, ListItem, ListItemText, ListItemAvatar, Icon, Tooltip } from '@material-ui/core';
|
|
|
|
import { TogglesLinkList } from './toggles-link-list';
|
|
|
|
import { AppsLinkList } from '../common';
|
|
|
|
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
|
|
|
|
import styles from './strategies.module.scss';
|
2016-12-05 22:37:11 +01:00
|
|
|
|
2016-12-17 14:37:11 +01:00
|
|
|
class ShowStrategyComponent extends PureComponent {
|
2017-07-10 23:38:44 +02:00
|
|
|
static propTypes = {
|
|
|
|
toggles: PropTypes.array,
|
|
|
|
applications: PropTypes.array,
|
|
|
|
strategy: PropTypes.object.isRequired,
|
2017-08-28 19:15:47 +02:00
|
|
|
};
|
2016-12-05 22:37:11 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
renderParameters(params) {
|
2016-12-13 19:56:52 +01:00
|
|
|
if (params) {
|
|
|
|
return params.map(({ name, type, description, required }, i) => (
|
2021-03-30 15:14:02 +02:00
|
|
|
<ListItem key={`${name}-${i}`}>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={required}
|
|
|
|
show={
|
|
|
|
<Tooltip title="Required">
|
|
|
|
<ListItemAvatar>
|
|
|
|
<Icon>add</Icon>
|
|
|
|
</ListItemAvatar>
|
|
|
|
</Tooltip>
|
|
|
|
}
|
|
|
|
elseShow={
|
|
|
|
<Tooltip title="Optional">
|
|
|
|
<ListItemAvatar>
|
|
|
|
<Icon>radio_button_unchecked</Icon>
|
|
|
|
</ListItemAvatar>
|
|
|
|
</Tooltip>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<ListItemText
|
|
|
|
primary={
|
|
|
|
<div>
|
|
|
|
{name} <small>({type})</small>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
secondary={description}
|
|
|
|
/>
|
2016-12-13 19:56:52 +01:00
|
|
|
</ListItem>
|
2016-12-05 22:37:11 +01:00
|
|
|
));
|
|
|
|
} else {
|
2016-12-13 19:56:52 +01:00
|
|
|
return <ListItem>(no params)</ListItem>;
|
2016-12-05 22:37:11 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
render() {
|
|
|
|
const { strategy, applications, toggles } = this.props;
|
2016-12-09 22:09:43 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
const { parameters = [] } = strategy;
|
2016-12-05 22:37:11 +01:00
|
|
|
|
|
|
|
return (
|
2021-03-30 15:14:02 +02:00
|
|
|
<div className={styles.listcontainer}>
|
|
|
|
<Grid container>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={strategy.deprecated}
|
|
|
|
show={
|
|
|
|
<Grid item>
|
|
|
|
<h5 style={{ color: '#ff0000' }}>Deprecated</h5>
|
|
|
|
</Grid>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<Grid item sm={12} md={12}>
|
2016-12-05 22:37:11 +01:00
|
|
|
<h6>Parameters</h6>
|
2016-12-09 22:09:43 +01:00
|
|
|
<hr />
|
2017-08-28 19:15:47 +02:00
|
|
|
<List>{this.renderParameters(parameters)}</List>
|
2021-03-30 15:14:02 +02:00
|
|
|
</Grid>
|
2016-12-05 22:37:11 +01:00
|
|
|
|
2021-03-30 15:14:02 +02:00
|
|
|
<Grid item sm={12} md={6}>
|
2016-12-05 22:37:11 +01:00
|
|
|
<h6>Applications using this strategy</h6>
|
2016-12-09 22:09:43 +01:00
|
|
|
<hr />
|
|
|
|
<AppsLinkList apps={applications} />
|
2021-03-30 15:14:02 +02:00
|
|
|
</Grid>
|
2016-12-10 13:49:22 +01:00
|
|
|
|
2021-03-30 15:14:02 +02:00
|
|
|
<Grid item sm={12} md={6}>
|
2016-12-10 13:49:22 +01:00
|
|
|
<h6>Toggles using this strategy</h6>
|
|
|
|
<hr />
|
|
|
|
<TogglesLinkList toggles={toggles} />
|
2021-03-30 15:14:02 +02:00
|
|
|
</Grid>
|
2016-12-05 22:37:11 +01:00
|
|
|
</Grid>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ShowStrategyComponent;
|