fix: Reading role permissions generates 500 errors

api/users/serializers.py

@@ -58,7 +58,10 @@ class UserListSerializer(serializers.ModelSerializer):
     join_date = serializers.SerializerMethodField(read_only=True)
 
     default_fields = ("id", "email", "first_name", "last_name", "last_login")
-    organisation_users_fields = ("role", "date_joined")
+    organisation_users_fields = (
+        "role",
+        "date_joined",
+    )
 
     class Meta:
         model = FFAdminUser

frontend/common/services/useGroupWithRole.ts

@@ -0,0 +1,74 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const groupWithRoleService = service
+  .enhanceEndpoints({ addTagTypes: ['GroupWithRole', 'RolePermissionGroup'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      deleteGroupWithRole: builder.mutation<
+        Res['groupWithRole'],
+        Req['deleteGroupWithRole']
+      >({
+        invalidatesTags: [{ type: 'GroupWithRole' }, { type: 'RolePermissionGroup' }],
+        query: (query: Req['deleteGroupWithRole']) => ({
+          body: query,
+          method: 'DELETE',
+          url: `organisations/${query.org_id}/groups/${query.group_id}/roles/${query.role_id}/`,
+        }),
+        transformResponse: () => {
+          toast('Group role was removed')
+        },
+      }),
+      getGroupWithRole: builder.query<
+        Res['groupWithRole'],
+        Req['getGroupWithRole']
+      >({
+        providesTags: (result, error, group) => {
+          const tags = result ? [{ id: group.id, type: 'GroupWithRole' }] : []
+          return tags
+        },
+        query: (query: Req['getGroupWithRole']) => ({
+          url: `organisations/${query.org_id}/groups/${query.group_id}/roles/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function deleteGroupWithRole(
+  store: any,
+  data: Req['deleteGroupWithRole'],
+  options?: Parameters<
+    typeof groupWithRoleService.endpoints.deleteGroupWithRole.initiate
+  >[1],
+) {
+  return store.dispatch(
+    groupWithRoleService.endpoints.deleteGroupWithRole.initiate(data, options),
+  )
+}
+export async function getGroupWithRole(
+  store: any,
+  data: Req['getGroupWithRole'],
+  options?: Parameters<
+    typeof groupWithRoleService.endpoints.getGroupWithRole.initiate
+  >[1],
+) {
+  return store.dispatch(
+    groupWithRoleService.endpoints.getGroupWithRole.initiate(data, options),
+  )
+}
+
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useDeleteGroupWithRoleMutation,
+  useGetGroupWithRoleQuery,
+  // END OF EXPORTS
+} = groupWithRoleService
+
+/* Usage examples:
+const { data, isLoading } = useGetGroupWithRoleQuery({ id: 2 }, {}) //get hook
+const [createGroupWithRole, { isLoading, data, isSuccess }] = useCreateGroupWithRoleMutation() //create hook
+groupWithRoleService.endpoints.getGroupWithRole.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/services/useRolePermission.ts

@@ -12,7 +12,7 @@ export const rolePermissionService = service
       >({
         invalidatesTags: (res) => [
           { id: 'LIST', type: 'rolePermission' },
-          { id: res?.id, type: 'rolePermission' },
+          { type: 'rolePermission' },
         ],
         query: (query: Req['updateRolePermission']) => ({
           body: query.body,
@@ -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}`,
         }),
@@ -76,7 +76,7 @@ export const rolePermissionService = service
         Res['rolePermission'],
         Req['updateRolePermission']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'rolePermission' }],
+        invalidatesTags: [{ type: 'rolePermission' }],
         query: (query: Req['updateRolePermission']) => ({
           body: query.body,
           method: 'PUT',

frontend/common/services/useRolePermissionGroup.ts

@@ -3,14 +3,17 @@ import { Req } from 'common/types/requests'
 import { service } from 'common/service'
 
 export const rolePermissionGroupService = service
-  .enhanceEndpoints({ addTagTypes: ['RolePermissionGroup'] })
+  .enhanceEndpoints({ addTagTypes: ['RolePermissionGroup', 'GroupWithRole'] })
   .injectEndpoints({
     endpoints: (builder) => ({
       createRolePermissionGroup: builder.mutation<
         Res['rolePermissionGroup'],
         Req['createRolePermissionGroup']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'RolePermissionGroup' }],
+        invalidatesTags: [
+          { id: 'LIST', type: 'RolePermissionGroup' },
+          { type: 'GroupWithRole' },
+        ],
         query: (query: Req['createRolePermissionGroup']) => ({
           body: query.data,
           method: 'POST',
@@ -21,7 +24,10 @@ export const rolePermissionGroupService = service
         Res['rolePermissionGroup'],
         Req['deleteRolePermissionGroup']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'RolePermissionGroup' }],
+        invalidatesTags: [
+          { type: 'RolePermissionGroup' },
+          { type: 'GroupWithRole' },
+        ],
         query: (query: Req['deleteRolePermissionGroup']) => ({
           body: query,
           method: 'DELETE',

frontend/common/services/useRolesUser.ts

@@ -3,14 +3,17 @@ import { Req } from 'common/types/requests'
 import { service } from 'common/service'
 
 export const rolesUserService = service
-  .enhanceEndpoints({ addTagTypes: ['RolesUser'] })
+  .enhanceEndpoints({ addTagTypes: ['RolesUser', 'User-role'] })
   .injectEndpoints({
     endpoints: (builder) => ({
       createRolesPermissionUsers: builder.mutation<
         Res['rolesUsers'],
         Req['createRolesPermissionUsers']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'RolesUser' }],
+        invalidatesTags: [
+          { type: 'User-role' },
+          { id: 'LIST', type: 'RolesUser' },
+        ],
         query: (query: Req['createRolesPermissionUsers']) => ({
           body: query.data,
           method: 'POST',
@@ -21,12 +24,18 @@ export const rolesUserService = service
         Res['rolesUsers'],
         Req['deleteRolesPermissionUsers']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'RolesUser' }],
+        invalidatesTags: [
+          { type: 'User-role' },
+          { type: 'RolesUser' },
+        ],
         query: (query: Req['deleteRolesPermissionUsers']) => ({
           body: query,
           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/services/useUserWithRole.ts

@@ -0,0 +1,73 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const userWithRolesService = service
+  .enhanceEndpoints({ addTagTypes: ['User-role', 'RolesUser'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      deleteUserWithRoles: builder.mutation<
+        Res['User-role'],
+        Req['deleteUserWithRoles']
+      >({
+        invalidatesTags: [{ type: 'User-role' }, { type: 'RolesUser' }],
+        query: (query: Req['deleteUserWithRoles']) => ({
+          method: 'DELETE',
+          url: `organisations/${query.org_id}/users/${query.user_id}/roles/${query.role_id}/`,
+        }),
+        transformResponse: () => {
+          toast('User role was removed')
+        },
+      }),
+      getUserWithRoles: builder.query<
+        Res['userWithRoles'],
+        Req['getUserWithRoles']
+      >({
+        invalidatesTags: [{ type: 'User-role' }],
+        providesTags: (result, error, userId) => {
+          const tags = result ? [{ id: userId, type: 'User-role' }] : []
+          return tags
+        },
+        query: (query: Req['getUserWithRoles']) => ({
+          url: `organisations/${query.org_id}/users/${query.user_id}/roles/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getUserWithRoles(
+  store: any,
+  data: Req['getUserWithRoles'],
+  options?: Parameters<
+    typeof userWithRolesService.endpoints.getUserWithRoles.initiate
+  >[1],
+) {
+  return store.dispatch(
+    userWithRolesService.endpoints.getUserWithRoles.initiate(data, options),
+  )
+}
+
+export async function deleteUserRole(
+  store: any,
+  data: Req['deleteUserWithRoles'],
+  options?: Parameters<
+    typeof UserRoleService.endpoints.deleteUserWithRoles.initiate
+  >[1],
+) {
+  return store.dispatch(
+    UserRoleService.endpoints.deleteUserWithRoles.initiate(data, options),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useDeleteUserWithRolesMutation,
+  useGetUserWithRolesQuery,
+  // END OF EXPORTS
+} = userWithRolesService
+
+/* Usage examples:
+const { data, isLoading } = useUserWithRolesQuery({ id: 2 }, {}) //get hook
+userWithRolesService.endpoints.getUserWithRoles.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/types/requests.ts

@@ -133,6 +133,10 @@ export type Req = {
   createLaunchDarklyProjectImport: { project_id: string }
   getLaunchDarklyProjectImport: { project_id: string }
   getLaunchDarklyProjectsImport: { project_id: string; import_id: string }
+  getUserWithRoles: { org_id: string; user_id: string }
+  deleteUserWihRole: { org_id: string; user_id: string; role_id: string }
+  getGroupWithRole: { org_id: string; group_id: string }
+  deleteGroupWithRole: { org_id: string; group_id: string; role_id: string }
   getChangeRequests: PagedRequest<{
     search?: string
     environmentId: string

frontend/common/types/responses.ts

@@ -393,6 +393,8 @@ export type Res = {
   environment: Environment
   launchDarklyProjectImport: LaunchDarklyProjectImport
   launchDarklyProjectsImport: LaunchDarklyProjectImport[]
+  userWithRoles: PagedResponse<Roles>
+  groupWithRole: PagedResponse<Roles>
   changeRequests: PagedResponse<ChangeRequestSummary>
   groupSummaries: UserGroupSummary[]
   // END OF TYPES