Merge branch 'develop' into refactor/set-reactions

.changeset/cyan-ladybugs-thank.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed error during sendmessage client stub

.changeset/kind-llamas-grin.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Changed the contextualbar behavior based on chat size instead the viewport

.changeset/spicy-rocks-burn.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed `LivechatSessionTaken` webhook event being called without the `agent` param, which represents the agent serving the room.

.changeset/witty-lemons-type.md

@@ -0,0 +1,10 @@
+---
+'@rocket.chat/core-services': minor
+'@rocket.chat/model-typings': minor
+'@rocket.chat/core-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Implemented new feature preview for Sidepanel

.github/workflows/release-candidate.yml

@@ -0,0 +1,35 @@
+name: Release candidate cut
+on:
+  schedule:
+    - cron: '28 0 20 * *' # run at minute 28 to avoid the chance of delay due to high load on GH
+jobs:
+  new-release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref_name }}
+          fetch-depth: 0
+          token: ${{ secrets.CI_PAT }}
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+        with:
+          node-version: 14.21.3
+          cache-modules: true
+          install: true
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - uses: rharkor/[email protected]
+
+      - name: Build packages
+        run: yarn build
+
+      - name: 'Start release candidate'
+        uses: ./packages/release-action
+        with:
+          action: next
+          base-ref: ${{ github.ref_name }}
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.CI_PAT }}

apps/meteor/app/api/server/v1/rooms.ts

@@ -420,7 +420,7 @@ API.v1.addRoute(
 			const discussionParent =
 				room.prid &&
 				(await Rooms.findOneById<Pick<IRoom, 'name' | 'fname' | 't' | 'prid' | 'u'>>(room.prid, {
-					projection: { name: 1, fname: 1, t: 1, prid: 1, u: 1 },
+					projection: { name: 1, fname: 1, t: 1, prid: 1, u: 1, sidepanel: 1 },
 				}));
 			const { team, parentRoom } = await Team.getRoomInfo(room);
 			const parent = discussionParent || parentRoom;

apps/meteor/app/lib/client/methods/sendMessage.ts

@@ -43,7 +43,7 @@ Meteor.methods<ServerMethods>({
 
 		await onClientMessageReceived(message as IMessage).then((message) => {
 			ChatMessage.insert(message);
-			return callbacks.run('afterSaveMessage', message, room);
+			return callbacks.run('afterSaveMessage', message, { room });
 		});
 	},
 });

apps/meteor/app/livechat/server/lib/RoutingManager.ts

@@ -265,11 +265,20 @@ export const RoutingManager: Routing = {
 
 		logger.info(`Inquiry ${inquiry._id} taken by agent ${agent.agentId}`);
 
+		// assignAgent changes the room data to add the agent serving the conversation. afterTakeInquiry expects room object to be updated
+		const inq = await this.assignAgent(inquiry as InquiryWithAgentInfo, room, agent);
+		const roomAfterUpdate = await LivechatRooms.findOneById(rid);
+
+		if (!roomAfterUpdate) {
+			// This should never happen
+			throw new Error('error-room-not-found');
+		}
+
 		callbacks.runAsync(
 			'livechat.afterTakeInquiry',
 			{
-				inquiry: await this.assignAgent(inquiry as InquiryWithAgentInfo, room, agent),
-				room,
+				inquiry: inq,
+				room: roomAfterUpdate,
 			},
 			agent,
 		);
@@ -282,7 +291,7 @@ export const RoutingManager: Routing = {
 			queuedAt: undefined,
 		});
 
-		return LivechatRooms.findOneById(rid);
+		return roomAfterUpdate;
 	},
 
 	async transferRoom(room, guest, transferData) {

apps/meteor/client/components/Contextualbar/ContextualbarDialog.tsx

@@ -18,7 +18,7 @@ type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextu
 const ContextualbarDialog = (props: ContextualbarDialogProps) => {
 	const ref = useRef(null);
 	const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);
-	const sizes = useLayoutSizes();
+	const { contextualBar } = useLayoutSizes();
 	const position = useLayoutContextualBarPosition();
 	const { closeTab } = useRoomToolbox();
 
@@ -42,12 +42,12 @@ const ContextualbarDialog = (props: ContextualbarDialogProps) => {
 		<FocusScope autoFocus restoreFocus>
 			<FeaturePreview feature='contextualbarResizable'>
 				<FeaturePreviewOn>
-					<ContextualbarResizable defaultWidth={sizes.contextualBar}>
+					<ContextualbarResizable defaultWidth={contextualBar}>
 						<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
 					</ContextualbarResizable>
 				</FeaturePreviewOn>
 				<FeaturePreviewOff>
-					<Contextualbar ref={callbackRef} width={sizes.contextualBar} position={position} {...dialogProps} {...props} />
+					<Contextualbar ref={callbackRef} width={contextualBar} position={position} {...dialogProps} {...props} />
 				</FeaturePreviewOff>
 			</FeaturePreview>
 		</FocusScope>

apps/meteor/client/components/FeaturePreviewSidePanelNavigation.tsx

@@ -0,0 +1,10 @@
+import { FeaturePreview } from '@rocket.chat/ui-client';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useSidePanelNavigationScreenSize } from '../hooks/useSidePanelNavigation';
+
+export const FeaturePreviewSidePanelNavigation = ({ children }: { children: ReactElement[] }) => {
+	const disabled = !useSidePanelNavigationScreenSize();
+	return <FeaturePreview feature='sidepanelNavigation' disabled={disabled} children={children} />;
+};

apps/meteor/client/hooks/useRoomInfoEndpoint.ts

@@ -1,13 +1,14 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import type { OperationResult } from '@rocket.chat/rest-typings';
-import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useUserId } from '@rocket.chat/ui-contexts';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { minutesToMilliseconds } from 'date-fns';
 import type { Meteor } from 'meteor/meteor';
 
 export const useRoomInfoEndpoint = (rid: IRoom['_id']): UseQueryResult<OperationResult<'GET', '/v1/rooms.info'>> => {
 	const getRoomInfo = useEndpoint('GET', '/v1/rooms.info');
+	const uid = useUserId();
 	return useQuery(['/v1/rooms.info', rid], () => getRoomInfo({ roomId: rid }), {
 		cacheTime: minutesToMilliseconds(15),
 		staleTime: minutesToMilliseconds(5),
@@ -17,5 +18,6 @@ export const useRoomInfoEndpoint = (rid: IRoom['_id']): UseQueryResult<Operation
 			}
 			return true;
 		},
+		enabled: !!uid,
 	});
 };

apps/meteor/client/hooks/useSidePanelNavigation.ts

@@ -0,0 +1,14 @@
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
+
+export const useSidePanelNavigation = () => {
+	const isSidepanelFeatureEnabled = useFeaturePreview('sidepanelNavigation');
+	// ["xs", "sm", "md", "lg", "xl", xxl"]
+	return useSidePanelNavigationScreenSize() && isSidepanelFeatureEnabled;
+};
+
+export const useSidePanelNavigationScreenSize = () => {
+	const breakpoints = useBreakpoints();
+	// ["xs", "sm", "md", "lg", "xl", xxl"]
+	return breakpoints.includes('lg');
+};

apps/meteor/client/lib/RoomManager.ts

@@ -55,6 +55,8 @@ export const RoomManager = new (class RoomManager extends Emitter<{
 
 	private rooms: Map<IRoom['_id'], RoomStore> = new Map();
 
+	private parentRid?: IRoom['_id'] | undefined;
+
 	constructor() {
 		super();
 		debugRoomManager &&
@@ -78,6 +80,13 @@ export const RoomManager = new (class RoomManager extends Emitter<{
 	}
 
 	get opened(): IRoom['_id'] | undefined {
+		return this.parentRid ?? this.rid;
+	}
+
+	get openedSecondLevel(): IRoom['_id'] | undefined {
+		if (!this.parentRid) {
+			return undefined;
+		}
 		return this.rid;
 	}
 
@@ -106,20 +115,28 @@ export const RoomManager = new (class RoomManager extends Emitter<{
 		this.emit('changed', this.rid);
 	}
 
-	open(rid: IRoom['_id']): void {
+	private _open(rid: IRoom['_id'], parent?: IRoom['_id']): void {
 		if (rid === this.rid) {
 			return;
 		}
-
 		this.back(rid);
 		if (!this.rooms.has(rid)) {
 			this.rooms.set(rid, new RoomStore(rid));
 		}
 		this.rid = rid;
+		this.parentRid = parent;
 		this.emit('opened', this.rid);
 		this.emit('changed', this.rid);
 	}
 
+	open(rid: IRoom['_id']): void {
+		this._open(rid);
+	}
+
+	openSecondLevel(parentId: IRoom['_id'], rid: IRoom['_id']): void {
+		this._open(rid, parentId);
+	}
+
 	getStore(rid: IRoom['_id']): RoomStore | undefined {
 		return this.rooms.get(rid);
 	}
@@ -130,4 +147,11 @@ const subscribeOpenedRoom = [
 	(): IRoom['_id'] | undefined => RoomManager.opened,
 ] as const;
 
+const subscribeOpenedSecondLevelRoom = [
+	(callback: () => void): (() => void) => RoomManager.on('changed', callback),
+	(): IRoom['_id'] | undefined => RoomManager.openedSecondLevel,
+] as const;
+
 export const useOpenedRoom = (): IRoom['_id'] | undefined => useSyncExternalStore(...subscribeOpenedRoom);
+
+export const useSecondLevelOpenedRoom = (): IRoom['_id'] | undefined => useSyncExternalStore(...subscribeOpenedSecondLevelRoom);

apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx

@@ -1,3 +1,4 @@
+import type { SidepanelItem } from '@rocket.chat/core-typings';
 import {
 	Box,
 	Button,
@@ -16,6 +17,7 @@ import {
 	AccordionItem,
 } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import {
 	useEndpoint,
 	usePermission,
@@ -40,6 +42,8 @@ type CreateTeamModalInputs = {
 	encrypted: boolean;
 	broadcast: boolean;
 	members?: string[];
+	showDiscussions?: boolean;
+	showChannels?: boolean;
 };
 
 type CreateTeamModalProps = { onClose: () => void };
@@ -50,6 +54,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms');
 	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
 	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+
 	const dispatchToastMessage = useToastMessageDispatch();
 	const canCreateTeam = usePermission('create-team');
 	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
@@ -94,6 +99,8 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 			encrypted: (e2eEnabledForPrivateByDefault as boolean) ?? false,
 			broadcast: false,
 			members: [],
+			showChannels: true,
+			showDiscussions: true,
 		},
 	});
 
@@ -123,7 +130,10 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 		topic,
 		broadcast,
 		encrypted,
+		showChannels,
+		showDiscussions,
 	}: CreateTeamModalInputs): Promise<void> => {
+		const sidepanelItem = [showChannels && 'channels', showDiscussions && 'discussions'].filter(Boolean) as [SidepanelItem, SidepanelItem?];
 		const params = {
 			name,
 			members,
@@ -136,6 +146,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 					encrypted,
 				},
 			},
+			...((showChannels || showDiscussions) && { sidepanel: { items: sidepanelItem } }),
 		};
 
 		try {
@@ -157,6 +168,8 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 	const encryptedId = useUniqueId();
 	const broadcastId = useUniqueId();
 	const addMembersId = useUniqueId();
+	const showChannelsId = useUniqueId();
+	const showDiscussionsId = useUniqueId();
 
 	return (
 		<Modal
@@ -236,6 +249,55 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 				</FieldGroup>
 				<Accordion>
 					<AccordionItem title={t('Advanced_settings')}>
+						<FeaturePreview feature='sidepanelNavigation'>
+							<FeaturePreviewOff>{null}</FeaturePreviewOff>
+							<FeaturePreviewOn>
+								<FieldGroup>
+									<Box is='h5' fontScale='h5' color='titles-labels'>
+										{t('Navigation')}
+									</Box>
+									<Field>
+										<FieldRow>
+											<FieldLabel htmlFor={showChannelsId}>{t('Channels')}</FieldLabel>
+											<Controller
+												control={control}
+												name='showChannels'
+												render={({ field: { onChange, value, ref } }): ReactElement => (
+													<ToggleSwitch
+														aria-describedby={`${showChannelsId}-hint`}
+														id={showChannelsId}
+														onChange={onChange}
+														checked={value}
+														ref={ref}
+													/>
+												)}
+											/>
+										</FieldRow>
+										<FieldDescription id={`${showChannelsId}-hint`}>{t('Show_channels_description')}</FieldDescription>
+									</Field>
+
+									<Field>
+										<FieldRow>
+											<FieldLabel htmlFor={showDiscussionsId}>{t('Discussions')}</FieldLabel>
+											<Controller
+												control={control}
+												name='showDiscussions'
+												render={({ field: { onChange, value, ref } }): ReactElement => (
+													<ToggleSwitch
+														aria-describedby={`${showDiscussionsId}-hint`}
+														id={showDiscussionsId}
+														onChange={onChange}
+														checked={value}
+														ref={ref}
+													/>
+												)}
+											/>
+										</FieldRow>
+										<FieldDescription id={`${showDiscussionsId}-hint`}>{t('Show_discussions_description')}</FieldDescription>
+									</Field>
+								</FieldGroup>
+							</FeaturePreviewOn>
+						</FeaturePreview>
 						<FieldGroup>
 							<Box is='h5' fontScale='h5' color='titles-labels'>
 								{t('Security_and_permissions')}