feat: Added pending invitation state to rooms

.changeset/chatty-roses-help.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/core-typings": patch
+"@rocket.chat/i18n": patch
+---
+
+Adds invitation request support to rooms

apps/meteor/app/lib/server/functions/createDirectRoom.ts

@@ -168,7 +168,7 @@ export async function createDirectRoom(
 							status: 'INVITED',
 							inviter: {
 								_id: creatorUser._id,
-								username: creatorUser.username,
+								username: creatorUser.username!,
 								name: creatorUser.name,
 							},
 							open: true,

apps/meteor/client/lib/queryKeys.ts

@@ -1,9 +1,24 @@
-import type { ILivechatDepartment, IMessage, IRoom, ITeam, IUser, ILivechatAgent, IOutboundProvider } from '@rocket.chat/core-typings';
+import type {
+	ILivechatDepartment,
+	IMessage,
+	IRoom,
+	ITeam,
+	IUser,
+	ILivechatAgent,
+	IOutboundProvider,
+	RoomType,
+} from '@rocket.chat/core-typings';
 import type { PaginatedRequest } from '@rocket.chat/rest-typings';
 
 export const roomsQueryKeys = {
 	all: ['rooms'] as const,
 	room: (rid: IRoom['_id']) => ['rooms', rid] as const,
+	roomReference: (reference: string, type: RoomType, uid?: IUser['_id'], username?: IUser['username']) => [
+		...roomsQueryKeys.all,
+		reference,
+		type,
+		uid ?? username,
+	],
 	starredMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'starred-messages'] as const,
 	pinnedMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'pinned-messages'] as const,
 	messages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'messages'] as const,

apps/meteor/client/views/room/Header/Header.tsx

@@ -1,12 +1,13 @@
-import type { IRoom } from '@rocket.chat/core-typings';
-import { isDirectMessageRoom, isVoipRoom } from '@rocket.chat/core-typings';
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom, isVoipRoom, isInviteSubscription } from '@rocket.chat/core-typings';
 import { useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { lazy, memo, useMemo } from 'react';
 
 import { HeaderToolbar } from '../../../components/Header';
 import SidebarToggler from '../../../components/SidebarToggler';
 
+const RoomInviteHeader = lazy(() => import('./RoomInviteHeader'));
 const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader'));
 const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader'));
 const RoomHeaderE2EESetup = lazy(() => import('./RoomHeaderE2EESetup'));
@@ -15,9 +16,10 @@ const RoomHeader = lazy(() => import('./RoomHeader'));
 
 type HeaderProps<T> = {
 	room: T;
+	subscription?: ISubscription;
 };
 
-const Header = ({ room }: HeaderProps<IRoom>): ReactElement | null => {
+const Header = ({ room, subscription }: HeaderProps<IRoom>): ReactElement | null => {
 	const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
 	const encrypted = Boolean(room.encrypted);
 	const unencryptedMessagesAllowed = useSetting('E2E_Allow_Unencrypted_Messages', false);
@@ -38,6 +40,10 @@ const Header = ({ room }: HeaderProps<IRoom>): ReactElement | null => {
 		return null;
 	}
 
+	if (subscription && isInviteSubscription(subscription)) {
+		return <RoomInviteHeader room={room} />;
+	}
+
 	if (room.t === 'l') {
 		return <OmnichannelRoomHeader slots={slots} />;
 	}

apps/meteor/client/views/room/Header/RoomHeader.spec.tsx

@@ -0,0 +1,80 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import RoomHeader from './RoomHeader';
+import FakeRoomProvider from '../../../../tests/mocks/client/FakeRoomProvider';
+import { createFakeRoom } from '../../../../tests/mocks/data';
+
+const mockedRoom = createFakeRoom({ prid: undefined });
+const appRoot = mockAppRoot()
+	.withRoom(mockedRoom)
+	.wrap((children) => <FakeRoomProvider roomOverrides={mockedRoom}>{children}</FakeRoomProvider>)
+	.build();
+
+jest.mock('../../../../app/utils/client', () => ({
+	getURL: (url: string) => url,
+}));
+
+jest.mock('./ParentRoomWithData', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>ParentRoomWithData</div>),
+}));
+
+jest.mock('./ParentTeam', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>ParentTeam</div>),
+}));
+
+jest.mock('./RoomToolbox', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>RoomToolbox</div>),
+}));
+
+describe('RoomHeader', () => {
+	describe('Toolbox', () => {
+		it('should render toolbox by default', async () => {
+			render(<RoomHeader room={mockedRoom} slots={{}} />, { wrapper: appRoot });
+			expect(screen.getByLabelText('Toolbox_room_actions')).toBeInTheDocument();
+		});
+
+		it('should not render toolbox if roomToolbox is null and no slots are provided', () => {
+			render(
+				<RoomHeader
+					room={mockedRoom}
+					slots={{
+						toolbox: {
+							hidden: true,
+						},
+					}}
+				/>,
+				{ wrapper: appRoot },
+			);
+			expect(screen.queryByLabelText('Toolbox_room_actions')).not.toBeInTheDocument();
+		});
+
+		it('should render toolbox if slots.toolbox is provided', () => {
+			render(<RoomHeader room={mockedRoom} slots={{ toolbox: {} }} />, { wrapper: appRoot });
+			expect(screen.getByLabelText('Toolbox_room_actions')).toBeInTheDocument();
+		});
+
+		it('should render custom toolbox content from roomToolbox prop', () => {
+			render(
+				<RoomHeader
+					room={mockedRoom}
+					slots={{
+						toolbox: {
+							content: <div>Custom Toolbox</div>,
+						},
+					}}
+				/>,
+				{ wrapper: appRoot },
+			);
+			expect(screen.getByText('Custom Toolbox')).toBeInTheDocument();
+		});
+
+		it('should render custom toolbox content from slots.toolbox.content', () => {
+			render(<RoomHeader room={mockedRoom} slots={{ toolbox: { content: <div>Slotted Toolbox</div> } }} />, { wrapper: appRoot });
+			expect(screen.getByText('Slotted Toolbox')).toBeInTheDocument();
+		});
+	});
+});

apps/meteor/client/views/room/Header/RoomInviteHeader.spec.tsx

@@ -0,0 +1,47 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './RoomInviteHeader.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+const appRoot = mockAppRoot().build();
+
+jest.mock('../../../../app/utils/client', () => ({
+	getURL: (url: string) => url,
+}));
+
+jest.mock('./ParentRoomWithData', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>ParentRoomWithData</div>),
+}));
+
+jest.mock('./ParentTeam', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>ParentTeam</div>),
+}));
+
+jest.mock('./RoomToolbox', () => ({
+	__esModule: true,
+	default: jest.fn(() => <div>RoomToolbox</div>),
+}));
+
+describe('RoomInviteHeader', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const view = render(<Story />, { wrapper: appRoot });
+		expect(view.baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />, { wrapper: appRoot });
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

apps/meteor/client/views/room/Header/RoomInviteHeader.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import RoomInviteHeader from './RoomInviteHeader';
+import FakeRoomProvider from '../../../../tests/mocks/client/FakeRoomProvider';
+import { createFakeRoom } from '../../../../tests/mocks/data';
+
+const mockedRoom = createFakeRoom({ name: 'rocket.cat', federated: true });
+
+const meta = {
+	component: RoomInviteHeader,
+	args: {
+		room: mockedRoom,
+	},
+	decorators: [(story) => <FakeRoomProvider roomOverrides={mockedRoom}>{story()}</FakeRoomProvider>],
+} satisfies Meta<typeof RoomInviteHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

apps/meteor/client/views/room/Header/RoomInviteHeader.tsx

@@ -0,0 +1,17 @@
+import RoomHeader from './RoomHeader';
+import type { RoomHeaderProps } from './RoomHeader';
+
+const RoomInviteHeader = ({ room }: Pick<RoomHeaderProps, 'room'>) => {
+	return (
+		<RoomHeader
+			room={room}
+			slots={{
+				toolbox: {
+					hidden: true,
+				},
+			}}
+		/>
+	);
+};
+
+export default RoomInviteHeader;

apps/meteor/client/views/room/Header/__snapshots__/RoomInviteHeader.spec.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`RoomInviteHeader renders Default without crashing 1`] = `
+<body>
+  <div>
+    <header
+      class="rcx-box rcx-box--full rcx-room-header rcx-css-7tefqp"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1apkof4"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-llee4e"
+        >
+          <figure
+            class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x36"
+          >
+            <img
+              alt=""
+              aria-hidden="true"
+              class="rcx-avatar__element rcx-avatar__element--x36"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+            />
+          </figure>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-css-1axz7ym"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-1yimpo4"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-i0csg7 rcx-css-f2vsf1"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-v5o1rw"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-globe rcx-icon rcx-css-1t9h2ff"
+                >
+                  
+                </i>
+              </div>
+              <h1
+                class="rcx-box rcx-box--full rcx-css-1w5kdwh"
+              >
+                rocket.cat
+              </h1>
+            </div>
+            <button
+              class="rcx-box rcx-box--full rcx-button--tiny-square rcx-button--square rcx-button--icon rcx-button rcx-css-sdt442"
+              title="Favorite rocket.cat"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-star rcx-icon rcx-css-1g87xs3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <hr
+        class="rcx-box rcx-box--full rcx-divider rcx-css-emj6cu"
+      />
+    </header>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/HeaderV2/Header.tsx

@@ -1,19 +1,21 @@
-import type { IRoom } from '@rocket.chat/core-typings';
-import { isVoipRoom } from '@rocket.chat/core-typings';
+import { isInviteSubscription, isVoipRoom } from '@rocket.chat/core-typings';
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { lazy, memo } from 'react';
 
+const RoomInviteHeader = lazy(() => import('./RoomInviteHeader'));
 const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader'));
 const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader'));
 const RoomHeaderE2EESetup = lazy(() => import('./RoomHeaderE2EESetup'));
 const RoomHeader = lazy(() => import('./RoomHeader'));
 
 type HeaderProps = {
 	room: IRoom;
+	subscription?: ISubscription;
 };
 
-const Header = ({ room }: HeaderProps): ReactElement | null => {
+const Header = ({ room, subscription }: HeaderProps): ReactElement | null => {
 	const { isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
 	const encrypted = Boolean(room.encrypted);
 	const unencryptedMessagesAllowed = useSetting('E2E_Allow_Unencrypted_Messages', false);
@@ -23,6 +25,10 @@ const Header = ({ room }: HeaderProps): ReactElement | null => {
 		return null;
 	}
 
+	if (subscription && isInviteSubscription(subscription)) {
+		return <RoomInviteHeader room={room} />;
+	}
+
 	if (room.t === 'l') {
 		return <OmnichannelRoomHeader />;
 	}