From 8aa6f180c4024fddd41abcf529d74f912a3cb429 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Thu, 27 Nov 2025 18:33:27 -0300 Subject: [PATCH 01/10] feat: added invitation badge to the sidebar --- .../client/sidebar/badges/InvitationBadge.tsx | 21 +++++++++++++++ .../sidebar/badges/SidebarItemBadges.spec.tsx | 12 +++++++++ .../sidebar/badges/SidebarItemBadges.tsx | 4 ++- .../sidebarv2/badges/InvitationBadge.tsx | 21 +++++++++++++++ .../badges/SidebarItemBadges.spec.tsx | 12 +++++++++ .../sidebarv2/badges/SidebarItemBadges.tsx | 5 +++- .../sidebar/badges/InvitationBadge.tsx | 21 +++++++++++++++ .../sidebar/badges/SidebarItemBadges.spec.tsx | 12 +++++++++ .../sidebar/badges/SidebarItemBadges.tsx | 10 ++++++- .../navigation/sidebar/badges/UnreadBadge.tsx | 26 +++++++++++++++++++ .../RoomSidePanelItemBadges.spec.tsx | 12 +++++++++ .../SidepanelItem/RoomSidePanelItemBadges.tsx | 5 +++- 12 files changed, 157 insertions(+), 4 deletions(-) create mode 100644 apps/meteor/client/sidebar/badges/InvitationBadge.tsx create mode 100644 apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx create mode 100644 apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx create mode 100644 apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx diff --git a/apps/meteor/client/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/sidebar/badges/InvitationBadge.tsx new file mode 100644 index 0000000000000..687a1cff8cc3a --- /dev/null +++ b/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 ( + + ); +}; + +export default InvitationBadge; diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx index eec3c2820b6b6..583edde5ca903 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx @@ -50,4 +50,16 @@ describe('SidebarItemBadges', () => { expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument(); }); + + it('should render InvitationBadge when subscription has status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + }); + + it('should not render InvitationBadge when subscription does not have status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + }); }); diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx index cec0b35344391..b941df918f0f3 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx @@ -1,7 +1,8 @@ -import { isOmnichannelRoom } from '@rocket.chat/core-typings'; +import { isOmnichannelRoom, isInviteSubscription } from '@rocket.chat/core-typings'; import { Margins } from '@rocket.chat/fuselage'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; +import InvitationBadge from './InvitationBadge'; import UnreadBadge from './UnreadBadge'; import OmnichannelBadges from '../../views/omnichannel/components/OmnichannelBadges'; import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; @@ -18,6 +19,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { {showUnread && } {isOmnichannelRoom(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx b/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx new file mode 100644 index 0000000000000..687a1cff8cc3a --- /dev/null +++ b/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 ( + + ); +}; + +export default InvitationBadge; diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx index eec3c2820b6b6..d2c15a38f415b 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx @@ -50,4 +50,16 @@ describe('SidebarItemBadges', () => { expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument(); }); + + it('should render InvitationBadge when subscription has status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + }); + + it('should not render InvitationBadge when subscription does not have status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + }); }); diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx index 762c4bb175f8b..5918bf77db2f5 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx +++ b/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 UnreadBadge from './UnreadBadge'; import OmnichannelBadges from '../../views/omnichannel/components/OmnichannelBadges'; import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; @@ -17,6 +18,8 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { <> {showUnread && } {isOmnichannelRoom(room) && } + + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx new file mode 100644 index 0000000000000..687a1cff8cc3a --- /dev/null +++ b/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 ( + + ); +}; + +export default InvitationBadge; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx index 599b1ae643879..ec00a59841df8 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/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(, { wrapper: appRoot }); + + expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + }); + + it('should not render InvitationBadge when subscription does not have status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + }); }); diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx index 6cc2203a5234c..f5068d59a936b 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx +++ b/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 '../../../../sidebarv2/badges/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 && }; + return ( + <> + {showUnread && } + + {isInviteSubscription(room) && } + + ); }; export default SidebarItemBadges; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx b/apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx new file mode 100644 index 0000000000000..d3abe4f8aaca6 --- /dev/null +++ b/apps/meteor/client/views/navigation/sidebar/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 ( + + {total} + + ); +}; + +export default UnreadBadge; diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx index 49dda4aa6b842..303018de67bda 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx @@ -52,4 +52,16 @@ describe('RoomSidePanelItemBadges', () => { expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument(); }); + + it('should render InvitationBadge when subscription has status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + }); + + it('should not render InvitationBadge when subscription does not have status INVITED', () => { + render(, { wrapper: appRoot }); + + expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + }); }); diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx index 7519a9338b99f..56d948e4a7841 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.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 '../../../../sidebarv2/badges/InvitationBadge'; import UnreadBadge from '../../../../sidebarv2/badges/UnreadBadge'; import { useUnreadDisplay } from '../../../../sidebarv2/hooks/useUnreadDisplay'; import SidePanelOmnichannelBadges from '../omnichannel/SidePanelOmnichannelBadges'; @@ -17,6 +18,8 @@ const RoomSidePanelItemBadges = ({ room, roomTitle }: RoomSidePanelItemBadgesPro <> {isOmnichannelRoom(room) && } {showUnread && } + + {isInviteSubscription(room) && } ); }; From 3973a8be9725887794c136f8ead478306f02c67e Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 3 Dec 2025 17:43:13 -0300 Subject: [PATCH 02/10] refactor: added invitation date tooltip --- .../client/sidebar/badges/InvitationBadge.tsx | 23 ++++++++----------- .../sidebar/badges/SidebarItemBadges.tsx | 2 +- .../sidebarv2/badges/InvitationBadge.tsx | 23 ++++++++----------- .../sidebarv2/badges/SidebarItemBadges.tsx | 2 +- .../sidebar/badges/InvitationBadge.tsx | 23 ++++++++----------- .../sidebar/badges/SidebarItemBadges.tsx | 2 +- .../SidepanelItem/RoomSidePanelItemBadges.tsx | 2 +- packages/i18n/src/locales/en.i18n.json | 2 ++ 8 files changed, 36 insertions(+), 43 deletions(-) diff --git a/apps/meteor/client/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/sidebar/badges/InvitationBadge.tsx index 687a1cff8cc3a..4b8785c10b498 100644 --- a/apps/meteor/client/sidebar/badges/InvitationBadge.tsx +++ b/apps/meteor/client/sidebar/badges/InvitationBadge.tsx @@ -1,21 +1,18 @@ import { Icon } from '@rocket.chat/fuselage'; import { useTranslation } from 'react-i18next'; -const InvitationBadge = () => { +import { useTimeFromNow } from '../../hooks/useTimeFromNow'; + +type InvitationBadgeProps = { + inviteDate?: string; +}; + +const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { const { t } = useTranslation(); + const getTimeFromNow = useTimeFromNow(true); + const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - return ( - - ); + return ; }; export default InvitationBadge; diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx index b941df918f0f3..c65119ce6f484 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx @@ -19,7 +19,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { {showUnread && } {isOmnichannelRoom(room) && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx b/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx index 687a1cff8cc3a..4b8785c10b498 100644 --- a/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx +++ b/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx @@ -1,21 +1,18 @@ import { Icon } from '@rocket.chat/fuselage'; import { useTranslation } from 'react-i18next'; -const InvitationBadge = () => { +import { useTimeFromNow } from '../../hooks/useTimeFromNow'; + +type InvitationBadgeProps = { + inviteDate?: string; +}; + +const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { const { t } = useTranslation(); + const getTimeFromNow = useTimeFromNow(true); + const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - return ( - - ); + return ; }; export default InvitationBadge; diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx index 5918bf77db2f5..57e5cca1210f0 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx @@ -19,7 +19,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { {showUnread && } {isOmnichannelRoom(room) && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx index 687a1cff8cc3a..0f93da057c63e 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx @@ -1,21 +1,18 @@ import { Icon } from '@rocket.chat/fuselage'; import { useTranslation } from 'react-i18next'; -const InvitationBadge = () => { +import { useTimeFromNow } from '../../../../hooks/useTimeFromNow'; + +type InvitationBadgeProps = { + inviteDate?: string; +}; + +const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { const { t } = useTranslation(); + const getTimeFromNow = useTimeFromNow(true); + const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - return ( - - ); + return ; }; export default InvitationBadge; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx index f5068d59a936b..7f65d1e2021d0 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx @@ -17,7 +17,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { <> {showUnread && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx index 56d948e4a7841..9da88a6305240 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx @@ -19,7 +19,7 @@ const RoomSidePanelItemBadges = ({ room, roomTitle }: RoomSidePanelItemBadgesPro {isOmnichannelRoom(room) && } {showUnread && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index ce902b70ee484..a85fd53706e7e 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -2679,6 +2679,7 @@ "Invitation_Subject": "Invitation Subject", "Invitation_Subject_Default": "You have been invited to [Site_Name]", "Invite": "Invite", + "Invited__date__": "Invited {{date}}", "Invite_Link": "Invite Link", "Invite_Users": "Invite Members", "Invite_and_add_members_to_this_workspace_to_start_communicating": "Invite and add members to this workspace to start communicating.", @@ -5890,6 +5891,7 @@ "You_are_logged_in_as": "You are logged in as", "You_are_not_authorized_to_view_this_page": "You are not authorized to view this page.", "You_are_not_authorized_to_access_this_feature": "You are not authorized to access this feature.", + "You_are_the_only_one_here": "Ÿou are the only one here", "You_can_change_a_different_avatar_too": "You can override the avatar used to post from this integration.", "You_can_close_this_window_now": "You can close this window now.", "You_can_do_from_account_preferences": "You can do this later from your account preferences", From 06ce93b05ea1f61a80d51a0ea981823ccea80607 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Sun, 7 Dec 2025 17:18:40 -0300 Subject: [PATCH 03/10] feat: invitation badge --- .../InvitationBadge/InvitationBadge.spec.tsx | 18 +++++++++++ .../InvitationBadge.stories.tsx | 32 +++++++++++++++++++ .../InvitationBadge/InvitationBadge.tsx | 28 ++++++++++++++++ .../InvitationBadge.spec.tsx.snap | 31 ++++++++++++++++++ .../components/InvitationBadge/index.ts | 1 + 5 files changed, 110 insertions(+) create mode 100644 apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx create mode 100644 apps/meteor/client/components/InvitationBadge/InvitationBadge.stories.tsx create mode 100644 apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx create mode 100644 apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap create mode 100644 apps/meteor/client/components/InvitationBadge/index.ts diff --git a/apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx b/apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx new file mode 100644 index 0000000000000..b47b32f73497f --- /dev/null +++ b/apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx @@ -0,0 +1,18 @@ +import { composeStories } from '@storybook/react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; + +import * as stories from './InvitationBadge.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); +test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); +}); + +test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); diff --git a/apps/meteor/client/components/InvitationBadge/InvitationBadge.stories.tsx b/apps/meteor/client/components/InvitationBadge/InvitationBadge.stories.tsx new file mode 100644 index 0000000000000..658f206075718 --- /dev/null +++ b/apps/meteor/client/components/InvitationBadge/InvitationBadge.stories.tsx @@ -0,0 +1,32 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; +import type { Meta } from '@storybook/react'; + +import InvitationBadge from './InvitationBadge'; + +const meta = { + component: InvitationBadge, + parameters: { + layout: 'centered', + }, + decorators: [ + mockAppRoot() + .withTranslations('en', 'core', { + Invited__date__: 'Invited {{date}}', + }) + .buildStoryDecorator(), + ], +} satisfies Meta; + +export default meta; + +export const WithISOStringDate = { + args: { + invitationDate: '2025-01-01T12:00:00Z', + }, +}; + +export const WithDateObject = { + args: { + invitationDate: new Date('2025-01-01T12:00:00Z'), + }, +}; diff --git a/apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx b/apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx new file mode 100644 index 0000000000000..5c47878208703 --- /dev/null +++ b/apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx @@ -0,0 +1,28 @@ +import { Icon } from '@rocket.chat/fuselage'; +import type { ComponentProps } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useTimeAgo } from '../../hooks/useTimeAgo'; + +type InvitationBadgeProps = Omit, 'name' | 'color' | 'role'> & { + invitationDate: string | Date; +}; + +const InvitationBadge = ({ invitationDate, ...props }: InvitationBadgeProps) => { + const { t } = useTranslation(); + const timeAgo = useTimeAgo(); + + return ( + + ); +}; + +export default InvitationBadge; diff --git a/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap b/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap new file mode 100644 index 0000000000000..260d7e11131a4 --- /dev/null +++ b/apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`renders WithDateObject without crashing 1`] = ` + +
+ +  + +
+ +`; + +exports[`renders WithISOStringDate without crashing 1`] = ` + +
+ +  + +
+ +`; diff --git a/apps/meteor/client/components/InvitationBadge/index.ts b/apps/meteor/client/components/InvitationBadge/index.ts new file mode 100644 index 0000000000000..78b459e5d05da --- /dev/null +++ b/apps/meteor/client/components/InvitationBadge/index.ts @@ -0,0 +1 @@ +export { default } from './InvitationBadge'; From 51e0a25114facae91a2e5b15f4ca158b36787102 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Mon, 8 Dec 2025 11:14:40 -0300 Subject: [PATCH 04/10] refactor: removed duplicated InvitationBadge in favor of common one --- .../client/sidebar/badges/InvitationBadge.tsx | 18 ------------------ .../sidebar/badges/SidebarItemBadges.spec.tsx | 10 ++++++---- .../sidebar/badges/SidebarItemBadges.tsx | 4 ++-- .../sidebarv2/badges/InvitationBadge.tsx | 18 ------------------ .../badges/SidebarItemBadges.spec.tsx | 14 +++++++++----- .../sidebarv2/badges/SidebarItemBadges.tsx | 4 ++-- .../sidebar/badges/InvitationBadge.tsx | 18 ------------------ .../sidebar/badges/SidebarItemBadges.spec.tsx | 10 ++++++---- .../sidebar/badges/SidebarItemBadges.tsx | 4 ++-- .../RoomSidePanelItemBadges.spec.tsx | 10 ++++++---- .../SidepanelItem/RoomSidePanelItemBadges.tsx | 4 ++-- 11 files changed, 35 insertions(+), 79 deletions(-) delete mode 100644 apps/meteor/client/sidebar/badges/InvitationBadge.tsx delete mode 100644 apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx delete mode 100644 apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx diff --git a/apps/meteor/client/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/sidebar/badges/InvitationBadge.tsx deleted file mode 100644 index 4b8785c10b498..0000000000000 --- a/apps/meteor/client/sidebar/badges/InvitationBadge.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from 'react-i18next'; - -import { useTimeFromNow } from '../../hooks/useTimeFromNow'; - -type InvitationBadgeProps = { - inviteDate?: string; -}; - -const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { - const { t } = useTranslation(); - const getTimeFromNow = useTimeFromNow(true); - const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - - return ; -}; - -export default InvitationBadge; diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx index 583edde5ca903..4740c5190bf7b 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx @@ -12,7 +12,7 @@ jest.mock('../../views/omnichannel/components/OmnichannelBadges', () => ({ describe('SidebarItemBadges', () => { const appRoot = mockAppRoot() .withTranslations('en', 'core', { - Message_request: 'Message request', + Invited__date__: 'Invited {{date}}', mentions_counter_one: '{{count}} mention', mentions_counter_other: '{{count}} mentions', __unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}', @@ -52,14 +52,16 @@ describe('SidebarItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { + wrapper: appRoot, + }); - expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { render(, { wrapper: appRoot }); - expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument(); }); }); diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx index c65119ce6f484..de8264eb4a422 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx @@ -2,8 +2,8 @@ import { isOmnichannelRoom, isInviteSubscription } from '@rocket.chat/core-typin import { Margins } from '@rocket.chat/fuselage'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; -import InvitationBadge from './InvitationBadge'; import UnreadBadge from './UnreadBadge'; +import InvitationBadge from '../../components/InvitationBadge'; import OmnichannelBadges from '../../views/omnichannel/components/OmnichannelBadges'; import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; @@ -19,7 +19,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { {showUnread && } {isOmnichannelRoom(room) && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx b/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx deleted file mode 100644 index 4b8785c10b498..0000000000000 --- a/apps/meteor/client/sidebarv2/badges/InvitationBadge.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from 'react-i18next'; - -import { useTimeFromNow } from '../../hooks/useTimeFromNow'; - -type InvitationBadgeProps = { - inviteDate?: string; -}; - -const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { - const { t } = useTranslation(); - const getTimeFromNow = useTimeFromNow(true); - const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - - return ; -}; - -export default InvitationBadge; diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx index d2c15a38f415b..c54ca75fc6c6e 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx @@ -12,7 +12,7 @@ jest.mock('../../views/omnichannel/components/OmnichannelBadges', () => ({ describe('SidebarItemBadges', () => { const appRoot = mockAppRoot() .withTranslations('en', 'core', { - Message_request: 'Message request', + Invited__date__: 'Invited {{date}}', mentions_counter_one: '{{count}} mention', mentions_counter_other: '{{count}} mentions', __unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}', @@ -52,14 +52,18 @@ describe('SidebarItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { + wrapper: appRoot, + }); - expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { + wrapper: appRoot, + }); - expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument(); }); }); diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx index 57e5cca1210f0..7fa75bc5f6815 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx @@ -1,8 +1,8 @@ import { isInviteSubscription, isOmnichannelRoom } from '@rocket.chat/core-typings'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; -import InvitationBadge from './InvitationBadge'; import UnreadBadge from './UnreadBadge'; +import InvitationBadge from '../../components/InvitationBadge'; import OmnichannelBadges from '../../views/omnichannel/components/OmnichannelBadges'; import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; @@ -19,7 +19,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { {showUnread && } {isOmnichannelRoom(room) && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx b/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx deleted file mode 100644 index 0f93da057c63e..0000000000000 --- a/apps/meteor/client/views/navigation/sidebar/badges/InvitationBadge.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Icon } from '@rocket.chat/fuselage'; -import { useTranslation } from 'react-i18next'; - -import { useTimeFromNow } from '../../../../hooks/useTimeFromNow'; - -type InvitationBadgeProps = { - inviteDate?: string; -}; - -const InvitationBadge = ({ inviteDate }: InvitationBadgeProps) => { - const { t } = useTranslation(); - const getTimeFromNow = useTimeFromNow(true); - const title = t('Invited__date__', { date: getTimeFromNow(inviteDate) ?? '' }); - - return ; -}; - -export default InvitationBadge; diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx index ec00a59841df8..d1d55887d3815 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx @@ -7,7 +7,7 @@ import { createFakeSubscription } from '../../../../../tests/mocks/data'; describe('SidebarItemBadges', () => { const appRoot = mockAppRoot() .withTranslations('en', 'core', { - Message_request: 'Message request', + Invited__date__: 'Invited {{date}}', mentions_counter_one: '{{count}} mention', mentions_counter_other: '{{count}} mentions', __unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}', @@ -35,14 +35,16 @@ describe('SidebarItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { + wrapper: appRoot, + }); - expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { render(, { wrapper: appRoot }); - expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument(); }); }); diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx index 7f65d1e2021d0..fdc67580360e0 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx @@ -1,7 +1,7 @@ import { isInviteSubscription } from '@rocket.chat/core-typings'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; -import InvitationBadge from './InvitationBadge'; +import InvitationBadge from '../../../../components/InvitationBadge'; import UnreadBadge from '../../../../sidebarv2/badges/UnreadBadge'; import { useUnreadDisplay } from '../hooks/useUnreadDisplay'; @@ -17,7 +17,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { <> {showUnread && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx index 303018de67bda..2fe4f3e740abd 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx @@ -12,7 +12,7 @@ jest.mock('../omnichannel/SidePanelOmnichannelBadges', () => ({ describe('RoomSidePanelItemBadges', () => { const appRoot = mockAppRoot() .withTranslations('en', 'core', { - Message_request: 'Message request', + Invited__date__: 'Invited {{date}}', mentions_counter_one: '{{count}} mention', mentions_counter_other: '{{count}} mentions', __unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}', @@ -54,14 +54,16 @@ describe('RoomSidePanelItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { + wrapper: appRoot, + }); - expect(screen.getByRole('status', { name: 'Message request' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { render(, { wrapper: appRoot }); - expect(screen.queryByRole('status', { name: 'Message request' })).not.toBeInTheDocument(); + expect(screen.queryByRole('status', { name: 'Invited' })).not.toBeInTheDocument(); }); }); diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx index 9da88a6305240..4979d3def4fb3 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx @@ -1,7 +1,7 @@ import { isInviteSubscription, isOmnichannelRoom } from '@rocket.chat/core-typings'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; -import InvitationBadge from '../../../../sidebarv2/badges/InvitationBadge'; +import InvitationBadge from '../../../../components/InvitationBadge'; import UnreadBadge from '../../../../sidebarv2/badges/UnreadBadge'; import { useUnreadDisplay } from '../../../../sidebarv2/hooks/useUnreadDisplay'; import SidePanelOmnichannelBadges from '../omnichannel/SidePanelOmnichannelBadges'; @@ -19,7 +19,7 @@ const RoomSidePanelItemBadges = ({ room, roomTitle }: RoomSidePanelItemBadgesPro {isOmnichannelRoom(room) && } {showUnread && } - {isInviteSubscription(room) && } + {isInviteSubscription(room) && } ); }; From d4a2c3a50303ae0ba1bdb67e5e05691a59cc3c23 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Mon, 8 Dec 2025 20:08:29 -0300 Subject: [PATCH 05/10] chore: removed unused expression --- packages/i18n/src/locales/en.i18n.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index a85fd53706e7e..f99625450eb86 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -5891,7 +5891,6 @@ "You_are_logged_in_as": "You are logged in as", "You_are_not_authorized_to_view_this_page": "You are not authorized to view this page.", "You_are_not_authorized_to_access_this_feature": "You are not authorized to access this feature.", - "You_are_the_only_one_here": "Ÿou are the only one here", "You_can_change_a_different_avatar_too": "You can override the avatar used to post from this integration.", "You_can_close_this_window_now": "You can close this window now.", "You_can_do_from_account_preferences": "You can do this later from your account preferences", From e19c728da1e82edf4361c695c7b77d177648ff6f Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Mon, 8 Dec 2025 20:09:51 -0300 Subject: [PATCH 06/10] test: adjusted expect --- .../sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx index 2fe4f3e740abd..82944057e46d9 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx @@ -58,7 +58,7 @@ describe('RoomSidePanelItemBadges', () => { wrapper: appRoot, }); - expect(screen.getByRole('status', { name: 'Invited January 1' })).toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { From ebfeea4fe718f1019473a2bb61ee1cf3a6526adf Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Tue, 9 Dec 2025 09:57:00 -0300 Subject: [PATCH 07/10] chore: code style --- apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx | 1 - .../client/views/navigation/sidebar/badges/SidebarItemBadges.tsx | 1 - .../sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx index 7fa75bc5f6815..aedfd3610ea9c 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx @@ -18,7 +18,6 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { <> {showUnread && } {isOmnichannelRoom(room) && } - {isInviteSubscription(room) && } ); diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx index fdc67580360e0..9b4e6d4539d1d 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx @@ -16,7 +16,6 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => { return ( <> {showUnread && } - {isInviteSubscription(room) && } ); diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx index 4979d3def4fb3..8a9a759439af6 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx @@ -18,7 +18,6 @@ const RoomSidePanelItemBadges = ({ room, roomTitle }: RoomSidePanelItemBadgesPro <> {isOmnichannelRoom(room) && } {showUnread && } - {isInviteSubscription(room) && } ); From d964722ce4e730beb19a0445575aa3054d159507 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Tue, 9 Dec 2025 09:57:09 -0300 Subject: [PATCH 08/10] test: adjusted tests --- .../sidebar/badges/SidebarItemBadges.spec.tsx | 15 ++++++++++++--- .../sidebarv2/badges/SidebarItemBadges.spec.tsx | 15 ++++++++++++--- .../sidebar/badges/SidebarItemBadges.spec.tsx | 17 +++++++++++++---- .../RoomSidePanelItemBadges.spec.tsx | 15 ++++++++++++--- 4 files changed, 49 insertions(+), 13 deletions(-) diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx index 4740c5190bf7b..554e3d48519e5 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx @@ -52,9 +52,18 @@ describe('SidebarItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { - wrapper: appRoot, - }); + render( + , + { + wrapper: appRoot, + }, + ); expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); diff --git a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx index c54ca75fc6c6e..9866febc2dcaa 100644 --- a/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx @@ -52,9 +52,18 @@ describe('SidebarItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { - wrapper: appRoot, - }); + render( + , + { + wrapper: appRoot, + }, + ); expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx index d1d55887d3815..9a2fbf9fc711f 100644 --- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx @@ -34,10 +34,19 @@ describe('SidebarItemBadges', () => { expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument(); }); - it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { - wrapper: appRoot, - }); + it('should render InvitationBadge when subscription has status INVITED and has inviter', () => { + render( + , + { + wrapper: appRoot, + }, + ); expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx index 82944057e46d9..991dd9fa97ab6 100644 --- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx +++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx @@ -54,9 +54,18 @@ describe('RoomSidePanelItemBadges', () => { }); it('should render InvitationBadge when subscription has status INVITED', () => { - render(, { - wrapper: appRoot, - }); + render( + , + { + wrapper: appRoot, + }, + ); expect(screen.getByRole('status', { name: 'Invited January 1, 2025' })).toBeInTheDocument(); }); From 9ac074c4c791e1d1fd9cb67b62295055992cfb48 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Fri, 12 Dec 2025 16:37:51 -0300 Subject: [PATCH 09/10] chore: changeset --- .changeset/twelve-forks-destroy.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/twelve-forks-destroy.md diff --git a/.changeset/twelve-forks-destroy.md b/.changeset/twelve-forks-destroy.md new file mode 100644 index 0000000000000..b4cc7321bed9f --- /dev/null +++ b/.changeset/twelve-forks-destroy.md @@ -0,0 +1,6 @@ +--- +"@rocket.chat/meteor": patch +"@rocket.chat/i18n": patch +--- + +Adds invitation badge to sidebar From a492ca82f312ed7650028822b21618ea8169c605 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Fri, 12 Dec 2025 17:07:29 -0300 Subject: [PATCH 10/10] test: adjusted test mock function --- apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx index 554e3d48519e5..285c5ecdbc72d 100644 --- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx +++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx @@ -54,7 +54,7 @@ describe('SidebarItemBadges', () => { it('should render InvitationBadge when subscription has status INVITED', () => { render( { }); it('should not render InvitationBadge when subscription does not have status INVITED', () => { - render(, { wrapper: appRoot }); + render(, { wrapper: appRoot }); expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument(); });