coder · jaaydenh · Aug 9, 2024 · Jul 31, 2024 · Jul 31, 2024 · Aug 1, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -600,6 +600,24 @@ class ApiMethods {
     return response.data;
   };
 
+  patchOrganizationRole = async (
+    organizationId: string,
+    role: TypesGen.Role,
+  ): Promise<TypesGen.Role> => {
+    const response = await this.axios.patch<TypesGen.Role>(
+      `/api/v2/organizations/${organizationId}/members/roles`,
+      role,
+    );
+
+    return response.data;
+  };
+
+  deleteOrganizationRole = async (organizationId: string, roleName: string) => {
+    await this.axios.delete(
+      `/api/v2/organizations/${organizationId}/members/roles/${roleName}`,
+    );
+  };
+
   /**
    * @param organization Can be the organization's ID or name
    */

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -177,6 +177,13 @@ export const organizationPermissions = (organizationId: string | undefined) => {
             },
             action: "read",
           },
+          assignOrgRole: {
+            object: {
+              resource_type: "assign_org_role",
+              organization_id: organizationId,
+            },
+            action: "create",
+          },
         },
       }),
   };

diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
@@ -1,4 +1,13 @@
+import type { QueryClient } from "react-query";
 import { API } from "api/api";
+import type { Role } from "api/typesGenerated";
+
+const getRoleQueryKey = (organizationId: string, roleName: string) => [
+  "organization",
+  organizationId,
+  "role",
+  roleName,
+];
 
 export const roles = () => {
   return {
@@ -13,3 +22,30 @@ export const organizationRoles = (organizationId: string) => {
     queryFn: () => API.getOrganizationRoles(organizationId),
   };
 };
+
+export const patchOrganizationRole = (
+  queryClient: QueryClient,
+  organizationId: string,
+) => {
+  return {
+    mutationFn: (request: Role) =>
+      API.patchOrganizationRole(organizationId, request),
+    onSuccess: async (updatedRole: Role) =>
+      await queryClient.invalidateQueries(
+        getRoleQueryKey(organizationId, updatedRole.name),
+      ),
+  };
+};
+
+export const deleteRole = (
+  queryClient: QueryClient,
+  organizationId: string,
+) => {
+  return {
+    mutationFn: API.deleteOrganizationRole,
+    onSuccess: async (_: void, roleName: string) =>
+      await queryClient.invalidateQueries(
+        getRoleQueryKey(organizationId, roleName),
+      ),
+  };
+};
diff --git a/site/src/contexts/auth/permissions.tsx b/site/src/contexts/auth/permissions.tsx
@@ -17,6 +17,7 @@ export const checks = {
   viewAnyGroup: "viewAnyGroup",
   createGroup: "createGroup",
   viewAllLicenses: "viewAllLicenses",
+  assignOrgRole: "assignOrgRole",
 } as const;
 
 export const permissionsToCheck = {
@@ -131,6 +132,12 @@ export const permissionsToCheck = {
     },
     action: "read",
   },
+  [checks.assignOrgRole]: {
+    object: {
+      resource_type: "assign_org_role",
+    },
+    action: "create",
+  },
 } as const;
 
 export type Permissions = Record<keyof typeof permissionsToCheck, boolean>;
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -0,0 +1,114 @@
+import Button from "@mui/material/Button";
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import * as Yup from "yup";
+import { getErrorMessage } from "api/errors";
+import { patchOrganizationRole, organizationRoles } from "api/queries/roles";
+import type { PatchRoleRequest } from "api/typesGenerated";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { Loader } from "components/Loader/Loader";
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { nameValidator } from "utils/formUtils";
+import { pageTitle } from "utils/page";
+import CreateEditRolePageView from "./CreateEditRolePageView";
+
+export const CreateEditRolePage: FC = () => {
+  const { permissions } = useAuthenticated();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { organization, roleName } = useParams() as {
+    organization: string;
+    roleName: string;
+  };
+  const { assignOrgRole: canAssignOrgRole } = permissions;
+  const patchOrganizationRoleMutation = useMutation(
+    patchOrganizationRole(queryClient, organization),
+  );
+  const { data: roleData, isLoading } = useQuery(
+    organizationRoles(organization),
+  );
+  const role = roleData?.find((role) => role.name === roleName);
+
+  const validationSchema = Yup.object({
+    name: nameValidator("Name"),
+  });
+
+  const onSubmit = async (data: PatchRoleRequest) => {
+    try {
+      await patchOrganizationRoleMutation.mutateAsync(data);
+      navigate(`/organizations/${organization}/roles`);
+    } catch (error) {
+      displayError(getErrorMessage(error, "Failed to update custom role"));
+    }
+  };
+
+  const form = useFormik<PatchRoleRequest>({
+    initialValues: {
+      name: role?.name || "",
+      display_name: role?.display_name || "",
+      site_permissions: role?.site_permissions || [],
+      organization_permissions: role?.organization_permissions || [],
+      user_permissions: role?.user_permissions || [],
+    },
+    validationSchema,
+    onSubmit,
+  });
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {pageTitle(
+            role !== undefined ? "Edit Custom Role" : "Create Custom Role",
+          )}
+        </title>
+      </Helmet>
+
+      <PageHeader
+        actions={
+          canAssignOrgRole && (
+            <>
+              <Button
+                onClick={() => {
+                  navigate(`/organizations/${organization}/roles`);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  form.handleSubmit();
+                }}
+              >
+                {role !== undefined ? "Save" : "Create Role"}
+              </Button>
+            </>
+          )
+        }
+      >
+        <PageHeaderTitle>
+          {role ? "Edit" : "Create"} custom role
+        </PageHeaderTitle>
+      </PageHeader>
+
+      <CreateEditRolePageView
+        role={role}
+        form={form}
+        error={patchOrganizationRoleMutation.error}
+        isLoading={patchOrganizationRoleMutation.isLoading}
+      />
+    </>
+  );
+};
+
+export default CreateEditRolePage;