use the reduced groups for user endpoint on the AccountPage

hugodutka · hugodutka · commit 5391c1505c35 · 2024-08-12T19:34:18.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1619,6 +1619,21 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   * @param user Can be the user's ID, username, or "me"
+   */
+  getReducedGroupsForUser = async (
+    organization: string,
+    user: string,
+  ): Promise<TypesGen.ReducedGroup[]> => {
+    const response = await this.axios.get(
+      `/api/v2/organizations/${organization}/users/${user}/reduced-groups`,
+    );
+
+    return response.data;
+  };
+
   addMember = async (groupId: string, userId: string) => {
     return this.patchGroup(groupId, {
       name: "",
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -4,6 +4,7 @@ import type {
   CreateGroupRequest,
   Group,
   PatchGroupRequest,
+  ReducedGroup,
 } from "api/typesGenerated";
 
 type GroupSortOrder = "asc" | "desc";
@@ -125,6 +126,13 @@ export const deleteGroup = (queryClient: QueryClient) => {
   };
 };
 
+export function reducedGroupsForUser(organization: string, userId: string) {
+  return {
+    queryKey: ["organization", organization, "user", userId, "reduced-groups"],
+    queryFn: () => API.getReducedGroupsForUser(organization, userId),
+  } as const satisfies UseQueryOptions<ReducedGroup[], unknown, readonly ReducedGroup[]>;
+}
+
 export const addMember = (queryClient: QueryClient) => {
   return {
     mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { useQuery } from "react-query";
-import { groupsForUser } from "api/queries/groups";
+import { reducedGroupsForUser } from "api/queries/groups";
 import { Stack } from "components/Stack/Stack";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
@@ -18,7 +18,7 @@ export const AccountPage: FC = () => {
   const hasGroupsFeature = entitlements.features.user_role_management.enabled;
   const groupsQuery = useQuery({
     // TODO: This should probably list all groups, not just default org groups
-    ...groupsForUser("default", me.id),
+    ...reducedGroupsForUser("default", me.id),
     enabled: hasGroupsFeature,
   });
 
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx
@@ -1,17 +1,24 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { Group } from "api/typesGenerated";
+import type { ReducedGroup } from "api/typesGenerated";
 import {
   MockGroup as MockGroup1,
-  MockUser,
   mockApiError,
 } from "testHelpers/entities";
 import { AccountUserGroups } from "./AccountUserGroups";
 
-const MockGroup2: Group = {
-  ...MockGroup1,
-  avatar_url: "",
+const MockReducedGroup1: ReducedGroup = {
+  id: MockGroup1.id,
+  name: MockGroup1.name,
+  display_name: MockGroup1.display_name,
+  organization_id: MockGroup1.organization_id,
+  avatar_url: MockGroup1.avatar_url,
+  total_member_count: 10,
+};
+
+const MockReducedGroup2: ReducedGroup = {
+  ...MockReducedGroup1,
   display_name: "Goofy Goobers",
-  members: [MockUser],
+  total_member_count: 5,
 };
 
 const mockError = mockApiError({
@@ -22,7 +29,7 @@ const meta: Meta<typeof AccountUserGroups> = {
   title: "pages/UserSettingsPage/AccountUserGroups",
   component: AccountUserGroups,
   args: {
-    groups: [MockGroup1, MockGroup2],
+    groups: [MockReducedGroup1, MockReducedGroup2],
     loading: false,
   },
 };
@@ -40,7 +47,7 @@ export const NoGroups: Story = {
 
 export const OneGroup: Story = {
   args: {
-    groups: [MockGroup1],
+    groups: [MockReducedGroup1],
   },
 };
 
@@ -61,7 +68,7 @@ export const Error: Story = {
 
 export const ErrorWithPreviousData: Story = {
   args: {
-    groups: [MockGroup1, MockGroup2],
+    groups: [MockReducedGroup1, MockReducedGroup2],
     error: mockError,
     loading: false,
   },
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
@@ -2,14 +2,14 @@ import { useTheme } from "@emotion/react";
 import Grid from "@mui/material/Grid";
 import type { FC } from "react";
 import { isApiError } from "api/errors";
-import type { Group } from "api/typesGenerated";
+import type { ReducedGroup } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarCard } from "components/AvatarCard/AvatarCard";
 import { Loader } from "components/Loader/Loader";
 import { Section } from "../Section";
 
 type AccountGroupsProps = {
-  groups: readonly Group[] | undefined;
+  groups: readonly ReducedGroup[] | undefined;
   error: unknown;
   loading: boolean;
 };
@@ -57,8 +57,8 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
                   header={group.display_name || group.name}
                   subtitle={
                     <>
-                      {group.members.length} member
-                      {group.members.length !== 1 && "s"}
+                      {group.total_member_count} member
+                      {group.total_member_count !== 1 && "s"}
                     </>
                   }
                 />
