|
1 | 1 | import Button from "@mui/material/Button";
|
2 | 2 | import Link from "@mui/material/Link";
|
3 | 3 | import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
|
4 |
| -import { useMachine } from "@xstate/react"; |
5 | 4 | import { Paywall } from "components/Paywall/Paywall";
|
6 | 5 | import { Stack } from "components/Stack/Stack";
|
7 | 6 | import { useFeatureVisibility } from "hooks/useFeatureVisibility";
|
8 | 7 | import { useOrganizationId } from "hooks/useOrganizationId";
|
9 | 8 | import { FC } from "react";
|
10 | 9 | import { Helmet } from "react-helmet-async";
|
11 | 10 | import { pageTitle } from "utils/page";
|
12 |
| -import { templateACLMachine } from "xServices/template/templateACLXService"; |
13 | 11 | import { useTemplateSettings } from "../TemplateSettingsLayout";
|
14 | 12 | import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView";
|
15 | 13 | import { docs } from "utils/docs";
|
| 14 | +import { useMutation, useQuery, useQueryClient } from "react-query"; |
| 15 | +import { setGroupRole, setUserRole, templateACL } from "api/queries/templates"; |
| 16 | +import { displaySuccess } from "components/GlobalSnackbar/utils"; |
16 | 17 |
|
17 | 18 | export const TemplatePermissionsPage: FC<
|
18 | 19 | React.PropsWithChildren<unknown>
|
19 | 20 | > = () => {
|
20 | 21 | const organizationId = useOrganizationId();
|
21 | 22 | const { template, permissions } = useTemplateSettings();
|
22 | 23 | const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
|
23 |
| - const [state, send] = useMachine(templateACLMachine, { |
24 |
| - context: { templateId: template.id }, |
25 |
| - }); |
26 |
| - const { templateACL, userToBeUpdated, groupToBeUpdated } = state.context; |
| 24 | + const templateACLQuery = useQuery(templateACL(template.id)); |
| 25 | + const queryClient = useQueryClient(); |
| 26 | + |
| 27 | + const addUserMutation = useMutation(setUserRole(queryClient)); |
| 28 | + const updateUserMutation = useMutation(setUserRole(queryClient)); |
| 29 | + const removeUserMutation = useMutation(setUserRole(queryClient)); |
| 30 | + |
| 31 | + const addGroupMutation = useMutation(setGroupRole(queryClient)); |
| 32 | + const updateGroupMutation = useMutation(setGroupRole(queryClient)); |
| 33 | + const removeGroupMutation = useMutation(setGroupRole(queryClient)); |
27 | 34 |
|
28 | 35 | return (
|
29 | 36 | <>
|
@@ -58,29 +65,67 @@ export const TemplatePermissionsPage: FC<
|
58 | 65 | <TemplatePermissionsPageView
|
59 | 66 | organizationId={organizationId}
|
60 | 67 | templateID={template.id}
|
61 |
| - templateACL={templateACL} |
| 68 | + templateACL={templateACLQuery.data} |
62 | 69 | canUpdatePermissions={Boolean(permissions?.canUpdateTemplate)}
|
63 |
| - onAddUser={(user, role, reset) => { |
64 |
| - send("ADD_USER", { user, role, onDone: reset }); |
| 70 | + onAddUser={async (user, role, reset) => { |
| 71 | + await addUserMutation.mutateAsync({ |
| 72 | + templateId: template.id, |
| 73 | + userId: user.id, |
| 74 | + role, |
| 75 | + }); |
| 76 | + reset(); |
65 | 77 | }}
|
66 |
| - isAddingUser={state.matches("addingUser")} |
67 |
| - onUpdateUser={(user, role) => { |
68 |
| - send("UPDATE_USER_ROLE", { user, role }); |
| 78 | + isAddingUser={addUserMutation.isLoading} |
| 79 | + onUpdateUser={async (user, role) => { |
| 80 | + await updateUserMutation.mutateAsync({ |
| 81 | + templateId: template.id, |
| 82 | + userId: user.id, |
| 83 | + role, |
| 84 | + }); |
| 85 | + displaySuccess("User role updated successfully!"); |
69 | 86 | }}
|
70 |
| - updatingUser={userToBeUpdated} |
71 |
| - onRemoveUser={(user) => { |
72 |
| - send("REMOVE_USER", { user }); |
| 87 | + updatingUserId={ |
| 88 | + updateUserMutation.isLoading |
| 89 | + ? updateUserMutation.variables?.userId |
| 90 | + : undefined |
| 91 | + } |
| 92 | + onRemoveUser={async (user) => { |
| 93 | + await removeUserMutation.mutateAsync({ |
| 94 | + templateId: template.id, |
| 95 | + userId: user.id, |
| 96 | + role: "", |
| 97 | + }); |
| 98 | + displaySuccess("User removed successfully!"); |
73 | 99 | }}
|
74 |
| - onAddGroup={(group, role, reset) => { |
75 |
| - send("ADD_GROUP", { group, role, onDone: reset }); |
| 100 | + onAddGroup={async (group, role, reset) => { |
| 101 | + await addGroupMutation.mutateAsync({ |
| 102 | + templateId: template.id, |
| 103 | + groupId: group.id, |
| 104 | + role, |
| 105 | + }); |
| 106 | + reset(); |
76 | 107 | }}
|
77 |
| - isAddingGroup={state.matches("addingGroup")} |
78 |
| - onUpdateGroup={(group, role) => { |
79 |
| - send("UPDATE_GROUP_ROLE", { group, role }); |
| 108 | + isAddingGroup={addGroupMutation.isLoading} |
| 109 | + onUpdateGroup={async (group, role) => { |
| 110 | + await updateGroupMutation.mutateAsync({ |
| 111 | + templateId: template.id, |
| 112 | + groupId: group.id, |
| 113 | + role, |
| 114 | + }); |
| 115 | + displaySuccess("Group role updated successfully!"); |
80 | 116 | }}
|
81 |
| - updatingGroup={groupToBeUpdated} |
82 |
| - onRemoveGroup={(group) => { |
83 |
| - send("REMOVE_GROUP", { group }); |
| 117 | + updatingGroupId={ |
| 118 | + updateGroupMutation.isLoading |
| 119 | + ? updateGroupMutation.variables?.groupId |
| 120 | + : undefined |
| 121 | + } |
| 122 | + onRemoveGroup={async (group) => { |
| 123 | + await removeGroupMutation.mutateAsync({ |
| 124 | + groupId: group.id, |
| 125 | + templateId: template.id, |
| 126 | + role: "", |
| 127 | + }); |
| 128 | + displaySuccess("Group removed successfully!"); |
84 | 129 | }}
|
85 | 130 | />
|
86 | 131 | )}
|
|
0 commit comments