import React from 'react';
import PropTypes from 'prop-types';
import { Tabs, Tab, ProgressBar, Button, Card, CardText, CardTitle, CardActions, Textfield, Switch } from 'react-mdl';
import { Link } from 'react-router-dom';
import HistoryComponent from '../history/history-list-toggle-container';
import MetricComponent from './metric-container';
import EditFeatureToggle from './form/form-update-feature-container';
import ViewFeatureToggle from './form/form-view-feature-container';
import { styles as commonStyles } from '../common';
import { CREATE_FEATURE, DELETE_FEATURE, UPDATE_FEATURE } from '../../permissions';
import PermissionComponent from '../common/permission-container';
const TABS = {
strategies: 0,
view: 1,
history: 2,
};
export default class ViewFeatureToggleComponent extends React.Component {
isFeatureView;
constructor(props) {
super(props);
this.isFeatureView = !!props.fetchFeatureToggles;
}
static propTypes = {
activeTab: PropTypes.string.isRequired,
featureToggleName: PropTypes.string.isRequired,
features: PropTypes.array.isRequired,
toggleFeature: PropTypes.func,
removeFeatureToggle: PropTypes.func,
revive: PropTypes.func,
fetchArchive: PropTypes.func,
fetchFeatureToggles: PropTypes.func,
editFeatureToggle: PropTypes.func,
featureToggle: PropTypes.object,
history: PropTypes.object.isRequired,
};
componentWillMount() {
if (this.props.features.length === 0) {
if (this.isFeatureView) {
this.props.fetchFeatureToggles();
} else {
this.props.fetchArchive();
}
}
}
getTabContent(activeTab) {
const { features, featureToggle, featureToggleName } = this.props;
if (TABS[activeTab] === TABS.history) {
return ;
} else if (TABS[activeTab] === TABS.strategies) {
if (this.isFeatureView) {
return (
}
otherwise={}
/>
);
}
return ;
} else {
return ;
}
}
goToTab(tabName, featureToggleName) {
let view = this.props.fetchFeatureToggles ? 'features' : 'archive';
this.props.history.push(`/${view}/${tabName}/${featureToggleName}`);
}
render() {
const {
featureToggle,
features,
activeTab,
revive,
// setValue,
featureToggleName,
toggleFeature,
removeFeatureToggle,
} = this.props;
if (!featureToggle) {
if (features.length === 0) {
return ;
}
return (
Could not find the toggle{' '}
{featureToggleName}
}
otherwise={featureToggleName}
/>
);
}
const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
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);
this.props.history.push('/features');
}
};
const reviveToggle = () => {
revive(featureToggle.name);
this.props.history.push('/features');
};
const updateFeatureToggle = e => {
let feature = { ...featureToggle, description: e.target.value };
if (Array.isArray(feature.strategies)) {
feature.strategies.forEach(s => {
delete s.id;
});
}
this.props.editFeatureToggle(feature);
};
const setValue = (v, event) => {
featureToggle[v] = event.target.value;
this.forceUpdate();
};
return (
{featureToggle.name}
{this.isFeatureView ? (
setValue('description', v),
onBlur: updateFeatureToggle,
}}
denied={{
disabled: true,
}}
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={featureToggle.description}
/>
) : (
)}
toggleFeature(featureToggle.name)}
>
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
{this.isFeatureView ? (
Archive
}
/>
) : (
Revive
}
/>
)}
this.goToTab('strategies', featureToggleName)}>Strategies
this.goToTab('view', featureToggleName)}>Metrics
this.goToTab('history', featureToggleName)}>History
{tabContent}
);
}
}