Add default role support for RolePage

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}>
-          {(isAllowed) => {
-            return (
-              <Tooltip content="Edit Role">
-                <IconButton
-                  isDisabled={!isAllowed}
-                  ariaLabel="copy icon"
-                  variant="plain"
-                  className="group relative"
-                  onClick={() =>
-                    handlePopUpOpen("role", {
-                      roleId
-                    })
-                  }
-                >
-                  <FontAwesomeIcon icon={faPencil} />
-                </IconButton>
-              </Tooltip>
-            );
-          }}
-        </OrgPermissionCan>
+        {isCustomRole && (
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+            {(isAllowed) => {
+              return (
+                <Tooltip content="Edit Role">
+                  <IconButton
+                    isDisabled={!isAllowed}
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                    onClick={() =>
+                      handlePopUpOpen("role", {
+                        roleId
+                      })
+                    }
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
+                  </IconButton>
+                </Tooltip>
+              );
+            }}
+          </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
-            ariaLabel="copy icon"
-            variant="plain"
-            className="group relative ml-2"
-            onClick={() => setIsRowExpanded.toggle()}
-          >
-            <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
-          </IconButton>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </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}
                 />
               );
             })}