2017-08-28 21:30:12 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2021-03-30 15:14:02 +02:00
|
|
|
import { Grid, Typography } from '@material-ui/core';
|
2016-12-17 14:37:11 +01:00
|
|
|
import ShowStrategy from './show-strategy-component';
|
2021-01-06 21:41:56 +01:00
|
|
|
import EditStrategy from './form-container';
|
2018-12-19 14:54:52 +01:00
|
|
|
import { UPDATE_STRATEGY } from '../../permissions';
|
2021-03-30 15:14:02 +02:00
|
|
|
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
|
|
|
|
import TabNav from '../common/TabNav/TabNav';
|
|
|
|
import PageContent from '../common/PageContent/PageContent';
|
2016-12-17 14:37:11 +01:00
|
|
|
|
|
|
|
export default class StrategyDetails extends Component {
|
2017-07-10 23:38:44 +02:00
|
|
|
static propTypes = {
|
|
|
|
strategyName: PropTypes.string.isRequired,
|
|
|
|
toggles: PropTypes.array,
|
|
|
|
applications: PropTypes.array,
|
|
|
|
activeTab: PropTypes.string.isRequired,
|
|
|
|
strategy: PropTypes.object.isRequired,
|
|
|
|
fetchStrategies: PropTypes.func.isRequired,
|
|
|
|
fetchApplications: PropTypes.func.isRequired,
|
|
|
|
fetchFeatureToggles: PropTypes.func.isRequired,
|
2018-08-06 22:16:36 +02:00
|
|
|
history: PropTypes.object.isRequired,
|
2019-01-16 10:39:58 +01:00
|
|
|
hasPermission: PropTypes.func.isRequired,
|
2017-08-28 19:15:47 +02:00
|
|
|
};
|
2016-12-17 14:37:11 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
componentDidMount() {
|
2016-12-17 14:37:11 +01:00
|
|
|
if (!this.props.strategy) {
|
|
|
|
this.props.fetchStrategies();
|
2017-08-28 19:15:47 +02:00
|
|
|
}
|
2016-12-17 14:37:11 +01:00
|
|
|
if (!this.props.applications || this.props.applications.length === 0) {
|
|
|
|
this.props.fetchApplications();
|
|
|
|
}
|
|
|
|
if (!this.props.toggles || this.props.toggles.length === 0) {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
render() {
|
2016-12-17 14:37:11 +01:00
|
|
|
const strategy = this.props.strategy;
|
2021-03-30 15:14:02 +02:00
|
|
|
const tabData = [
|
|
|
|
{
|
|
|
|
label: 'Details',
|
|
|
|
component: (
|
|
|
|
<ShowStrategy
|
|
|
|
strategy={this.props.strategy}
|
|
|
|
toggles={this.props.toggles}
|
|
|
|
applications={this.props.applications}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Edit',
|
|
|
|
component: <EditStrategy strategy={this.props.strategy} history={this.props.history} editMode />,
|
|
|
|
},
|
|
|
|
];
|
2017-08-28 19:15:47 +02:00
|
|
|
return (
|
2021-03-30 15:14:02 +02:00
|
|
|
<PageContent headerContent={strategy.name}>
|
|
|
|
<Grid container>
|
|
|
|
<Grid item xs={12} sm={12}>
|
|
|
|
<Typography variant="subtitle1">{strategy.description}</Typography>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={strategy.editable && this.props.hasPermission(UPDATE_STRATEGY)}
|
|
|
|
show={
|
|
|
|
<div>
|
|
|
|
<TabNav tabData={tabData} />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
elseShow={
|
|
|
|
<section>
|
|
|
|
<div className="content">
|
|
|
|
<ShowStrategy
|
|
|
|
strategy={this.props.strategy}
|
|
|
|
toggles={this.props.toggles}
|
|
|
|
applications={this.props.applications}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</PageContent>
|
2017-08-28 19:15:47 +02:00
|
|
|
);
|
2016-12-17 14:37:11 +01:00
|
|
|
}
|
|
|
|
}
|