feat: Omnichannel filters (#36467)

Co-authored-by: dougfabris <[email protected]>

Author: yash-rajpal

apps/meteor/client/sidebarv2/RoomList/OmnichannelFilters.tsx

@@ -0,0 +1,34 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import { usePermission, useSetting } from '@rocket.chat/ui-contexts';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
+import { OMNICHANNEL_GROUPS, sidePanelFiltersConfig } from '../../views/navigation/contexts/RoomsNavigationContext';
+
+const OmnichannelFilters = () => {
+	const hasModule = useHasLicenseModule('livechat-enterprise');
+	const hasAccess = usePermission('view-l-room');
+	const canViewOmnichannelQueue = usePermission('view-livechat-queue');
+	const queueEnabled = useSetting('Livechat_waiting_queue');
+
+	if (!hasAccess) {
+		return null;
+	}
+
+	return (
+		<>
+			<Box role='tablist' aria-orientation='vertical'>
+				<RoomListFiltersItem group={OMNICHANNEL_GROUPS.IN_PROGRESS} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.IN_PROGRESS].icon} />
+				{hasModule && queueEnabled && canViewOmnichannelQueue && (
+					<RoomListFiltersItem group={OMNICHANNEL_GROUPS.QUEUE} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.QUEUE].icon} />
+				)}
+				{hasModule && (
+					<RoomListFiltersItem group={OMNICHANNEL_GROUPS.ON_HOLD} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.ON_HOLD].icon} />
+				)}
+			</Box>
+			<Divider borderColor='stroke-light' mb={4} mi={16} />
+		</>
+	);
+};
+
+export default OmnichannelFilters;

apps/meteor/client/sidebarv2/RoomList/RoomListFilters.tsx

@@ -2,22 +2,15 @@ import { Divider, Box } from '@rocket.chat/fuselage';
 import { forwardRef } from 'react';
 import type { Components } from 'react-virtuoso';
 
+import OmnichannelFilters from './OmnichannelFilters';
 import RoomListFiltersItem from './RoomListFiltersItem';
 import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
-import {
-	sidePanelFiltersConfig,
-	OMNICHANNEL_GROUPS,
-	SIDE_PANEL_GROUPS,
-	TEAM_COLLAB_GROUPS,
-	useSwitchSidePanelTab,
-} from '../../views/navigation/contexts/RoomsNavigationContext';
+import { sidePanelFiltersConfig, SIDE_PANEL_GROUPS, TEAM_COLLAB_GROUPS } from '../../views/navigation/contexts/RoomsNavigationContext';
 
 const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrapper(_, ref) {
 	// const favoritesEnabled = useUserPreference('sidebarShowFavorites', true);
 	const showOmnichannel = useOmnichannelEnabled();
 
-	const switchSidePanelTab = useSwitchSidePanelTab();
-
 	if (Object.values(SIDE_PANEL_GROUPS).length === 0) {
 		return null;
 	}
@@ -26,30 +19,11 @@ const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrappe
 		<Box ref={ref} display='flex' flexDirection='column'>
 			<Box role='tablist' aria-orientation='vertical' mbs={8}>
 				{Object.values(TEAM_COLLAB_GROUPS).map((group) => (
-					<RoomListFiltersItem
-						key={group}
-						group={group}
-						icon={sidePanelFiltersConfig[group].icon}
-						onClick={() => switchSidePanelTab(group)}
-					/>
+					<RoomListFiltersItem key={group} group={group} icon={sidePanelFiltersConfig[group].icon} />
 				))}
 			</Box>
 			<Divider borderColor='stroke-light' mb={4} mi={16} />
-			{showOmnichannel && (
-				<>
-					<Box role='tablist' aria-orientation='vertical'>
-						{Object.values(OMNICHANNEL_GROUPS).map((group) => (
-							<RoomListFiltersItem
-								key={group}
-								group={group}
-								icon={sidePanelFiltersConfig[group].icon}
-								onClick={() => switchSidePanelTab(group)}
-							/>
-						))}
-					</Box>
-					<Divider borderColor='stroke-light' mb={4} mi={16} />
-				</>
-			)}
+			{showOmnichannel && <OmnichannelFilters />}
 		</Box>
 	);
 });

apps/meteor/client/sidebarv2/RoomList/RoomListFiltersItem.tsx

@@ -8,20 +8,22 @@ import {
 	type SidePanelFiltersKeys,
 	sidePanelFiltersConfig,
 	useSidePanelFilter,
+	useSwitchSidePanelTab,
 } from '../../views/navigation/contexts/RoomsNavigationContext';
 import { useUnreadGroupData } from '../../views/navigation/contexts/RoomsNavigationContext';
 import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
 
 type SidebarFiltersItemProps = {
 	group: SidePanelFiltersKeys;
 	icon: IconName;
-	onClick: () => void;
 };
 
-const RoomListFiltersItem = ({ group, icon, onClick }: SidebarFiltersItemProps) => {
+const RoomListFiltersItem = ({ group, icon }: SidebarFiltersItemProps) => {
 	const { t } = useTranslation();
+	const switchSidePanelTab = useSwitchSidePanelTab();
+
 	const unreadGroupCount = useUnreadGroupData(group);
-	const buttonProps = useButtonPattern(onClick);
+	const buttonProps = useButtonPattern(() => switchSidePanelTab(group));
 	const [currentTab] = useSidePanelFilter();
 	const roomTitle = sidePanelFiltersConfig[group].title;
 	const { unreadTitle, unreadVariant, showUnread, unreadCount, highlightUnread: highlighted } = useUnreadDisplay(unreadGroupCount);

apps/meteor/client/views/navigation/sidepanel/SidePanelRouter.tsx

@@ -2,8 +2,11 @@ import SidePanelAll from './tabs/SidePanelAll';
 import { ALL_GROUPS, useRoomsListContext, useSidePanelFilter } from '../contexts/RoomsNavigationContext';
 import SidePanelDiscussions from './tabs/SidePanelDiscussions';
 import SidePanelFavorites from './tabs/SidePanelFavorites';
+import SidepanelInProgress from './tabs/SidePanelInProgress';
 import SidePanelMentions from './tabs/SidePanelMentions';
+import SidePanelQueue from './tabs/SidePanelQueue';
 import SidePanelRooms from './tabs/SidePanelRooms';
+import SidePanelOnHold from './tabs/SidepanelOnHold';
 
 const SidePanelRouter = () => {
 	const [currentTab] = useSidePanelFilter();
@@ -22,6 +25,12 @@ const SidePanelRouter = () => {
 		case ALL_GROUPS.CHANNELS:
 		case ALL_GROUPS.DIRECT_MESSAGES:
 			return parentRid ? <SidePanelRooms parentRid={parentRid} /> : null;
+		case ALL_GROUPS.IN_PROGRESS:
+			return <SidepanelInProgress />;
+		case ALL_GROUPS.ON_HOLD:
+			return <SidePanelOnHold />;
+		case ALL_GROUPS.QUEUE:
+			return <SidePanelQueue />;
 		default:
 			return null;
 	}

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelInProgress.tsx

@@ -0,0 +1,28 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import {
+	SIDE_PANEL_GROUPS,
+	sidePanelFiltersConfig,
+	useSidePanelRoomsListTab,
+	useUnreadOnlyToggle,
+} from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelInProgress = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.IN_PROGRESS);
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.IN_PROGRESS].title)}
+			currentTab={SIDE_PANEL_GROUPS.IN_PROGRESS}
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelInProgress;

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelQueue.tsx

@@ -0,0 +1,28 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import {
+	SIDE_PANEL_GROUPS,
+	sidePanelFiltersConfig,
+	useSidePanelRoomsListTab,
+	useUnreadOnlyToggle,
+} from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelQueue = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.QUEUE);
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.QUEUE].title)}
+			currentTab={SIDE_PANEL_GROUPS.QUEUE}
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelQueue;

apps/meteor/client/views/navigation/sidepanel/tabs/SidepanelOnHold.tsx

@@ -0,0 +1,28 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import {
+	SIDE_PANEL_GROUPS,
+	sidePanelFiltersConfig,
+	useSidePanelRoomsListTab,
+	useUnreadOnlyToggle,
+} from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelOnHold = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.ON_HOLD);
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.ON_HOLD].title)}
+			currentTab={SIDE_PANEL_GROUPS.ON_HOLD}
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelOnHold;

apps/meteor/ee/app/livechat-enterprise/server/settings.ts

@@ -88,6 +88,7 @@ export const createSettings = async (): Promise<void> => {
 				invalidValue: false,
 				modules: ['livechat-enterprise'],
 				enableQuery: omnichannelEnabledQuery,
+				public: true,
 			});
 
 			await this.add('Livechat_waiting_queue_message', '', {