chore: move Omnichannel toolbox section from sidebar room list (#30502)

apps/meteor/client/sidebar/RoomList/RoomListRow.tsx

@@ -1,21 +1,14 @@
 import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { SidebarSection } from '@rocket.chat/fuselage';
 import type { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentType, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { memo, useMemo } from 'react';
 
 import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
 import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
-import OmnichannelSection from '../sections/OmnichannelSection';
 import SideBarItemTemplateWithData from './SideBarItemTemplateWithData';
 
-const sections: {
-	[key: string]: ComponentType<any>;
-} = {
-	Omnichannel: OmnichannelSection,
-};
-
 type RoomListRowProps = {
 	extended: boolean;
 	t: ReturnType<typeof useTranslation>;
@@ -44,10 +37,7 @@ const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: ISubscripti
 	);
 
 	if (typeof item === 'string') {
-		const Section = sections[item];
-		return Section ? (
-			<Section />
-		) : (
+		return (
 			<SidebarSection>
 				<SidebarSection.Title>{t(item)}</SidebarSection.Title>
 			</SidebarSection>

apps/meteor/client/sidebar/Sidebar.tsx

@@ -4,12 +4,16 @@ import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
 
+import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled';
 import SidebarRoomList from './RoomList';
 import SidebarFooter from './footer';
 import SidebarHeader from './header';
+import OmnichannelSection from './sections/OmnichannelSection';
 import StatusDisabledSection from './sections/StatusDisabledSection';
 
 const Sidebar = () => {
+	const showOmnichannel = useOmnichannelEnabled();
+
 	const sidebarViewMode = useUserPreference('sidebarViewMode');
 	const sidebarHideAvatar = !useUserPreference('sidebarDisplayAvatar');
 	const { sidebar } = useLayout();
@@ -38,6 +42,7 @@ const Sidebar = () => {
 			>
 				<SidebarHeader />
 				{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
+				{showOmnichannel && <OmnichannelSection />}
 				<SidebarRoomList />
 				<SidebarFooter />
 			</Box>

apps/meteor/client/sidebar/hooks/useRoomList.ts

@@ -92,7 +92,6 @@ export const useRoomList = (): Array<ISubscription & IRoom> => {
 			});
 
 			const groups = new Map();
-			showOmnichannel && groups.set('Omnichannel', []);
 			incomingCall.size && groups.set('Incoming Calls', incomingCall);
 			showOmnichannel && inquiries.enabled && queue.length && groups.set('Incoming_Livechats', queue);
 			showOmnichannel && omnichannel.size && groups.set('Open_Livechats', omnichannel);

apps/meteor/client/sidebar/sections/OmnichannelSection.tsx

@@ -1,15 +1,13 @@
-import type { Box } from '@rocket.chat/fuselage';
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import { useIsCallEnabled, useIsCallReady } from '../../contexts/CallContext';
 import { useOmnichannelShowQueueLink } from '../../hooks/omnichannel/useOmnichannelShowQueueLink';
 import { OmniChannelCallDialPad, OmnichannelCallToggle, OmnichannelLivechatToggle } from './actions';
 
-const OmnichannelSection = (props: typeof Box): ReactElement => {
+const OmnichannelSection = () => {
 	const t = useTranslation();
 	const isCallEnabled = useIsCallEnabled();
 	const isCallReady = useIsCallReady();
@@ -34,7 +32,7 @@ const OmnichannelSection = (props: typeof Box): ReactElement => {
 
 	// The className is a paliative while we make TopBar.ToolBox optional on fuselage
 	return (
-		<Sidebar.TopBar.ToolBox className='omnichannel-sidebar' {...props}>
+		<Sidebar.TopBar.ToolBox className='omnichannel-sidebar'>
 			<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
 			<Sidebar.TopBar.Actions>
 				{showOmnichannelQueueLink && (
@@ -56,6 +54,4 @@ const OmnichannelSection = (props: typeof Box): ReactElement => {
 	);
 };
 
-export default Object.assign(memo(OmnichannelSection), {
-	size: 56,
-});
+export default memo(OmnichannelSection);