mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-23 20:07:40 +02:00
59bcabe331
This is rather big change to react-router and required a lot of rewrites. Mostly followed this guide: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md
86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Tabs, Tab, ProgressBar, Grid, Cell } from 'react-mdl';
|
|
import ShowStrategy from './show-strategy-component';
|
|
import EditStrategy from './edit-container';
|
|
import { HeaderTitle } from '../common';
|
|
|
|
const TABS = {
|
|
view: 0,
|
|
edit: 1,
|
|
};
|
|
|
|
export default class StrategyDetails extends Component {
|
|
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,
|
|
history: PropTypes.object.isRequired,
|
|
};
|
|
|
|
componentDidMount() {
|
|
if (!this.props.strategy) {
|
|
this.props.fetchStrategies();
|
|
}
|
|
if (!this.props.applications || this.props.applications.length === 0) {
|
|
this.props.fetchApplications();
|
|
}
|
|
if (!this.props.toggles || this.props.toggles.length === 0) {
|
|
this.props.fetchFeatureToggles();
|
|
}
|
|
}
|
|
|
|
getTabContent(activeTabId) {
|
|
if (activeTabId === TABS.edit) {
|
|
return <EditStrategy strategy={this.props.strategy} />;
|
|
} else {
|
|
return (
|
|
<ShowStrategy
|
|
strategy={this.props.strategy}
|
|
toggles={this.props.toggles}
|
|
applications={this.props.applications}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
goToTab(tabName) {
|
|
this.props.history.push(`/strategies/${tabName}/${this.props.strategyName}`);
|
|
}
|
|
|
|
render() {
|
|
const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
|
|
const strategy = this.props.strategy;
|
|
if (!strategy) {
|
|
return <ProgressBar indeterminate />;
|
|
}
|
|
|
|
const tabContent = this.getTabContent(activeTabId);
|
|
|
|
return (
|
|
<Grid className="mdl-color--white">
|
|
<Cell col={12}>
|
|
<HeaderTitle title={strategy.name} subtitle={strategy.description} />
|
|
{strategy.editable === false ? (
|
|
''
|
|
) : (
|
|
<Tabs activeTab={activeTabId} ripple>
|
|
<Tab onClick={() => this.goToTab('view')}>Details</Tab>
|
|
<Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
|
|
</Tabs>
|
|
)}
|
|
|
|
<section>
|
|
<div className="content">{tabContent}</div>
|
|
</section>
|
|
</Cell>
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|