Skip to content

Commit 242d112

Browse files
yash-rajpaldougfabris
yash-rajpal
and
dougfabris
committed
feat: Omnichannel filters (#36467)
Co-authored-by: dougfabris <[email protected]>
1 parent 188ab4d commit 242d112

File tree

8 files changed

+137
-33
lines changed

8 files changed

+137
-33
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Box, Divider } from '@rocket.chat/fuselage';
2+
import { usePermission, useSetting } from '@rocket.chat/ui-contexts';
3+
4+
import RoomListFiltersItem from './RoomListFiltersItem';
5+
import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
6+
import { OMNICHANNEL_GROUPS, sidePanelFiltersConfig } from '../../views/navigation/contexts/RoomsNavigationContext';
7+
8+
const OmnichannelFilters = () => {
9+
const hasModule = useHasLicenseModule('livechat-enterprise');
10+
const hasAccess = usePermission('view-l-room');
11+
const canViewOmnichannelQueue = usePermission('view-livechat-queue');
12+
const queueEnabled = useSetting('Livechat_waiting_queue');
13+
14+
if (!hasAccess) {
15+
return null;
16+
}
17+
18+
return (
19+
<>
20+
<Box role='tablist' aria-orientation='vertical'>
21+
<RoomListFiltersItem group={OMNICHANNEL_GROUPS.IN_PROGRESS} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.IN_PROGRESS].icon} />
22+
{hasModule && queueEnabled && canViewOmnichannelQueue && (
23+
<RoomListFiltersItem group={OMNICHANNEL_GROUPS.QUEUE} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.QUEUE].icon} />
24+
)}
25+
{hasModule && (
26+
<RoomListFiltersItem group={OMNICHANNEL_GROUPS.ON_HOLD} icon={sidePanelFiltersConfig[OMNICHANNEL_GROUPS.ON_HOLD].icon} />
27+
)}
28+
</Box>
29+
<Divider borderColor='stroke-light' mb={4} mi={16} />
30+
</>
31+
);
32+
};
33+
34+
export default OmnichannelFilters;

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

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,15 @@ import { Divider, Box } from '@rocket.chat/fuselage';
22
import { forwardRef } from 'react';
33
import type { Components } from 'react-virtuoso';
44

5+
import OmnichannelFilters from './OmnichannelFilters';
56
import RoomListFiltersItem from './RoomListFiltersItem';
67
import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
7-
import {
8-
sidePanelFiltersConfig,
9-
OMNICHANNEL_GROUPS,
10-
SIDE_PANEL_GROUPS,
11-
TEAM_COLLAB_GROUPS,
12-
useSwitchSidePanelTab,
13-
} from '../../views/navigation/contexts/RoomsNavigationContext';
8+
import { sidePanelFiltersConfig, SIDE_PANEL_GROUPS, TEAM_COLLAB_GROUPS } from '../../views/navigation/contexts/RoomsNavigationContext';
149

1510
const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrapper(_, ref) {
1611
// const favoritesEnabled = useUserPreference('sidebarShowFavorites', true);
1712
const showOmnichannel = useOmnichannelEnabled();
1813

19-
const switchSidePanelTab = useSwitchSidePanelTab();
20-
2114
if (Object.values(SIDE_PANEL_GROUPS).length === 0) {
2215
return null;
2316
}
@@ -26,30 +19,11 @@ const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrappe
2619
<Box ref={ref} display='flex' flexDirection='column'>
2720
<Box role='tablist' aria-orientation='vertical' mbs={8}>
2821
{Object.values(TEAM_COLLAB_GROUPS).map((group) => (
29-
<RoomListFiltersItem
30-
key={group}
31-
group={group}
32-
icon={sidePanelFiltersConfig[group].icon}
33-
onClick={() => switchSidePanelTab(group)}
34-
/>
22+
<RoomListFiltersItem key={group} group={group} icon={sidePanelFiltersConfig[group].icon} />
3523
))}
3624
</Box>
3725
<Divider borderColor='stroke-light' mb={4} mi={16} />
38-
{showOmnichannel && (
39-
<>
40-
<Box role='tablist' aria-orientation='vertical'>
41-
{Object.values(OMNICHANNEL_GROUPS).map((group) => (
42-
<RoomListFiltersItem
43-
key={group}
44-
group={group}
45-
icon={sidePanelFiltersConfig[group].icon}
46-
onClick={() => switchSidePanelTab(group)}
47-
/>
48-
))}
49-
</Box>
50-
<Divider borderColor='stroke-light' mb={4} mi={16} />
51-
</>
52-
)}
26+
{showOmnichannel && <OmnichannelFilters />}
5327
</Box>
5428
);
5529
});

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,22 @@ import {
88
type SidePanelFiltersKeys,
99
sidePanelFiltersConfig,
1010
useSidePanelFilter,
11+
useSwitchSidePanelTab,
1112
} from '../../views/navigation/contexts/RoomsNavigationContext';
1213
import { useUnreadGroupData } from '../../views/navigation/contexts/RoomsNavigationContext';
1314
import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
1415

1516
type SidebarFiltersItemProps = {
1617
group: SidePanelFiltersKeys;
1718
icon: IconName;
18-
onClick: () => void;
1919
};
2020

21-
const RoomListFiltersItem = ({ group, icon, onClick }: SidebarFiltersItemProps) => {
21+
const RoomListFiltersItem = ({ group, icon }: SidebarFiltersItemProps) => {
2222
const { t } = useTranslation();
23+
const switchSidePanelTab = useSwitchSidePanelTab();
24+
2325
const unreadGroupCount = useUnreadGroupData(group);
24-
const buttonProps = useButtonPattern(onClick);
26+
const buttonProps = useButtonPattern(() => switchSidePanelTab(group));
2527
const [currentTab] = useSidePanelFilter();
2628
const roomTitle = sidePanelFiltersConfig[group].title;
2729
const { unreadTitle, unreadVariant, showUnread, unreadCount, highlightUnread: highlighted } = useUnreadDisplay(unreadGroupCount);

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import SidePanelAll from './tabs/SidePanelAll';
22
import { ALL_GROUPS, useRoomsListContext, useSidePanelFilter } from '../contexts/RoomsNavigationContext';
33
import SidePanelDiscussions from './tabs/SidePanelDiscussions';
44
import SidePanelFavorites from './tabs/SidePanelFavorites';
5+
import SidepanelInProgress from './tabs/SidePanelInProgress';
56
import SidePanelMentions from './tabs/SidePanelMentions';
7+
import SidePanelQueue from './tabs/SidePanelQueue';
68
import SidePanelRooms from './tabs/SidePanelRooms';
9+
import SidePanelOnHold from './tabs/SidepanelOnHold';
710

811
const SidePanelRouter = () => {
912
const [currentTab] = useSidePanelFilter();
@@ -22,6 +25,12 @@ const SidePanelRouter = () => {
2225
case ALL_GROUPS.CHANNELS:
2326
case ALL_GROUPS.DIRECT_MESSAGES:
2427
return parentRid ? <SidePanelRooms parentRid={parentRid} /> : null;
28+
case ALL_GROUPS.IN_PROGRESS:
29+
return <SidepanelInProgress />;
30+
case ALL_GROUPS.ON_HOLD:
31+
return <SidePanelOnHold />;
32+
case ALL_GROUPS.QUEUE:
33+
return <SidePanelQueue />;
2534
default:
2635
return null;
2736
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
2+
import { useTranslation } from 'react-i18next';
3+
4+
import {
5+
SIDE_PANEL_GROUPS,
6+
sidePanelFiltersConfig,
7+
useSidePanelRoomsListTab,
8+
useUnreadOnlyToggle,
9+
} from '../../contexts/RoomsNavigationContext';
10+
import SidePanel from '../SidePanel';
11+
12+
const SidePanelInProgress = () => {
13+
const { t } = useTranslation();
14+
const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.IN_PROGRESS);
15+
const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
16+
17+
return (
18+
<SidePanel
19+
title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.IN_PROGRESS].title)}
20+
currentTab={SIDE_PANEL_GROUPS.IN_PROGRESS}
21+
unreadOnly={unreadOnly}
22+
toggleUnreadOnly={toggleUnreadOnly}
23+
rooms={rooms as SubscriptionWithRoom[]}
24+
/>
25+
);
26+
};
27+
28+
export default SidePanelInProgress;

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
2+
import { useTranslation } from 'react-i18next';
3+
4+
import {
5+
SIDE_PANEL_GROUPS,
6+
sidePanelFiltersConfig,
7+
useSidePanelRoomsListTab,
8+
useUnreadOnlyToggle,
9+
} from '../../contexts/RoomsNavigationContext';
10+
import SidePanel from '../SidePanel';
11+
12+
const SidePanelQueue = () => {
13+
const { t } = useTranslation();
14+
const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.QUEUE);
15+
const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
16+
17+
return (
18+
<SidePanel
19+
title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.QUEUE].title)}
20+
currentTab={SIDE_PANEL_GROUPS.QUEUE}
21+
unreadOnly={unreadOnly}
22+
toggleUnreadOnly={toggleUnreadOnly}
23+
rooms={rooms as SubscriptionWithRoom[]}
24+
/>
25+
);
26+
};
27+
28+
export default SidePanelQueue;

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
2+
import { useTranslation } from 'react-i18next';
3+
4+
import {
5+
SIDE_PANEL_GROUPS,
6+
sidePanelFiltersConfig,
7+
useSidePanelRoomsListTab,
8+
useUnreadOnlyToggle,
9+
} from '../../contexts/RoomsNavigationContext';
10+
import SidePanel from '../SidePanel';
11+
12+
const SidePanelOnHold = () => {
13+
const { t } = useTranslation();
14+
const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.ON_HOLD);
15+
const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
16+
17+
return (
18+
<SidePanel
19+
title={t(sidePanelFiltersConfig[SIDE_PANEL_GROUPS.ON_HOLD].title)}
20+
currentTab={SIDE_PANEL_GROUPS.ON_HOLD}
21+
unreadOnly={unreadOnly}
22+
toggleUnreadOnly={toggleUnreadOnly}
23+
rooms={rooms as SubscriptionWithRoom[]}
24+
/>
25+
);
26+
};
27+
28+
export default SidePanelOnHold;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export const createSettings = async (): Promise<void> => {
8888
invalidValue: false,
8989
modules: ['livechat-enterprise'],
9090
enableQuery: omnichannelEnabledQuery,
91+
public: true,
9192
});
9293

9394
await this.add('Livechat_waiting_queue_message', '', {

0 commit comments

Comments
 (0)