/
CreateGroup.tsx
120 lines (109 loc) · 3.92 KB
/
CreateGroup.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { useNavigate } from 'react-router-dom';
import { GroupForm } from '../GroupForm/GroupForm';
import { useGroupForm } from '../hooks/useGroupForm';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useToast from 'hooks/useToast';
import { useGroupApi } from 'hooks/api/actions/useGroupApi/useGroupApi';
import { formatUnknownError } from 'utils/formatUnknownError';
import { UG_CREATE_BTN_ID } from 'utils/testIds';
import { Button } from '@mui/material';
import { CREATE } from 'constants/misc';
import { GO_BACK } from 'constants/navigate';
import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
export const CreateGroup = () => {
const { setToastData, setToastApiError } = useToast();
const { uiConfig } = useUiConfig();
const navigate = useNavigate();
const {
name,
setName,
description,
setDescription,
mappingsSSO,
setMappingsSSO,
users,
setUsers,
getGroupPayload,
clearErrors,
errors,
setErrors,
} = useGroupForm();
const { groups } = useGroups();
const { createGroup, loading } = useGroupApi();
const handleSubmit = async (e: Event) => {
e.preventDefault();
clearErrors();
if (!isValid) return;
const payload = getGroupPayload();
try {
const group = await createGroup(payload);
navigate(`/admin/groups/${group.id}`);
setToastData({
title: 'Group created successfully',
text: 'Now you can start using your group.',
confetti: true,
type: 'success',
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
const formatApiCode = () => {
return `curl --location --request POST '${
uiConfig.unleashUrl
}/api/admin/groups' \\
--header 'Authorization: INSERT_API_KEY' \\
--header 'Content-Type: application/json' \\
--data-raw '${JSON.stringify(getGroupPayload(), undefined, 2)}'`;
};
const handleCancel = () => {
navigate(GO_BACK);
};
const isNameEmpty = (name: string) => name.length;
const isNameUnique = (name: string) =>
!groups?.filter(group => group.name === name).length;
const isValid = isNameEmpty(name) && isNameUnique(name);
const onSetName = (name: string) => {
clearErrors();
if (!isNameUnique(name)) {
setErrors({ name: 'A group with that name already exists.' });
}
setName(name);
};
return (
<FormTemplate
loading={loading}
title="Create group"
description="Groups is the best and easiest way to organize users and then use them in projects to assign a specific role in one go to all the users in a group."
documentationLink="https://docs.getunleash.io/advanced/groups"
documentationLinkLabel="Groups documentation"
formatApiCode={formatApiCode}
>
<GroupForm
name={name}
description={description}
mappingsSSO={mappingsSSO}
users={users}
setName={onSetName}
setDescription={setDescription}
setMappingsSSO={setMappingsSSO}
setUsers={setUsers}
errors={errors}
handleSubmit={handleSubmit}
handleCancel={handleCancel}
mode={CREATE}
>
<Button
type="submit"
variant="contained"
color="primary"
disabled={!isValid}
data-testid={UG_CREATE_BTN_ID}
>
Create group
</Button>
</GroupForm>
</FormTemplate>
);
};