coder · BrunoQuaresma · Sep 6, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1282,7 +1282,7 @@ class ApiMethods {
 	updateUserPassword = async (
 		userId: TypesGen.User["id"],
 		updatePassword: TypesGen.UpdateUserPasswordRequest,
-	): Promise<undefined> => {
+	): Promise<void> => {
 		await this.axios.put(`/api/v2/users/${userId}/password`, updatePassword);
 	};
 

diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts
@@ -1,8 +1,10 @@
 import { API } from "api/api";
 
+export const deploymentConfigQueryKey = ["deployment", "config"];
+
 export const deploymentConfig = () => {
 	return {
-		queryKey: ["deployment", "config"],
+		queryKey: deploymentConfigQueryKey,
 		queryFn: API.getDeploymentConfig,
 	};
 };

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -8,7 +8,7 @@ import type { QueryClient, UseQueryOptions } from "react-query";
 
 type GroupSortOrder = "asc" | "desc";
 
-const groupsQueryKey = ["groups"];
+export const groupsQueryKey = ["groups"];
 
 export const groups = () => {
 	return {
@@ -49,27 +49,29 @@ export type GroupsByUserId = Readonly<Map<string, readonly Group[]>>;
 export function groupsByUserId() {
 	return {
 		...groups(),
-		select: (allGroups) => {
-			// Sorting here means that nothing has to be sorted for the individual
-			// user arrays later
-			const sorted = sortGroupsByName(allGroups, "asc");
-			const userIdMapper = new Map<string, Group[]>();
-
-			for (const group of sorted) {
-				for (const user of group.members) {
-					let groupsForUser = userIdMapper.get(user.id);
-					if (groupsForUser === undefined) {
-						groupsForUser = [];
-						userIdMapper.set(user.id, groupsForUser);
-					}
-
-					groupsForUser.push(group);
-				}
+		select: selectGroupsByUserId,
+	} satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
+}
+
+export function selectGroupsByUserId(groups: Group[]): GroupsByUserId {
+	// Sorting here means that nothing has to be sorted for the individual
+	// user arrays later
+	const sorted = sortGroupsByName(groups, "asc");
+	const userIdMapper = new Map<string, Group[]>();
+
+	for (const group of sorted) {
+		for (const user of group.members) {
+			let groupsForUser = userIdMapper.get(user.id);
+			if (groupsForUser === undefined) {
+				groupsForUser = [];
+				userIdMapper.set(user.id, groupsForUser);
 			}
 
-			return userIdMapper as GroupsByUserId;
-		},
-	} satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
+			groupsForUser.push(group);
+		}
+	}
+
+	return userIdMapper as GroupsByUserId;
 }
 
 export function groupsForUser(userId: string) {

diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
@@ -9,9 +9,11 @@ const getRoleQueryKey = (organizationId: string, roleName: string) => [
 	roleName,
 ];
 
+export const rolesQueryKey = ["roles"];
+
 export const roles = () => {
 	return {
-		queryKey: ["roles"],
+		queryKey: rolesQueryKey,
 		queryFn: API.getRoles,
 	};
 };

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -115,11 +115,13 @@ export const updateRoles = (queryClient: QueryClient) => {
 	};
 };
 
+export const authMethodsQueryKey = ["authMethods"];
+
 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"],
+		queryKey: authMethodsQueryKey,
 		queryFn: API.getAuthMethods,
 	};
 };

diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -294,21 +294,21 @@ const PresetMenu: FC<PresetMenuProps> = ({
 					</MenuItem>
 				))}
 				{learnMoreLink && (
-					<>
-						<Divider css={{ borderColor: theme.palette.divider }} />
-						<MenuItem
-							component="a"
-							href={learnMoreLink}
-							target="_blank"
-							css={{ fontSize: 13, fontWeight: 500 }}
-							onClick={() => {
-								setIsOpen(false);
-							}}
-						>
-							<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
-							View advanced filtering
-						</MenuItem>
-					</>
+					<Divider css={{ borderColor: theme.palette.divider }} />
+				)}
+				{learnMoreLink && (
+					<MenuItem
+						component="a"
+						href={learnMoreLink}
+						target="_blank"
+						css={{ fontSize: 13, fontWeight: 500 }}
+						onClick={() => {
+							setIsOpen(false);
+						}}
+					>
+						<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
+						View advanced filtering
+					</MenuItem>
 				)}
 				{learnMoreLink2 && learnMoreLabel2 && (
 					<MenuItem

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx
@@ -64,7 +64,7 @@ const updateUserRole = async (role: SlimRole) => {
 	}
 
 	// Click on the "edit icon" to display the role options
-	const editButton = within(userRow).getByTitle("Edit user roles");
+	const editButton = within(userRow).getByLabelText("Edit user roles");
 	fireEvent.click(editButton);
 
 	// Click on the role option

diff --git a/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx b/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx
@@ -2,6 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
 import UserIcon from "@mui/icons-material/PersonOutline";
 import Checkbox from "@mui/material/Checkbox";
 import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import type { SlimRole } from "api/typesGenerated";
 import {
 	HelpTooltip,
@@ -116,13 +117,15 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
 	return (
 		<Popover>
 			<PopoverTrigger>
-				<IconButton
-					size="small"
-					css={styles.editButton}
-					title="Edit user roles"
-				>
-					<EditSquare />
-				</IconButton>
+				<Tooltip title="Edit user roles">
+					<IconButton
+						aria-label="Edit user roles"
+						size="small"
+						css={styles.editButton}
+					>
+						<EditSquare />
+					</IconButton>
+				</Tooltip>
 			</PopoverTrigger>
 
 			<PopoverContent classes={{ paper }}>