Role page various fixes (#12324)

Various fixes from fast follows

- Sort roles by alphabetical order
- Change some tooltips
- During role creation, role should have all permissions enabled by
default
- Changed Permission icons design and refactored duplicating logic in a
dedicated component
- Changed "Revoked by" design
- Display role icon in default role picker
- Workspace member avatar was missing in role list and member picker
- Set "seeded" member role as editable for new workspaces
- Various css fixes

packages/twenty-server/src/engine/metadata-modules/role/role.module.ts

@@ -2,6 +2,7 @@ import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 
 import { FeatureFlagModule } from 'src/engine/core-modules/feature-flag/feature-flag.module';
+import { FileModule } from 'src/engine/core-modules/file/file.module';
 import { UserWorkspace } from 'src/engine/core-modules/user-workspace/user-workspace.entity';
 import { UserWorkspaceModule } from 'src/engine/core-modules/user-workspace/user-workspace.module';
 import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
@@ -26,6 +27,7 @@ import { WorkspacePermissionsCacheModule } from 'src/engine/metadata-modules/wor
     ObjectPermissionModule,
     SettingPermissionModule,
     WorkspacePermissionsCacheModule,
+    FileModule,
   ],
   providers: [RoleService, RoleResolver],
   exports: [RoleService],

packages/twenty-server/src/engine/metadata-modules/role/role.resolver.ts

@@ -8,8 +8,12 @@ import {
   Resolver,
 } from '@nestjs/graphql';
 
+import { buildSignedPath } from 'twenty-shared/utils';
+
 import { FeatureFlagKey } from 'src/engine/core-modules/feature-flag/enums/feature-flag-key.enum';
 import { FeatureFlagService } from 'src/engine/core-modules/feature-flag/services/feature-flag.service';
+import { FileService } from 'src/engine/core-modules/file/services/file.service';
+import { extractFilenameFromPath } from 'src/engine/core-modules/file/utils/extract-file-id-from-path.utils';
 import { UserWorkspaceService } from 'src/engine/core-modules/user-workspace/user-workspace.service';
 import { WorkspaceMember } from 'src/engine/core-modules/user/dtos/workspace-member.dto';
 import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
@@ -47,6 +51,7 @@ export class RoleResolver {
     private readonly featureFlagService: FeatureFlagService,
     private readonly objectPermissionService: ObjectPermissionService,
     private readonly settingPermissionService: SettingPermissionService,
+    private readonly fileService: FileService,
   ) {}
 
   @Query(() => [RoleDTO])
@@ -180,10 +185,29 @@ export class RoleResolver {
     @Parent() role: RoleDTO,
     @AuthWorkspace() workspace: Workspace,
   ): Promise<WorkspaceMemberWorkspaceEntity[]> {
-    return this.userRoleService.getWorkspaceMembersAssignedToRole(
-      role.id,
-      workspace.id,
+    const workspaceMembers =
+      await this.userRoleService.getWorkspaceMembersAssignedToRole(
+        role.id,
+        workspace.id,
+      );
+
+    await Promise.all(
+      workspaceMembers.map(async (workspaceMember) => {
+        if (workspaceMember && workspaceMember.avatarUrl) {
+          const avatarUrlToken = this.fileService.encodeFileToken({
+            filename: extractFilenameFromPath(workspaceMember.avatarUrl),
+            workspaceId: workspace.id,
+          });
+
+          workspaceMember.avatarUrl = buildSignedPath({
+            path: workspaceMember.avatarUrl,
+            token: avatarUrlToken,
+          });
+        }
+      }),
     );
+
+    return workspaceMembers;
   }
 
   private async validatePermissionsV2EnabledOrThrow(workspace: Workspace) {

packages/twenty-server/src/engine/metadata-modules/role/role.service.ts

@@ -218,7 +218,7 @@ export class RoleService {
       canUpdateAllObjectRecords: true,
       canSoftDeleteAllObjectRecords: true,
       canDestroyAllObjectRecords: true,
-      isEditable: false,
+      isEditable: true,
       workspaceId,
     });
   }