chore: add more stories and use new groups query for user settings page (#14481)

site/src/@types/storybook.d.ts

@@ -16,6 +16,7 @@ declare module "@storybook/react" {
 	interface Parameters {
 		features?: FeatureName[];
 		experiments?: Experiments;
+		showOrganizations?: boolean;
 		queries?: { key: QueryKey; data: unknown }[];
 		webSocket?: WebSocketEvent[];
 		user?: User;

site/src/api/api.ts

@@ -1603,8 +1603,15 @@ class ApiMethods {
 		return response.data;
 	};
 
-	getGroups = async (): Promise<TypesGen.Group[]> => {
-		const response = await this.axios.get("/api/v2/groups");
+	getGroups = async (
+		options: { userId?: string } = {},
+	): Promise<TypesGen.Group[]> => {
+		const params: Record<string, string> = {};
+		if (options.userId !== undefined) {
+			params.has_member = options.userId;
+		}
+
+		const response = await this.axios.get("/api/v2/groups", { params });
 		return response.data;
 	};
 

site/src/api/queries/groups.ts

@@ -74,15 +74,9 @@ export function groupsByUserId() {
 
 export function groupsForUser(userId: string) {
 	return {
-		...groups(),
-		select: (allGroups) => {
-			const groupsForUser = allGroups.filter((group) =>
-				group.members.some((member) => member.id === userId),
-			);
-
-			return sortGroupsByName(groupsForUser, "asc");
-		},
-	} as const satisfies UseQueryOptions<Group[], unknown, readonly Group[]>;
+		queryKey: groupsQueryKey,
+		queryFn: () => API.getGroups({ userId }),
+	} as const satisfies UseQueryOptions<Group[]>;
 }
 
 export const groupPermissionsKey = (groupId: string) => [

site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx

@@ -4,6 +4,7 @@ import {
 	MockUser,
 	mockApiError,
 } from "testHelpers/entities";
+import { withDashboardProvider } from "testHelpers/storybook";
 import { AccountUserGroups } from "./AccountUserGroups";
 
 const MockGroup2 = {
@@ -24,6 +25,7 @@ const meta: Meta<typeof AccountUserGroups> = {
 		groups: [MockGroup1, MockGroup2],
 		loading: false,
 	},
+	decorators: [withDashboardProvider],
 };
 
 export default meta;
@@ -31,6 +33,12 @@ type Story = StoryObj<typeof AccountUserGroups>;
 
 export const Example: Story = {};
 
+export const ExampleWithOrganizations: Story = {
+	parameters: {
+		showOrganizations: true,
+	},
+};
+
 export const NoGroups: Story = {
 	args: {
 		groups: [],

site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx

@@ -5,6 +5,7 @@ import type { Group } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarCard } from "components/AvatarCard/AvatarCard";
 import { Loader } from "components/Loader/Loader";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
 import { Section } from "../Section";
 
@@ -20,6 +21,7 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
 	loading,
 }) => {
 	const theme = useTheme();
+	const { showOrganizations } = useDashboard();
 
 	return (
 		<Section
@@ -55,7 +57,16 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
 									imgUrl={group.avatar_url}
 									altText={group.display_name || group.name}
 									header={group.display_name || group.name}
-									subtitle={group.organization_display_name}
+									subtitle={
+										showOrganizations ? (
+											group.organization_display_name
+										) : (
+											<>
+												{group.total_member_count} member
+												{group.total_member_count !== 1 && "s"}
+											</>
+										)
+									}
 								/>
 							</Grid>
 						))}

site/src/testHelpers/storybook.tsx

@@ -20,7 +20,11 @@ export const withDashboardProvider = (
 	Story: FC,
 	{ parameters }: StoryContext,
 ) => {
-	const { features = [], experiments = [] } = parameters;
+	const {
+		features = [],
+		experiments = [],
+		showOrganizations = false,
+	} = parameters;
 
 	const entitlements: Entitlements = {
 		...MockEntitlements,
@@ -42,7 +46,7 @@ export const withDashboardProvider = (
 				experiments,
 				appearance: MockAppearanceConfig,
 				organizations: [MockDefaultOrganization],
-				showOrganizations: false,
+				showOrganizations,
 			}}
 		>
 			<Story />