Add Storybook for groups page

code-asher · code-asher · commit 824b581d9667 · 2024-08-23T15:02:48.000-08:00
This ensures it is using the right endpoint for the add member dropdown.
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -21,7 +21,7 @@ export const groups = (organization: string) => {
 	} satisfies UseQueryOptions<Group[]>;
 };
 
-const getGroupQueryKey = (organization: string, groupName: string) => [
+export const getGroupQueryKey = (organization: string, groupName: string) => [
 	"organization",
 	organization,
 	"group",
@@ -77,9 +77,15 @@ export function groupsForUser(organization: string, userId: string) {
 	} as const satisfies UseQueryOptions<Group[], unknown, readonly Group[]>;
 }
 
+export const groupPermissionsKey = (groupId: string) => [
+	"group",
+	groupId,
+	"permissions",
+];
+
 export const groupPermissions = (groupId: string) => {
 	return {
-		queryKey: ["group", groupId, "permissions"],
+		queryKey: groupPermissionsKey(groupId),
 		queryFn: () =>
 			API.checkAuthorization({
 				checks: {
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -47,10 +47,16 @@ export const deleteOrganization = (queryClient: QueryClient) => {
 	};
 };
 
+export const organizationMembersKey = (id: string) => [
+	"organization",
+	id,
+	"members",
+];
+
 export const organizationMembers = (id: string) => {
 	return {
 		queryFn: () => API.getOrganizationMembers(id),
-		queryKey: ["organization", id, "members"],
+		queryKey: organizationMembersKey(id),
 	};
 };
 
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -41,7 +41,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = (props) => {
 
 	const usersQuery = useQuery({
 		...users({
-			q: filter !== undefined ? prepareQuery(encodeURI(filter)) : "",
+			q: prepareQuery(encodeURI(filter ?? "")),
 			limit: 25,
 		}),
 		enabled: filter !== undefined,
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx
@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { getGroupQueryKey, groupPermissionsKey } from "api/queries/groups";
+import { organizationMembersKey } from "api/queries/organizations";
+import { reactRouterParameters } from "storybook-addon-remix-react-router";
+import {
+	MockDefaultOrganization,
+	MockGroup,
+	MockOrganizationMember,
+	MockOrganizationMember2,
+} from "testHelpers/entities";
+import GroupPage from "./GroupPage";
+
+const meta: Meta<typeof GroupPage> = {
+	title: "pages/OrganizationGroupsPage/GroupPage",
+	component: GroupPage,
+	parameters: {
+		reactRouter: reactRouterParameters({
+			location: {
+				pathParams: {
+					organization: MockDefaultOrganization.name,
+					groupName: MockGroup.name,
+				},
+			},
+			routing: { path: "/organizations/:organization/groups/:groupName" },
+		}),
+	},
+};
+
+const groupQuery = (data: unknown) => ({
+	key: getGroupQueryKey(MockDefaultOrganization.name, MockGroup.name),
+	data,
+});
+
+const permissionsQuery = (data: unknown, id?: string) => ({
+	key: groupPermissionsKey(id ?? MockGroup.id),
+	data,
+});
+
+const membersQuery = (data: unknown) => ({
+	key: organizationMembersKey(MockDefaultOrganization.id),
+	data,
+});
+
+export default meta;
+type Story = StoryObj<typeof GroupPage>;
+
+export const LoadingGroup: Story = {
+	parameters: {
+		queries: [groupQuery(null), permissionsQuery({})],
+	},
+};
+
+// Will show a 404 because the query is not mocked.
+export const GroupError: Story = {
+	parameters: {
+		queries: [permissionsQuery({})],
+	},
+};
+
+export const LoadingPermissions: Story = {
+	parameters: {
+		queries: [groupQuery(MockGroup), permissionsQuery(null)],
+	},
+};
+
+export const NoUpdatePermission: Story = {
+	parameters: {
+		queries: [
+			groupQuery(MockGroup),
+			permissionsQuery({ canUpdateGroup: false }),
+		],
+	},
+};
+
+export const EveryoneGroup: Story = {
+	parameters: {
+		queries: [
+			groupQuery({
+				...MockGroup,
+				// The everyone group has the same ID as the organization.
+				id: MockDefaultOrganization.id,
+			}),
+			permissionsQuery({ canUpdateGroup: true }, MockDefaultOrganization.id),
+		],
+	},
+};
+
+// Will show a 404 because the query is not mocked.
+export const MembersError: Story = {
+	parameters: {
+		queries: [
+			groupQuery(MockGroup),
+			permissionsQuery({ canUpdateGroup: true }),
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Open" }));
+	},
+};
+
+export const NoMembers: Story = {
+	parameters: {
+		queries: [
+			groupQuery(MockGroup),
+			permissionsQuery({ canUpdateGroup: true }),
+			membersQuery([]),
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Open" }));
+	},
+};
+
+export const FiltersByMembers: Story = {
+	parameters: {
+		queries: [
+			groupQuery(MockGroup),
+			permissionsQuery({ canUpdateGroup: true }),
+			membersQuery([MockOrganizationMember, MockOrganizationMember2]),
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Open" }));
+	},
+};
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
@@ -62,9 +62,7 @@ export const GroupPage: FC = () => {
 	const groupQuery = useQuery(group(organization, groupName));
 	const groupData = groupQuery.data;
 	const { data: permissions } = useQuery(
-		groupData !== undefined
-			? groupPermissions(groupData.id)
-			: { enabled: false },
+		groupData ? groupPermissions(groupData.id) : { enabled: false },
 	);
 	const addMemberMutation = useMutation(addMember(queryClient));
 	const removeMemberMutation = useMutation(removeMember(queryClient));
