Sep 12, 2023 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 ): Promise<undefined> =>
  axios.put(`/api/v2/users/${userId}/password`, updatePassword);

 export const getSiteRoles = async (): Promise<
  Array<TypesGen.AssignableRoles>
 > => {
 export const getRoles = async (): Promise<Array<TypesGen.AssignableRoles>> => {
  const response = await axios.get<Array<TypesGen.AssignableRoles>>(
    `/api/v2/users/roles`,
  );
diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
 import * as API from "api/api";

 export const roles = () => {
  return {
    queryKey: ["roles"],
    queryFn: API.getRoles,
  };
 };
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
 import { FC, ReactNode, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import { siteRolesMachine } from "xServices/roles/siteRolesXService";
 import { usersMachine } from "xServices/users/usersXService";
 import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { ResetPasswordDialog } from "./ResetPasswordDialog";
 import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine";
 import { useQuery } from "@tanstack/react-query";
 import { getAuthMethods } from "api/api";
 import { roles } from "api/queries/roles";

 export const Language = {
  suspendDialogTitle: "Suspend user",
  } = usersState.context;

  const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
  const [rolesState] = useMachine(siteRolesMachine, {
    context: {
      hasPermission: canEditUsers,
    },
  });
  const { roles } = rolesState.context;
  const rolesQuery = useQuery({ ...roles(), enabled: canEditUsers });

  // Ideally this only runs if 'canViewDeployment' is true.
  // TODO: Prevent api call if the user does not have the perms.
  // - the user can edit the users but the roles are loading
  const isLoading =
    usersState.matches("gettingUsers") ||
 (canEditUsers && rolesState.matches("gettingRoles")) ||
 rolesQuery.isLoading ||
    authMethods.isLoading;

  return (
      </Helmet>
      <UsersPageView
        oidcRoleSyncEnabled={oidcRoleSyncEnabled}
        roles={roles}
        roles={rolesQuery.data}
        users={users}
        authMethods={authMethods.data}
        count={count}
diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -719,9 +719,7 @@ export const updateUserPassword = async (
		): Promise<undefined> =>
		axios.put(`/api/v2/users/${userId}/password`, updatePassword);

		export const getSiteRoles = async (): Promise<
		Array<TypesGen.AssignableRoles>
		> => {
		export const getRoles = async (): Promise<Array<TypesGen.AssignableRoles>> => {
		const response = await axios.get<Array<TypesGen.AssignableRoles>>(
		`/api/v2/users/roles`,
		);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,8 @@
		import * as API from "api/api";

		export const roles = () => {
		return {
		queryKey: ["roles"],
		queryFn: API.getRoles,
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,6 @@ import { usePermissions } from "hooks/usePermissions";
		import { FC, ReactNode, useEffect } from "react";
		import { Helmet } from "react-helmet-async";
		import { useSearchParams, useNavigate } from "react-router-dom";
		import { siteRolesMachine } from "xServices/roles/siteRolesXService";
		import { usersMachine } from "xServices/users/usersXService";
		import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog";
		import { ResetPasswordDialog } from "./ResetPasswordDialog";
Expand All		@@ -22,6 +21,7 @@ import { useDashboard } from "components/Dashboard/DashboardProvider";
		import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine";
		import { useQuery } from "@tanstack/react-query";
		import { getAuthMethods } from "api/api";
		import { roles } from "api/queries/roles";

		export const Language = {
		suspendDialogTitle: "Suspend user",
Expand DownExpand Up		@@ -64,12 +64,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
		} = usersState.context;

		const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
		const [rolesState] = useMachine(siteRolesMachine, {
		context: {
		hasPermission: canEditUsers,
		},
		});
		const { roles } = rolesState.context;
		const rolesQuery = useQuery({ ...roles(), enabled: canEditUsers });

		// Ideally this only runs if 'canViewDeployment' is true.
		// TODO: Prevent api call if the user does not have the perms.
Expand DownExpand Up		@@ -109,7 +104,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
		// - the user can edit the users but the roles are loading
		const isLoading =
		usersState.matches("gettingUsers") \|\|
		(canEditUsers && rolesState.matches("gettingRoles")) \|\|
		rolesQuery.isLoading \|\|
		authMethods.isLoading;

		return (
Expand All		@@ -119,7 +114,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
		</Helmet>
		<UsersPageView
		oidcRoleSyncEnabled={oidcRoleSyncEnabled}
		roles={roles}
		roles={rolesQuery.data}
		users={users}
		authMethods={authMethods.data}
		count={count}
Expand Down