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, }} > pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy