From a4ce9764fb322681178c055a76437534f37fcbf1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 29 Aug 2024 17:37:55 +0000 Subject: [PATCH 1/2] add more stories and update query --- site/src/@types/storybook.d.ts | 1 + site/src/api/api.ts | 11 +++++++++-- site/src/api/queries/groups.ts | 12 +++--------- .../AccountPage/AccountUserGroups.stories.tsx | 8 ++++++++ .../AccountPage/AccountUserGroups.tsx | 13 ++++++++++++- site/src/testHelpers/storybook.tsx | 8 ++++++-- 6 files changed, 39 insertions(+), 14 deletions(-) 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..000f3771b4269 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx @@ -5,6 +5,7 @@ import { mockApiError, } from "testHelpers/entities"; import { AccountUserGroups } from "./AccountUserGroups"; +import { withDashboardProvider } from "testHelpers/storybook"; const MockGroup2 = { ...MockGroup1, @@ -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..1f58508d9b79d 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx @@ -7,6 +7,7 @@ import { AvatarCard } from "components/AvatarCard/AvatarCard"; import { Loader } from "components/Loader/Loader"; import type { FC } from "react"; import { Section } from "../Section"; +import { useDashboard } from "modules/dashboard/useDashboard"; type AccountGroupsProps = { groups: readonly Group[] | undefined; @@ -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, }} > From 2c30481a2642fd82fa074216c832156c60a167e4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 29 Aug 2024 17:48:16 +0000 Subject: [PATCH 2/2] import sorting strikes again --- .../UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx | 2 +- .../pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx index 000f3771b4269..6421f73e5c79c 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.stories.tsx @@ -4,8 +4,8 @@ import { MockUser, mockApiError, } from "testHelpers/entities"; -import { AccountUserGroups } from "./AccountUserGroups"; import { withDashboardProvider } from "testHelpers/storybook"; +import { AccountUserGroups } from "./AccountUserGroups"; const MockGroup2 = { ...MockGroup1, diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx index 1f58508d9b79d..23df9fa7f3e36 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx @@ -5,9 +5,9 @@ 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"; -import { useDashboard } from "modules/dashboard/useDashboard"; type AccountGroupsProps = { groups: readonly Group[] | undefined;