fix: Reading role permissions generates 500 errors

api/users/models.py

@@ -4,6 +4,7 @@
 from django.conf import settings
 from django.contrib.auth.base_user import BaseUserManager
 from django.contrib.auth.models import AbstractUser
+from django.core.exceptions import ImproperlyConfigured
 from django.core.mail import send_mail
 from django.db import models
 from django.db.models import Count, QuerySet
@@ -42,6 +43,9 @@
         InviteLink,
     )
 
+if settings.IS_RBAC_INSTALLED:
+    from rbac.models import UserRole
+
 logger = logging.getLogger(__name__)
 mailer_lite = MailerLite()
 
@@ -243,6 +247,14 @@ def get_user_organisation(
                 % (self.id, getattr(organisation, "id", organisation))
             )
 
+    def get_user_roles(self):
+        if not settings.IS_RBAC_INSTALLED:
+            raise ImproperlyConfigured(
+                "RBAC is not installed. Unable to retrieve user roles."
+            )
+
+        return UserRole.objects.filter(user=self)
+
     def get_permitted_projects(
         self, permission_key: str, tag_ids: typing.List[int] = None
     ) -> QuerySet[Project]:

api/users/serializers.py

@@ -1,10 +1,14 @@
+from django.conf import settings
 from djoser.serializers import UserSerializer as DjoserUserSerializer
 from rest_framework import serializers
 from rest_framework.exceptions import ValidationError
 
 from organisations.models import Organisation
 from organisations.serializers import UserOrganisationSerializer
 
+if settings.IS_RBAC_INSTALLED:
+    from rbac.serializers import UserRoleSerializer
+
 from .models import FFAdminUser, UserPermissionGroup
 
 
@@ -56,9 +60,15 @@ class Meta:
 class UserListSerializer(serializers.ModelSerializer):
     role = serializers.SerializerMethodField(read_only=True)
     join_date = serializers.SerializerMethodField(read_only=True)
+    if settings.IS_RBAC_INSTALLED:
+        roles = UserRoleSerializer(many=True, read_only=True, source="get_user_roles")
 
     default_fields = ("id", "email", "first_name", "last_name", "last_login")
-    organisation_users_fields = ("role", "date_joined")
+    organisation_users_fields = (
+        "role",
+        "date_joined",
+        *([] if not settings.IS_RBAC_INSTALLED else ["roles"]),
+    )
 
     class Meta:
         model = FFAdminUser

frontend/common/dispatcher/app-actions.js

@@ -283,10 +283,11 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       projectId,
     })
   },
-  getOrganisation(organisationId) {
+  getOrganisation(organisationId, force = false) {
     Dispatcher.handleViewAction({
       actionType: Actions.GET_ORGANISATION,
       id: organisationId,
+      force,
     })
   },
   getProject(projectId) {

frontend/common/services/useRolePermission.ts

@@ -46,7 +46,7 @@ export const rolePermissionService = service
         Res['rolePermission'],
         Req['getRolePermission']
       >({
-        providesTags: (res) => [{ id: res?.id, type: 'RolePermission' }],
+        providesTags: (res) => [{ id: res?.id, type: 'rolePermission' }],
         query: (query: Req['getRolePermission']) => ({
           url: `organisations/${query.organisation_id}/roles/${query.role_id}/projects-permissions/?project=${query.project_id}`,
         }),
@@ -56,7 +56,7 @@ export const rolePermissionService = service
         Res['rolePermission'],
         Req['getRolePermission']
       >({
-        providesTags: (res) => [{ id: res?.id, type: 'RolePermission' }],
+        providesTags: (res) => [{ id: res?.id, type: 'rolePermission' }],
         query: (query: Req['getRolePermission']) => ({
           url: `organisations/${query.organisation_id}/roles/${query.role_id}/environments-permissions/?environment=${query.env_id}`,
         }),
@@ -66,7 +66,7 @@ export const rolePermissionService = service
         Res['rolePermission'],
         Req['getRolePermission']
       >({
-        providesTags: (res) => [{ id: res?.id, type: 'RolePermission' }],
+        providesTags: (res) => [{ id: res?.id, type: 'rolePermission' }],
         query: (query: Req['getRolePermission']) => ({
           url: `organisations/${query.organisation_id}/roles/${query.role_id}/projects-permissions/?project=${query.project_id}`,
         }),

frontend/common/services/useRolesUser.ts

@@ -27,6 +27,9 @@ export const rolesUserService = service
           method: 'DELETE',
           url: `organisations/${query.organisation_id}/roles/${query.role_id}/users/${query.user_id}/`,
         }),
+        transformResponse: () => {
+          toast('User role was removed')
+        },
       }),
       getRolesPermissionUsers: builder.query<
         Res['rolesUsers'],

frontend/common/stores/organisation-store.js

@@ -329,7 +329,11 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
 
   switch (action.actionType) {
     case Actions.GET_ORGANISATION:
-      controller.getOrganisation(action.id || store.id, action.force)
+      controller.getOrganisation(
+        action.id,
+        action.force || store.id,
+        action.force,
+      )
       break
     case Actions.CREATE_PROJECT:
       controller.createProject(action.name)

frontend/web/components/EditPermissions.tsx

@@ -2,6 +2,7 @@ import React, {
   FC,
   useEffect,
   useState,
+  useRef,
   forwardRef,
   useImperativeHandle,
 } from 'react'
@@ -61,6 +62,7 @@ type EditPermissionModalType = {
   level: PermissionLevel
   name: string
   onSave: () => void
+  onRemoveOrAddRole: () => void
   parentId?: string
   parentLevel?: string
   parentSettingsLink?: string
@@ -102,6 +104,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
       isGroup,
       level,
       name,
+      onRemoveOrAddRole,
       onSave,
       parentId,
       parentLevel,
@@ -166,7 +169,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
       { data: usersData, isSuccess: userAdded },
     ] = useCreateRolesPermissionUsersMutation()
 
-    const [deleteRolePermissionUser] = useDeleteRolesPermissionUsersMutation()
+    const [deleteRolePermissionUser, {isSuccess: userDeleted}] = useDeleteRolesPermissionUsersMutation()
 
     const [
       createRolePermissionGroup,
@@ -241,6 +244,8 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
           skip:
             !id ||
             envId ||
+            // TODO: https://github.com/Flagsmith/flagsmith/issues/3020
+            !role?.organisation ||
             !Utils.getFlagsmithHasFeature('show_role_management'),
         },
       )
@@ -259,6 +264,17 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
             !Utils.getFlagsmithHasFeature('show_role_management'),
         },
       )
+
+    useEffect(() => {
+      if (user) {
+        const resultArray = user.roles?.map((userRole) => ({
+          role: userRole.role,
+          user_role_id: userRole.id,
+        }))
+        setRolesSelected(resultArray)
+      }
+    }, [])
+
     useEffect(() => {
       if (
         !organisationIsLoading &&
@@ -302,7 +318,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
                 (v) => v === `VIEW_${parentLevel.toUpperCase()}`,
               )
             ) {
-              // e.g. trying to set an environment permission but don't have view_projec
+              // e.g. trying to set an environment permission but don't have view_project
               setParentError(true)
             } else {
               setParentError(false)
@@ -471,11 +487,11 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
         }
       }
       setRolesSelected((rolesSelected || []).filter((v) => v.role !== roleId))
-      toast('User role was removed')
     }
 
     useEffect(() => {
       if (userAdded || groupAdded) {
+        onRemoveOrAddRole?.()
         if (user) {
           setRolesSelected(
             (rolesSelected || []).concat({
@@ -496,6 +512,12 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
       }
     }, [userAdded, usersData, groupsData, groupAdded])
 
+    useEffect(() => {
+      if (userDeleted) {
+        onRemoveOrAddRole?.()
+      }
+    }, [userDeleted])
+
     const getRoles = (roles = [], selectedRoles) => {
       return roles
         .filter((v) => selectedRoles.find((a) => a.role === v.id))
@@ -684,7 +706,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
             <MyRoleSelect
               orgId={id}
               level={level}
-              value={rolesSelected.map((v) => v.role)}
+              value={rolesSelected?.map((v) => v.role)}
               onAdd={addRole}
               onRemove={removeOwner}
               isOpen={showRoles}

frontend/web/components/base/forms/Tabs.js

@@ -55,7 +55,9 @@ const Tabs = class extends React.Component {
             return (
               <div
                 key={`content${i}`}
-                className={`tab-item ${isSelected ? ' tab-active' : ''}`}
+                className={`tab-item ${isSelected ? ' tab-active' : ''} ${
+                  this.props.isRoles && 'p-0'
+                }`}
               >
                 {child}
               </div>

frontend/web/components/modals/CreateRole.tsx

@@ -418,6 +418,7 @@ const CreateRole: FC<CreateRoleType> = ({
             value={userGroupTab}
             onChange={setUserGroupTab}
             theme='pill m-0'
+            isRoles={true}
           >
             <TabItem
               tabLabel={<Row className='justify-content-center'>Users</Row>}

frontend/web/components/pages/OrganisationSettingsPage.js

@@ -25,6 +25,7 @@ import Icon from 'components/Icon'
 import PageTitle from 'components/PageTitle'
 import { getStore } from 'common/store'
 import { getRoles } from 'common/services/useRole'
+import OrganisationStore from 'common/stores/organisation-store'
 
 const widths = [450, 150, 100]
 const rolesWidths = [250, 600, 100]
@@ -233,6 +234,9 @@ const OrganisationSettingsPage = class extends Component {
         onSave={() => {
           AppActions.getOrganisation(AccountStore.getOrganisation().id)
         }}
+        onRemoveOrAddRole={()=>{
+          AppActions.getOrganisation(AccountStore.getOrganisation().id, true)
+        }}
         level='organisation'
         roles={roles}
         user={user}