2017-08-28 21:30:12 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-02-15 17:09:00 +01:00
|
|
|
import { Tabs, Tab, ProgressBar, Button, Card, CardText, CardTitle, CardActions, Textfield, Switch } from 'react-mdl';
|
2018-08-06 22:16:36 +02:00
|
|
|
import { Link } from 'react-router-dom';
|
2016-12-19 19:55:44 +01:00
|
|
|
|
|
|
|
import HistoryComponent from '../history/history-list-toggle-container';
|
2016-12-19 20:53:49 +01:00
|
|
|
import MetricComponent from './metric-container';
|
2018-02-16 09:19:30 +01:00
|
|
|
import EditFeatureToggle from './form/form-update-feature-container';
|
2018-03-11 11:54:45 +01:00
|
|
|
import ViewFeatureToggle from './form/form-view-feature-container';
|
2017-01-28 17:01:30 +01:00
|
|
|
import { styles as commonStyles } from '../common';
|
2018-12-19 14:54:52 +01:00
|
|
|
import { CREATE_FEATURE, DELETE_FEATURE, UPDATE_FEATURE } from '../../permissions';
|
2016-12-19 20:53:49 +01:00
|
|
|
|
|
|
|
const TABS = {
|
2018-02-11 17:56:00 +01:00
|
|
|
strategies: 0,
|
|
|
|
view: 1,
|
2016-12-19 20:53:49 +01:00
|
|
|
history: 2,
|
|
|
|
};
|
2016-12-19 19:55:44 +01:00
|
|
|
|
|
|
|
export default class ViewFeatureToggleComponent extends React.Component {
|
2018-03-10 18:09:20 +01:00
|
|
|
isFeatureView;
|
2017-08-28 19:15:47 +02:00
|
|
|
constructor(props) {
|
2016-12-19 19:55:44 +01:00
|
|
|
super(props);
|
2018-03-10 18:09:20 +01:00
|
|
|
this.isFeatureView = !!props.fetchFeatureToggles;
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
|
2017-07-10 23:38:44 +02:00
|
|
|
static propTypes = {
|
|
|
|
activeTab: PropTypes.string.isRequired,
|
|
|
|
featureToggleName: PropTypes.string.isRequired,
|
|
|
|
features: PropTypes.array.isRequired,
|
2018-03-10 18:09:20 +01:00
|
|
|
toggleFeature: PropTypes.func,
|
|
|
|
removeFeatureToggle: PropTypes.func,
|
2018-03-14 10:32:13 +01:00
|
|
|
revive: PropTypes.func,
|
2018-03-10 18:09:20 +01:00
|
|
|
fetchArchive: PropTypes.func,
|
|
|
|
fetchFeatureToggles: PropTypes.func,
|
|
|
|
editFeatureToggle: PropTypes.func,
|
2018-01-29 09:07:10 +01:00
|
|
|
featureToggle: PropTypes.object,
|
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-19 19:55:44 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
componentWillMount() {
|
2016-12-19 19:55:44 +01:00
|
|
|
if (this.props.features.length === 0) {
|
2018-03-10 18:09:20 +01:00
|
|
|
if (this.isFeatureView) {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
} else {
|
|
|
|
this.props.fetchArchive();
|
|
|
|
}
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
getTabContent(activeTab) {
|
2019-01-16 10:39:58 +01:00
|
|
|
const { features, featureToggle, featureToggleName, hasPermission } = this.props;
|
2016-12-19 20:53:49 +01:00
|
|
|
|
|
|
|
if (TABS[activeTab] === TABS.history) {
|
|
|
|
return <HistoryComponent toggleName={featureToggleName} />;
|
2018-02-11 17:56:00 +01:00
|
|
|
} else if (TABS[activeTab] === TABS.strategies) {
|
2019-01-16 10:39:58 +01:00
|
|
|
if (this.isFeatureView && hasPermission(UPDATE_FEATURE)) {
|
2018-08-10 16:07:18 +02:00
|
|
|
return (
|
2019-01-16 10:39:58 +01:00
|
|
|
<EditFeatureToggle featureToggle={featureToggle} features={features} history={this.props.history} />
|
2018-08-10 16:07:18 +02:00
|
|
|
);
|
2018-03-11 11:54:45 +01:00
|
|
|
}
|
2018-03-11 14:53:57 +01:00
|
|
|
return <ViewFeatureToggle featureToggle={featureToggle} />;
|
2016-12-19 20:53:49 +01:00
|
|
|
} else {
|
|
|
|
return <MetricComponent featureToggle={featureToggle} />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
goToTab(tabName, featureToggleName) {
|
2018-03-10 18:09:20 +01:00
|
|
|
let view = this.props.fetchFeatureToggles ? 'features' : 'archive';
|
2018-08-06 22:16:36 +02:00
|
|
|
this.props.history.push(`/${view}/${tabName}/${featureToggleName}`);
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
render() {
|
2016-12-19 19:55:44 +01:00
|
|
|
const {
|
2016-12-19 20:53:49 +01:00
|
|
|
featureToggle,
|
2016-12-19 19:55:44 +01:00
|
|
|
features,
|
2016-12-19 20:53:49 +01:00
|
|
|
activeTab,
|
2018-03-14 10:32:13 +01:00
|
|
|
revive,
|
2018-02-15 17:09:00 +01:00
|
|
|
// setValue,
|
2016-12-19 19:55:44 +01:00
|
|
|
featureToggleName,
|
2017-01-06 15:21:58 +01:00
|
|
|
toggleFeature,
|
|
|
|
removeFeatureToggle,
|
2019-01-16 10:39:58 +01:00
|
|
|
hasPermission,
|
2016-12-19 19:55:44 +01:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (!featureToggle) {
|
2017-08-28 19:15:47 +02:00
|
|
|
if (features.length === 0) {
|
2016-12-19 19:55:44 +01:00
|
|
|
return <ProgressBar indeterminate />;
|
|
|
|
}
|
2016-12-19 21:33:06 +01:00
|
|
|
return (
|
2016-12-20 19:31:14 +01:00
|
|
|
<span>
|
2017-08-28 19:15:47 +02:00
|
|
|
Could not find the toggle{' '}
|
2019-01-16 10:39:58 +01:00
|
|
|
{hasPermission(CREATE_FEATURE) ? (
|
|
|
|
<Link
|
|
|
|
to={{
|
|
|
|
pathname: '/features/create',
|
|
|
|
query: { name: featureToggleName },
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{featureToggleName}
|
|
|
|
</Link>
|
|
|
|
) : (
|
|
|
|
featureToggleName
|
|
|
|
)}
|
2016-12-20 19:31:14 +01:00
|
|
|
</span>
|
2016-12-19 21:33:06 +01:00
|
|
|
);
|
2016-12-19 19:55:44 +01:00
|
|
|
}
|
|
|
|
|
2018-02-11 17:56:00 +01:00
|
|
|
const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
|
2016-12-19 20:53:49 +01:00
|
|
|
const tabContent = this.getTabContent(activeTab);
|
2016-12-19 19:55:44 +01:00
|
|
|
|
2017-01-06 15:21:58 +01:00
|
|
|
const removeToggle = () => {
|
2017-08-28 19:15:47 +02:00
|
|
|
if (
|
|
|
|
// eslint-disable-next-line no-alert
|
|
|
|
window.confirm('Are you sure you want to remove this toggle?')
|
|
|
|
) {
|
2017-01-06 15:21:58 +01:00
|
|
|
removeFeatureToggle(featureToggle.name);
|
2018-08-06 22:16:36 +02:00
|
|
|
this.props.history.push('/features');
|
2017-01-06 15:21:58 +01:00
|
|
|
}
|
|
|
|
};
|
2018-03-14 10:32:13 +01:00
|
|
|
const reviveToggle = () => {
|
|
|
|
revive(featureToggle.name);
|
2018-08-06 22:16:36 +02:00
|
|
|
this.props.history.push('/features');
|
2018-03-14 10:32:13 +01:00
|
|
|
};
|
2018-12-19 14:54:52 +01:00
|
|
|
const updateFeatureToggle = e => {
|
|
|
|
let feature = { ...featureToggle, description: e.target.value };
|
2018-02-15 17:09:00 +01:00
|
|
|
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();
|
|
|
|
};
|
2017-01-06 15:21:58 +01:00
|
|
|
|
2016-12-19 19:55:44 +01:00
|
|
|
return (
|
2017-08-28 21:40:44 +02:00
|
|
|
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
|
|
|
|
<CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
|
2018-02-15 17:09:00 +01:00
|
|
|
<CardText>
|
2019-01-16 10:39:58 +01:00
|
|
|
{this.isFeatureView && hasPermission(UPDATE_FEATURE) ? (
|
|
|
|
<Textfield
|
|
|
|
floatingLabel
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
rows={1}
|
|
|
|
label="Description"
|
|
|
|
required
|
|
|
|
value={featureToggle.description}
|
|
|
|
onChange={v => setValue('description', v)}
|
|
|
|
onBlur={updateFeatureToggle}
|
2018-03-10 18:09:20 +01:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Textfield
|
|
|
|
disabled
|
|
|
|
floatingLabel
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
rows={1}
|
|
|
|
label="Description"
|
|
|
|
required
|
|
|
|
value={featureToggle.description}
|
|
|
|
/>
|
|
|
|
)}
|
2018-02-15 17:09:00 +01:00
|
|
|
</CardText>
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
<CardActions
|
|
|
|
border
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
}}
|
|
|
|
>
|
2017-02-02 16:31:22 +01:00
|
|
|
<span style={{ paddingRight: '24px' }}>
|
2019-01-16 10:39:58 +01:00
|
|
|
{hasPermission(UPDATE_FEATURE) ? (
|
|
|
|
<Switch
|
|
|
|
disabled={!this.isFeatureView}
|
|
|
|
ripple
|
|
|
|
checked={featureToggle.enabled}
|
|
|
|
onChange={() => toggleFeature(featureToggle.name)}
|
|
|
|
>
|
|
|
|
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
|
|
|
|
</Switch>
|
|
|
|
) : (
|
|
|
|
<Switch disabled ripple checked={featureToggle.enabled}>
|
|
|
|
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
|
|
|
|
</Switch>
|
|
|
|
)}
|
2017-02-02 16:31:22 +01:00
|
|
|
</span>
|
2018-03-10 18:09:20 +01:00
|
|
|
|
|
|
|
{this.isFeatureView ? (
|
2019-01-16 10:39:58 +01:00
|
|
|
<Button
|
|
|
|
disabled={!hasPermission(DELETE_FEATURE)}
|
|
|
|
onClick={removeToggle}
|
|
|
|
style={{ flexShrink: 0 }}
|
|
|
|
>
|
|
|
|
Archive
|
|
|
|
</Button>
|
2018-03-10 18:09:20 +01:00
|
|
|
) : (
|
2019-01-16 10:39:58 +01:00
|
|
|
<Button
|
|
|
|
disabled={!hasPermission(UPDATE_FEATURE)}
|
|
|
|
onClick={reviveToggle}
|
|
|
|
style={{ flexShrink: 0 }}
|
|
|
|
>
|
|
|
|
Revive
|
|
|
|
</Button>
|
2018-03-10 18:09:20 +01:00
|
|
|
)}
|
2017-01-28 17:01:30 +01:00
|
|
|
</CardActions>
|
2017-08-28 19:15:47 +02:00
|
|
|
<hr />
|
|
|
|
<Tabs
|
|
|
|
activeTab={activeTabId}
|
|
|
|
ripple
|
|
|
|
tabBarProps={{ style: { width: '100%' } }}
|
|
|
|
className="mdl-color--grey-100"
|
|
|
|
>
|
2018-02-11 17:56:00 +01:00
|
|
|
<Tab onClick={() => this.goToTab('strategies', featureToggleName)}>Strategies</Tab>
|
2017-08-28 21:40:44 +02:00
|
|
|
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
|
|
|
|
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
|
2017-01-28 17:01:30 +01:00
|
|
|
</Tabs>
|
|
|
|
{tabContent}
|
|
|
|
</Card>
|
2016-12-19 19:55:44 +01:00
|
|
|
);
|
|
|
|
}
|
2016-12-20 19:31:14 +01:00
|
|
|
}
|