coder
diff --git a/‎site/src/api/queries/groups.ts
Lines changed: 38 additions & 1 deletion b/‎site/src/api/queries/groups.ts
Lines changed: 38 additions & 1 deletion
diff --git a/‎site/src/components/Avatar/Avatar.tsx
Lines changed: 8 additions & 1 deletion b/‎site/src/components/Avatar/Avatar.tsx
Lines changed: 8 additions & 1 deletion
diff --git a/‎site/src/components/HelpTooltip/HelpTooltip.tsx
Lines changed: 2 additions & 2 deletions b/‎site/src/components/HelpTooltip/HelpTooltip.tsx
Lines changed: 2 additions & 2 deletions
diff --git a/‎site/src/components/Popover/Popover.tsx
Lines changed: 22 additions & 10 deletions b/‎site/src/components/Popover/Popover.tsx
Lines changed: 22 additions & 10 deletions
@@ -1,4 +1,4 @@
-import { QueryClient } from "react-query";
+import { QueryClient, UseQueryOptions } from "react-query";
 import * as API from "api/api";
 import { checkAuthorization } from "api/api";
 import {
@@ -25,6 +25,43 @@ export const group = (groupId: string) => {
   };
 };
 
+export type GroupsByUserId = Readonly<Map<string, readonly Group[]>>;
+
+export function groupsByUserId(organizationId: string) {
+  return {
+    ...groups(organizationId),
+    select: (allGroups) => {
+      // Sorting here means that nothing has to be sorted for the individual
+      // user arrays later
+      const sorted = [...allGroups].sort((g1, g2) => {
+        const key =
+          g1.display_name && g2.display_name ? "display_name" : "name";
+
+        if (g1[key] === g2[key]) {
+          return 0;
+        }
+
+        return g1[key] < g2[key] ? -1 : 1;
+      });
+
+      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);
+        }
+      }
+
+      return userIdMapper as GroupsByUserId;
+    },
+  } satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
+}
+
 export const groupPermissions = (groupId: string) => {
   return {
     queryKey: [...getGroupQueryKey(groupId), "permissions"],
 
@@ -5,16 +5,23 @@ import { FC } from "react";
 import { css, type Interpolation, type Theme } from "@emotion/react";
 
 export type AvatarProps = MuiAvatarProps & {
-  size?: "sm" | "md" | "xl";
+  size?: "xs" | "sm" | "md" | "xl";
   colorScheme?: "light" | "darken";
   fitImage?: boolean;
 };
 
 const sizeStyles = {
+  xs: (theme) => ({
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    fontSize: theme.spacing(1),
+    fontWeight: 700,
+  }),
   sm: (theme) => ({
     width: theme.spacing(3),
     height: theme.spacing(3),
     fontSize: theme.spacing(1.5),
+    fontWeight: 600,
   }),
   md: {},
   xl: (theme) => ({
 
@@ -88,15 +88,15 @@ export const HelpPopover: FC<
 
 export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
   children,
-  open,
+  open = false,
   size = "medium",
   icon: Icon = HelpIcon,
   iconClassName,
   buttonClassName,
 }) => {
   const theme = useTheme();
   const anchorRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(Boolean(open));
+  const [isOpen, setIsOpen] = useState(open);
   const id = isOpen ? "help-popover" : undefined;
 
   const onClose = () => {
 
@@ -5,6 +5,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
 } from "react";
@@ -19,11 +20,14 @@ type TriggerMode = "hover" | "click";
 type TriggerRef = React.RefObject<HTMLElement>;
 
 type TriggerElement = ReactElement<{
-  onClick?: () => void;
   ref: TriggerRef;
+  onClick?: () => void;
+  "aria-haspopup"?: boolean;
+  "aria-owns"?: string | undefined;
 }>;
 
 type PopoverContextValue = {
+  id: string;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   triggerRef: TriggerRef;
@@ -39,9 +43,17 @@ export const Popover = (props: {
   mode?: TriggerMode;
   isDefaultOpen?: boolean;
 }) => {
+  const hookId = useId();
   const [isOpen, setIsOpen] = useState(props.isDefaultOpen ?? false);
   const triggerRef = useRef<HTMLElement>(null);
-  const value = { isOpen, setIsOpen, triggerRef, mode: props.mode ?? "click" };
+
+  const value: PopoverContextValue = {
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    id: `${hookId}-popover`,
+    mode: props.mode ?? "click",
+  };
 
   return (
     <PopoverContext.Provider value={value}>
@@ -62,10 +74,7 @@ export const usePopover = () => {
   return context;
 };
 
-export const PopoverTrigger = (props: {
-  children: TriggerElement;
-  hover?: boolean;
-}) => {
+export const PopoverTrigger = (props: { children: TriggerElement }) => {
   const popover = usePopover();
 
   const clickProps = {
@@ -85,6 +94,8 @@ export const PopoverTrigger = (props: {
 
   return cloneElement(props.children, {
     ...(popover.mode === "click" ? clickProps : hoverProps),
+    "aria-haspopup": true,
+    "aria-owns": popover.isOpen ? popover.id : undefined,
     ref: popover.triggerRef,
   });
 };
@@ -118,10 +129,10 @@ export const PopoverContent = (
     <MuiPopover
       disablePortal
       css={(theme) => ({
-        // When it is on hover mode, and the moude is moving from the trigger to
+        // When it is on hover mode, and the mode is moving from the trigger to
         // the popover, if there is any space, the popover will be closed. I
         // found this is a limitation on how MUI structured the component. It is
-        // not a big issue for now but we can reavaluate it in the future.
+        // not a big issue for now but we can re-evaluate it in the future.
         marginTop: hoverMode ? undefined : theme.spacing(1),
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {
@@ -133,6 +144,7 @@ export const PopoverContent = (
       {...horizontalProps(horizontal)}
       {...modeProps(popover)}
       {...props}
+      id={popover.id}
       open={popover.isOpen}
       onClose={() => popover.setIsOpen(false)}
       anchorEl={popover.triggerRef.current}
@@ -143,10 +155,10 @@ export const PopoverContent = (
 const modeProps = (popover: PopoverContextValue) => {
   if (popover.mode === "hover") {
     return {
-      onMouseEnter: () => {
+      onPointerEnter: () => {
         popover.setIsOpen(true);
       },
-      onMouseLeave: () => {
+      onPointerLeave: () => {
         popover.setIsOpen(false);
       },
     };