import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import {
Button,
Icon,
TextField,
Switch,
Paper,
FormControlLabel,
} from '@material-ui/core';
import { styles as commonStyles } from '../../common';
import styles from './copy-feature-component.module.scss';
import { trim } from '../../common/util';
import ConditionallyRender from '../../common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
class CopyFeatureComponent extends Component {
// static displayName = `AddFeatureComponent-${getDisplayName(Component)}`;
constructor() {
super();
this.state = { newToggleName: '', replaceGroupId: true };
this.inputRef = React.createRef();
}
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
// TODO unwind this stuff
if (this.props.copyToggle) {
this.setState({ featureToggle: this.props.copyToggle });
}
}
componentDidMount() {
if (this.props.copyToggle) {
this.inputRef.current.focus();
} 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 = async 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 => {
if (s.parameters && s.parameters.groupId) {
s.parameters.groupId = newToggleName;
}
});
}
try {
this.props
.createFeatureToggle(copyToggle)
.then(() =>
history.push(`/features/strategies/${copyToggle.name}`)
);
} catch (e) {
this.setState({ apiError: e });
}
};
render() {
const { copyToggle } = this.props;
if (!copyToggle) return Toggle not found;
const { newToggleName, nameError, replaceGroupId } = this.state;
return (
Copy {copyToggle.name}
{this.state.apiError}}
/>
You are about to create a new feature toggle by cloning
the configuration of feature toggle
{copyToggle.name}
. You must give the new feature toggle a unique name
before you can proceed.