Aug 29, 2024 · Aug 29, 2024 · Aug 29, 2024
diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts
 interface Parameters {
 features?: FeatureName[];
 experiments?: Experiments;
 showOrganizations?: boolean;
 queries?: { key: QueryKey; data: unknown }[];
 webSocket?: WebSocketEvent[];
 user?: User;
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 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;
 };

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts

 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) => [
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx
 MockUser,
 mockApiError,
 } from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
 import { AccountUserGroups } from "./AccountUserGroups";

 const MockGroup2 = {
 groups: [MockGroup1, MockGroup2],
 loading: false,
 },
 decorators: [withDashboardProvider],
 };

 export default meta;
 type Story = StoryObj<typeof AccountUserGroups>;

 export const Example: Story = {};

 export const ExampleWithOrganizations: Story = {
 parameters: {
 showOrganizations: true,
 },
 };

 export const NoGroups: Story = {
 args: {
 groups: [],
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
 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";

 loading,
 }) => {
 const theme = useTheme();
 const { showOrganizations } = useDashboard();

 return (
 <Section
 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>
 ))}
diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx
 Story: FC,
 { parameters }: StoryContext,
 ) => {
 const { features = [], experiments = [] } = parameters;
 const {
 features = [],
 experiments = [],
 showOrganizations = false,
 } = parameters;

 const entitlements: Entitlements = {
 ...MockEntitlements,
 experiments,
 appearance: MockAppearanceConfig,
 organizations: [MockDefaultOrganization],
 showOrganizations: false,
 showOrganizations,
 }}
 >
 <Story />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) => [
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,6 +4,7 @@ import {
		MockUser,
		mockApiError,
		} from "testHelpers/entities";
		import { withDashboardProvider } from "testHelpers/storybook";
		import { AccountUserGroups } from "./AccountUserGroups";

		const MockGroup2 = {
Expand All		@@ -24,13 +25,20 @@ const meta: Meta<typeof AccountUserGroups> = {
		groups: [MockGroup1, MockGroup2],
		loading: false,
		},
		decorators: [withDashboardProvider],
		};

		export default meta;
		type Story = StoryObj<typeof AccountUserGroups>;

		export const Example: Story = {};

		export const ExampleWithOrganizations: Story = {
		parameters: {
		showOrganizations: true,
		},
		};

		export const NoGroups: Story = {
		args: {
		groups: [],
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";

Expand All		@@ -20,6 +21,7 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
		loading,
		}) => {
		const theme = useTheme();
		const { showOrganizations } = useDashboard();

		return (
		<Section
Expand DownExpand Up		@@ -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>
		))}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand All		@@ -42,7 +46,7 @@ export const withDashboardProvider = (
		experiments,
		appearance: MockAppearanceConfig,
		organizations: [MockDefaultOrganization],
		showOrganizations: false,
		showOrganizations,
		}}
		>
		<Story />
Expand Down