Extract update user role

coder · BrunoQuaresma · Oct 19, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
commit 82fba2fc90f20e8a4c765194f6a7f707879c0da1
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -48,7 +48,7 @@ export const templateACL = (templateId: string) => {
   };
 };
 
-export const addUserToTemplateACL = (
+export const setUserRole = (
   queryClient: QueryClient,
 ): MutationOptions<
   Awaited<ReturnType<typeof API.updateTemplateACL>>,

diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -14,7 +14,8 @@ import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView";
 import { docs } from "utils/docs";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { addUserToTemplateACL, templateACL } from "api/queries/templates";
+import { setUserRole, templateACL } from "api/queries/templates";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const TemplatePermissionsPage: FC<
   React.PropsWithChildren<unknown>
@@ -25,15 +26,16 @@ export const TemplatePermissionsPage: FC<
   const [state, send] = useMachine(templateACLMachine, {
     context: { templateId: template.id },
   });
-  const { userToBeUpdated, groupToBeUpdated } = state.context;
+  const { groupToBeUpdated } = state.context;
   const templateACLQuery = useQuery({
     ...templateACL(template.id),
     onSuccess: (data) => {
       send({ type: "LOAD", data });
     },
   });
   const queryClient = useQueryClient();
-  const addUserMutation = useMutation(addUserToTemplateACL(queryClient));
+  const addUserMutation = useMutation(setUserRole(queryClient));
+  const updateUserMutation = useMutation(setUserRole(queryClient));
 
   return (
     <>
@@ -79,10 +81,19 @@ export const TemplatePermissionsPage: FC<
             reset();
           }}
           isAddingUser={addUserMutation.isLoading}
-          onUpdateUser={(user, role) => {
-            send("UPDATE_USER_ROLE", { user, role });
+          onUpdateUser={async (user, role) => {
+            await updateUserMutation.mutateAsync({
+              templateId: template.id,
+              userId: user.id,
+              role,
+            });
+            displaySuccess("User role updated successfully!");
           }}
-          updatingUser={userToBeUpdated}
+          updatingUserId={
+            updateUserMutation.isLoading
+              ? updateUserMutation.variables?.userId
+              : undefined
+          }
           onRemoveUser={(user) => {
             send("REMOVE_USER", { user });
           }}

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: (
@@ -185,7 +185,7 @@ export const TemplatePermissionsPageView: FC<
   // User
   onAddUser,
   isAddingUser,
-  updatingUser,
+  updatingUserId,
   onUpdateUser,
   onRemoveUser,
   // Group
@@ -313,9 +313,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,

diff --git a/site/src/xServices/template/templateACLXService.ts b/site/src/xServices/template/templateACLXService.ts
@@ -14,9 +14,6 @@ export const templateACLMachine = createMachine(
       context: {} as {
         templateId: string;
         templateACL?: TemplateACL;
-        // User
-        userToBeUpdated?: TemplateUser;
-        addUserCallback?: () => void;
         // Group
         groupToBeAdded?: TemplateGroup;
         groupToBeUpdated?: TemplateGroup;
@@ -27,9 +24,6 @@ export const templateACLMachine = createMachine(
           data: TemplateACL;
         };
         // User
-        updateUser: {
-          data: unknown;
-        };
         // Group
         addGroup: {
           data: unknown;
@@ -43,11 +37,6 @@ export const templateACLMachine = createMachine(
             type: "LOAD";
             data: TemplateACL;
           }
-        | {
-            type: "UPDATE_USER_ROLE";
-            user: TemplateUser;
-            role: TemplateRole;
-          }
         | {
             type: "REMOVE_USER";
             user: TemplateUser;
@@ -84,10 +73,6 @@ export const templateACLMachine = createMachine(
       idle: {
         on: {
           // User
-          UPDATE_USER_ROLE: {
-            target: "updatingUser",
-            actions: ["assignUserToBeUpdated"],
-          },
           REMOVE_USER: {
             target: "removingUser",
             actions: ["removeUserFromTemplateACL"],
@@ -108,19 +93,6 @@ export const templateACLMachine = createMachine(
         },
       },
       // User
-      updatingUser: {
-        invoke: {
-          src: "updateUser",
-          onDone: {
-            target: "idle",
-            actions: [
-              "updateUserOnTemplateACL",
-              "clearUserToBeUpdated",
-              "displayUpdateUserSuccessMessage",
-            ],
-          },
-        },
-      },
       removingUser: {
         invoke: {
           src: "removeUser",
@@ -167,12 +139,6 @@ export const templateACLMachine = createMachine(
   {
     services: {
       // User
-      updateUser: ({ templateId }, { user, role }) =>
-        updateTemplateACL(templateId, {
-          user_perms: {
-            [user.id]: role,
-          },
-        }),
       removeUser: ({ templateId }, { user }) =>
         updateTemplateACL(templateId, {
           user_perms: {
@@ -204,33 +170,6 @@ export const templateACLMachine = createMachine(
         templateACL: (_, { data }) => data,
       }),
       // User
-      assignUserToBeUpdated: assign({
-        userToBeUpdated: (_, { user, role }) => ({ ...user, role }),
-      }),
-      updateUserOnTemplateACL: assign({
-        templateACL: ({ templateACL, userToBeUpdated }) => {
-          if (!userToBeUpdated) {
-            throw new Error("No user to be added");
-          }
-          if (!templateACL) {
-            throw new Error("Template ACL is not loaded yet");
-          }
-          return {
-            ...templateACL,
-            users: templateACL.users.map((oldTemplateUser) => {
-              return oldTemplateUser.id === userToBeUpdated.id
-                ? userToBeUpdated
-                : oldTemplateUser;
-            }),
-          };
-        },
-      }),
-      clearUserToBeUpdated: assign({
-        userToBeUpdated: (_) => undefined,
-      }),
-      displayUpdateUserSuccessMessage: () => {
-        displaySuccess("User role update successfully!");
-      },
       removeUserFromTemplateACL: assign({
         templateACL: ({ templateACL }, { user }) => {
           if (!templateACL) {