coder · aslilac · Jul 22, 2024 · Jul 12, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1477,9 +1477,12 @@ class ApiMethods {
     return response.data;
   };
 
-  getGroup = async (groupName: string): Promise<TypesGen.Group> => {
+  getGroup = async (
+    orgId: string,
+    groupName: string,
+  ): Promise<TypesGen.Group> => {
     const response = await this.axios.get(
-      `/api/v2/organizations/default/groups/${groupName}`,
+      `/api/v2/organizations/${orgId}/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,
+  orgId: string,
+  groupId: string,
+) =>
   Promise.all([
     queryClient.invalidateQueries(GROUPS_QUERY_KEY),
-    queryClient.invalidateQueries(getGroupQueryKey(groupId)),
+    queryClient.invalidateQueries(getGroupQueryKey(orgId, groupId)),
   ]);
 
 export function sortGroupsByName(

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,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+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" }],
+    }),
+    initialTouched: { name: true },
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
@@ -0,0 +1,94 @@
+import TextField from "@mui/material/TextField";
+import { type FormikTouched, useFormik } from "formik";
+import type { FC } from "react";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import { isApiValidationError } from "api/errors";
+import type { CreateGroupRequest } from "api/typesGenerated";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import {
+  FormFields,
+  FormFooter,
+  FormSection,
+  HorizontalForm,
+} from "components/Form/Form";
+import { IconField } from "components/IconField/IconField";
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+
+const validationSchema = Yup.object({
+  name: Yup.string().required().label("Name"),
+});
+
+export type CreateGroupPageViewProps = {
+  onSubmit: (data: CreateGroupRequest) => void;
+  error?: unknown;
+  isLoading: boolean;
+  // Helpful to show field errors on Storybook
+  initialTouched?: FormikTouched<CreateGroupRequest>;
+};
+
+export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
+  onSubmit,
+  error,
+  isLoading,
+  initialTouched,
+}) => {
+  const navigate = useNavigate();
+  const form = useFormik<CreateGroupRequest>({
+    initialValues: {
+      name: "",
+      display_name: "",
+      avatar_url: "",
+      quota_allowance: 0,
+    },
+    validationSchema,
+    onSubmit,
+    initialTouched,
+  });
+  const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, error);
+  const onCancel = () => navigate(-1);
+
+  return (
+    <>
+      <PageHeader css={{ paddingTop: 8 }}>
+        <PageHeaderTitle>Create a group</PageHeaderTitle>
+      </PageHeader>
+      <HorizontalForm onSubmit={form.handleSubmit}>
+        <FormSection
+          title="Group settings"
+          description="Set a name and avatar for this group."
+        >
+          <FormFields>
+            {Boolean(error) && !isApiValidationError(error) && (
+              <ErrorAlert error={error} />
+            )}
+
+            <TextField
+              {...getFieldHelpers("name")}
+              autoFocus
+              fullWidth
+              label="Name"
+            />
+            <TextField
+              {...getFieldHelpers("display_name", {
+                helperText: "Optional: keep empty to default to the name.",
+              })}
+              fullWidth
+              label="Display Name"
+            />
+            <IconField
+              {...getFieldHelpers("avatar_url")}
+              onChange={onChangeTrimmed(form)}
+              fullWidth
+              label="Avatar URL"
+              onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
+            />
+          </FormFields>
+        </FormSection>
+        <FormFooter onCancel={onCancel} isLoading={isLoading} />
+      </HorizontalForm>
+    </>
+  );
+};
+export default CreateGroupPageView;