Add default role support for RolePage

backend/src/ee/routes/v1/org-role-router.ts

@@ -53,7 +53,6 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
   });
 
   server.route({
-    // new: note that doesn't work for default roles
     method: "GET",
     url: "/:organizationId/roles/:roleId",
     config: {

backend/src/services/org/org-role-service.ts

@@ -51,9 +51,50 @@ export const orgRoleServiceFactory = ({ orgRoleDAL, permissionService }: TOrgRol
   ) => {
     const { permission } = await permissionService.getUserOrgPermission(userId, orgId, actorAuthMethod, actorOrgId);
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Role);
-    const role = await orgRoleDAL.findOne({ id: roleId, orgId });
+
-    if (!role) throw new BadRequestError({ message: "Role not found", name: "Get role" });
+    switch (roleId) {
-    return role;
+      case "b11b49a9-09a9-4443-916a-4246f9ff2c69": {
+        return {
+          id: roleId,
+          orgId,
+          name: "Admin",
+          slug: "admin",
+          description: "Complete administration access over the organization",
+          permissions: packRules(orgAdminPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      case "b11b49a9-09a9-4443-916a-4246f9ff2c70": {
+        return {
+          id: roleId,
+          orgId,
+          name: "Member",
+          slug: "member",
+          description: "Non-administrative role in an organization",
+          permissions: packRules(orgMemberPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      case "b10d49a9-09a9-4443-916a-4246f9ff2c72": {
+        return {
+          id: "b10d49a9-09a9-4443-916a-4246f9ff2c72", // dummy user for zod validation in response
+          orgId,
+          name: "No Access",
+          slug: "no-access",
+          description: "No access to any resources in the organization",
+          permissions: packRules(orgNoAccessPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      default: {
+        const role = await orgRoleDAL.findOne({ id: roleId, orgId });
+        if (!role) throw new BadRequestError({ message: "Role not found", name: "Get role" });
+        return role;
+      }
+    }
   };
 
   const updateRole = async (

frontend/src/views/Org/RolePage/components/RoleDetailsSection.tsx

@@ -21,32 +21,35 @@ export const RoleDetailsSection = ({ roleId, handlePopUpOpen }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { data } = useGetOrgRole(orgId, roleId);
+  const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
 
   return data ? (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+        {isCustomRole && (
-          {(isAllowed) => {
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
-            return (
+            {(isAllowed) => {
-              <Tooltip content="Edit Role">
+              return (
-                <IconButton
+                <Tooltip content="Edit Role">
-                  isDisabled={!isAllowed}
+                  <IconButton
-                  ariaLabel="copy icon"
+                    isDisabled={!isAllowed}
-                  variant="plain"
+                    ariaLabel="copy icon"
-                  className="group relative"
+                    variant="plain"
-                  onClick={() =>
+                    className="group relative"
-                    handlePopUpOpen("role", {
+                    onClick={() =>
-                      roleId
+                      handlePopUpOpen("role", {
-                    })
+                        roleId
-                  }
+                      })
-                >
+                    }
-                  <FontAwesomeIcon icon={faPencil} />
+                  >
-                </IconButton>
+                    <FontAwesomeIcon icon={faPencil} />
-              </Tooltip>
+                  </IconButton>
-            );
+                </Tooltip>
-          }}
+              );
-        </OrgPermissionCan>
+            }}
+          </OrgPermissionCan>
+        )}
       </div>
       <div className="pt-4">
         <div className="mb-4">

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionRow.tsx

@@ -3,7 +3,8 @@ import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form"
 import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Checkbox, IconButton, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { TFormSchema } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
 
@@ -58,6 +59,7 @@ const getPermissionList = (option: string) => {
 };
 
 type Props = {
+  isEditable: boolean;
   title: string;
   formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "workspace">;
   setValue: UseFormSetValue<TFormSchema>;
@@ -76,7 +78,14 @@ enum Permission {
 
 // TODO: support for default roles
 
-export const RolePermissionRow = ({ title, formName, handleSubmit, control, setValue }: Props) => {
+export const RolePermissionRow = ({
+  isEditable,
+  title,
+  formName,
+  handleSubmit,
+  control,
+  setValue
+}: Props) => {
   const [isRowExpanded, setIsRowExpanded] = useToggle();
   const [isCustom, setIsCustom] = useToggle();
 
@@ -159,14 +168,7 @@ export const RolePermissionRow = ({ title, formName, handleSubmit, control, setV
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td>
-          <IconButton
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
-            ariaLabel="copy icon"
-            variant="plain"
-            className="group relative ml-2"
-            onClick={() => setIsRowExpanded.toggle()}
-          >
-            <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
-          </IconButton>
         </Td>
         <Td>{title}</Td>
         <Td>
@@ -175,6 +177,7 @@ export const RolePermissionRow = ({ title, formName, handleSubmit, control, setV
             className="w-40 bg-mineshaft-600"
             dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -200,6 +203,13 @@ export const RolePermissionRow = ({ title, formName, handleSubmit, control, setV
                       <Checkbox
                         isChecked={field.value}
                         onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
                           field.onChange(e);
                           handleSubmit();
                         }}

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsTable.tsx

@@ -93,6 +93,8 @@ export const RolePermissionsTable = ({ roleId }: Props) => {
     }
   };
 
+  const isCustomRole = !["admin", "member", "no-access"].includes(role?.slug ?? "");
+
   return (
     <TableContainer>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -114,6 +116,7 @@ export const RolePermissionsTable = ({ roleId }: Props) => {
                   setValue={setValue}
                   handleSubmit={handleSubmit(onSubmit)}
                   key={`org-role-${roleId}-permission-${permission.formName}`}
+                  isEditable={isCustomRole}
                 />
               );
             })}