From 576c085ea032a6a72cc2b58ee65320ab73d782ff Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Fri, 22 Mar 2024 12:59:35 +0100
Subject: [PATCH] [Glitch] Add the role ID to the badge component

Port ec1e770feaef81574482b841bc04a286f9dc7249 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/badge.jsx          | 5 +++--
 .../flavours/glitch/features/account/components/header.jsx   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/badge.jsx b/app/javascript/flavours/glitch/components/badge.jsx
index 646655c249..5e0b2587bd 100644
--- a/app/javascript/flavours/glitch/components/badge.jsx
+++ b/app/javascript/flavours/glitch/components/badge.jsx
@@ -7,8 +7,8 @@ import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
 
 
-export const Badge = ({ icon, label, domain }) => (
-  <div className='account-role'>
+export const Badge = ({ icon, label, domain, roleId }) => (
+  <div className='account-role' data-account-role-id={roleId}>
     {icon}
     {label}
     {domain && <span className='account-role__domain'>{domain}</span>}
@@ -19,6 +19,7 @@ Badge.propTypes = {
   icon: PropTypes.node,
   label: PropTypes.node,
   domain: PropTypes.node,
+  roleId: PropTypes.string
 };
 
 Badge.defaultProps = {
diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx
index b97de5aeab..e311936af9 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@@ -329,7 +329,7 @@ class Header extends ImmutablePureComponent {
     }
 
     account.get('roles', []).forEach((role) => {
-      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
+      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} roleId={role.get('id')} />);
     });
 
     return (