regression: Enhanced navigation filters regressions (#36748)

Author: dougfabris

apps/meteor/client/NavBarV2/NavBarPagesGroup/NavBarItemSort.tsx

@@ -0,0 +1,18 @@
+import { SidebarV2Action } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSortMenu } from './hooks/useSortMenu';
+
+type NavBarItemSortProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemSort = (props: NavBarItemSortProps) => {
+	const { t } = useTranslation();
+
+	const sections = useSortMenu();
+
+	return <GenericMenu icon='sort' sections={sections} title={t('Display')} selectionMode='multiple' is={SidebarV2Action} {...props} />;
+};
+
+export default NavBarItemSort;

apps/meteor/client/NavBarV2/NavBarPagesGroup/NavBarPagesGroup.tsx

@@ -6,6 +6,7 @@ import NavBarItemCreateNew from './NavBarItemCreateNew';
 import NavBarItemDirectoryPage from './NavBarItemDirectoryPage';
 import NavBarItemHomePage from './NavBarItemHomePage';
 import NavBarItemMarketPlaceMenu from './NavBarItemMarketPlaceMenu';
+import NavBarItemSort from './NavBarItemSort';
 import NavBarPagesStackMenu from './NavBarPagesStackMenu';
 
 const NavBarPagesGroup = () => {
@@ -26,6 +27,7 @@ const NavBarPagesGroup = () => {
 				</>
 			)}
 			{showMarketplace && !isMobile && <NavBarItemMarketPlaceMenu />}
+			{!isMobile && <NavBarItemSort />}
 			<NavBarItemCreateNew />
 		</NavBarGroup>
 	);

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useGroupingListItems.tsx

@@ -0,0 +1,35 @@
+import { CheckBox } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useGroupingListItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+
+	const sidebarGroupByType = useUserPreference<boolean>('sidebarGroupByType');
+	const sidebarShowUnread = useUserPreference<boolean>('sidebarShowUnread');
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const useHandleChange = (key: 'sidebarGroupByType' | 'sidebarShowUnread', value: boolean): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { [key]: value } }), [key, value]);
+
+	const handleChangeGroupByType = useHandleChange('sidebarGroupByType', !sidebarGroupByType);
+	const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread);
+
+	return [
+		{
+			id: 'unread',
+			content: t('Unread'),
+			icon: 'flag',
+			addon: <CheckBox onChange={handleChangeShowUnread} checked={sidebarShowUnread} />,
+		},
+		{
+			id: 'types',
+			content: t('Types'),
+			icon: 'group-by-type',
+			addon: <CheckBox onChange={handleChangeGroupByType} checked={sidebarGroupByType} />,
+		},
+	];
+};

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useGrouppingListItems.spec.tsx

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+
+import { useGroupingListItems } from './useGroupingListItems';
+
+it('should render groupingList items', async () => {
+	const { result } = renderHook(() => useGroupingListItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'unread',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'types',
+		}),
+	);
+});

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useSortMenu.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next';
+
+import { useGroupingListItems } from './useGroupingListItems';
+import { useSortModeItems } from './useSortModeItems';
+
+export const useSortMenu = () => {
+	const { t } = useTranslation();
+
+	const sortModeItems = useSortModeItems();
+	const groupingListItems = useGroupingListItems();
+
+	const sections = [
+		{ title: t('Sort_By'), items: sortModeItems },
+		{ title: t('Group_by'), items: groupingListItems },
+	];
+
+	return sections;
+};

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useSortModeItems.spec.tsx

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+
+import { useSortModeItems } from './useSortModeItems';
+
+it('should render sortMode items', async () => {
+	const { result } = renderHook(() => useSortModeItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'activity',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'name',
+		}),
+	);
+});

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useSortModeItems.tsx

@@ -0,0 +1,41 @@
+import { RadioButton } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	OmnichannelSortingDisclaimer,
+	useOmnichannelSortingDisclaimer,
+} from '../../../components/Omnichannel/OmnichannelSortingDisclaimer';
+
+export const useSortModeItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+	const sidebarSortBy = useUserPreference<'activity' | 'alphabetical'>('sidebarSortby', 'activity');
+	const isOmnichannelEnabled = useOmnichannelSortingDisclaimer();
+
+	const useHandleChange = (value: 'alphabetical' | 'activity'): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { sidebarSortby: value } }), [value]);
+
+	const setToAlphabetical = useHandleChange('alphabetical');
+	const setToActivity = useHandleChange('activity');
+
+	return [
+		{
+			id: 'activity',
+			content: t('Activity'),
+			icon: 'clock',
+			addon: <RadioButton onChange={setToActivity} checked={sidebarSortBy === 'activity'} />,
+			description: sidebarSortBy === 'activity' && isOmnichannelEnabled && <OmnichannelSortingDisclaimer />,
+		},
+		{
+			id: 'name',
+			content: t('Name'),
+			icon: 'sort-az',
+			addon: <RadioButton onChange={setToAlphabetical} checked={sidebarSortBy === 'alphabetical'} />,
+			description: sidebarSortBy === 'alphabetical' && isOmnichannelEnabled && <OmnichannelSortingDisclaimer />,
+		},
+	];
+};

apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx

@@ -9,7 +9,6 @@ type GenericNoResultsProps = {
 	icon?: IconName | null;
 	title?: string;
 	description?: string;
-	buttonPrimary?: boolean;
 } & LinkProps &
 	ButtonProps;
 
@@ -19,7 +18,6 @@ const GenericNoResults = ({
 	description,
 	buttonTitle,
 	buttonAction,
-	buttonPrimary = true,
 	linkHref,
 	linkText,
 }: GenericNoResultsProps) => {
@@ -33,9 +31,7 @@ const GenericNoResults = ({
 				{description && <StatesSubtitle>{description}</StatesSubtitle>}
 				{buttonTitle && buttonAction && (
 					<StatesActions>
-						<StatesAction primary={buttonPrimary} onClick={buttonAction}>
-							{buttonTitle}
-						</StatesAction>
+						<StatesAction onClick={buttonAction}>{buttonTitle}</StatesAction>
 					</StatesActions>
 				)}
 				{linkText && linkHref && (

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

@@ -26,7 +26,7 @@ const SidebarItem = ({ icon, title, actions, unread, menu, badges, room, ...prop
 	const handlePointerEnter = () => setMenuVisibility(true);
 
 	return (
-		<SidebarV2Item {...props} onFocus={handleFocus} onPointerEnter={handlePointerEnter}>
+		<SidebarV2Item {...props} title={title} onFocus={handleFocus} onPointerEnter={handlePointerEnter}>
 			<SidebarV2ItemAvatarWrapper>
 				<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />
 			</SidebarV2ItemAvatarWrapper>

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

@@ -29,6 +29,8 @@ type RoomListRowProps = {
 
 const SidebarItemWithData = ({ room, id, style, t, videoConfActions }: RoomListRowProps) => {
 	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
 	const { unreadTitle, unreadVariant, showUnread, unreadCount, highlightUnread: highlighted } = useUnreadDisplay(room);
 
 	const icon = (
@@ -85,17 +87,15 @@ const SidebarItemWithData = ({ room, id, style, t, videoConfActions }: RoomListR
 		switchSidePanelTab('channels', { parentRid: room.rid });
 	}, [room, switchSidePanelTab]);
 
-	const buttonProps = useButtonPattern((e) => {
-		e.preventDefault();
-		handleClick();
-	});
+	const buttonProps = useButtonPattern(handleClick);
 
 	return (
 		<SidebarItem
 			id={id}
 			data-qa='sidebar-item'
 			data-unread={highlighted}
 			unread={highlighted}
+			href={href}
 			selected={selected}
 			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
 			title={title}