coder · BrunoQuaresma · Oct 19, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -947,7 +947,7 @@ export const getTemplateACL = async (
 export const updateTemplateACL = async (
   templateId: string,
   data: TypesGen.UpdateTemplateACL,
-): Promise<TypesGen.TemplateACL> => {
+): Promise<{ message: string }> => {
   const response = await axios.patch(
     `/api/v2/templates/${templateId}/acl`,
     data,

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -6,8 +6,13 @@ import {
   type TemplateVersion,
   CreateTemplateRequest,
   ProvisionerJob,
+  TemplateRole,
 } from "api/typesGenerated";
-import { type QueryClient, type QueryOptions } from "react-query";
+import {
+  MutationOptions,
+  type QueryClient,
+  type QueryOptions,
+} from "react-query";
 import { delay } from "utils/delay";
 
 export const templateByNameKey = (orgId: string, name: string) => [
@@ -36,6 +41,53 @@ export const templates = (orgId: string) => {
   };
 };
 
+export const templateACL = (templateId: string) => {
+  return {
+    queryKey: ["templateAcl", templateId],
+    queryFn: () => API.getTemplateACL(templateId),
+  };
+};
+
+export const setUserRole = (
+  queryClient: QueryClient,
+): MutationOptions<
+  Awaited<ReturnType<typeof API.updateTemplateACL>>,
+  unknown,
+  { templateId: string; userId: string; role: TemplateRole }
+> => {
+  return {
+    mutationFn: ({ templateId, userId, role }) =>
+      API.updateTemplateACL(templateId, {
+        user_perms: {
+          [userId]: role,
+        },
+      }),
+    onSuccess: async (_res, { templateId }) => {
+      await queryClient.invalidateQueries(["templateAcl", templateId]);
+    },
+  };
+};
+
+export const setGroupRole = (
+  queryClient: QueryClient,
+): MutationOptions<
+  Awaited<ReturnType<typeof API.updateTemplateACL>>,
+  unknown,
+  { templateId: string; groupId: string; role: TemplateRole }
+> => {
+  return {
+    mutationFn: ({ templateId, groupId, role }) =>
+      API.updateTemplateACL(templateId, {
+        group_perms: {
+          [groupId]: role,
+        },
+      }),
+    onSuccess: async (_res, { templateId }) => {
+      await queryClient.invalidateQueries(["templateAcl", templateId]);
+    },
+  };
+};
+
 export const templateExamples = (orgId: string) => {
   return {
     queryKey: [...getTemplatesQueryKey(orgId), "examples"],

diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -1,29 +1,36 @@
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
-import { useMachine } from "@xstate/react";
 import { Paywall } from "components/Paywall/Paywall";
 import { Stack } from "components/Stack/Stack";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
-import { templateACLMachine } from "xServices/template/templateACLXService";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView";
 import { docs } from "utils/docs";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { setGroupRole, setUserRole, templateACL } from "api/queries/templates";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const TemplatePermissionsPage: FC<
   React.PropsWithChildren<unknown>
 > = () => {
   const organizationId = useOrganizationId();
   const { template, permissions } = useTemplateSettings();
   const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
-  const [state, send] = useMachine(templateACLMachine, {
-    context: { templateId: template.id },
-  });
-  const { templateACL, userToBeUpdated, groupToBeUpdated } = state.context;
+  const templateACLQuery = useQuery(templateACL(template.id));
+  const queryClient = useQueryClient();
+
+  const addUserMutation = useMutation(setUserRole(queryClient));
+  const updateUserMutation = useMutation(setUserRole(queryClient));
+  const removeUserMutation = useMutation(setUserRole(queryClient));
+
+  const addGroupMutation = useMutation(setGroupRole(queryClient));
+  const updateGroupMutation = useMutation(setGroupRole(queryClient));
+  const removeGroupMutation = useMutation(setGroupRole(queryClient));
 
   return (
     <>
@@ -58,29 +65,67 @@ export const TemplatePermissionsPage: FC<
         <TemplatePermissionsPageView
           organizationId={organizationId}
           templateID={template.id}
-          templateACL={templateACL}
+          templateACL={templateACLQuery.data}
           canUpdatePermissions={Boolean(permissions?.canUpdateTemplate)}
-          onAddUser={(user, role, reset) => {
-            send("ADD_USER", { user, role, onDone: reset });
+          onAddUser={async (user, role, reset) => {
+            await addUserMutation.mutateAsync({
+              templateId: template.id,
+              userId: user.id,
+              role,
+            });
+            reset();
           }}
-          isAddingUser={state.matches("addingUser")}
-          onUpdateUser={(user, role) => {
-            send("UPDATE_USER_ROLE", { user, role });
+          isAddingUser={addUserMutation.isLoading}
+          onUpdateUser={async (user, role) => {
+            await updateUserMutation.mutateAsync({
+              templateId: template.id,
+              userId: user.id,
+              role,
+            });
+            displaySuccess("User role updated successfully!");
           }}
-          updatingUser={userToBeUpdated}
-          onRemoveUser={(user) => {
-            send("REMOVE_USER", { user });
+          updatingUserId={
+            updateUserMutation.isLoading
+              ? updateUserMutation.variables?.userId
+              : undefined
+          }
+          onRemoveUser={async (user) => {
+            await removeUserMutation.mutateAsync({
+              templateId: template.id,
+              userId: user.id,
+              role: "",
+            });
+            displaySuccess("User removed successfully!");
           }}
-          onAddGroup={(group, role, reset) => {
-            send("ADD_GROUP", { group, role, onDone: reset });
+          onAddGroup={async (group, role, reset) => {
+            await addGroupMutation.mutateAsync({
+              templateId: template.id,
+              groupId: group.id,
+              role,
+            });
+            reset();
           }}
-          isAddingGroup={state.matches("addingGroup")}
-          onUpdateGroup={(group, role) => {
-            send("UPDATE_GROUP_ROLE", { group, role });
+          isAddingGroup={addGroupMutation.isLoading}
+          onUpdateGroup={async (group, role) => {
+            await updateGroupMutation.mutateAsync({
+              templateId: template.id,
+              groupId: group.id,
+              role,
+            });
+            displaySuccess("Group role updated successfully!");
           }}
-          updatingGroup={groupToBeUpdated}
-          onRemoveGroup={(group) => {
-            send("REMOVE_GROUP", { group });
+          updatingGroupId={
+            updateGroupMutation.isLoading
+              ? updateGroupMutation.variables?.groupId
+              : undefined
+          }
+          onRemoveGroup={async (group) => {
+            await removeGroupMutation.mutateAsync({
+              groupId: group.id,
+              templateId: template.id,
+              role: "",
+            });
+            displaySuccess("Group removed successfully!");
           }}
         />
       )}

diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -161,7 +161,7 @@ export interface TemplatePermissionsPageViewProps {
   ) => void;
   isAddingUser: boolean;
   onUpdateUser: (user: TemplateUser, role: TemplateRole) => void;
-  updatingUser: TemplateUser | undefined;
+  updatingUserId: TemplateUser["id"] | undefined;
   onRemoveUser: (user: TemplateUser) => void;
   // Group
   onAddGroup: (
@@ -171,7 +171,7 @@ export interface TemplatePermissionsPageViewProps {
   ) => void;
   isAddingGroup: boolean;
   onUpdateGroup: (group: TemplateGroup, role: TemplateRole) => void;
-  updatingGroup: TemplateGroup | undefined;
+  updatingGroupId?: TemplateGroup["id"] | undefined;
   onRemoveGroup: (group: Group) => void;
 }
 
@@ -185,13 +185,13 @@ export const TemplatePermissionsPageView: FC<
   // User
   onAddUser,
   isAddingUser,
-  updatingUser,
+  updatingUserId,
   onUpdateUser,
   onRemoveUser,
   // Group
   onAddGroup,
   isAddingGroup,
-  updatingGroup,
+  updatingGroupId,
   onUpdateGroup,
   onRemoveGroup,
 }) => {
@@ -265,9 +265,7 @@ export const TemplatePermissionsPageView: FC<
                           <Cond condition={canUpdatePermissions}>
                             <RoleSelect
                               value={group.role}
-                              disabled={
-                                updatingGroup && updatingGroup.id === group.id
-                              }
+                              disabled={updatingGroupId === group.id}
                               onChange={(event) => {
                                 onUpdateGroup(
                                   group,
@@ -313,9 +311,7 @@ export const TemplatePermissionsPageView: FC<
                           <Cond condition={canUpdatePermissions}>
                             <RoleSelect
                               value={user.role}
-                              disabled={
-                                updatingUser && updatingUser.id === user.id
-                              }
+                              disabled={updatingUserId === user.id}
                               onChange={(event) => {
                                 onUpdateUser(
                                   user,