Extract adding user

BrunoQuaresma · BrunoQuaresma · commit f424a70de78d · 2023-10-18T14:41:10.000Z
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) => [
@@ -43,6 +48,26 @@ export const templateACL = (templateId: string) => {
   };
 };
 
+export const addUserToTemplateACL = (
+  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 (templateAcl, { 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
@@ -13,8 +13,8 @@ import { templateACLMachine } from "xServices/template/templateACLXService";
 import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView";
 import { docs } from "utils/docs";
-import { useQuery } from "react-query";
-import { templateACL } from "api/queries/templates";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { addUserToTemplateACL, templateACL } from "api/queries/templates";
 
 export const TemplatePermissionsPage: FC<
   React.PropsWithChildren<unknown>
@@ -32,6 +32,8 @@ export const TemplatePermissionsPage: FC<
       send({ type: "LOAD", data });
     },
   });
+  const queryClient = useQueryClient();
+  const addUserMutation = useMutation(addUserToTemplateACL(queryClient));
 
   return (
     <>
@@ -68,10 +70,15 @@ export const TemplatePermissionsPage: FC<
           templateID={template.id}
           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")}
+          isAddingUser={addUserMutation.isLoading}
           onUpdateUser={(user, role) => {
             send("UPDATE_USER_ROLE", { user, role });
           }}
diff --git a/site/src/xServices/template/templateACLXService.ts b/site/src/xServices/template/templateACLXService.ts
@@ -15,7 +15,6 @@ export const templateACLMachine = createMachine(
         templateId: string;
         templateACL?: TemplateACL;
         // User
-        userToBeAdded?: TemplateUser;
         userToBeUpdated?: TemplateUser;
         addUserCallback?: () => void;
         // Group
@@ -28,9 +27,6 @@ export const templateACLMachine = createMachine(
           data: TemplateACL;
         };
         // User
-        addUser: {
-          data: unknown;
-        };
         updateUser: {
           data: unknown;
         };
@@ -47,12 +43,6 @@ export const templateACLMachine = createMachine(
             type: "LOAD";
             data: TemplateACL;
           }
-        | {
-            type: "ADD_USER";
-            user: TemplateUser;
-            role: TemplateRole;
-            onDone: () => void;
-          }
         | {
             type: "UPDATE_USER_ROLE";
             user: TemplateUser;
@@ -94,7 +84,6 @@ export const templateACLMachine = createMachine(
       idle: {
         on: {
           // User
-          ADD_USER: { target: "addingUser", actions: ["assignUserToBeAdded"] },
           UPDATE_USER_ROLE: {
             target: "updatingUser",
             actions: ["assignUserToBeUpdated"],
@@ -119,15 +108,6 @@ export const templateACLMachine = createMachine(
         },
       },
       // User
-      addingUser: {
-        invoke: {
-          src: "addUser",
-          onDone: {
-            target: "idle",
-            actions: ["addUserToTemplateACL", "runAddUserCallback"],
-          },
-        },
-      },
       updatingUser: {
         invoke: {
           src: "updateUser",
@@ -187,12 +167,6 @@ export const templateACLMachine = createMachine(
   {
     services: {
       // User
-      addUser: ({ templateId }, { user, role }) =>
-        updateTemplateACL(templateId, {
-          user_perms: {
-            [user.id]: role,
-          },
-        }),
       updateUser: ({ templateId }, { user, role }) =>
         updateTemplateACL(templateId, {
           user_perms: {
@@ -230,29 +204,6 @@ export const templateACLMachine = createMachine(
         templateACL: (_, { data }) => data,
       }),
       // User
-      assignUserToBeAdded: assign({
-        userToBeAdded: (_, { user, role }) => ({ ...user, role }),
-        addUserCallback: (_, { onDone }) => onDone,
-      }),
-      addUserToTemplateACL: assign({
-        templateACL: ({ templateACL, userToBeAdded }) => {
-          if (!userToBeAdded) {
-            throw new Error("No user to be added");
-          }
-          if (!templateACL) {
-            throw new Error("Template ACL is not loaded yet");
-          }
-          return {
-            ...templateACL,
-            users: [...templateACL.users, userToBeAdded],
-          };
-        },
-      }),
-      runAddUserCallback: ({ addUserCallback }) => {
-        if (addUserCallback) {
-          addUserCallback();
-        }
-      },
       assignUserToBeUpdated: assign({
         userToBeUpdated: (_, { user, role }) => ({ ...user, role }),
       }),
