[FE][BE] Reflect custom role name to missing areas

Problem to solve

The title of a custom role name does not accurately reflect in views through the application. It currently shows the base level role of the custom role.

View	Screenshot
Section: Groups <self-managed-url>/admin/users/{username}/projects	The actual custom role assigned is Security Engineer. Use pattern: Role in text and custom role badge
Section: Joined Projects | <self-managed-url>/admin/users/{username}/projects |	The actual custom role assigned is "Read Code" Use pattern: Role in text and custom role badge
Section: Group List | <gitlab-url>/<group>	Use pattern: Custom role in badge
Section: Explore page | <gitlab-url>/dashboard/projects	Use pattern: Custom role in badge
Section: Issue comment | <gitlab-url>/<group>/<project>/-/issues/<id>	Use pattern: Custom role in badge

Tested on self-managed, v16.9 and GitLab.com

Proposal

Add custom role name to these views.