regression: Missing `ContextualbarDialog` wrapping in administration and Omnichannel (#32026)

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

@@ -9,6 +9,10 @@ import { useRoomToolbox } from '../../views/room/contexts/RoomToolboxContext';
 
 type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar>;
 
+/**
+ * TODO: inside administration it should have a mechanism to display the contextualbar programmatically
+ * @prop closeTab only work inside a room
+ * */
 const ContextualbarDialog = (props: ContextualbarDialogProps) => {
 	const ref = useRef(null);
 	const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);

apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx

@@ -3,7 +3,13 @@ import { useRoute, useRouteParameter, usePermission, useTranslation } from '@roc
 import type { ReactElement } from 'react';
 import React, { useCallback, useRef } from 'react';
 
-import { Contextualbar, ContextualbarHeader, ContextualbarClose } from '../../../components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarDialog,
+	ContextualbarTitle,
+} from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import AddCustomEmoji from './AddCustomEmoji';
@@ -55,15 +61,19 @@ const CustomEmojiRoute = (): ReactElement => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar flexShrink={0}>
-					<ContextualbarHeader>
-						{context === 'edit' && t('Custom_Emoji_Info')}
-						{context === 'new' && t('Custom_Emoji_Add')}
-						<ContextualbarClose onClick={handleClose} />
-					</ContextualbarHeader>
-					{context === 'edit' && id && <EditCustomEmojiWithData _id={id} close={handleClose} onChange={handleChange} />}
-					{context === 'new' && <AddCustomEmoji close={handleClose} onChange={handleChange} />}
-				</Contextualbar>
+				<ContextualbarDialog>
+					<Contextualbar>
+						<ContextualbarHeader>
+							<ContextualbarTitle>
+								{context === 'edit' && t('Custom_Emoji_Info')}
+								{context === 'new' && t('Custom_Emoji_Add')}
+							</ContextualbarTitle>
+							<ContextualbarClose onClick={handleClose} />
+						</ContextualbarHeader>
+						{context === 'edit' && id && <EditCustomEmojiWithData _id={id} close={handleClose} onChange={handleChange} />}
+						{context === 'new' && <AddCustomEmoji close={handleClose} onChange={handleChange} />}
+					</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Page>
 	);

apps/meteor/client/views/admin/customSounds/CustomSoundsPage.tsx

@@ -2,7 +2,13 @@ import { Button } from '@rocket.chat/fuselage';
 import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback, useRef } from 'react';
 
-import { ContextualbarTitle, Contextualbar, ContextualbarClose, ContextualbarHeader } from '../../../components/Contextualbar';
+import {
+	ContextualbarTitle,
+	Contextualbar,
+	ContextualbarClose,
+	ContextualbarHeader,
+	ContextualbarDialog,
+} from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import AddCustomSound from './AddCustomSound';
 import CustomSoundsTable from './CustomSoundsTable';
@@ -51,17 +57,19 @@ const CustomSoundsPage = () => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar flexShrink={0}>
-					<ContextualbarHeader>
-						<ContextualbarTitle>
-							{context === 'edit' && t('Custom_Sound_Edit')}
-							{context === 'new' && t('Custom_Sound_Add')}
-						</ContextualbarTitle>
-						<ContextualbarClose onClick={handleClose} />
-					</ContextualbarHeader>
-					{context === 'edit' && <EditCustomSound _id={id} close={handleClose} onChange={handleReload} />}
-					{context === 'new' && <AddCustomSound goToNew={handleItemClick} close={handleClose} onChange={handleReload} />}
-				</Contextualbar>
+				<ContextualbarDialog>
+					<Contextualbar>
+						<ContextualbarHeader>
+							<ContextualbarTitle>
+								{context === 'edit' && t('Custom_Sound_Edit')}
+								{context === 'new' && t('Custom_Sound_Add')}
+							</ContextualbarTitle>
+							<ContextualbarClose onClick={handleClose} />
+						</ContextualbarHeader>
+						{context === 'edit' && <EditCustomSound _id={id} close={handleClose} onChange={handleReload} />}
+						{context === 'new' && <AddCustomSound goToNew={handleItemClick} close={handleClose} onChange={handleReload} />}
+					</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Page>
 	);

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx

@@ -3,7 +3,13 @@ import { useRoute, useRouteParameter, usePermission, useTranslation, useSetting
 import type { ReactElement } from 'react';
 import React, { useCallback, useRef, useEffect } from 'react';
 
-import { Contextualbar, ContextualbarHeader, ContextualbarClose, ContextualbarTitle } from '../../../components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarTitle,
+	ContextualbarDialog,
+} from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
@@ -69,20 +75,22 @@ const CustomUserStatusRoute = (): ReactElement => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar bg='light' flexShrink={0}>
-					<ContextualbarHeader>
-						<ContextualbarTitle>
-							{context === 'edit' && t('Custom_User_Status_Edit')}
-							{context === 'new' && t('Custom_User_Status_Add')}
-							{context === 'presence-service' && t('Presence_service_cap')}
-						</ContextualbarTitle>
-						<ContextualbarClose onClick={handleClose} />
-					</ContextualbarHeader>
-					{context === 'presence-service' && <CustomUserStatusService />}
-					{(context === 'new' || context === 'edit') && (
-						<CustomUserStatusFormWithData _id={id} onClose={handleClose} onReload={handleReload} />
-					)}
-				</Contextualbar>
+				<ContextualbarDialog>
+					<Contextualbar>
+						<ContextualbarHeader>
+							<ContextualbarTitle>
+								{context === 'edit' && t('Custom_User_Status_Edit')}
+								{context === 'new' && t('Custom_User_Status_Add')}
+								{context === 'presence-service' && t('Presence_service_cap')}
+							</ContextualbarTitle>
+							<ContextualbarClose onClick={handleClose} />
+						</ContextualbarHeader>
+						{context === 'presence-service' && <CustomUserStatusService />}
+						{(context === 'new' || context === 'edit') && (
+							<CustomUserStatusFormWithData _id={id} onClose={handleClose} onReload={handleReload} />
+						)}
+					</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Page>
 	);

apps/meteor/client/views/admin/moderation/ModConsoleReportDetails.tsx

@@ -3,7 +3,7 @@ import { Tabs, TabsItem, ContextualbarHeader, ContextualbarTitle } from '@rocket
 import { useTranslation, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
 import React, { useState } from 'react';
 
-import { Contextualbar, ContextualbarClose } from '../../../components/Contextualbar';
+import { Contextualbar, ContextualbarClose, ContextualbarDialog } from '../../../components/Contextualbar';
 import UserMessages from './UserMessages';
 import UserReportInfo from './UserReports/UserReportInfo';
 
@@ -21,22 +21,24 @@ const ModConsoleReportDetails = ({ userId, default: defaultTab, onRedirect }: Mo
 	const activeTab = useRouteParameter('tab');
 
 	return (
-		<Contextualbar>
-			<ContextualbarHeader>
-				<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
-				<ContextualbarClose onClick={() => moderationRoute.navigate(`/admin/moderation/${activeTab}`, { replace: true })} />
-			</ContextualbarHeader>
-			<Tabs paddingBlockStart={8}>
-				<TabsItem selected={tab === 'messages'} onClick={() => setTab('messages')}>
-					{t('Messages')}
-				</TabsItem>
-				<TabsItem selected={tab === 'users'} onClick={() => setTab('users')}>
-					{t('User')}
-				</TabsItem>
-			</Tabs>
-			{tab === 'messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
-			{tab === 'users' && <UserReportInfo userId={userId} />}
-		</Contextualbar>
+		<ContextualbarDialog>
+			<Contextualbar>
+				<ContextualbarHeader>
+					<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
+					<ContextualbarClose onClick={() => moderationRoute.navigate(`/admin/moderation/${activeTab}`, { replace: true })} />
+				</ContextualbarHeader>
+				<Tabs paddingBlockStart={8}>
+					<TabsItem selected={tab === 'messages'} onClick={() => setTab('messages')}>
+						{t('Messages')}
+					</TabsItem>
+					<TabsItem selected={tab === 'users'} onClick={() => setTab('users')}>
+						{t('User')}
+					</TabsItem>
+				</Tabs>
+				{tab === 'messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
+				{tab === 'users' && <UserReportInfo userId={userId} />}
+			</Contextualbar>
+		</ContextualbarDialog>
 	);
 };
 

apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx

@@ -42,7 +42,6 @@ const ModerationConsolePage = ({ tab = 'messages', onSelectTab }: ModerationCons
 		<Page flexDirection='row'>
 			<Page>
 				<PageHeader title={t('Moderation')} />
-
 				<Tabs>
 					<TabsItem selected={tab === 'messages'} onClick={handleTabClick('messages')}>
 						{t('Reported_Messages')}

apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx

@@ -4,7 +4,13 @@ import type { ReactElement } from 'react';
 import React, { useEffect } from 'react';
 
 import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
-import { Contextualbar, ContextualbarHeader, ContextualbarTitle, ContextualbarClose } from '../../../components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarDialog,
+} from '../../../components/Contextualbar';
 import CustomRoleUpsellModal from './CustomRoleUpsellModal';
 import EditRolePageWithData from './EditRolePageWithData';
 
@@ -31,13 +37,15 @@ const PermissionsContextBar = (): ReactElement | null => {
 
 	return (
 		(context && (
-			<Contextualbar>
-				<ContextualbarHeader>
-					<ContextualbarTitle>{context === 'edit' ? t('Role_Editing') : t('New_role')}</ContextualbarTitle>
-					<ContextualbarClose onClick={handleCloseContextualbar} />
-				</ContextualbarHeader>
-				<EditRolePageWithData roleId={_id} />
-			</Contextualbar>
+			<ContextualbarDialog>
+				<Contextualbar>
+					<ContextualbarHeader>
+						<ContextualbarTitle>{context === 'edit' ? t('Role_Editing') : t('New_role')}</ContextualbarTitle>
+						<ContextualbarClose onClick={handleCloseContextualbar} />
+					</ContextualbarHeader>
+					<EditRolePageWithData roleId={_id} />
+				</Contextualbar>
+			</ContextualbarDialog>
 		)) ||
 		null
 	);

apps/meteor/client/views/admin/rooms/RoomsPage.tsx

@@ -2,6 +2,7 @@ import { useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useRef } from 'react';
 
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import EditRoomWithData from './EditRoomWithData';
 import RoomsTable from './RoomsTable';
@@ -22,7 +23,11 @@ const RoomsPage = (): ReactElement => {
 					<RoomsTable reload={reloadRef} />
 				</PageContent>
 			</Page>
-			{context && <EditRoomWithData rid={id} onReload={reloadRef.current} />}
+			{context && (
+				<ContextualbarDialog>
+					<EditRoomWithData rid={id} onReload={reloadRef.current} />
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

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

@@ -5,7 +5,13 @@ import React, { useRef } from 'react';
 
 import UserPageHeaderContentWithSeatsCap from '../../../../ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap';
 import { useSeatsCap } from '../../../../ee/client/views/admin/users/useSeatsCap';
-import { Contextualbar, ContextualbarHeader, ContextualbarTitle, ContextualbarClose } from '../../../components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarDialog,
+} from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import { useShouldPreventAction } from '../../../hooks/useShouldPreventAction';
 import AdminInviteUsers from './AdminInviteUsers';
@@ -63,23 +69,25 @@ const UsersPage = (): ReactElement => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar>
-					<ContextualbarHeader>
-						{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
-						<ContextualbarTitle>
-							{context === 'info' && t('User_Info')}
-							{context === 'edit' && t('Edit_User')}
-							{context === 'new' && t('Add_User')}
-							{context === 'invite' && t('Invite_Users')}
-						</ContextualbarTitle>
-						<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
-					</ContextualbarHeader>
-					{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
-					{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
-					{!isRoutePrevented && context === 'new' && <AdminUserForm onReload={handleReload} />}
-					{!isRoutePrevented && context === 'invite' && <AdminInviteUsers />}
-					{isRoutePrevented && <AdminUserUpgrade />}
-				</Contextualbar>
+				<ContextualbarDialog>
+					<Contextualbar>
+						<ContextualbarHeader>
+							{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
+							<ContextualbarTitle>
+								{context === 'info' && t('User_Info')}
+								{context === 'edit' && t('Edit_User')}
+								{context === 'new' && t('Add_User')}
+								{context === 'invite' && t('Invite_Users')}
+							</ContextualbarTitle>
+							<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
+						</ContextualbarHeader>
+						{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
+						{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
+						{!isRoutePrevented && context === 'new' && <AdminUserForm onReload={handleReload} />}
+						{!isRoutePrevented && context === 'invite' && <AdminInviteUsers />}
+						{isRoutePrevented && <AdminUserUpgrade />}
+					</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Page>
 	);

apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx

@@ -2,6 +2,7 @@ import { usePermission, useRouteParameter, useTranslation } from '@rocket.chat/u
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import AgentEditWithData from './AgentEditWithData';
@@ -27,8 +28,12 @@ const AgentsPage = (): ReactElement => {
 					<AgentsTable />
 				</PageContent>
 			</Page>
-			{id && context === 'edit' && <AgentEditWithData uid={id} />}
-			{id && context === 'info' && <AgentInfo uid={id} />}
+			{context && (
+				<ContextualbarDialog>
+					{id && context === 'edit' && <AgentEditWithData uid={id} />}
+					{id && context === 'info' && <AgentInfo uid={id} />}
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/client/views/omnichannel/currentChats/CustomFieldsList.tsx

@@ -5,7 +5,14 @@ import type { ReactElement, Dispatch, SetStateAction } from 'react';
 import React, { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import { Contextualbar, ContextualbarScrollableContent, ContextualbarHeader, ContextualbarClose } from '../../../components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarScrollableContent,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarDialog,
+	ContextualbarTitle,
+} from '../../../components/Contextualbar';
 
 type CustomFieldsListProps = {
 	setCustomFields: Dispatch<SetStateAction<{ [key: string]: string } | undefined>>;
@@ -26,44 +33,46 @@ const CustomFieldsList = ({ setCustomFields, allCustomFields }: CustomFieldsList
 	const currentChatsRoute = useRoute('omnichannel-current-chats');
 
 	return (
-		<Contextualbar>
-			<ContextualbarHeader>
-				{t('Filter_by_Custom_Fields')}
-				<ContextualbarClose onClick={(): void => currentChatsRoute.push({ context: '' })} />
-			</ContextualbarHeader>
-			<ContextualbarScrollableContent is='form'>
-				{/* TODO: REMOVE FILTER ONCE THE ENDPOINT SUPPORTS A SCOPE PARAMETER */}
-				{allCustomFields
-					.filter((customField) => customField.scope !== 'visitor')
-					.map((customField: ILivechatCustomField) => {
-						if (customField.type === 'select') {
+		<ContextualbarDialog>
+			<Contextualbar>
+				<ContextualbarHeader>
+					<ContextualbarTitle>{t('Filter_by_Custom_Fields')}</ContextualbarTitle>
+					<ContextualbarClose onClick={(): void => currentChatsRoute.push({ context: '' })} />
+				</ContextualbarHeader>
+				<ContextualbarScrollableContent is='form'>
+					{/* TODO: REMOVE FILTER ONCE THE ENDPOINT SUPPORTS A SCOPE PARAMETER */}
+					{allCustomFields
+						.filter((customField) => customField.scope !== 'visitor')
+						.map((customField: ILivechatCustomField) => {
+							if (customField.type === 'select') {
+								return (
+									<Field key={customField._id}>
+										<FieldLabel>{customField.label}</FieldLabel>
+										<FieldRow>
+											<Controller
+												name={customField._id}
+												control={control}
+												render={({ field }): ReactElement => (
+													<Select {...field} options={(customField.options || '').split(',').map((item) => [item, item])} />
+												)}
+											/>
+										</FieldRow>
+									</Field>
+								);
+							}
+
 							return (
 								<Field key={customField._id}>
 									<FieldLabel>{customField.label}</FieldLabel>
 									<FieldRow>
-										<Controller
-											name={customField._id}
-											control={control}
-											render={({ field }): ReactElement => (
-												<Select {...field} options={(customField.options || '').split(',').map((item) => [item, item])} />
-											)}
-										/>
+										<TextInput flexGrow={1} {...register(customField._id)} />
 									</FieldRow>
 								</Field>
 							);
-						}
-
-						return (
-							<Field key={customField._id}>
-								<FieldLabel>{customField.label}</FieldLabel>
-								<FieldRow>
-									<TextInput flexGrow={1} {...register(customField._id)} />
-								</FieldRow>
-							</Field>
-						);
-					})}
-			</ContextualbarScrollableContent>
-		</Contextualbar>
+						})}
+				</ContextualbarScrollableContent>
+			</Contextualbar>
+		</ContextualbarDialog>
 	);
 };
 

apps/meteor/client/views/omnichannel/customFields/CustomFieldsPage.tsx

@@ -2,6 +2,7 @@ import { Button } from '@rocket.chat/fuselage';
 import { useRouteParameter, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import CustomFieldsTable from './CustomFieldsTable';
 import EditCustomFields from './EditCustomFields';
@@ -26,8 +27,12 @@ const CustomFieldsPage = () => {
 					<CustomFieldsTable />
 				</PageContent>
 			</Page>
-			{context === 'edit' && id && <EditCustomFieldsWithData customFieldId={id} />}
-			{context === 'new' && <EditCustomFields />}
+			{context && (
+				<ContextualbarDialog>
+					{context === 'edit' && id && <EditCustomFieldsWithData customFieldId={id} />}
+					{context === 'new' && <EditCustomFields />}
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/client/views/omnichannel/directory/ContactContextualBar.tsx

@@ -38,7 +38,7 @@ const ContactContextualBar = () => {
 	const header = useMemo(() => HEADER_OPTIONS[bar] || HEADER_OPTIONS.info, [bar]);
 
 	return (
-		<Contextualbar className='contextual-bar'>
+		<Contextualbar>
 			<ContextualbarHeader>
 				<ContextualbarIcon name={header.icon} />
 				<ContextualbarTitle>{t(header.title)}</ContextualbarTitle>

apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx

@@ -3,6 +3,7 @@ import { useRouteParameter, usePermission, useTranslation, useRouter } from '@ro
 import type { ReactElement } from 'react';
 import React, { useEffect, useCallback } from 'react';
 
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import { queryClient } from '../../../lib/queryClient';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
@@ -62,7 +63,9 @@ const OmnichannelDirectoryPage = (): ReactElement => {
 					{(page === 'contacts' && <ContactTab />) || (page === 'chats' && <ChatTab />) || (page === 'calls' && <CallTab />)}
 				</PageContent>
 			</Page>
-			<ContextualBar chatReload={chatReload} />
+			<ContextualbarDialog>
+				<ContextualBar chatReload={chatReload} />
+			</ContextualbarDialog>
 		</Page>
 	);
 };

apps/meteor/client/views/omnichannel/triggers/TriggersPage.tsx

@@ -2,6 +2,7 @@ import { Button } from '@rocket.chat/fuselage';
 import { useRouteParameter, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import EditTrigger from './EditTrigger';
 import EditTriggerWithData from './EditTriggerWithData';
@@ -23,8 +24,12 @@ const TriggersPage = () => {
 					<TriggersTable />
 				</PageContent>
 			</Page>
-			{context === 'edit' && id && <EditTriggerWithData triggerId={id} />}
-			{context === 'new' && <EditTrigger />}
+			{context && (
+				<ContextualbarDialog>
+					{context === 'edit' && id && <EditTriggerWithData triggerId={id} />}
+					{context === 'new' && <EditTrigger />}
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/ee/client/omnichannel/priorities/PrioritiesPage.tsx

@@ -86,7 +86,6 @@ export const PrioritiesPage = ({ priorityId, context }: PrioritiesPageProps): Re
 					<PrioritiesTable priorities={priorities} isLoading={isLoading} onRowClick={onRowClick} />
 				</PageContent>
 			</Page>
-
 			{context === 'edit' && (
 				<PriorityList priorityId={priorityId} context={context} onSave={onSavePriority} onClose={onContextualbarClose} />
 			)}

apps/meteor/ee/client/omnichannel/priorities/PriorityList.tsx

@@ -8,6 +8,7 @@ import {
 	ContextualbarHeader,
 	ContextualbarClose,
 	ContextualbarScrollableContent,
+	ContextualbarDialog,
 } from '../../../../client/components/Contextualbar';
 import type { PriorityFormData } from './PriorityEditForm';
 import PriorityEditFormWithData from './PriorityEditFormWithData';
@@ -23,15 +24,17 @@ const PriorityList = ({ priorityId, onClose, onSave }: PriorityListProps): React
 	const t = useTranslation();
 
 	return (
-		<Contextualbar>
-			<ContextualbarHeader>
-				<ContextualbarTitle>{t('Edit_Priority')}</ContextualbarTitle>
-				<ContextualbarClose onClick={onClose} />
-			</ContextualbarHeader>
-			<ContextualbarScrollableContent height='100%'>
-				<PriorityEditFormWithData priorityId={priorityId} onSave={onSave} onCancel={onClose} />
-			</ContextualbarScrollableContent>
-		</Contextualbar>
+		<ContextualbarDialog>
+			<Contextualbar>
+				<ContextualbarHeader>
+					<ContextualbarTitle>{t('Edit_Priority')}</ContextualbarTitle>
+					<ContextualbarClose onClick={onClose} />
+				</ContextualbarHeader>
+				<ContextualbarScrollableContent height='100%'>
+					<PriorityEditFormWithData priorityId={priorityId} onSave={onSave} onCancel={onClose} />
+				</ContextualbarScrollableContent>
+			</Contextualbar>
+		</ContextualbarDialog>
 	);
 };
 

apps/meteor/ee/client/omnichannel/slaPolicies/SlaPage.tsx

@@ -3,7 +3,13 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRouteParameter, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useRef, useCallback } from 'react';
 
-import { Contextualbar, ContextualbarTitle, ContextualbarHeader, ContextualbarClose } from '../../../../client/components/Contextualbar';
+import {
+	Contextualbar,
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarDialog,
+} from '../../../../client/components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../../client/components/Page';
 import SlaEditWithData from './SlaEditWithData';
 import SlaNew from './SlaNew';
@@ -44,17 +50,19 @@ const SlaPage = () => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar>
-					<ContextualbarHeader>
-						<ContextualbarTitle>
-							{context === 'edit' && t('Edit_SLA_Policy')}
-							{context === 'new' && t('New_SLA_Policy')}
-						</ContextualbarTitle>
-						<ContextualbarClose onClick={handleCloseContextualbar} />
-					</ContextualbarHeader>
-					{context === 'edit' && id && <SlaEditWithData slaId={id} reload={handleReload} />}
-					{context === 'new' && <SlaNew reload={handleReload} />}
-				</Contextualbar>
+				<ContextualbarDialog>
+					<Contextualbar>
+						<ContextualbarHeader>
+							<ContextualbarTitle>
+								{context === 'edit' && t('Edit_SLA_Policy')}
+								{context === 'new' && t('New_SLA_Policy')}
+							</ContextualbarTitle>
+							<ContextualbarClose onClick={handleCloseContextualbar} />
+						</ContextualbarHeader>
+						{context === 'edit' && id && <SlaEditWithData slaId={id} reload={handleReload} />}
+						{context === 'new' && <SlaNew reload={handleReload} />}
+					</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Page>
 	);

apps/meteor/ee/client/omnichannel/tags/TagsPage.tsx

@@ -2,6 +2,7 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useRouter, useTranslation, useRouteParameter } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
+import { ContextualbarDialog } from '../../../../client/components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../../client/components/Page';
 import TagEdit from './TagEdit';
 import TagEditWithData from './TagEditWithData';
@@ -25,8 +26,12 @@ const TagsPage = () => {
 					<TagsTable />
 				</PageContent>
 			</Page>
-			{context === 'edit' && id && <TagEditWithData tagId={id} />}
-			{context === 'new' && <TagEdit />}
+			{context && (
+				<ContextualbarDialog>
+					{context === 'edit' && id && <TagEditWithData tagId={id} />}
+					{context === 'new' && <TagEdit />}
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/ee/client/omnichannel/units/UnitsPage.tsx

@@ -2,6 +2,7 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useTranslation, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
+import { ContextualbarDialog } from '../../../../client/components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../../client/components/Page';
 import UnitEdit from './UnitEdit';
 import UnitEditWithData from './UnitEditWithData';
@@ -28,8 +29,12 @@ const UnitsPage = () => {
 					<UnitsTable />
 				</PageContent>
 			</Page>
-			{context === 'edit' && id && <UnitEditWithData unitId={id} />}
-			{context === 'new' && <UnitEdit />}
+			{context && (
+				<ContextualbarDialog>
+					{context === 'edit' && id && <UnitEditWithData unitId={id} />}
+					{context === 'new' && <UnitEdit />}
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminPage.tsx

@@ -2,6 +2,7 @@ import { useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useRef } from 'react';
 
+import { ContextualbarDialog } from '../../../../../client/components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../../../client/components/Page';
 import DeviceManagementAdminTable from './DeviceManagementAdminTable';
 import DeviceManagementInfo from './DeviceManagementInfo';
@@ -21,7 +22,11 @@ const DeviceManagementAdminPage = (): ReactElement => {
 					<DeviceManagementAdminTable reloadRef={reloadRef} />
 				</PageContent>
 			</Page>
-			{context === 'info' && deviceId && <DeviceManagementInfo deviceId={deviceId} onReload={reloadRef.current} />}
+			{context === 'info' && deviceId && (
+				<ContextualbarDialog>
+					<DeviceManagementInfo deviceId={deviceId} onReload={reloadRef.current} />
+				</ContextualbarDialog>
+			)}
 		</Page>
 	);
 };

apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx

@@ -36,11 +36,7 @@ const DeviceInfoWithData = ({ deviceId, onReload }: { deviceId: string; onReload
 	} = useEndpointData('/v1/sessions/info.admin', { params: useMemo(() => ({ sessionId: deviceId }), [deviceId]) });
 
 	if (phase === AsyncStatePhase.LOADING) {
-		return (
-			<Contextualbar>
-				<ContextualbarSkeleton />
-			</Contextualbar>
-		);
+		return <ContextualbarSkeleton />;
 	}
 
 	if (error || !data) {