Skip to content

Commit

Permalink
feat: add unread badge to sidebar collapser (#33897)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliajforesti
juliajforesti authored Nov 12, 2024
1 parent 4de6ea6 commit 92b6a50
Show file tree
Hide file tree
Showing 10 changed files with 260 additions and 80 deletions.
5 changes: 5 additions & 0 deletions .changeset/friendly-ravens-teach.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': minor
---

adds unread badge to sidebar collapser
12 changes: 7 additions & 5 deletions apps/meteor/client/sidebarv2/RoomList/RoomList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, SidebarV2CollapseGroup } from '@rocket.chat/fuselage';
import { Box } from '@rocket.chat/fuselage';
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
import React, { useMemo } from 'react';
Expand All @@ -13,6 +13,7 @@ import { usePreventDefault } from '../hooks/usePreventDefault';
import { useRoomList } from '../hooks/useRoomList';
import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
import RoomListCollapser from './RoomListCollapser';
import RoomListRow from './RoomListRow';
import RoomListRowWrapper from './RoomListRowWrapper';
import RoomListWrapper from './RoomListWrapper';
Expand All @@ -22,7 +23,7 @@ const RoomList = () => {
const isAnonymous = !useUserId();

const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups();
const { groupsCount, groupsList, roomList } = useRoomList({ collapsedGroups });
const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useRoomList({ collapsedGroups });
const avatarTemplate = useAvatarTemplate();
const sideBarItemTemplate = useTemplateByViewMode();
const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
Expand Down Expand Up @@ -51,11 +52,12 @@ const RoomList = () => {
<GroupedVirtuoso
groupCounts={groupsCount}
groupContent={(index) => (
<SidebarV2CollapseGroup
title={t(groupsList[index])}
<RoomListCollapser
collapsedGroups={collapsedGroups}
onClick={() => handleClick(groupsList[index])}
onKeyDown={(e) => handleKeyDown(e, groupsList[index])}
expanded={!collapsedGroups.includes(groupsList[index])}
groupTitle={groupsList[index]}
unreadCount={groupedUnreadInfo[index]}
/>
)}
{...(roomList.length > 0 && {
Expand Down
37 changes: 37 additions & 0 deletions apps/meteor/client/sidebarv2/RoomList/RoomListCollapser.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { ISubscription } from '@rocket.chat/core-typings';
import { Badge, SidebarV2CollapseGroup } from '@rocket.chat/fuselage';
import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { useUnreadDisplay } from '../hooks/useUnreadDisplay';

type RoomListCollapserProps = {
groupTitle: string;
collapsedGroups: string[];
onClick: MouseEventHandler<HTMLElement>;
onKeyDown: (e: KeyboardEvent) => void;
unreadCount: Pick<ISubscription, 'userMentions' | 'groupMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'tunreadGroup'>;
} & Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown'>;
const RoomListCollapser = ({ groupTitle, unreadCount: unreadGroupCount, collapsedGroups, ...props }: RoomListCollapserProps) => {
const { t } = useTranslation();

const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);

return (
<SidebarV2CollapseGroup
title={t(groupTitle)}
expanded={!collapsedGroups.includes(groupTitle)}
badge={
showUnread ? (
<Badge variant={unreadVariant} title={unreadTitle} aria-label={unreadTitle} role='status'>
{unreadCount.total}
</Badge>
) : undefined
}
{...props}
/>
);
};

export default RoomListCollapser;
78 changes: 52 additions & 26 deletions apps/meteor/client/sidebarv2/hooks/useRoomList.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,43 +13,53 @@ const user = createFakeUser({
type: 'user',
});

const unreadRooms = [
{ ...createFakeSubscription({ t: 'c', unread: 1 }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', unread: 1 }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', unread: 1 }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', unread: 1 }), ...createFakeRoom({ t: 'c' }) },
const emptyUnread = {
userMentions: 0,
groupMentions: 0,
unread: 0,
tunread: undefined,
tunreadUser: undefined,
tunreadGroup: undefined,
alert: false,
};

const unreadChannels = [
{ ...createFakeSubscription({ t: 'c', tunread: ['1'] }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', tunread: ['1'] }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', tunreadUser: ['1'] }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', tunreadUser: ['1'] }), ...createFakeRoom({ t: 'c' }) },
];

const favoriteRooms = [
{ ...createFakeSubscription({ t: 'c', f: true, unread: undefined }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', f: true, unread: undefined }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', f: true, unread: undefined }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', f: true, ...emptyUnread }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', f: true, ...emptyUnread }), ...createFakeRoom({ t: 'c' }) },
{ ...createFakeSubscription({ t: 'c', f: true, ...emptyUnread }), ...createFakeRoom({ t: 'c' }) },
];

const teams = [
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ teamMain: true }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ teamMain: true }) },
];

const discussionRooms = [
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ prid: '123' }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ prid: '124' }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ prid: '125' }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ prid: '126' }) },
{ ...createFakeSubscription({ unread: undefined }), ...createFakeRoom({ prid: '127' }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ prid: '123' }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ prid: '124' }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ prid: '125' }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ prid: '126' }) },
{ ...createFakeSubscription({ ...emptyUnread }), ...createFakeRoom({ prid: '127' }) },
];

const directRooms = [
{ ...createFakeSubscription({ t: 'd', unread: undefined }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', unread: undefined }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', unread: undefined }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', unread: undefined }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', ...emptyUnread }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', ...emptyUnread }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', ...emptyUnread }), ...createFakeRoom({ t: 'd' }) },
{ ...createFakeSubscription({ t: 'd', ...emptyUnread }), ...createFakeRoom({ t: 'd' }) },
];

const fakeRooms = [...unreadRooms, ...favoriteRooms, ...teams, ...discussionRooms, ...directRooms];
const fakeRooms = [...unreadChannels, ...favoriteRooms, ...teams, ...discussionRooms, ...directRooms];

const emptyArr: any[] = [];

Expand Down Expand Up @@ -228,7 +238,7 @@ it('should return "Unread" group with the correct items if sidebarShowUnread is
});
const unreadIndex = result.current.groupsList.indexOf('Unread');
expect(result.current.groupsList).toContain('Unread');
expect(result.current.groupsCount[unreadIndex]).toEqual(unreadRooms.length);
expect(result.current.groupsCount[unreadIndex]).toEqual(unreadChannels.length);
});

it('should not include unread room in unread group if hideUnreadStatus is enabled', async () => {
Expand All @@ -246,6 +256,22 @@ it('should not include unread room in unread group if hideUnreadStatus is enable
const unreadIndex = result.current.groupsList.indexOf('Unread');
const roomListUnread = result.current.roomList.filter((room) => room.unread);

expect(result.current.groupsCount[unreadIndex]).toEqual(unreadRooms.length);
expect(roomListUnread.length).not.toEqual(unreadRooms.length);
expect(result.current.groupsCount[unreadIndex]).toEqual(unreadChannels.length);
expect(roomListUnread.length).not.toEqual(unreadChannels.length);
});

it('should accumulate unread data into `groupedUnreadInfo` when group is collapsed', async () => {
const { result } = renderHook(() => useRoomList({ collapsedGroups: ['Channels'] }), {
legacyRoot: true,
wrapper: getWrapperSettings({ sidebarGroupByType: true }).build(),
});

const channelsIndex = result.current.groupsList.indexOf('Channels');
const { groupMentions, unread, userMentions, tunread, tunreadUser } = result.current.groupedUnreadInfo[channelsIndex];

expect(groupMentions).toEqual(fakeRooms.reduce((acc, cv) => acc + cv.groupMentions, 0));
expect(unread).toEqual(fakeRooms.reduce((acc, cv) => acc + cv.unread, 0));
expect(userMentions).toEqual(fakeRooms.reduce((acc, cv) => acc + cv.userMentions, 0));
expect(tunread).toEqual(fakeRooms.reduce((acc, cv) => [...acc, ...(cv.tunread || [])], [] as string[]));
expect(tunreadUser).toEqual(fakeRooms.reduce((acc, cv) => [...acc, ...(cv.tunreadUser || [])], [] as string[]));
});
57 changes: 42 additions & 15 deletions apps/meteor/client/sidebarv2/hooks/useRoomList.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { ILivechatInquiryRecord, IRoom, ISubscription } from '@rocket.chat/core-typings';
import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
import { useMemo } from 'react';

Expand All @@ -27,15 +27,16 @@ const order = [
'Conversations',
] as const;

export const useRoomList = ({
collapsedGroups,
}: {
collapsedGroups?: string[];
}): {
type useRoomListReturnType = {
roomList: Array<ISubscription & IRoom>;
groupsCount: number[];
groupsList: TranslationKey[];
} => {
groupedUnreadInfo: Pick<
SubscriptionWithRoom,
'userMentions' | 'groupMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'tunreadGroup' | 'alert' | 'hideUnreadStatus'
>[];
};
export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] }): useRoomListReturnType => {
const showOmnichannel = useOmnichannelEnabled();
const sidebarGroupByType = useUserPreference('sidebarGroupByType');
const favoritesEnabled = useUserPreference('sidebarShowFavorites');
Expand All @@ -53,7 +54,7 @@ export const useRoomList = ({

const queue = inquiries.enabled ? inquiries.queue : emptyQueue;

const { groupsCount, groupsList, roomList } = useDebouncedValue(
const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useDebouncedValue(
useMemo(() => {
const isCollapsed = (groupTitle: string) => collapsedGroups?.includes(groupTitle);

Expand Down Expand Up @@ -133,7 +134,7 @@ export const useRoomList = ({

!sidebarGroupByType && groups.set('Conversations', conversation);

const { groupsCount, groupsList, roomList } = sidebarOrder.reduce(
const { groupsCount, groupsList, roomList, groupedUnreadInfo } = sidebarOrder.reduce(
(acc, key) => {
const value = groups.get(key);

Expand All @@ -142,11 +143,39 @@ export const useRoomList = ({
}

acc.groupsList.push(key as TranslationKey);

const groupedUnreadInfoAcc = {
userMentions: 0,
groupMentions: 0,
tunread: [],
tunreadUser: [],
unread: 0,
};

if (isCollapsed(key)) {
const groupedUnreadInfo = [...value].reduce(
(counter, { userMentions, groupMentions, tunread, tunreadUser, unread, alert, hideUnreadStatus }) => {
if (hideUnreadStatus) {
return counter;
}

counter.userMentions += userMentions || 0;
counter.groupMentions += groupMentions || 0;
counter.tunread = [...counter.tunread, ...(tunread || [])];
counter.tunreadUser = [...counter.tunreadUser, ...(tunreadUser || [])];
counter.unread += unread || 0;
!unread && !tunread?.length && alert && (counter.unread += 1);
return counter;
},
groupedUnreadInfoAcc,
);

acc.groupedUnreadInfo.push(groupedUnreadInfo);
acc.groupsCount.push(0);
return acc;
}

acc.groupedUnreadInfo.push(groupedUnreadInfoAcc);
acc.groupsCount.push(value.size);
acc.roomList.push(...value);
return acc;
Expand All @@ -155,14 +184,11 @@ export const useRoomList = ({
groupsCount: [],
groupsList: [],
roomList: [],
} as {
groupsCount: number[];
groupsList: TranslationKey[];
roomList: Array<ISubscription & IRoom>;
},
groupedUnreadInfo: [],
} as useRoomListReturnType,
);

return { groupsCount, groupsList, roomList };
return { groupsCount, groupsList, roomList, groupedUnreadInfo };
}, [
rooms,
showOmnichannel,
Expand All @@ -183,5 +209,6 @@ export const useRoomList = ({
roomList,
groupsCount,
groupsList,
groupedUnreadInfo,
};
};
34 changes: 27 additions & 7 deletions apps/meteor/tests/e2e/feature-preview.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Users } from './fixtures/userStates';
import { AccountProfile, HomeChannel } from './page-objects';
import { setSettingValueById } from './utils';
import { createTargetChannel, setSettingValueById } from './utils';
import { setUserPreferences } from './utils/setUserPreferences';
import { test, expect } from './utils/test';

Expand All @@ -9,13 +9,16 @@ test.use({ storageState: Users.admin.state });
test.describe.serial('feature preview', () => {
let poHomeChannel: HomeChannel;
let poAccountProfile: AccountProfile;
let targetChannel: string;

test.beforeAll(async ({ api }) => {
await setSettingValueById(api, 'Accounts_AllowFeaturePreview', true);
targetChannel = await createTargetChannel(api);
});

test.afterAll(async ({ api }) => {
await setSettingValueById(api, 'Accounts_AllowFeaturePreview', false);
await api.post('/channels.delete', { roomName: targetChannel });
});

test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -73,13 +76,13 @@ test.describe.serial('feature preview', () => {
test('should display "Recent" button on sidebar search section, and display recent chats when clicked', async ({ page }) => {
await page.goto('/home');

await poHomeChannel.sidenav.btnRecent.click();
await expect(poHomeChannel.sidenav.sidebar.getByRole('heading', { name: 'Recent' })).toBeVisible();
await poHomeChannel.sidebar.btnRecent.click();
await expect(poHomeChannel.sidebar.sidebar.getByRole('heading', { name: 'Recent' })).toBeVisible();
});

test('should expand/collapse sidebar groups', async ({ page }) => {
await page.goto('/home');
const collapser = poHomeChannel.sidenav.firstCollapser;
const collapser = poHomeChannel.sidebar.firstCollapser;
let isExpanded: boolean;

await collapser.click();
Expand All @@ -94,7 +97,7 @@ test.describe.serial('feature preview', () => {
test('should expand/collapse sidebar groups with keyboard', async ({ page }) => {
await page.goto('/home');

const collapser = poHomeChannel.sidenav.firstCollapser;
const collapser = poHomeChannel.sidebar.firstCollapser;

await expect(async () => {
await collapser.focus();
Expand All @@ -115,7 +118,7 @@ test.describe.serial('feature preview', () => {
test('should be able to use keyboard to navigate through sidebar items', async ({ page }) => {
await page.goto('/home');

const collapser = poHomeChannel.sidenav.firstCollapser;
const collapser = poHomeChannel.sidebar.firstCollapser;
const dataIndex = await collapser.locator('../..').getAttribute('data-index');
const nextItem = page.locator(`[data-index="${Number(dataIndex) + 1}"]`).getByRole('link');

Expand All @@ -129,7 +132,7 @@ test.describe.serial('feature preview', () => {
test('should persist collapsed/expanded groups after page reload', async ({ page }) => {
await page.goto('/home');

const collapser = poHomeChannel.sidenav.firstCollapser;
const collapser = poHomeChannel.sidebar.firstCollapser;
await collapser.click();
const isExpanded = await collapser.getAttribute('aria-expanded');

Expand All @@ -138,5 +141,22 @@ test.describe.serial('feature preview', () => {
const isExpandedAfterReload = await collapser.getAttribute('aria-expanded');
expect(isExpanded).toEqual(isExpandedAfterReload);
});

test('should show unread badge on collapser when group is collapsed and has unread items', async ({ page }) => {
await page.goto('/home');

await poHomeChannel.sidebar.openChat(targetChannel);
await poHomeChannel.content.sendMessage('hello world');

await poHomeChannel.sidebar.typeSearch(targetChannel);
const item = poHomeChannel.sidebar.getSearchRoomByName(targetChannel);
await poHomeChannel.sidebar.markItemAsUnread(item);
await poHomeChannel.sidebar.escSearch();

const collapser = poHomeChannel.sidebar.firstCollapser;
await collapser.click();

await expect(poHomeChannel.sidebar.getItemUnreadBadge(collapser)).toBeVisible();
});
});
});
Loading

0 comments on commit 92b6a50

Please sign in to comment.