feat: added invitation badge to the sidebar

Author: aleksandernsilva

apps/meteor/client/sidebar/badges/InvitationBadge.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+const InvitationBadge = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Icon
+			role='status'
+			name='mail'
+			mbs={2}
+			size='x20'
+			color='info'
+			title={t('Message_request')}
+			aria-hidden='false'
+			aria-label={t('Message_request')}
+		/>
+	);
+};
+
+export default InvitationBadge;

apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx

@@ -58,4 +58,16 @@ describe('SidebarItemBadges', () => {
 
 		expect(screen.queryByTestId('omnichannel-badges')).not.toBeInTheDocument();
 	});
+
+	it('should render InvitationBadge when subscription has status INVITED', () => {
+		render(<SidebarItemBadges room={createRoomWithSubscription({ status: 'INVITED' })} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<SidebarItemBadges room={createRoomWithSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument();
+	});
 });

apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx

@@ -1,7 +1,8 @@
 import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
-import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { isInviteSubscription, isOmnichannelRoom } from '@rocket.chat/core-typings';
 import { Margins } from '@rocket.chat/fuselage';
 
+import InvitationBadge from './InvitationBadge';
 import OmnichannelBadges from './OmnichannelBadges';
 import UnreadBadge from './UnreadBadge';
 import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
@@ -19,6 +20,8 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
 			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
 
 			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
+
+			{isInviteSubscription(room) && <InvitationBadge />}
 		</Margins>
 	);
 };

apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+const InvitationBadge = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Icon
+			role='status'
+			name='mail'
+			mbs={2}
+			size='x20'
+			color='info'
+			title={t('Message_request')}
+			aria-hidden='false'
+			aria-label={t('Message_request')}
+		/>
+	);
+};
+
+export default InvitationBadge;

apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx

@@ -50,4 +50,16 @@ describe('SidebarItemBadges', () => {
 
 		expect(screen.queryByTestId('omnichannel-badges')).not.toBeInTheDocument();
 	});
+
+	it('should render InvitationBadge when subscription has status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ status: 'INVITED' })} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument();
+	});
 });

apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx

@@ -1,6 +1,7 @@
-import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { isInviteSubscription, isOmnichannelRoom } from '@rocket.chat/core-typings';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 
+import InvitationBadge from './InvitationBadge';
 import OmnichannelBadges from './OmnichannelBadges';
 import UnreadBadge from './UnreadBadge';
 import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
@@ -18,6 +19,8 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
 			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
 
 			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
+
+			{isInviteSubscription(room) && <InvitationBadge />}
 		</>
 	);
 };

apps/meteor/client/sidebarv2/badges/UnreadBadge.tsx

@@ -0,0 +1,26 @@
+import { SidebarV2ItemBadge } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+type UnreadBadgeProps = {
+	title: string;
+	roomTitle?: string;
+	variant: 'primary' | 'warning' | 'danger' | 'secondary';
+	total: number;
+};
+
+const UnreadBadge = ({ title, variant, total, roomTitle }: UnreadBadgeProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<SidebarV2ItemBadge
+			variant={variant}
+			title={title}
+			role='status'
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle: title, roomTitle })}
+		>
+			<span aria-hidden>{total}</span>
+		</SidebarV2ItemBadge>
+	);
+};
+
+export default UnreadBadge;

apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+const InvitationBadge = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Icon
+			role='status'
+			name='mail'
+			mbs={2}
+			size='x20'
+			color='info'
+			title={t('Message_request')}
+			aria-hidden='false'
+			aria-label={t('Message_request')}
+		/>
+	);
+};
+
+export default InvitationBadge;

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx

@@ -33,4 +33,16 @@ describe('SidebarItemBadges', () => {
 
 		expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
 	});
+
+	it('should render InvitationBadge when subscription has status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ status: 'INVITED' })} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument();
+	});
 });

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx

@@ -1,5 +1,7 @@
+import { isInviteSubscription } from '@rocket.chat/core-typings';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 
+import InvitationBadge from './InvitationBadge';
 import UnreadBadge from './UnreadBadge';
 import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
 
@@ -11,7 +13,13 @@ type SidebarItemBadgesProps = {
 const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
 	const { unreadCount, unreadTitle, unreadVariant, showUnread } = useUnreadDisplay(room);
 
-	return <>{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}</>;
+	return (
+		<>
+			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
+
+			{isInviteSubscription(room) && <InvitationBadge />}
+		</>
+	);
 };
 
 export default SidebarItemBadges;