Clean org roles concept refactor

frontend/src/hooks/api/roles/mutation.tsx

@@ -9,6 +9,7 @@ import {
   TCreateProjectRoleDTO,
   TDeleteOrgRoleDTO,
   TDeleteProjectRoleDTO,
+  TOrgRole,
   TUpdateOrgRoleDTO,
   TUpdateProjectRoleDTO
 } from "./types";
@@ -52,12 +53,17 @@ export const useDeleteProjectRole = () => {
 export const useCreateOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<TOrgRole, {}, TCreateOrgRoleDTO>({
-    mutationFn: ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) =>
+    mutationFn: async ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) => {
-      apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
+      const {
+        data: { role }
+      } = await apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
         ...dto,
         permissions: permissions.length ? packRules(permissions) : []
-      }),
+      });
+
+      return role;
+    },
     onSuccess: (_, { orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
     }
@@ -67,19 +73,16 @@ export const useCreateOrgRole = () => {
 export const useUpdateOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<TOrgRole, {}, TUpdateOrgRoleDTO>({
-    mutationFn: ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) => {
+    mutationFn: async ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) => {
-      console.log("update args: ", {
+      const {
-        id,
+        data: { role }
-        orgId,
+      } = await apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
-        permissions,
-        ...dto,
-        pack: permissions?.length ? packRules(permissions) : []
-      });
-      return apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
         ...dto,
         permissions: permissions?.length ? packRules(permissions) : []
       });
+
+      return role;
     },
     onSuccess: (_, { id, orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
@@ -91,11 +94,16 @@ export const useUpdateOrgRole = () => {
 export const useDeleteOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<TOrgRole, {}, TDeleteOrgRoleDTO>({
-    mutationFn: ({ orgId, id }: TDeleteOrgRoleDTO) =>
+    mutationFn: async ({ orgId, id }: TDeleteOrgRoleDTO) => {
-      apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
+      const {
+        data: { role }
+      } = await apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
         data: { orgId }
-      }),
+      });
+
+      return role;
+    },
     onSuccess: (_, { id, orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
       queryClient.invalidateQueries(roleQueryKeys.getOrgRole(orgId, id));

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -7,7 +7,7 @@ import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
 
 export const OrgRoleTabSection = () => {
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
+  const { popUp, handlePopUpClose } = usePopUp(["editRole"] as const);
   return popUp.editRole.isOpen ? (
     <motion.div
       key="role-modify"
@@ -29,7 +29,7 @@ export const OrgRoleTabSection = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: -30 }}
     >
-      <OrgRoleTable onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
+      <OrgRoleTable />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -25,17 +25,15 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles } from "@app/hooks/api";
 import { TOrgRole } from "@app/hooks/api/roles/types";
+import { RoleModal } from "@app/views/Org/RolePage/components";
 
-type Props = {
+export const OrgRoleTable = () => {
-  onSelectRole: (role?: TOrgRole) => void;
-};
-
-export const OrgRoleTable = ({ onSelectRole }: Props) => {
   const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "role",
     "deleteRole"
   ] as const);
 
@@ -68,7 +66,10 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
               colorSchema="primary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => onSelectRole()}
+              // onClick={() => onSelectRole()}
+              onClick={() => {
+                handlePopUpOpen("role");
+              }}
               isDisabled={!isAllowed}
             >
               Add Role
@@ -119,7 +120,8 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
                               )}
                               onClick={(e) => {
                                 e.stopPropagation();
-                                onSelectRole(role);
+                                router.push(`/org/${orgId}/roles/${id}`);
+                                // onSelectRole(role);
                               }}
                               disabled={!isAllowed}
                             >
@@ -142,7 +144,10 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
                                   ? "hover:!bg-red-500 hover:!text-white"
                                   : "pointer-events-none cursor-not-allowed opacity-50"
                               )}
-                              onClick={() => handlePopUpOpen("deleteRole", role)}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handlePopUpOpen("deleteRole", role);
+                              }}
                               disabled={!isAllowed}
                             >
                               Delete Role
@@ -158,6 +163,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
           </TBody>
         </Table>
       </TableContainer>
+      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
         title={`Are you sure want to delete ${

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

@@ -13,20 +13,14 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Tooltip,
+  Tooltip
-  UpgradePlanModal
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { withPermission } from "@app/hoc";
-import { useGetOrgRole } from "@app/hooks/api";
+import { useDeleteOrgRole,useGetOrgRole } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { RolePermissionsTable } from "./components/RolePermissionsSection/RolePermissionsTable";
+import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
-import {
-  RoleDetailsSection,
-  RoleModal,
-  RolePermissionModal,
-  RolePermissionsSection} from "./components";
 
 export const RolePage = withPermission(
   () => {
@@ -35,76 +29,40 @@ export const RolePage = withPermission(
     const { currentOrg } = useOrganization();
     const orgId = currentOrg?.id || "";
     const { data } = useGetOrgRole(orgId, roleId);
-    console.log("useGetOrgRole data: ", data);
+    const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
-
-    // const { data } = useGetIdentityById(identityId); // TODO: get role by id
-    // const { mutateAsync: deleteIdentity } = useDeleteIdentity();
-    // const { mutateAsync: revokeToken } = useRevokeIdentityTokenAuthToken();
-    // const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
 
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "role",
-      "rolePermission"
+      "deleteOrgRole"
     ] as const);
 
-    // const onDeleteIdentitySubmit = async (id: string) => {
+    const onDeleteOrgRoleSubmit = async () => {
-    //   try {
+      try {
-    //     await deleteIdentity({
+        if (!orgId || !roleId) return;
-    //       identityId: id,
-    //       organizationId: orgId
-    //     });
 
-    //     createNotification({
+        await deleteOrgRole({
-    //       text: "Successfully deleted identity",
+          orgId,
-    //       type: "success"
+          id: roleId
-    //     });
+        });
 
-    //     handlePopUpClose("deleteIdentity");
+        createNotification({
-    //     router.push(`/org/${orgId}/members`);
+          text: "Successfully deleted organization role",
-    //   } catch (err) {
+          type: "success"
-    //     console.error(err);
+        });
-    //     const error = err as any;
-    //     const text = error?.response?.data?.message ?? "Failed to delete identity";
 
-    //     createNotification({
+        handlePopUpClose("deleteOrgRole");
-    //       text,
+        router.push(`/org/${orgId}/members`);
-    //       type: "error"
+      } catch (err) {
-    //     });
+        console.error(err);
-    //   }
+        const error = err as any;
-    // };
+        const text = error?.response?.data?.message ?? "Failed to delete organization role";
 
-    // const onRevokeTokenSubmit = async ({
+        createNotification({
-    //   identityId: parentIdentityId,
+          text,
-    //   tokenId,
+          type: "error"
-    //   name
+        });
-    // }: {
+      }
-    //   identityId: string;
+    };
-    //   tokenId: string;
-    //   name: string;
-    // }) => {
-    //   try {
-    //     await revokeToken({
-    //       identityId: parentIdentityId,
-    //       tokenId
-    //     });
-
-    //     handlePopUpClose("revokeToken");
-
-    //     createNotification({
-    //       text: `Successfully revoked token ${name ?? ""}`,
-    //       type: "success"
-    //     });
-    //   } catch (err) {
-    //     console.error(err);
-    //     const error = err as any;
-    //     const text = error?.response?.data?.message ?? "Failed to delete identity";
-
-    //     createNotification({
-    //       text,
-    //       type: "error"
-    //     });
-    //   }
-    // };
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
@@ -139,12 +97,9 @@ export const RolePage = withPermission(
                           !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                         )}
                         onClick={async () => {
-                          //   handlePopUpOpen("identity", {
+                          handlePopUpOpen("role", {
-                          //     identityId,
+                            roleId
-                          //     name: data.identity.name,
+                          });
-                          //     role: data.role,
-                          //     customRole: data.customRole
-                          //   });
                         }}
                         disabled={!isAllowed}
                       >
@@ -161,10 +116,7 @@ export const RolePage = withPermission(
                             : "pointer-events-none cursor-not-allowed opacity-50"
                         )}
                         onClick={async () => {
-                          //   handlePopUpOpen("deleteIdentity", {
+                          handlePopUpOpen("deleteOrgRole");
-                          //     identityId,
-                          //     name: data.identity.name
-                          //   });
                         }}
                         disabled={!isAllowed}
                       >
@@ -179,84 +131,18 @@ export const RolePage = withPermission(
               <div className="mr-4 w-96">
                 <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
               </div>
-              <RolePermissionsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
+              <RolePermissionsSection roleId={roleId} />
             </div>
           </div>
         )}
         <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <RolePermissionModal roleId={roleId} popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        {/* <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <IdentityAuthMethodModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <IdentityTokenListModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityClientSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <IdentityUniversalAuthClientSecretModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={(popUp.upgradePlan?.data as { description: string })?.description}
-        />
         <DeleteActionModal
-          isOpen={popUp.deleteIdentity.isOpen}
+          isOpen={popUp.deleteOrgRole.isOpen}
-          title={`Are you sure want to delete ${
+          title={`Are you sure want to delete the organization role ${data?.name ?? ""}?`}
-            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+          onChange={(isOpen) => handlePopUpToggle("deleteOrgRole", isOpen)}
-          }?`}
-          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
           deleteKey="confirm"
-          onDeleteApproved={() =>
+          onDeleteApproved={() => onDeleteOrgRoleSubmit()}
-            onDeleteIdentitySubmit(
-              (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
-            )
-          }
         />
-        <DeleteActionModal
-          isOpen={popUp.revokeToken.isOpen}
-          title={`Are you sure want to revoke ${
-            (popUp?.revokeToken?.data as { name: string })?.name || ""
-          }?`}
-          onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
-          deleteKey="confirm"
-          onDeleteApproved={() => {
-            const revokeTokenData = popUp?.revokeToken?.data as {
-              identityId: string;
-              tokenId: string;
-              name: string;
-            };
-
-            return onRevokeTokenSubmit(revokeTokenData);
-          }}
-        />
-        <DeleteActionModal
-          isOpen={popUp.revokeClientSecret.isOpen}
-          title={`Are you sure want to delete the client secret ${
-            (popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })
-              ?.clientSecretPrefix || ""
-          }************?`}
-          onChange={(isOpen) => handlePopUpToggle("revokeClientSecret", isOpen)}
-          deleteKey="confirm"
-          onDeleteApproved={() => {
-            const deleteClientSecretData = popUp?.revokeClientSecret?.data as {
-              clientSecretId: string;
-              clientSecretPrefix: string;
-            };
-
-            return onDeleteClientSecretSubmit({
-              clientSecretId: deleteClientSecretData.clientSecretId
-            });
-          }}
-        /> */}
       </div>
     );
   },

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

@@ -80,7 +80,9 @@ export const RoleDetailsSection = ({ roleId, handlePopUpOpen }: Props) => {
         </div>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Description</p>
-          <p className="text-sm text-mineshaft-300">{data.description}</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.description?.length ? data.description : "-"}
+          </p>
         </div>
       </div>
     </div>

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

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-// import { useRouter } from "next/router";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
+import { useCreateOrgRole, useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
@@ -22,19 +22,11 @@ export type FormData = z.infer<typeof schema>;
 
 type Props = {
   popUp: UsePopUpState<["role"]>;
-  // handlePopUpOpen: (
-  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-  //   data: {
-  //     identityId: string;
-  //     name: string;
-  //     authMethod?: IdentityAuthMethod;
-  //   }
-  // ) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void;
 };
 
 export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
-  // const router = useRouter();
+  const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
@@ -44,10 +36,7 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const { data: role } = useGetOrgRole(orgId, popupData?.roleId ?? "");
 
-  // const { mutateAsync: createMutateAsync } = useCreateIdentity();
+  const { mutateAsync: createOrgRole } = useCreateOrgRole();
-  // const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
-
   const { mutateAsync: updateOrgRole } = useUpdateOrgRole();
 
   const {
@@ -102,16 +91,18 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
         handlePopUpToggle("role", false);
       } else {
-        // TODO: create
+        // create
 
-        // const { id: createdId } = await createMutateAsync({
+        const newRole = await createOrgRole({
-        //   name,
+          orgId,
-        //   role: role || undefined,
+          name,
-        //   organizationId: orgId
+          description,
-        // });
+          slug,
+          permissions: []
+        });
 
         handlePopUpToggle("role", false);
-        // router.push(`/org/${orgId}/identities/${createdId}`);
+        router.push(`/org/${orgId}/roles/${newRole.id}`);
       }
 
       createNotification({

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

@@ -1,350 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  Checkbox,
-  FormControl,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { useGetOrgRole } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-enum Permission {
-  NoAccess = "no-access",
-  ReadOnly = "read-only",
-  FullAccess = "full-acess",
-  Custom = "custom"
-}
-
-const generalPermissionSchema = z
-  .object({
-    read: z.boolean().optional(),
-    edit: z.boolean().optional(),
-    delete: z.boolean().optional(),
-    create: z.boolean().optional()
-  })
-  .optional();
-
-const specificPermissionSchemas = {
-  workspace: z
-    .object({
-      read: z.boolean().optional(),
-      create: z.boolean().optional()
-    })
-    .optional(),
-  member: generalPermissionSchema,
-  groups: generalPermissionSchema,
-  role: generalPermissionSchema,
-  settings: generalPermissionSchema,
-  "service-account": generalPermissionSchema,
-  "incident-contact": generalPermissionSchema,
-  "secret-scanning": generalPermissionSchema,
-  sso: generalPermissionSchema,
-  scim: generalPermissionSchema,
-  ldap: generalPermissionSchema,
-  billing: generalPermissionSchema,
-  identity: generalPermissionSchema
-};
-
-// Create a union of all possible keys
-const permissionsUnion = z.union([
-  z.object({ workspace: specificPermissionSchemas.workspace }),
-  z.object({ member: specificPermissionSchemas.member }),
-  z.object({ groups: specificPermissionSchemas.groups }),
-  z.object({ role: specificPermissionSchemas.role }),
-  z.object({ settings: specificPermissionSchemas.settings }),
-  z.object({ "service-account": specificPermissionSchemas["service-account"] }),
-  z.object({ "incident-contact": specificPermissionSchemas["incident-contact"] }),
-  z.object({ "secret-scanning": specificPermissionSchemas["secret-scanning"] }),
-  z.object({ sso: specificPermissionSchemas.sso }),
-  z.object({ scim: specificPermissionSchemas.scim }),
-  z.object({ ldap: specificPermissionSchemas.ldap }),
-  z.object({ billing: specificPermissionSchemas.billing }),
-  z.object({ identity: specificPermissionSchemas.identity })
-]);
-
-const schema = z.object({
-  resource: z.string(), // this is formName
-  action: z.nativeEnum(Permission),
-  permissions: z.record(z.string(), permissionsUnion).optional()
-});
-
-type FormData = z.infer<typeof schema>;
-
-type Props = {
-  roleId: string;
-  popUp: UsePopUpState<["rolePermission"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["rolePermission"]>, state?: boolean) => void;
-};
-
-const SIMPLE_PERMISSION_OPTIONS = [
-  {
-    title: "User management",
-    formName: "member"
-  },
-  {
-    title: "Group management",
-    formName: "groups"
-  },
-  {
-    title: "Machine identity management",
-    formName: "identity"
-  },
-  {
-    title: "Billing & usage",
-    formName: "billing"
-  },
-  {
-    title: "Role management",
-    formName: "role"
-  },
-  {
-    title: "Incident Contacts",
-    formName: "incident-contact"
-  },
-  {
-    title: "Organization profile",
-    formName: "settings"
-  },
-  {
-    title: "Secret Scanning",
-    formName: "secret-scanning"
-  },
-  {
-    title: "SSO",
-    formName: "sso"
-  },
-  {
-    title: "LDAP",
-    formName: "ldap"
-  },
-  {
-    title: "SCIM",
-    formName: "scim"
-  }
-] as const;
-
-const PERMISSIONS = [
-  { action: "read", label: "View" },
-  { action: "create", label: "Create" },
-  { action: "edit", label: "Modify" },
-  { action: "delete", label: "Remove" }
-] as const;
-
-const SECRET_SCANNING_PERMISSIONS = [
-  { action: "read", label: "View risks" },
-  { action: "create", label: "Add integrations" },
-  { action: "edit", label: "Edit risk status" },
-  { action: "delete", label: "Remove integrations" }
-] as const;
-
-const INCIDENT_CONTACTS_PERMISSIONS = [
-  { action: "read", label: "View contacts" },
-  { action: "create", label: "Add new contacts" },
-  { action: "edit", label: "Edit contacts" },
-  { action: "delete", label: "Remove contacts" }
-] as const;
-
-const MEMBERS_PERMISSIONS = [
-  { action: "read", label: "View all members" },
-  { action: "create", label: "Invite members" },
-  { action: "edit", label: "Edit members" },
-  { action: "delete", label: "Remove members" }
-] as const;
-
-const BILLING_PERMISSIONS = [
-  { action: "read", label: "View bills" },
-  { action: "create", label: "Add payment methods" },
-  { action: "edit", label: "Edit payments" },
-  { action: "delete", label: "Remove payments" }
-] as const;
-
-const getPermissionList = (option: string) => {
-  switch (option) {
-    case "secret-scanning":
-      return SECRET_SCANNING_PERMISSIONS;
-    case "billing":
-      return BILLING_PERMISSIONS;
-    case "incident-contact":
-      return INCIDENT_CONTACTS_PERMISSIONS;
-    case "member":
-      return MEMBERS_PERMISSIONS;
-    default:
-      return PERMISSIONS;
-  }
-};
-
-export const RolePermissionModal = ({ roleId, popUp, handlePopUpToggle }: Props) => {
-  const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
-  const { data: role } = useGetOrgRole(orgId, roleId);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting },
-    watch
-  } = useForm<FormData>({
-    resolver: zodResolver(schema)
-  });
-
-  const resource = watch("resource");
-  const action = watch("action");
-
-  useEffect(() => {
-    reset({
-      resource: SIMPLE_PERMISSION_OPTIONS[0].formName,
-      action: Permission.NoAccess
-    });
-
-    // TODO: update for existing permission
-
-    // if (role) {
-    //   console.log("existing role found: ", role);
-    //   reset({
-    //     resource: SIMPLE_PERMISSION_OPTIONS[0].formName
-    //   });
-    // } else {
-    //   console.log("no role found");
-    //   reset({
-    //     resource: SIMPLE_PERMISSION_OPTIONS[0].formName
-    //   });
-    // }
-  }, [role]);
-
-  const onFormSubmit = async () => {
-    try {
-      // TODO: map action to permission array?
-
-      // TODO: add permission to role
-
-      //   await addIdentityToWorkspace({
-      //     workspaceId,
-      //     identityId,
-      //     role: role || undefined
-      //   });
-
-      createNotification({
-        text: "Successfully added permission to role",
-        type: "success"
-      });
-
-      //   reset();
-      //   handlePopUpToggle("rolePermission", false);
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to add identity to project";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.rolePermission?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("rolePermission", isOpen);
-        reset();
-      }}
-    >
-      <ModalContent title="Add Permission to Role">
-        <form onSubmit={handleSubmit(onFormSubmit)}>
-          <Controller
-            control={control}
-            name="resource"
-            defaultValue=""
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl label="Resource" errorText={error?.message} isError={Boolean(error)}>
-                <Select
-                  defaultValue={field.value}
-                  {...field}
-                  onValueChange={(e) => onChange(e)}
-                  className="w-full"
-                >
-                  {SIMPLE_PERMISSION_OPTIONS.map(({ title, formName }) => (
-                    <SelectItem value={formName} key={`resource-${title}`}>
-                      {title}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="action"
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl label="Action" errorText={error?.message} isError={Boolean(error)}>
-                <Select
-                  defaultValue={field.value}
-                  {...field}
-                  onValueChange={(e) => onChange(e)}
-                  className="w-full"
-                >
-                  <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
-                  <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
-                  <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
-                  <SelectItem value={Permission.Custom}>Custom</SelectItem>
-                </Select>
-              </FormControl>
-            )}
-          />
-          {action === Permission.Custom && (
-            <div className="mt-8 mb-4 grid grid-cols-3 gap-4">
-              {getPermissionList(watch("resource")).map((p) => {
-                return (
-                  <Controller
-                    name={`permissions.${resource}.${p.action}`}
-                    key={`permissions.${resource}.${p.action}`}
-                    control={control}
-                    render={({ field }) => (
-                      <Checkbox
-                        isChecked
-                        onCheckedChange={field.onChange}
-                        id={`permissions.${resource}.${p.action}`}
-                        isDisabled={false}
-                      >
-                        {p.label}
-                      </Checkbox>
-                    )}
-                  />
-                );
-              })}
-            </div>
-          )}
-          <div className="mt-8 flex items-center">
-            <Button
-              className="mr-4"
-              size="sm"
-              type="submit"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-            >
-              Add
-            </Button>
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("rolePermission", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};

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

@@ -3,8 +3,7 @@ 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 { createNotification } from "@app/components/notifications";
+import { Checkbox, IconButton, Select, SelectItem, Td, Tr } from "@app/components/v2";
-import { Checkbox, IconButton, 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";
 
@@ -63,6 +62,7 @@ type Props = {
   formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "workspace">;
   setValue: UseFormSetValue<TFormSchema>;
   control: Control<TFormSchema>;
+  handleSubmit: () => void;
 };
 
 // permission categories
@@ -76,7 +76,7 @@ enum Permission {
 
 // TODO: support for default roles
 
-export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props) => {
+export const RolePermissionRow = ({ title, formName, handleSubmit, control, setValue }: Props) => {
   const [isRowExpanded, setIsRowExpanded] = useToggle();
   const [isCustom, setIsCustom] = useToggle();
 
@@ -111,7 +111,6 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
   }, []);
 
   const handlePermissionChange = (val: Permission) => {
-    // TODO: trigger update
     if (val === Permission.Custom) {
       setIsRowExpanded.on();
       setIsCustom.on();
@@ -150,12 +149,15 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
         break;
     }
 
-    createNotification({ type: "success", text: "Updated permission on role." });
+    handleSubmit();
   };
 
   return (
     <>
-      <Tr>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
         <Td>
           <IconButton
             ariaLabel="copy icon"
@@ -197,7 +199,10 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
                     render={({ field }) => (
                       <Checkbox
                         isChecked={field.value}
-                        onCheckedChange={field.onChange}
+                        onCheckedChange={(e) => {
+                          field.onChange(e);
+                          handleSubmit();
+                        }}
                         id={`permissions.${formName}.${action}`}
                       >
                         {label}

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

@@ -1,88 +1,18 @@
-// import { UsePopUpState } from "@app/hooks/usePopUp";
+import { RolePermissionsTable } from "./RolePermissionsTable";
-import { RolePermissionsTable2 } from "./RolePermissionsTable2";
 
 type Props = {
   roleId: string;
-  // handlePopUpOpen: (popUpName: keyof UsePopUpState<["rolePermission"]>, data?: {}) => void;
 };
 
-export const RolePermissionsSection = ({
+export const RolePermissionsSection = ({ roleId }: Props) => {
-  roleId
-}: // handlePopUpOpen
-Props) => {
-  //   const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
-
-  // const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-  //   "addIdentityToProject",
-  //   "removeIdentityFromProject"
-  // ] as const);
-
-  //   const onRemoveIdentitySubmit = async (id: string, projectId: string) => {
-  //     try {
-  //       await deleteMutateAsync({
-  //         identityId: id,
-  //         workspaceId: projectId
-  //       });
-
-  //       createNotification({
-  //         text: "Successfully removed identity from project",
-  //         type: "success"
-  //       });
-
-  //       handlePopUpClose("removeIdentityFromProject");
-  //     } catch (err) {
-  //       console.error(err);
-  //       const error = err as any;
-  //       const text = error?.response?.data?.message ?? "Failed to remove identity from project";
-
-  //       createNotification({
-  //         text,
-  //         type: "error"
-  //       });
-  //     }
-  //   };
-
   return (
     <div className="w-full 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">Permissions</h3>
-        {/* <IconButton
-          ariaLabel="copy icon"
-          variant="plain"
-          className="group relative"
-          onClick={() => handlePopUpOpen("rolePermission")}
-        >
-          <FontAwesomeIcon icon={faPlus} />
-        </IconButton> */}
       </div>
       <div className="py-4">
-        {/* <RolePermissionsTable /> */}
+        <RolePermissionsTable roleId={roleId} />
-        <RolePermissionsTable2 roleId={roleId} />
-        {/* <IdentityProjectsTable identityId={identityId} handlePopUpOpen={handlePopUpOpen} /> */}
       </div>
-      {/* <DeleteActionModal
-        isOpen={popUp.removeIdentityFromProject.isOpen}
-        title={`Are you sure want to remove ${
-          (popUp?.removeIdentityFromProject?.data as { identityName: string })?.identityName || ""
-        } from ${
-          (popUp?.removeIdentityFromProject?.data as { projectName: string })?.projectName || ""
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("removeIdentityFromProject", isOpen)}
-        deleteKey="confirm"
-        onDeleteApproved={() => {
-          const popupData = popUp?.removeIdentityFromProject?.data as {
-            identityId: string;
-            projectId: string;
-          };
-
-          return onRemoveIdentitySubmit(popupData.identityId, popupData.projectId);
-        }}
-      /> */}
-      {/* <IdentityAddToProjectModal
-        identityId={identityId}
-        popUp={popUp}
-        handlePopUpToggle={handlePopUpToggle}
-      /> */}
     </div>
   );
 };

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

@@ -1,124 +1,125 @@
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { useForm } from "react-hook-form";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
-import { twMerge } from "tailwind-merge";
 
-import { OrgPermissionCan } from "@app/components/permissions";
+import { createNotification } from "@app/components/notifications";
+import { Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
 import {
-  DropdownMenu,
+  formRolePermission2API,
-  DropdownMenuContent,
+  formSchema,
-  DropdownMenuItem,
+  rolePermission2Form,
-  DropdownMenuTrigger,
+  TFormSchema
-  // Tooltip,
+} from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
-  // IconButton,
-  // EmptyState,
-  Table,
-  TableContainer,
-  // TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-// import { UsePopUpState } from "@app/hooks/usePopUp";
 
-// import { IdentityProjectRow } from "./IdentityProjectRow";
+import { RolePermissionRow } from "./RolePermissionRow";
 
-// type Props = {
+const SIMPLE_PERMISSION_OPTIONS = [
-//     identityId: string;
+  {
-//     handlePopUpOpen: (
+    title: "User management",
-//       popUpName: keyof UsePopUpState<["removeIdentityFromProject"]>,
+    formName: "member"
-//       data?: {}
+  },
-//     ) => void;
+  {
-// };
+    title: "Group management",
+    formName: "groups"
+  },
+  {
+    title: "Machine identity management",
+    formName: "identity"
+  },
+  {
+    title: "Billing & usage",
+    formName: "billing"
+  },
+  {
+    title: "Role management",
+    formName: "role"
+  },
+  {
+    title: "Incident Contacts",
+    formName: "incident-contact"
+  },
+  {
+    title: "Organization profile",
+    formName: "settings"
+  },
+  {
+    title: "Secret Scanning",
+    formName: "secret-scanning"
+  },
+  {
+    title: "SSO",
+    formName: "sso"
+  },
+  {
+    title: "LDAP",
+    formName: "ldap"
+  },
+  {
+    title: "SCIM",
+    formName: "scim"
+  }
+] as const;
+
+type Props = {
+  roleId: string;
+};
+
+export const RolePermissionsTable = ({ roleId }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { data: role } = useGetOrgRole(orgId, roleId);
+
+  const { setValue, control, handleSubmit } = useForm<TFormSchema>({
+    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
+    resolver: zodResolver(formSchema)
+  });
+
+  const { mutateAsync: updateRole } = useUpdateOrgRole();
+
+  const onSubmit = async (el: TFormSchema) => {
+    try {
+      await updateRole({
+        orgId,
+        id: roleId,
+        ...el,
+        permissions: formRolePermission2API(el.permissions)
+      });
+      createNotification({ type: "success", text: "Successfully updated role" });
+    } catch (err) {
+      console.log(err);
+      createNotification({ type: "error", text: "Failed to update role" });
+    }
+  };
 
-export const RolePermissionsTable = () => {
-  //   const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
   return (
     <TableContainer>
-      <Table>
+      <form onSubmit={handleSubmit(onSubmit)}>
-        <THead>
+        <Table>
-          <Tr>
+          <THead>
-            <Th>Resource</Th>
+            <Tr>
-            <Th>Allowed Actions</Th>
+              <Th className="w-5" />
-            <Th className="w-5" />
+              <Th>Resource</Th>
-          </Tr>
+              <Th>Permission</Th>
-        </THead>
+            </Tr>
-        <TBody>
+          </THead>
-          <Tr>
+          <TBody>
-            <Td>Identity</Td>
+            {SIMPLE_PERMISSION_OPTIONS.map((permission) => {
-            <Td>Create/Read</Td>
-            <Td>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild className="rounded-lg">
-                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="p-1">
-                  <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
-                    {(isAllowed) => (
-                      <DropdownMenuItem
-                        className={twMerge(
-                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          // TODO
-                        }}
-                        disabled={!isAllowed}
-                      >
-                        Edit Permission
-                      </DropdownMenuItem>
-                    )}
-                  </OrgPermissionCan>
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Edit}
-                    a={OrgPermissionSubjects.Identity}
-                  >
-                    {(isAllowed) => (
-                      <DropdownMenuItem
-                        className={twMerge(
-                          isAllowed
-                            ? "hover:!bg-red-500 hover:!text-white"
-                            : "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          //   handlePopUpOpen("deleteIdentity", {
-                          //     identityId: id,
-                          //     name
-                          //   });
-                        }}
-                        disabled={!isAllowed}
-                      >
-                        Delete Permission
-                      </DropdownMenuItem>
-                    )}
-                  </OrgPermissionCan>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </Td>
-          </Tr>
-          {/* <TableSkeleton columns={3} innerKey="role-permissions" /> */}
-          {/* {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />} */}
-          {/* {!isLoading &&
-            projectMemberships?.map((membership) => {
               return (
-                <div key={`membership-${membership.id}`}>Row</div>
+                <RolePermissionRow
-               <IdentityProjectRow
+                  title={permission.title}
-                 key={`identity-project-membership-${membership.id}`}
+                  formName={permission.formName}
-                  membership={membership}
+                  control={control}
-                  handlePopUpOpen={handlePopUpOpen}
+                  setValue={setValue}
+                  handleSubmit={handleSubmit(onSubmit)}
+                  key={`org-role-${roleId}-permission-${permission.formName}`}
                 />
               );
-            })} */}
+            })}
-        </TBody>
+          </TBody>
-      </Table>
+        </Table>
-      {/* <EmptyState title="This role does not have any permissions on it" icon={faShield} /> */}
+      </form>
-      {/* {!isLoading && !projectMemberships?.length && (
-        <EmptyState title="This identity has not been assigned to any projects" icon={faKey} />
-      )} */}
     </TableContainer>
   );
 };

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

@@ -1,103 +0,0 @@
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-
-import { Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { useGetOrgRole } from "@app/hooks/api";
-// TODO: consider moving this out
-import {
-  formSchema,
-  rolePermission2Form,
-  TFormSchema} from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
-
-import { RolePermissionRow2 } from "./RolePermissionRow2";
-
-const SIMPLE_PERMISSION_OPTIONS = [
-  {
-    title: "User management",
-    formName: "member"
-  },
-  {
-    title: "Group management",
-    formName: "groups"
-  },
-  {
-    title: "Machine identity management",
-    formName: "identity"
-  },
-  {
-    title: "Billing & usage",
-    formName: "billing"
-  },
-  {
-    title: "Role management",
-    formName: "role"
-  },
-  {
-    title: "Incident Contacts",
-    formName: "incident-contact"
-  },
-  {
-    title: "Organization profile",
-    formName: "settings"
-  },
-  {
-    title: "Secret Scanning",
-    formName: "secret-scanning"
-  },
-  {
-    title: "SSO",
-    formName: "sso"
-  },
-  {
-    title: "LDAP",
-    formName: "ldap"
-  },
-  {
-    title: "SCIM",
-    formName: "scim"
-  }
-] as const;
-
-type Props = {
-  roleId: string;
-};
-
-export const RolePermissionsTable2 = ({ roleId }: Props) => {
-  const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
-
-  const { data: role } = useGetOrgRole(orgId, roleId);
-
-  const { setValue, control } = useForm<TFormSchema>({
-    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
-    resolver: zodResolver(formSchema)
-  });
-
-  return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th className="w-5" />
-            <Th>Resource</Th>
-            <Th>Permission</Th>
-          </Tr>
-        </THead>
-        <TBody>
-          {SIMPLE_PERMISSION_OPTIONS.map((permission) => {
-            return (
-              <RolePermissionRow2
-                title={permission.title}
-                formName={permission.formName}
-                control={control}
-                setValue={setValue}
-                key={`org-role-${roleId}-permission-${permission.formName}`}
-              />
-            );
-          })}
-        </TBody>
-      </Table>
-    </TableContainer>
-  );
-};

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

@@ -1,4 +1,3 @@
 export { RoleDetailsSection } from "./RoleDetailsSection";
 export { RoleModal } from "./RoleModal";
-export { RolePermissionModal } from "./RolePermissionModal";
 export { RolePermissionsSection } from "./RolePermissionsSection";