Move auth methods queries to the users query module

coder · BrunoQuaresma · Oct 2, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 29, 2023
commit 76e94fb4e46bf99d6657f0d5d81ee4fbb368fb2b
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -70,3 +70,12 @@ export const updateRoles = (queryClient: QueryClient) => {
     },
   };
 };
+
+export const authMethods = () => {
+  return {
+    // Even the endpoint being /users/authmethods we don't want to revalidate it
+    // when users change so its better add a unique query key
+    queryKey: ["authMethods"],
+    queryFn: API.getAuthMethods,
+  };
+};
diff --git a/site/src/pages/CreateUserPage/CreateUserPage.tsx b/site/src/pages/CreateUserPage/CreateUserPage.tsx
@@ -5,9 +5,8 @@ import { useNavigate } from "react-router-dom";
 import { CreateUserForm } from "./CreateUserForm";
 import { Margins } from "components/Margins/Margins";
 import { pageTitle } from "utils/page";
-import { getAuthMethods } from "api/api";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { createUser } from "api/queries/users";
+import { authMethods, createUser } from "api/queries/users";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const Language = {
@@ -19,12 +18,7 @@ export const CreateUserPage: FC = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const createUserMutation = useMutation(createUser(queryClient));
-  // TODO: We should probably place this somewhere else to reduce the number of calls.
-  // This would be called each time this page is loaded.
-  const { data: authMethods } = useQuery({
-    queryKey: ["authMethods"],
-    queryFn: getAuthMethods,
-  });
+  const authMethodsQuery = useQuery(authMethods());
 
   return (
     <Margins>
@@ -34,7 +28,7 @@ export const CreateUserPage: FC = () => {
 
       <CreateUserForm
         error={createUserMutation.error}
-        authMethods={authMethods}
+        authMethods={authMethodsQuery.data}
         onSubmit={async (user) => {
           await createUserMutation.mutateAsync(user);
           displaySuccess("Successfully created user.");

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -3,30 +3,27 @@ import { ComponentProps, FC } from "react";
 import { Section } from "components/SettingsLayout/Section";
 import { SecurityForm } from "./SettingsSecurityForm";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { getAuthMethods, getUserLoginType } from "api/api";
+import { getUserLoginType } from "api/api";
 import {
   SingleSignOnSection,
   useSingleSignOnSection,
 } from "./SingleSignOnSection";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
-import { updatePassword } from "api/queries/users";
+import { authMethods, updatePassword } from "api/queries/users";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const SecurityPage: FC = () => {
   const me = useMe();
   const updatePasswordMutation = useMutation(updatePassword());
-  const { data: authMethods } = useQuery({
-    queryKey: ["authMethods"],
-    queryFn: getAuthMethods,
-  });
+  const authMethodsQuery = useQuery(authMethods());
   const { data: userLoginType } = useQuery({
     queryKey: ["loginType"],
     queryFn: getUserLoginType,
   });
   const singleSignOnSection = useSingleSignOnSection();
 
-  if (!authMethods || !userLoginType) {
+  if (!authMethodsQuery.data || !userLoginType) {
     return <Loader />;
   }
 
@@ -51,7 +48,7 @@ export const SecurityPage: FC = () => {
       }}
       oidc={{
         section: {
-          authMethods,
+          authMethods: authMethodsQuery.data,
           userLoginType,
           ...singleSignOnSection,
         },

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -14,7 +14,6 @@ import { useStatusFilterMenu } from "./UsersFilter";
 import { useFilter } from "components/Filter/filter";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { getAuthMethods } from "api/api";
 import { roles } from "api/queries/roles";
 import { deploymentConfig } from "api/queries/deployment";
 import { prepareQuery } from "utils/filters";
@@ -26,6 +25,7 @@ import {
   deleteUser,
   updatePassword,
   updateRoles,
+  authMethods,
 } from "api/queries/users";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { getErrorMessage } from "api/errors";
@@ -74,14 +74,9 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         status: option?.value,
       }),
   });
-  const authMethods = useQuery({
-    queryKey: ["authMethods"],
-    queryFn: () => {
-      return getAuthMethods();
-    },
-  });
+  const authMethodsQuery = useQuery(authMethods());
   const isLoading =
-    usersQuery.isLoading || rolesQuery.isLoading || authMethods.isLoading;
+    usersQuery.isLoading || rolesQuery.isLoading || authMethodsQuery.isLoading;
   // Suspend
   const [confirmSuspendUser, setConfirmSuspendUser] = useState<User>();
   const suspendUserMutation = useMutation(suspendUser(queryClient));
@@ -109,7 +104,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         oidcRoleSyncEnabled={oidcRoleSyncEnabled}
         roles={rolesQuery.data}
         users={usersQuery.data?.users}
-        authMethods={authMethods.data}
+        authMethods={authMethodsQuery.data}
         onListWorkspaces={(user) => {
           navigate(
             "/workspaces?filter=" +