regression: Sidebar should collapse in tablet view under feature preview only

apps/meteor/client/components/Page/PageHeaderNoShadow.tsx

@@ -5,7 +5,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HeaderToolbar } from '../Header';
-import { SidebarTogglerV2 } from '../SidebarTogglerV2';
+import SidebarToggler from '../SidebarToggler';
 
 type PageHeaderProps = {
 	title: ReactNode;
@@ -36,7 +36,7 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props
 					<FeaturePreview feature='newNavigation'>
 						<FeaturePreviewOff>
 							<HeaderToolbar>
-								<SidebarTogglerV2 />
+								<SidebarToggler />
 							</HeaderToolbar>
 						</FeaturePreviewOff>
 						<FeaturePreviewOn>{null}</FeaturePreviewOn>

apps/meteor/client/providers/LayoutProvider.tsx

@@ -1,4 +1,5 @@
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
 import { LayoutContext, useRouter, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactNode } from 'react';
 import { useMemo, useState, useEffect } from 'react';
@@ -20,6 +21,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 	const [navBarSearchExpanded, setNavBarSearchExpanded] = useState(false);
 	const breakpoints = useBreakpoints(); // ["xs", "sm", "md", "lg", "xl", xxl"]
 	const [hiddenActions, setHiddenActions] = useState(hiddenActionsDefaultValue);
+	const enhancedNavigationEnabled = useFeaturePreview('newNavigation');
 
 	const router = useRouter();
 	// Once the layout is embedded, it can't be changed
@@ -28,7 +30,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 	const isMobile = !breakpoints.includes('md');
 	const isTablet = !breakpoints.includes('lg');
 
-	const shouldToggle = isTablet || isMobile;
+	const shouldToggle = enhancedNavigationEnabled ? isTablet || isMobile : isMobile;
 
 	useEffect(() => {
 		setIsCollapsed(shouldToggle);

apps/meteor/client/providers/MeteorProvider.tsx

@@ -38,9 +38,9 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => (
 						<SessionProvider>
 							<TooltipProvider>
 								<ToastMessagesProvider>
-									<LayoutProvider>
-										<AvatarUrlProvider>
-											<UserProvider>
+									<AvatarUrlProvider>
+										<UserProvider>
+											<LayoutProvider>
 												<AuthenticationProvider>
 													<CustomSoundProvider>
 														<DeviceProvider>
@@ -66,9 +66,9 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => (
 														</DeviceProvider>
 													</CustomSoundProvider>
 												</AuthenticationProvider>
-											</UserProvider>
-										</AvatarUrlProvider>
-									</LayoutProvider>
+											</LayoutProvider>
+										</UserProvider>
+									</AvatarUrlProvider>
 								</ToastMessagesProvider>
 							</TooltipProvider>
 						</SessionProvider>

apps/meteor/client/views/room/NotSubscribedRoom.tsx

@@ -6,7 +6,7 @@ import type { ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import RoomLayout from './layout/RoomLayout';
-import { SidebarTogglerV2 } from '../../components/SidebarTogglerV2';
+import SidebarToggler from '../../components/SidebarToggler';
 import { useJoinRoom } from '../../hooks/useJoinRoom';
 
 type NotSubscribedRoomProps = {
@@ -30,7 +30,7 @@ const NotSubscribedRoom = ({ rid, reference, type }: NotSubscribedRoomProps): Re
 						<FeaturePreviewOff>
 							<Header justifyContent='start'>
 								<HeaderToolbar>
-									<SidebarTogglerV2 />
+									<SidebarToggler />
 								</HeaderToolbar>
 							</Header>
 						</FeaturePreviewOff>

apps/meteor/client/views/room/RoomNotFound.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import RoomLayout from './layout/RoomLayout';
 import NotFoundState from '../../components/NotFoundState';
-import { SidebarTogglerV2 } from '../../components/SidebarTogglerV2';
+import SidebarToggler from '../../components/SidebarToggler';
 
 const RoomNotFound = (): ReactElement => {
 	const { t } = useTranslation();
@@ -20,7 +20,7 @@ const RoomNotFound = (): ReactElement => {
 						<FeaturePreviewOff>
 							<Header justifyContent='start'>
 								<HeaderToolbar>
-									<SidebarTogglerV2 />
+									<SidebarToggler />
 								</HeaderToolbar>
 							</Header>
 						</FeaturePreviewOff>

apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts

@@ -61,6 +61,18 @@ export class HomeSidenav {
 		return this.sidebarToolbar.getByRole('button', { name: 'Home' });
 	}
 
+	get btnDisplay(): Locator {
+		return this.sidebarToolbar.getByRole('button', { name: 'Display' });
+	}
+
+	get btnCreateNew(): Locator {
+		return this.sidebarToolbar.getByRole('button', { name: 'Create new' });
+	}
+
+	get btnAdministration(): Locator {
+		return this.sidebarToolbar.getByRole('button', { name: 'Administration' });
+	}
+
 	async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise<void> {
 		await this.sidebarToolbar.getByRole('button', { name: 'Display', exact: true }).click();
 		await this.sidebarToolbar.getByRole('menuitemcheckbox', { name: mode }).click();

apps/meteor/tests/e2e/sidebar.spec.ts

@@ -14,6 +14,14 @@ test.describe.serial('sidebar', () => {
 		await page.waitForSelector('main');
 	});
 
+	test('should sidebar`s toolbar buttons not be disabled in tablet view', async ({ page }) => {
+		await page.setViewportSize({ width: 1023, height: 767 });
+
+		await expect(poHomeChannel.sidenav.btnDisplay).not.toBeDisabled();
+		await expect(poHomeChannel.sidenav.btnCreateNew).not.toBeDisabled();
+		await expect(poHomeChannel.sidenav.btnAdministration).not.toBeDisabled();
+	});
+
 	test('should navigate on sidebar toolbar using arrow keys', async ({ page }) => {
 		await poHomeChannel.sidenav.userProfileMenu.focus();
 		await page.keyboard.press('Tab');