import React from 'react';
import PropTypes from 'prop-types';
import {
Tabs,
Tab,
ProgressBar,
Button,
Card,
CardTitle,
CardText,
CardActions,
Switch,
} from 'react-mdl';
import { hashHistory, Link } from 'react-router';
import HistoryComponent from '../history/history-list-toggle-container';
import MetricComponent from './metric-container';
import EditFeatureToggle from './form-edit-container.jsx';
import { styles as commonStyles } from '../common';
const TABS = {
view: 0,
edit: 1,
history: 2,
};
export default class ViewFeatureToggleComponent extends React.Component {
constructor(props) {
super(props);
}
static propTypes = {
activeTab: PropTypes.string.isRequired,
featureToggleName: PropTypes.string.isRequired,
features: PropTypes.array.isRequired,
toggleFeature: PropTypes.func.isRequired,
removeFeatureToggle: PropTypes.func.isRequired,
fetchFeatureToggles: PropTypes.array.isRequired,
featureToggle: PropTypes.object.isRequired,
};
componentWillMount() {
if (this.props.features.length === 0) {
this.props.fetchFeatureToggles();
}
}
getTabContent(activeTab) {
const { featureToggle, featureToggleName } = this.props;
if (TABS[activeTab] === TABS.history) {
return ;
} else if (TABS[activeTab] === TABS.edit) {
return ;
} else {
return ;
}
}
goToTab(tabName, featureToggleName) {
hashHistory.push(`/features/${tabName}/${featureToggleName}`);
}
render() {
const {
featureToggle,
features,
activeTab,
featureToggleName,
toggleFeature,
removeFeatureToggle,
} = this.props;
if (!featureToggle) {
if (features.length === 0) {
return ;
}
return (
Could not find the toggle{' '}
{featureToggleName}
);
}
const activeTabId = TABS[this.props.activeTab]
? TABS[this.props.activeTab]
: TABS.view;
const tabContent = this.getTabContent(activeTab);
const removeToggle = () => {
if (
// eslint-disable-next-line no-alert
window.confirm('Are you sure you want to remove this toggle?')
) {
removeFeatureToggle(featureToggle.name);
hashHistory.push('/features');
}
};
return (
{featureToggle.name}
{featureToggle.description}
toggleFeature(featureToggle.name)}
>
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
this.goToTab('view', featureToggleName)}
>
Metrics
this.goToTab('edit', featureToggleName)}
>
Edit
this.goToTab('history', featureToggleName)}
>
History
{tabContent}
);
}
}