2021-08-25 13:37:22 +02:00
|
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
import { Link, useParams } from 'react-router-dom';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
TextField,
|
|
|
|
Switch,
|
|
|
|
Paper,
|
|
|
|
FormControlLabel,
|
|
|
|
} from '@material-ui/core';
|
|
|
|
import { FileCopy } from '@material-ui/icons';
|
|
|
|
|
|
|
|
import { styles as commonStyles } from '../../../common';
|
|
|
|
import styles from './CopyFeature.module.scss';
|
|
|
|
|
|
|
|
import { trim } from '../../../common/util';
|
|
|
|
import ConditionallyRender from '../../../common/ConditionallyRender';
|
|
|
|
import { Alert } from '@material-ui/lab';
|
|
|
|
import { getTogglePath } from '../../../../utils/route-path-helpers';
|
2021-10-07 23:04:14 +02:00
|
|
|
import useFeatureApi from '../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
|
|
|
|
import useFeature from '../../../../hooks/api/getters/useFeature/useFeature';
|
2021-10-20 13:12:48 +02:00
|
|
|
import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
|
2021-08-25 13:37:22 +02:00
|
|
|
|
|
|
|
const CopyFeature = props => {
|
|
|
|
// static displayName = `AddFeatureComponent-${getDisplayName(Component)}`;
|
|
|
|
const [replaceGroupId, setReplaceGroupId] = useState(true);
|
|
|
|
const [apiError, setApiError] = useState('');
|
|
|
|
const [nameError, setNameError] = useState(undefined);
|
|
|
|
const [newToggleName, setNewToggleName] = useState();
|
2021-10-07 23:04:14 +02:00
|
|
|
const { cloneFeatureToggle } = useFeatureApi();
|
2021-08-25 13:37:22 +02:00
|
|
|
const inputRef = useRef();
|
2021-10-07 23:04:14 +02:00
|
|
|
const { name: copyToggleName, id: projectId } = useParams();
|
|
|
|
const { feature } = useFeature(projectId, copyToggleName);
|
2021-10-20 13:12:48 +02:00
|
|
|
const { uiConfig } = useUiConfig();
|
2021-08-25 13:37:22 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-10-07 23:04:14 +02:00
|
|
|
inputRef.current?.focus();
|
|
|
|
}, []);
|
2021-08-25 13:37:22 +02:00
|
|
|
|
|
|
|
const setValue = evt => {
|
|
|
|
const value = trim(evt.target.value);
|
|
|
|
setNewToggleName(value);
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleReplaceGroupId = () => {
|
|
|
|
setReplaceGroupId(prev => !prev);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onValidateName = async () => {
|
|
|
|
try {
|
|
|
|
await props.validateName(newToggleName);
|
|
|
|
|
|
|
|
setNameError(undefined);
|
|
|
|
} catch (err) {
|
|
|
|
setNameError(err.message);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const onSubmit = async evt => {
|
|
|
|
evt.preventDefault();
|
|
|
|
|
|
|
|
if (nameError) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
2021-10-07 23:04:14 +02:00
|
|
|
await cloneFeatureToggle(
|
|
|
|
projectId,
|
|
|
|
copyToggleName,
|
|
|
|
{ name: newToggleName, replaceGroupId }
|
|
|
|
);
|
|
|
|
props.history.push(
|
2021-10-20 13:12:48 +02:00
|
|
|
getTogglePath(projectId, newToggleName, uiConfig.flags.E)
|
2021-10-07 23:04:14 +02:00
|
|
|
)
|
2021-08-25 13:37:22 +02:00
|
|
|
} catch (e) {
|
|
|
|
setApiError(e);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-10-07 23:04:14 +02:00
|
|
|
if (!feature || !feature.name) return <span>Toggle not found</span>;
|
2021-08-25 13:37:22 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Paper
|
|
|
|
className={commonStyles.fullwidth}
|
|
|
|
style={{ overflow: 'visible' }}
|
|
|
|
>
|
|
|
|
<div className={styles.header}>
|
2021-10-07 23:04:14 +02:00
|
|
|
<h1>Copy {copyToggleName}</h1>
|
2021-08-25 13:37:22 +02:00
|
|
|
</div>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={apiError}
|
|
|
|
show={<Alert severity="error">{apiError}</Alert>}
|
|
|
|
/>
|
|
|
|
<section className={styles.content}>
|
|
|
|
<p className={styles.text}>
|
|
|
|
You are about to create a new feature toggle by cloning the
|
|
|
|
configuration of feature toggle
|
|
|
|
<Link
|
2021-10-20 13:12:48 +02:00
|
|
|
to={getTogglePath(projectId, copyToggleName, uiConfig.flags.E)}
|
2021-08-25 13:37:22 +02:00
|
|
|
>
|
2021-10-07 23:04:14 +02:00
|
|
|
{copyToggleName}
|
2021-08-25 13:37:22 +02:00
|
|
|
</Link>
|
|
|
|
. You must give the new feature toggle a unique name before
|
|
|
|
you can proceed.
|
|
|
|
</p>
|
|
|
|
<form onSubmit={onSubmit}>
|
|
|
|
<TextField
|
|
|
|
label="Feature toggle name"
|
|
|
|
name="name"
|
|
|
|
value={newToggleName || ''}
|
|
|
|
onBlur={onValidateName}
|
|
|
|
onChange={setValue}
|
|
|
|
error={nameError !== undefined}
|
|
|
|
helperText={nameError}
|
|
|
|
variant="outlined"
|
|
|
|
size="small"
|
|
|
|
inputRef={inputRef}
|
2021-10-20 13:12:48 +02:00
|
|
|
required
|
2021-08-25 13:37:22 +02:00
|
|
|
/>
|
|
|
|
<FormControlLabel
|
|
|
|
control={
|
|
|
|
<Switch
|
|
|
|
value={replaceGroupId}
|
|
|
|
checked={replaceGroupId}
|
|
|
|
label="Replace groupId"
|
|
|
|
onChange={toggleReplaceGroupId}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
label="Replace groupId"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Button type="submit" color="primary" variant="contained">
|
|
|
|
<FileCopy />
|
|
|
|
Create from copy
|
|
|
|
</Button>
|
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
</Paper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
CopyFeature.propTypes = {
|
|
|
|
history: PropTypes.object.isRequired,
|
|
|
|
validateName: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CopyFeature;
|