feat: Move enhanced navigation out of feature preview

.changeset/wet-walls-drive.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-client': major
+'@rocket.chat/meteor': major
+---
+
+Promotes Enhanced Navigation from preview state to stable.

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

@@ -28,6 +28,7 @@ type CreateDirectMessageProps = { onClose: () => void };
 const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
 	const t = useTranslation();
 	const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1);
+	const createDMFormId = useId();
 	const membersFieldId = useId();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -57,9 +58,13 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
 	};
 
 	return (
-		<Modal data-qa='create-direct-modal' wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}>
+		<Modal
+			aria-labelledby={`${createDMFormId}-title`}
+			data-qa='create-direct-modal'
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
+		>
 			<ModalHeader>
-				<ModalTitle>{t('Create_direct_message')}</ModalTitle>
+				<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
 				<ModalClose tabIndex={-1} onClick={onClose} />
 			</ModalHeader>
 			<ModalContent mbe={2}>

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -21,7 +21,7 @@ import {
 import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useId } from 'react';
 
 import UserStatusMenu from '../../../components/UserStatusMenu';
 import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../lib/constants';
@@ -39,6 +39,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 	const initialStatusText = customStatus || userStatusText;
 
 	const t = useTranslation();
+	const modalId = useId();
 	const [statusText, setStatusText] = useState(initialStatusText);
 	const [statusType, setStatusType] = useState(userStatus);
 	const [statusTextError, setStatusTextError] = useState<string | undefined>();
@@ -71,6 +72,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 
 	return (
 		<Modal
+			aria-labelledby={`${modalId}-title`}
 			wrapperFunction={(props: ComponentProps<typeof Box>) => (
 				<Box
 					is='form'
@@ -84,15 +86,17 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 		>
 			<ModalHeader>
 				<ModalIcon name='info' />
-				<ModalTitle>{t('Edit_Status')}</ModalTitle>
+				<ModalTitle id={`${modalId}-title`}>{t('Edit_Status')}</ModalTitle>
 				<ModalClose onClick={onClose} />
 			</ModalHeader>
 			<ModalContent fontScale='p2'>
 				<FieldGroup>
 					<Field>
-						<FieldLabel>{t('StatusMessage')}</FieldLabel>
+						<FieldLabel htmlFor={`${modalId}-status-message`}>{t('StatusMessage')}</FieldLabel>
 						<FieldRow>
 							<TextInput
+								id={`${modalId}-status-message`}
+								aria-label={t('StatusMessage')}
 								error={statusTextError}
 								disabled={!allowUserStatusMessageChange}
 								flexGrow={1}

apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`renders Default without crashing 1`] = `
               tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="rcx-box rcx-box--full rcx-css-16efnhh"
               >
                 <div
                   class="rcx-box rcx-box--full rcx-css-15qq8ie"
@@ -341,7 +341,7 @@ exports[`renders WithABACAttributes without crashing 1`] = `
               tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="rcx-box rcx-box--full rcx-css-16efnhh"
               >
                 <div
                   class="rcx-box rcx-box--full rcx-css-15qq8ie"
@@ -695,7 +695,7 @@ exports[`renders WithVoiceCallExtension without crashing 1`] = `
               tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="rcx-box rcx-box--full rcx-css-16efnhh"
               >
                 <div
                   class="rcx-box rcx-box--full rcx-css-15qq8ie"

apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { GenericMenu, HeaderV1ToolbarAction } from '@rocket.chat/ui-client';
+import { GenericMenu, HeaderToolbarAction } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { RoomToolboxActionConfig } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
@@ -39,7 +39,7 @@ export const useAppsRoomStarActions = () => {
 			order: 3,
 			renderToolboxItem: ({ id, icon, title, disabled, className }) => (
 				<GenericMenu
-					button={<HeaderV1ToolbarAction icon={icon} />}
+					button={<HeaderToolbarAction icon={icon} />}
 					key={id}
 					title={title}
 					disabled={disabled}

apps/meteor/client/sidebar/header/CreateDirectMessage.tsx

@@ -26,6 +26,7 @@ import { goToRoomById } from '../../lib/utils/goToRoomById';
 const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => {
 	const t = useTranslation();
 	const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1);
+	const createDMFormId = useId();
 	const membersFieldId = useId();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -55,9 +56,13 @@ const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => {
 	};
 
 	return (
-		<Modal data-qa='create-direct-modal' wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}>
+		<Modal
+			aria-labelledby={`${createDMFormId}-title`}
+			data-qa='create-direct-modal'
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
+		>
 			<ModalHeader>
-				<ModalTitle>{t('Create_direct_message')}</ModalTitle>
+				<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
 				<ModalClose tabIndex={-1} onClick={onClose} />
 			</ModalHeader>
 			<ModalContent mbe={2}>

apps/meteor/client/sidebar/header/Header.tsx

@@ -1,5 +1,4 @@
-import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage';
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
+import { SidebarSection } from '@rocket.chat/fuselage';
 import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { memo } from 'react';
@@ -20,45 +19,22 @@ const Header = (): ReactElement => {
 	const user = useUser();
 
 	return (
-		<FeaturePreview feature='newNavigation'>
-			<FeaturePreviewOff>
-				<Sidebar.TopBar.Section>
-					{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
-					<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
-						<Home title={t('Home')} />
-						<Search title={t('Search')} />
-						{user && (
-							<>
-								<Directory title={t('Directory')} />
-								<Sort title={t('Display')} />
-								<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
-								<Administration title={t('Administration')} />
-							</>
-						)}
-						{!user && <Login title={t('Login')} />}
-					</SidebarHeaderToolbar>
-				</Sidebar.TopBar.Section>
-			</FeaturePreviewOff>
-			<FeaturePreviewOn>
-				<SidebarSection>
-					{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
-					<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
-						<Home title={t('Home')} />
-						<Search title={t('Search')} />
-						{user && (
-							<>
-								<Directory title={t('Directory')} />
-								<Sort title={t('Display')} />
-								<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
-								<Administration title={t('Administration')} />
-							</>
-						)}
-						{!user && <Login title={t('Login')} />}
-					</SidebarHeaderToolbar>
-				</SidebarSection>
-				<SidebarDivider />
-			</FeaturePreviewOn>
-		</FeaturePreview>
+		<SidebarSection>
+			{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
+			<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
+				<Home title={t('Home')} />
+				<Search title={t('Search')} />
+				{user && (
+					<>
+						<Directory title={t('Directory')} />
+						<Sort title={t('Display')} />
+						<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
+						<Administration title={t('Administration')} />
+					</>
+				)}
+				{!user && <Login title={t('Login')} />}
+			</SidebarHeaderToolbar>
+		</SidebarSection>
 	);
 };
 

apps/meteor/client/sidebar/sections/OmnichannelSection.tsx

@@ -1,6 +1,5 @@
 import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import { useLayout, useRoute, usePermission } from '@rocket.chat/ui-contexts';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,48 +36,24 @@ const OmnichannelSection = () => {
 	return (
 		<>
 			{isWorkspaceOverMacLimit && <OverMacLimitSection />}
-
-			<FeaturePreview feature='newNavigation'>
-				<FeaturePreviewOff>
-					<Sidebar.TopBar.Section aria-label={t('Omnichannel_actions')} className='omnichannel-sidebar'>
-						<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
-						<SidebarHeaderToolbar>
-							{showOmnichannelQueueLink && (
-								<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
-							)}
-							<OmnichannelLivechatToggle />
-							{hasPermissionToSeeContactCenter && (
-								<Sidebar.TopBar.Action
-									data-tooltip={t('Contact_Center')}
-									aria-label={t('Contact_Center')}
-									icon='address-book'
-									onClick={(): void => handleRoute('directory')}
-								/>
-							)}
-						</SidebarHeaderToolbar>
-					</Sidebar.TopBar.Section>
-				</FeaturePreviewOff>
-				<FeaturePreviewOn>
-					<SidebarSection aria-label={t('Omnichannel_actions')}>
-						<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
-						<SidebarHeaderToolbar>
-							{showOmnichannelQueueLink && (
-								<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
-							)}
-							<OmnichannelLivechatToggle />
-							{hasPermissionToSeeContactCenter && (
-								<Sidebar.TopBar.Action
-									data-tooltip={t('Contact_Center')}
-									aria-label={t('Contact_Center')}
-									icon='address-book'
-									onClick={(): void => handleRoute('directory')}
-								/>
-							)}
-						</SidebarHeaderToolbar>
-					</SidebarSection>
-					<SidebarDivider />
-				</FeaturePreviewOn>
-			</FeaturePreview>
+			<SidebarSection aria-label={t('Omnichannel_actions')}>
+				<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
+				<SidebarHeaderToolbar>
+					{showOmnichannelQueueLink && (
+						<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
+					)}
+					<OmnichannelLivechatToggle />
+					{hasPermissionToSeeContactCenter && (
+						<Sidebar.TopBar.Action
+							data-tooltip={t('Contact_Center')}
+							aria-label={t('Contact_Center')}
+							icon='address-book'
+							onClick={(): void => handleRoute('directory')}
+						/>
+					)}
+				</SidebarHeaderToolbar>
+			</SidebarSection>
+			<SidebarDivider />
 		</>
 	);
 };

apps/meteor/client/views/admin/ABAC/__snapshots__/AdminABACRoomAttributesForm.spec.tsx.snap

@@ -31,7 +31,7 @@ exports[`AdminABACRoomAttributesForm renders NewAttribute without crashing 1`] =
               tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="rcx-box rcx-box--full rcx-css-zg7o7h"
               >
                 <div
                   class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1fuhgt0"
@@ -203,7 +203,7 @@ exports[`AdminABACRoomAttributesForm renders WithLockedAttributes without crashi
               tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="rcx-box rcx-box--full rcx-css-zg7o7h"
               >
                 <div
                   class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1fuhgt0"

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap

@@ -21,26 +21,26 @@ exports[`renders AppLogsItem without crashing 1`] = `
           tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-zsa0ng"
+            class="rcx-box rcx-box--full rcx-css-142wtci"
           >
             <div
-              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+              class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
+                class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-1yal9it"
               >
                 
               </i>
               <div
-                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                class="rcx-box rcx-box--full rcx-css-1spko5i"
                 id="contextualbarTitle"
               >
                 Filters
               </div>
               <button
                 aria-label="Close"
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
                 data-qa="ContextualbarActionClose"
                 type="button"
               >
@@ -74,7 +74,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
                 tabindex="-1"
               >
                 <form
-                  class="rcx-box rcx-box--full rcx-css-iag4sp"
+                  class="rcx-box rcx-box--full rcx-css-zg7o7h"
                 >
                   <div
                     class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
@@ -391,7 +391,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
             </div>
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-css-m843eh"
+            class="rcx-box rcx-box--full rcx-css-f51umh"
           >
             <button
               aria-label="Clear_filters"

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap

@@ -20,20 +20,20 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
           tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-zsa0ng"
+            class="rcx-box rcx-box--full rcx-css-142wtci"
           >
             <div
-              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+              class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                class="rcx-box rcx-box--full rcx-css-1spko5i"
                 id="contextualbarTitle"
               >
                 Canned_Responses
               </div>
               <button
                 aria-label="Close"
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
                 data-qa="ContextualbarActionClose"
                 type="button"
               >