2022-02-24 00:57:35 +01:00
|
|
|
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
2022-01-18 12:16:08 +01:00
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import FeatureForm from '../FeatureForm/FeatureForm';
|
|
|
|
import useFeatureForm from '../hooks/useFeatureForm';
|
2022-02-24 00:57:35 +01:00
|
|
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
|
|
|
import useToast from 'hooks/useToast';
|
|
|
|
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
|
|
|
|
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
|
2022-01-28 10:51:48 +01:00
|
|
|
import { useContext } from 'react';
|
2022-02-24 09:23:07 +01:00
|
|
|
import { CreateButton } from 'component/common/CreateButton/CreateButton';
|
2022-02-24 00:57:35 +01:00
|
|
|
import UIContext from 'contexts/UIContext';
|
|
|
|
import { CF_CREATE_BTN_ID } from 'testIds';
|
2022-02-25 10:55:39 +01:00
|
|
|
import { formatUnknownError } from '../../../utils/format-unknown-error';
|
2022-01-18 12:16:08 +01:00
|
|
|
|
|
|
|
const CreateFeature = () => {
|
|
|
|
const { setToastData, setToastApiError } = useToast();
|
2022-01-28 10:51:48 +01:00
|
|
|
const { setShowFeedback } = useContext(UIContext);
|
2022-01-18 12:16:08 +01:00
|
|
|
const { uiConfig } = useUiConfig();
|
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const {
|
|
|
|
type,
|
|
|
|
setType,
|
|
|
|
name,
|
|
|
|
setName,
|
|
|
|
project,
|
|
|
|
setProject,
|
|
|
|
description,
|
|
|
|
setDescription,
|
2022-01-28 15:03:42 +01:00
|
|
|
validateToggleName,
|
2022-02-03 12:39:43 +01:00
|
|
|
impressionData,
|
|
|
|
setImpressionData,
|
2022-01-18 12:16:08 +01:00
|
|
|
getTogglePayload,
|
|
|
|
clearErrors,
|
|
|
|
errors,
|
|
|
|
} = useFeatureForm();
|
|
|
|
|
|
|
|
const { createFeatureToggle, loading } = useFeatureApi();
|
|
|
|
|
|
|
|
const handleSubmit = async (e: Event) => {
|
|
|
|
e.preventDefault();
|
|
|
|
clearErrors();
|
2022-01-28 15:03:42 +01:00
|
|
|
const validToggleName = await validateToggleName();
|
|
|
|
|
|
|
|
if (validToggleName) {
|
|
|
|
const payload = getTogglePayload();
|
|
|
|
try {
|
2022-03-03 10:01:04 +01:00
|
|
|
// @ts-expect-error
|
2022-01-28 15:03:42 +01:00
|
|
|
await createFeatureToggle(project, payload);
|
2022-02-04 10:36:08 +01:00
|
|
|
history.push(`/projects/${project}/features/${name}`);
|
2022-01-28 15:03:42 +01:00
|
|
|
setToastData({
|
|
|
|
title: 'Toggle created successfully',
|
|
|
|
text: 'Now you can start using your toggle.',
|
|
|
|
confetti: true,
|
|
|
|
type: 'success',
|
|
|
|
});
|
|
|
|
setShowFeedback(true);
|
2022-02-25 10:55:39 +01:00
|
|
|
} catch (error: unknown) {
|
|
|
|
setToastApiError(formatUnknownError(error));
|
2022-01-28 15:03:42 +01:00
|
|
|
}
|
2022-01-18 12:16:08 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const formatApiCode = () => {
|
|
|
|
return `curl --location --request POST '${
|
|
|
|
uiConfig.unleashUrl
|
|
|
|
}/api/admin/projects/${project}/features' \\
|
|
|
|
--header 'Authorization: INSERT_API_KEY' \\
|
|
|
|
--header 'Content-Type: application/json' \\
|
|
|
|
--data-raw '${JSON.stringify(getTogglePayload(), undefined, 2)}'`;
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleCancel = () => {
|
|
|
|
history.goBack();
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<FormTemplate
|
|
|
|
loading={loading}
|
|
|
|
title="Create Feature toggle"
|
|
|
|
description="Feature toggles support different use cases, each with their own specific needs such as simple static routing or more complex routing.
|
|
|
|
The feature toggle is disabled when created and you decide when to enable"
|
2022-02-08 12:35:43 +01:00
|
|
|
documentationLink="https://docs.getunleash.io/advanced/feature_toggle_types"
|
2022-01-18 12:16:08 +01:00
|
|
|
formatApiCode={formatApiCode}
|
|
|
|
>
|
|
|
|
<FeatureForm
|
|
|
|
type={type}
|
|
|
|
name={name}
|
|
|
|
project={project}
|
|
|
|
description={description}
|
|
|
|
setType={setType}
|
|
|
|
setName={setName}
|
|
|
|
setProject={setProject}
|
|
|
|
setDescription={setDescription}
|
2022-01-28 15:03:42 +01:00
|
|
|
validateToggleName={validateToggleName}
|
2022-02-03 12:39:43 +01:00
|
|
|
setImpressionData={setImpressionData}
|
|
|
|
impressionData={impressionData}
|
2022-01-18 12:16:08 +01:00
|
|
|
errors={errors}
|
|
|
|
handleSubmit={handleSubmit}
|
|
|
|
handleCancel={handleCancel}
|
|
|
|
mode="Create"
|
|
|
|
clearErrors={clearErrors}
|
|
|
|
>
|
2022-02-24 09:23:07 +01:00
|
|
|
<CreateButton
|
|
|
|
name="Feature"
|
2022-01-18 12:16:08 +01:00
|
|
|
permission={CREATE_FEATURE}
|
|
|
|
projectId={project}
|
2022-01-24 23:05:11 +01:00
|
|
|
data-test={CF_CREATE_BTN_ID}
|
2022-02-24 00:57:35 +01:00
|
|
|
/>
|
2022-01-18 12:16:08 +01:00
|
|
|
</FeatureForm>
|
|
|
|
</FormTemplate>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CreateFeature;
|