chore: Contextualbar as dialog instead of aside (#31978)

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

@@ -0,0 +1,42 @@
+import { Contextualbar } from '@rocket.chat/fuselage';
+import { useLayoutSizes, useLayoutContextualBarPosition } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, KeyboardEvent } from 'react';
+import React, { useCallback, useRef } from 'react';
+import type { AriaDialogProps } from 'react-aria';
+import { FocusScope, useDialog } from 'react-aria';
+
+import { useRoomToolbox } from '../../views/room/contexts/RoomToolboxContext';
+
+type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar>;
+
+const ContextualbarDialog = (props: ContextualbarDialogProps) => {
+	const ref = useRef(null);
+	const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);
+	const sizes = useLayoutSizes();
+	const position = useLayoutContextualBarPosition();
+	const { closeTab } = useRoomToolbox();
+
+	const callbackRef = useCallback(
+		(node) => {
+			if (!node) {
+				return;
+			}
+
+			ref.current = node;
+			node.addEventListener('keydown', (e: KeyboardEvent) => {
+				if (e.key === 'Escape') {
+					closeTab();
+				}
+			});
+		},
+		[closeTab],
+	);
+
+	return (
+		<FocusScope autoFocus restoreFocus>
+			<Contextualbar ref={callbackRef} width={sizes.contextualBar} position={position} {...dialogProps} {...props} />
+		</FocusScope>
+	);
+};
+
+export default ContextualbarDialog;

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

@@ -0,0 +1,9 @@
+import { ContextualbarTitle as ContextualbarTitleComponent } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+const ContextualbarTitle = (props: ComponentProps<typeof ContextualbarTitleComponent>) => (
+	<ContextualbarTitleComponent id='contextualbarTitle' {...props} />
+);
+
+export default ContextualbarTitle;

apps/meteor/client/components/Contextualbar/index.ts

@@ -1,23 +1,25 @@
 import {
+	Contextualbar,
 	ContextualbarAction,
 	ContextualbarActions,
 	ContextualbarContent,
 	ContextualbarSkeleton,
 	ContextualbarIcon,
 	ContextualbarFooter,
-	ContextualbarTitle,
 	ContextualbarEmptyContent,
 } from '@rocket.chat/fuselage';
 
-import Contextualbar from './Contextualbar';
 import ContextualbarBack from './ContextualbarBack';
 import ContextualbarClose from './ContextualbarClose';
+import ContextualbarDialog from './ContextualbarDialog';
 import ContextualbarHeader from './ContextualbarHeader';
 import ContextualbarInnerContent from './ContextualbarInnerContent';
 import ContextualbarScrollableContent from './ContextualbarScrollableContent';
+import ContextualbarTitle from './ContextualbarTitle';
 
 export {
 	Contextualbar,
+	ContextualbarDialog,
 	ContextualbarHeader,
 	ContextualbarAction,
 	ContextualbarActions,

apps/meteor/client/components/UserInfo/UserInfo.tsx

@@ -75,7 +75,7 @@ const UserInfo = ({
 					</InfoPanel.Avatar>
 				)}
 
-				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
+				{actions && <InfoPanel.ActionGroup>{actions}</InfoPanel.ActionGroup>}
 
 				<InfoPanel.Section>
 					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}

apps/meteor/client/views/admin/users/AdminUsersPage.tsx

@@ -63,7 +63,7 @@ const UsersPage = (): ReactElement => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar is='aside' aria-labelledby=''>
+				<Contextualbar>
 					<ContextualbarHeader>
 						{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
 						<ContextualbarTitle>

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx

@@ -1,13 +1,12 @@
 import type { IGroupVideoConference } from '@rocket.chat/core-typings';
-import { Box, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage';
+import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, Throbber } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import {
-	ContextualbarSkeleton,
 	ContextualbarHeader,
 	ContextualbarIcon,
 	ContextualbarTitle,
@@ -36,10 +35,6 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 		debounceDelay: 200,
 	});
 
-	if (loading) {
-		return <ContextualbarSkeleton />;
-	}
-
 	return (
 		<>
 			<ContextualbarHeader>
@@ -49,6 +44,11 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 			</ContextualbarHeader>
 
 			<ContextualbarContent paddingInline={0} ref={ref}>
+				{loading && (
+					<Box pi={24} pb={12}>
+						<Throbber size='x12' />
+					</Box>
+				)}
 				{(total === 0 || error) && (
 					<Box display='flex' flexDirection='column' justifyContent='center' height='100%'>
 						{error && (
@@ -58,7 +58,7 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 								<StatesSubtitle>{getErrorMessage(error)}</StatesSubtitle>
 							</States>
 						)}
-						{!error && total === 0 && (
+						{!loading && total === 0 && (
 							<ContextualbarEmptyContent
 								icon='phone'
 								title={t('No_history')}
@@ -67,22 +67,28 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 						)}
 					</Box>
 				)}
-				{videoConfs.length > 0 && (
-					<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+				<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+					{videoConfs.length > 0 && (
 						<Virtuoso
 							style={{
 								height: blockSize,
 								width: inlineSize,
 							}}
 							totalCount={total}
-							endReached={(start): unknown => loadMoreItems(start, Math.min(50, total - start))}
+							endReached={
+								loading
+									? (): void => undefined
+									: (start) => {
+											loadMoreItems(start, Math.min(50, total - start));
+									  }
+							}
 							overscan={25}
 							data={videoConfs}
 							components={{ Scroller: VirtuosoScrollbars }}
 							itemContent={(_index, data): ReactElement => <VideoConfListItem videoConfData={data} reload={reload} />}
 						/>
-					</Box>
-				)}
+					)}
+				</Box>
 			</ContextualbarContent>
 		</>
 	);

apps/meteor/client/views/room/layout/RoomLayout.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import React, { Suspense } from 'react';
 
-import { Contextualbar } from '../../../components/Contextualbar';
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import HeaderSkeleton from '../Header/HeaderSkeleton';
 
 type RoomLayoutProps = {
@@ -23,9 +23,9 @@ const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps):
 				{footer && <Suspense fallback={null}>{footer}</Suspense>}
 			</Box>
 			{aside && (
-				<Contextualbar is='aside'>
+				<ContextualbarDialog>
 					<Suspense fallback={null}>{aside}</Suspense>
-				</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Box>
 	</Box>

apps/meteor/ee/server/services/package.json

@@ -50,7 +50,7 @@
 		"ws": "^8.8.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@types/cookie": "^0.5.3",
 		"@types/cookie-parser": "^1.4.5",
 		"@types/ejson": "^2.2.1",

apps/meteor/package.json

@@ -242,15 +242,15 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-hooks": "^0.33.0",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
-		"@rocket.chat/fuselage-toastbar": "~0.31.25",
+		"@rocket.chat/fuselage-toastbar": "^0.31.26",
 		"@rocket.chat/fuselage-tokens": "^0.33.0",
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/i18n": "workspace:^",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/instance-status": "workspace:^",
 		"@rocket.chat/jwt": "workspace:^",
 		"@rocket.chat/layout": "~0.31.26",

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -122,7 +122,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.tabs.room.btnSave.click();
 	});
 
-	test('should edit name of "targetChannel"', async ({ page }) => {
+	test('should edit name of targetChannel', async ({ page }) => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.tabs.btnRoomInfo.click();
 		await poHomeChannel.tabs.room.btnEdit.click();
@@ -152,9 +152,9 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await page.getByRole('button', { name: targetChannel }).first().focus();
 		await page.keyboard.press('Space');
-		await page.getByRole('complementary').waitFor();
+		await page.getByRole('dialog').waitFor();
 
-		await expect(page.getByRole('complementary')).toBeVisible();
+		await expect(page.getByRole('dialog')).toBeVisible();
 	});
 
 	test('should create a discussion using the message composer', async ({ page }) => {

apps/meteor/tests/e2e/federation/page-objects/fragments/home-content.ts

@@ -232,15 +232,15 @@ export class FederationHomeContent {
 	}
 
 	get threadInputMessage(): Locator {
-		return this.page.locator('//main//aside >> [name="msg"]').last();
+		return this.page.getByRole('dialog').locator('[name="msg"]').last();
 	}
 
 	async sendFileMessage(fileName: string): Promise<void> {
 		await this.page.locator('input[type=file]').setInputFiles(`./tests/e2e/federation/files/${fileName}`);
 	}
 
 	async sendThreadMessage(message: string): Promise<void> {
-		await this.page.locator('//main//aside >> [name="msg"]').last().fill(message);
+		await this.page.getByRole('dialog').locator('[name="msg"]').last().fill(message);
 		await this.page.keyboard.press('Enter');
 	}
 
@@ -251,7 +251,7 @@ export class FederationHomeContent {
 	}
 
 	threadSendToChannelAlso(): Locator {
-		return this.page.locator('//main//aside >> [name="alsoSendThreadToChannel"]');
+		return this.page.getByRole('dialog').locator('label', { hasText: 'Also send to channel' });
 	}
 
 	async quoteMessage(message: string): Promise<void> {
@@ -262,14 +262,14 @@ export class FederationHomeContent {
 	}
 
 	async openLastThreadMessageMenu(): Promise<void> {
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().hover();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().hover();
 		await this.page
-			.locator('//main//aside >> [data-qa-type="message"]')
+			.getByRole('dialog').locator('[data-qa-type="message"]')
 			.last()
 			.locator('[data-qa-type="message-action-menu"][data-qa-id="menu"]')
 			.waitFor();
 		await this.page
-			.locator('//main//aside >> [data-qa-type="message"]')
+			.getByRole('dialog').locator('[data-qa-type="message"]')
 			.last()
 			.locator('[data-qa-type="message-action-menu"][data-qa-id="menu"]')
 			.click();

apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-room.ts

@@ -20,19 +20,19 @@ export class FederationHomeFlextabRoom {
 	}
 
 	get inputName(): Locator {
-		return this.page.locator('//aside//label[contains(text(), "Name")]/..//input');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Name' });
 	}
 
 	get inputTopic(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Topic' });
 	}
 
 	get inputAnnouncement(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Announcement' });
 	}
 
 	get inputDescription(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
 	}
 
 	get checkboxReadOnly(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -240,13 +240,13 @@ export class HomeContent {
 	}
 
 	async openLastThreadMessageMenu(): Promise<void> {
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().hover();
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().locator('role=button[name="More"]').waitFor();
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().locator('role=button[name="More"]').click();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().hover();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().locator('role=button[name="More"]').waitFor();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().locator('role=button[name="More"]').click();
 	}
 
 	async toggleAlsoSendThreadToChannel(isChecked: boolean): Promise<void> {
-		await this.page.locator('//main//aside >> [name="alsoSendThreadToChannel"]').setChecked(isChecked);
+		await this.page.getByRole('dialog').locator('[name="alsoSendThreadToChannel"]').setChecked(isChecked);
 	}
 
 	get lastSystemMessageBody(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts

@@ -23,7 +23,7 @@ export class HomeFlextabMembers {
 		await this.page.locator('role=button[name="More"]').click();
 		await this.page.locator('role=menuitem[name="Mute user"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
-		await this.page.locator('(//main//aside/h3//button)[1]').click();
+		await this.page.getByRole('dialog').getByRole('button').first().click();
 	}
 
 	async setUserAsModerator(username: string) {

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-room.ts

@@ -12,19 +12,19 @@ export class HomeFlextabRoom {
 	}
 
 	get inputName(): Locator {
-		return this.page.locator('//aside//label[contains(text(), "Name")]/..//input');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Name' });
 	}
 
 	get inputTopic(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Topic' });
 	}
 
 	get inputAnnouncement(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Announcement' });
 	}
 
 	get inputDescription(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
 	}
 
 	get checkboxReadOnly(): Locator {

apps/meteor/tests/e2e/team-management.spec.ts

@@ -87,7 +87,7 @@ test.describe.serial('teams-management', () => {
 		await poHomeTeam.tabs.channels.inputChannels.type(targetChannel, { delay: 100 });
 		await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click();
 		await poHomeTeam.tabs.channels.btnAdd.click();
-		await expect(page.locator('//main//aside >> li')).toContainText(targetChannel);
+		await expect(page.getByRole('dialog').getByRole('listitem')).toContainText(targetChannel);
 	});
 
 	test('should access team channel through "targetTeam" header', async ({ page }) => {