2020-01-09 22:51:05 +01:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Icon,
|
|
|
|
TextField,
|
|
|
|
Switch,
|
|
|
|
Paper,
|
|
|
|
FormControlLabel,
|
|
|
|
} from '@material-ui/core';
|
2020-01-09 22:51:05 +01:00
|
|
|
|
|
|
|
import { styles as commonStyles } from '../../common';
|
2021-03-30 15:14:02 +02:00
|
|
|
import styles from './copy-feature-component.module.scss';
|
2020-01-09 22:51:05 +01:00
|
|
|
|
2020-11-27 22:23:44 +01:00
|
|
|
import { trim } from '../../common/util';
|
2020-01-09 22:51:05 +01:00
|
|
|
|
|
|
|
class CopyFeatureComponent extends Component {
|
|
|
|
// static displayName = `AddFeatureComponent-${getDisplayName(Component)}`;
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = { newToggleName: '', replaceGroupId: true };
|
2021-03-30 15:14:02 +02:00
|
|
|
this.inputRef = React.createRef();
|
2020-01-09 22:51:05 +01:00
|
|
|
}
|
|
|
|
|
2020-04-18 21:50:01 +02:00
|
|
|
// eslint-disable-next-line camelcase
|
|
|
|
UNSAFE_componentWillMount() {
|
2020-01-09 22:51:05 +01:00
|
|
|
// TODO unwind this stuff
|
|
|
|
if (this.props.copyToggle) {
|
|
|
|
this.setState({ featureToggle: this.props.copyToggle });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
if (this.props.copyToggle) {
|
2021-03-30 15:14:02 +02:00
|
|
|
this.inputRef.current.focus();
|
2020-01-09 22:51:05 +01:00
|
|
|
} else {
|
|
|
|
this.props.fetchFeatureToggles();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setValue = evt => {
|
|
|
|
const value = trim(evt.target.value);
|
|
|
|
this.setState({ newToggleName: value });
|
|
|
|
};
|
|
|
|
|
|
|
|
toggleReplaceGroupId = () => {
|
|
|
|
const { replaceGroupId } = !!this.state;
|
|
|
|
this.setState({ replaceGroupId });
|
|
|
|
};
|
|
|
|
|
|
|
|
onValidateName = async () => {
|
|
|
|
const { newToggleName } = this.state;
|
|
|
|
try {
|
|
|
|
await this.props.validateName(newToggleName);
|
|
|
|
this.setState({ nameError: undefined });
|
|
|
|
} catch (err) {
|
|
|
|
this.setState({ nameError: err.message });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
onSubmit = evt => {
|
|
|
|
evt.preventDefault();
|
|
|
|
|
|
|
|
const { nameError, newToggleName, replaceGroupId } = this.state;
|
|
|
|
if (nameError) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { copyToggle, history } = this.props;
|
|
|
|
|
|
|
|
copyToggle.name = newToggleName;
|
|
|
|
|
|
|
|
if (replaceGroupId) {
|
|
|
|
copyToggle.strategies.forEach(s => {
|
2020-01-10 08:22:08 +01:00
|
|
|
if (s.parameters && s.parameters.groupId) {
|
2020-01-09 22:51:05 +01:00
|
|
|
s.parameters.groupId = newToggleName;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
this.props
|
|
|
|
.createFeatureToggle(copyToggle)
|
|
|
|
.then(() =>
|
|
|
|
history.push(`/features/strategies/${copyToggle.name}`)
|
|
|
|
);
|
2020-01-09 22:51:05 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { copyToggle } = this.props;
|
|
|
|
|
|
|
|
if (!copyToggle) return <span>Toggle not found</span>;
|
|
|
|
|
|
|
|
const { newToggleName, nameError, replaceGroupId } = this.state;
|
|
|
|
|
|
|
|
return (
|
2021-05-04 09:59:42 +02:00
|
|
|
<Paper
|
|
|
|
className={commonStyles.fullwidth}
|
|
|
|
style={{ overflow: 'visible' }}
|
|
|
|
>
|
2021-03-30 15:14:02 +02:00
|
|
|
<div className={styles.header}>
|
|
|
|
<h1>Copy {copyToggle.name}</h1>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<section className={styles.content}>
|
|
|
|
<p className={styles.text}>
|
2021-05-04 09:59:42 +02:00
|
|
|
You are about to create a new feature toggle by cloning
|
|
|
|
the configuration of feature toggle
|
|
|
|
<Link to={`/features/strategies/${copyToggle.name}`}>
|
|
|
|
{copyToggle.name}
|
|
|
|
</Link>
|
|
|
|
. You must give the new feature toggle a unique name
|
|
|
|
before you can proceed.
|
2021-03-30 15:14:02 +02:00
|
|
|
</p>
|
|
|
|
<form onSubmit={this.onSubmit}>
|
|
|
|
<TextField
|
2020-01-09 22:51:05 +01:00
|
|
|
label="Feature toggle name"
|
|
|
|
name="name"
|
|
|
|
value={newToggleName}
|
|
|
|
onBlur={this.onValidateName}
|
|
|
|
onChange={this.setValue}
|
2021-03-30 15:14:02 +02:00
|
|
|
error={nameError !== undefined}
|
|
|
|
helperText={nameError}
|
|
|
|
variant="outlined"
|
|
|
|
size="small"
|
|
|
|
inputRef={this.inputRef}
|
2020-01-09 22:51:05 +01:00
|
|
|
/>
|
2021-03-30 15:14:02 +02:00
|
|
|
<FormControlLabel
|
|
|
|
control={
|
|
|
|
<Switch
|
|
|
|
value={replaceGroupId}
|
|
|
|
checked={replaceGroupId}
|
|
|
|
label="Replace groupId"
|
|
|
|
onChange={this.toggleReplaceGroupId}
|
|
|
|
/>
|
|
|
|
}
|
2020-01-09 22:51:05 +01:00
|
|
|
label="Replace groupId"
|
|
|
|
/>
|
2021-03-30 15:14:02 +02:00
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
color="primary"
|
|
|
|
variant="contained"
|
|
|
|
>
|
2021-03-30 15:14:02 +02:00
|
|
|
<Icon>file_copy</Icon>
|
|
|
|
Create from copy
|
2020-01-09 22:51:05 +01:00
|
|
|
</Button>
|
2021-03-30 15:14:02 +02:00
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
</Paper>
|
2020-01-09 22:51:05 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
CopyFeatureComponent.propTypes = {
|
|
|
|
copyToggle: PropTypes.object,
|
|
|
|
history: PropTypes.object.isRequired,
|
|
|
|
createFeatureToggle: PropTypes.func.isRequired,
|
|
|
|
fetchFeatureToggles: PropTypes.func.isRequired,
|
|
|
|
validateName: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CopyFeatureComponent;
|