diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts index 2c4674ed15d5c..4d5aefb75a29c 100644 --- a/site/src/@types/storybook.d.ts +++ b/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; diff --git a/site/src/api/api.ts b/site/src/api/api.ts index e22f121837f43..6a23045ff9401 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -1603,8 +1603,15 @@ class ApiMethods { return response.data; }; - getGroups = async (): Promise => { - const response = await this.axios.get("/api/v2/groups"); + getGroups = async ( + options: { userId?: string } = {}, + ): Promise => { + const params: Record = {}; + 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 index 96e04a9fb3782..34159d263aa7e 100644 --- a/site/src/api/queries/groups.ts +++ b/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; + queryKey: groupsQueryKey, + queryFn: () => API.getGroups({ userId }), + } as const satisfies UseQueryOptions; } 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 index a11c4b2a108bb..6421f73e5c79c 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx +++ b/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 = { groups: [MockGroup1, MockGroup2], loading: false, }, + decorators: [withDashboardProvider], }; export default meta; @@ -31,6 +33,12 @@ type Story = StoryObj; 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 index 0096df0756263..23df9fa7f3e36 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx +++ b/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 = ({ loading, }) => { const theme = useTheme(); + const { showOrganizations } = useDashboard(); return (
= ({ 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"} + + ) + } /> ))} diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx index 54f8f71a78535..1789d096629a8 100644 --- a/site/src/testHelpers/storybook.tsx +++ b/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, }} >