coder · aslilac · Jul 22, 2024 · Jul 12, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/enterprise/coderd/groups.go b/enterprise/coderd/groups.go
@@ -2,6 +2,7 @@ package coderd
 
 import (
 	"database/sql"
+	"errors"
 	"fmt"
 	"net/http"
 
@@ -170,9 +171,9 @@ func (api *API) patchGroup(rw http.ResponseWriter, r *http.Request) {
 			OrganizationID: group.OrganizationID,
 			UserID:         uuid.MustParse(id),
 		}))
-		if xerrors.Is(err, sql.ErrNoRows) {
+		if errors.Is(err, sql.ErrNoRows) {
 			httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
-				Message: fmt.Sprintf("User %q must be a member of organization %q", id, group.ID),
+				Message: fmt.Sprintf("User must be a member of organization %q", group.Name),
 			})
 			return
 		}
@@ -364,7 +365,7 @@ func (api *API) group(rw http.ResponseWriter, r *http.Request) {
 	)
 
 	users, err := api.Database.GetGroupMembersByGroupID(ctx, group.ID)
-	if err != nil && !xerrors.Is(err, sql.ErrNoRows) {
+	if err != nil && !errors.Is(err, sql.ErrNoRows) {
 		httpapi.InternalServerError(rw, err)
 		return
 	}
@@ -391,7 +392,7 @@ func (api *API) groups(rw http.ResponseWriter, r *http.Request) {
 	)
 
 	groups, err := api.Database.GetGroupsByOrganizationID(ctx, org.ID)
-	if err != nil && !xerrors.Is(err, sql.ErrNoRows) {
+	if err != nil && !errors.Is(err, sql.ErrNoRows) {
 		httpapi.InternalServerError(rw, err)
 		return
 	}

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -515,19 +515,19 @@ class ApiMethods {
   };
 
   updateOrganization = async (
-    orgId: string,
+    organizationId: string,
     params: TypesGen.UpdateOrganizationRequest,
   ) => {
     const response = await this.axios.patch<TypesGen.Organization>(
-      `/api/v2/organizations/${orgId}`,
+      `/api/v2/organizations/${organizationId}`,
       params,
     );
     return response.data;
   };
 
-  deleteOrganization = async (orgId: string) => {
+  deleteOrganization = async (organizationId: string) => {
     await this.axios.delete<TypesGen.Organization>(
-      `/api/v2/organizations/${orgId}`,
+      `/api/v2/organizations/${organizationId}`,
     );
   };
 
@@ -1485,9 +1485,12 @@ class ApiMethods {
     return response.data;
   };
 
-  getGroup = async (groupName: string): Promise<TypesGen.Group> => {
+  getGroup = async (
+    organizationId: string,
+    groupName: string,
+  ): Promise<TypesGen.Group> => {
     const response = await this.axios.get(
-      `/api/v2/organizations/default/groups/${groupName}`,
+      `/api/v2/organizations/${organizationId}/groups/${groupName}`,
     );
     return response.data;
   };

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -9,7 +9,11 @@ import type {
 const GROUPS_QUERY_KEY = ["groups"];
 type GroupSortOrder = "asc" | "desc";
 
-const getGroupQueryKey = (groupName: string) => ["group", groupName];
+const getGroupQueryKey = (organizationId: string, groupName: string) => [
+  organizationId,
+  "group",
+  groupName,
+];
 
 export const groups = (organizationId: string) => {
   return {
@@ -18,10 +22,10 @@ export const groups = (organizationId: string) => {
   } satisfies UseQueryOptions<Group[]>;
 };
 
-export const group = (groupName: string) => {
+export const group = (organizationId: string, groupName: string) => {
   return {
-    queryKey: getGroupQueryKey(groupName),
-    queryFn: () => API.getGroup(groupName),
+    queryKey: getGroupQueryKey(organizationId, groupName),
+    queryFn: () => API.getGroup(organizationId, groupName),
   };
 };
 
@@ -69,7 +73,7 @@ export function groupsForUser(organizationId: string, userId: string) {
 
 export const groupPermissions = (groupId: string) => {
   return {
-    queryKey: [...getGroupQueryKey(groupId), "permissions"],
+    queryKey: ["group", groupId, "permissions"],
     queryFn: () =>
       API.checkAuthorization({
         checks: {
@@ -85,12 +89,12 @@ export const groupPermissions = (groupId: string) => {
   };
 };
 
-export const createGroup = (queryClient: QueryClient) => {
+export const createGroup = (
+  queryClient: QueryClient,
+  organizationId: string,
+) => {
   return {
-    mutationFn: ({
-      organizationId,
-      ...request
-    }: CreateGroupRequest & { organizationId: string }) =>
+    mutationFn: (request: CreateGroupRequest) =>
       API.createGroup(organizationId, request),
     onSuccess: async () => {
       await queryClient.invalidateQueries(GROUPS_QUERY_KEY);
@@ -106,15 +110,15 @@ export const patchGroup = (queryClient: QueryClient) => {
     }: PatchGroupRequest & { groupId: string }) =>
       API.patchGroup(groupId, request),
     onSuccess: async (updatedGroup: Group) =>
-      invalidateGroup(queryClient, updatedGroup.id),
+      invalidateGroup(queryClient, "default", updatedGroup.id),
   };
 };
 
 export const deleteGroup = (queryClient: QueryClient) => {
   return {
     mutationFn: API.deleteGroup,
     onSuccess: async (_: void, groupId: string) =>
-      invalidateGroup(queryClient, groupId),
+      invalidateGroup(queryClient, "default", groupId),
   };
 };
 
@@ -123,7 +127,7 @@ export const addMember = (queryClient: QueryClient) => {
     mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
       API.addMember(groupId, userId),
     onSuccess: async (updatedGroup: Group) =>
-      invalidateGroup(queryClient, updatedGroup.id),
+      invalidateGroup(queryClient, "default", updatedGroup.id),
   };
 };
 
@@ -132,14 +136,18 @@ export const removeMember = (queryClient: QueryClient) => {
     mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
       API.removeMember(groupId, userId),
     onSuccess: async (updatedGroup: Group) =>
-      invalidateGroup(queryClient, updatedGroup.id),
+      invalidateGroup(queryClient, "default", updatedGroup.id),
   };
 };
 
-export const invalidateGroup = (queryClient: QueryClient, groupId: string) =>
+export const invalidateGroup = (
+  queryClient: QueryClient,
+  organizationId: string,
+  groupId: string,
+) =>
   Promise.all([
     queryClient.invalidateQueries(GROUPS_QUERY_KEY),
-    queryClient.invalidateQueries(getGroupQueryKey(groupId)),
+    queryClient.invalidateQueries(getGroupQueryKey(organizationId, groupId)),
   ]);
 
 export function sortGroupsByName(

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -19,14 +19,14 @@ export const createOrganization = (queryClient: QueryClient) => {
 };
 
 interface UpdateOrganizationVariables {
-  orgId: string;
+  organizationId: string;
   req: UpdateOrganizationRequest;
 }
 
 export const updateOrganization = (queryClient: QueryClient) => {
   return {
     mutationFn: (variables: UpdateOrganizationVariables) =>
-      API.updateOrganization(variables.orgId, variables.req),
+      API.updateOrganization(variables.organizationId, variables.req),
 
     onSuccess: async () => {
       await queryClient.invalidateQueries(organizationsKey);
@@ -36,7 +36,8 @@ export const updateOrganization = (queryClient: QueryClient) => {
 
 export const deleteOrganization = (queryClient: QueryClient) => {
   return {
-    mutationFn: (orgId: string) => API.deleteOrganization(orgId),
+    mutationFn: (organizationId: string) =>
+      API.deleteOrganization(organizationId),
 
     onSuccess: async () => {
       await queryClient.invalidateQueries(meKey);
@@ -79,7 +80,7 @@ export const removeOrganizationMember = (
   };
 };
 
-export const organizationsKey = ["organizations", "me"] as const;
+export const organizationsKey = ["organizations"] as const;
 
 export const organizations = () => {
   return {

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
@@ -107,3 +107,23 @@ export const PageHeaderCaption: FC<PropsWithChildren> = ({ children }) => {
     </span>
   );
 };
+
+interface ResourcePageHeaderProps extends Omit<PageHeaderProps, "children"> {
+  displayName?: string;
+  name: string;
+}
+
+export const ResourcePageHeader: FC<ResourcePageHeaderProps> = ({
+  displayName,
+  name,
+  ...props
+}) => {
+  const title = displayName || name;
+
+  return (
+    <PageHeader {...props}>
+      <PageHeaderTitle>{title}</PageHeaderTitle>
+      {name !== title && <PageHeaderSubtitle>{name}</PageHeaderSubtitle>}
+    </PageHeader>
+  );
+};
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -3,15 +3,13 @@ import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { createGroup } from "api/queries/groups";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import CreateGroupPageView from "./CreateGroupPageView";
 
 export const CreateGroupPage: FC = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const { organizationId } = useDashboard();
-  const createGroupMutation = useMutation(createGroup(queryClient));
+  const createGroupMutation = useMutation(createGroup(queryClient, "default"));
 
   return (
     <>
@@ -20,10 +18,7 @@ export const CreateGroupPage: FC = () => {
       </Helmet>
       <CreateGroupPageView
         onSubmit={async (data) => {
-          const newGroup = await createGroupMutation.mutateAsync({
-            organizationId,
-            ...data,
-          });
+          const newGroup = await createGroupMutation.mutateAsync(data);
           navigate(`/groups/${newGroup.name}`);
         }}
         error={createGroupMutation.error}

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -54,10 +54,13 @@ import { isEveryoneGroup } from "utils/groups";
 import { pageTitle } from "utils/page";
 
 export const GroupPage: FC = () => {
-  const { groupName } = useParams() as { groupName: string };
+  const { groupName, organization } = useParams() as {
+    organization: string;
+    groupName: string;
+  };
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const groupQuery = useQuery(group(groupName));
+  const groupQuery = useQuery(group(organization, groupName));
   const groupData = groupQuery.data;
   const { data: permissions } = useQuery(
     groupData !== undefined

diff --git a/site/src/pages/GroupsPage/SettingsGroupPage.tsx b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
@@ -13,8 +13,7 @@ import SettingsGroupPageView from "./SettingsGroupPageView";
 export const SettingsGroupPage: FC = () => {
   const { groupName } = useParams() as { groupName: string };
   const queryClient = useQueryClient();
-  const groupQuery = useQuery(group(groupName));
-  const { data: groupData, isLoading, error } = useQuery(group(groupName));
+  const groupQuery = useQuery(group("default", groupName));
   const patchGroupMutation = useMutation(patchGroup(queryClient));
   const navigate = useNavigate();
 
@@ -28,19 +27,20 @@ export const SettingsGroupPage: FC = () => {
     </Helmet>
   );
 
-  if (error) {
-    return <ErrorAlert error={error} />;
+  if (groupQuery.error) {
+    return <ErrorAlert error={groupQuery.error} />;
   }
 
-  if (isLoading || !groupData) {
+  if (groupQuery.isLoading || !groupQuery.data) {
     return (
       <>
         {helmet}
         <Loader />
       </>
     );
   }
-  const groupId = groupData.id;
+
+  const groupId = groupQuery.data.id;
 
   return (
     <>

diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx
@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { useMutation, useQueryClient } from "react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import { createGroup } from "api/queries/groups";
+import { pageTitle } from "utils/page";
+import CreateGroupPageView from "./CreateGroupPageView";
+
+export const CreateGroupPage: FC = () => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { organization } = useParams() as { organization: string };
+  const createGroupMutation = useMutation(
+    createGroup(queryClient, organization),
+  );
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("Create Group")}</title>
+      </Helmet>
+      <CreateGroupPageView
+        onSubmit={async (data) => {
+          const newGroup = await createGroupMutation.mutateAsync(data);
+          navigate(`/organizations/${organization}/groups/${newGroup.name}`);
+        }}
+        error={createGroupMutation.error}
+        isLoading={createGroupMutation.isLoading}
+      />
+    </>
+  );
+};
+export default CreateGroupPage;
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { mockApiError } from "testHelpers/entities";
+import { CreateGroupPageView } from "./CreateGroupPageView";
+
+const meta: Meta<typeof CreateGroupPageView> = {
+  title: "pages/OrganizationGroupsPage/CreateGroupPageView",
+  component: CreateGroupPageView,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateGroupPageView>;
+
+export const Example: Story = {};
+
+export const WithError: Story = {
+  args: {
+    error: mockApiError({
+      message: "A group named new-group already exists.",
+      validations: [{ field: "name", detail: "Group names must be unique" }],
+    }),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Enter name", async () => {
+      const input = canvas.getByLabelText("Name");
+      await userEvent.type(input, "new-group");
+      input.blur();
+    });
+  },
+};