Skip to content

Commit b8f4117

Browse files
dougfabrisjuliajforesti
authored and
ggazzo
committed
feat: Move enhanced navigation out of feature preview (#37285)
Co-authored-by: juliajforesti <juliajforesti@gmail.com>
1 parent 32dfcdb commit b8f4117

File tree

256 files changed

+1914
-6485
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

256 files changed

+1914
-6485
lines changed

‎.changeset/wet-walls-drive.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@rocket.chat/ui-client': major
3+
'@rocket.chat/meteor': major
4+
---
5+
6+
Promotes Enhanced Navigation from preview state to stable.

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type CreateDirectMessageProps = { onClose: () => void };
2828
const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
2929
const t = useTranslation();
3030
const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1);
31+
const createDMFormId = useId();
3132
const membersFieldId = useId();
3233
const dispatchToastMessage = useToastMessageDispatch();
3334

@@ -57,9 +58,13 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
5758
};
5859

5960
return (
60-
<Modal data-qa='create-direct-modal' wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}>
61+
<Modal
62+
aria-labelledby={`${createDMFormId}-title`}
63+
data-qa='create-direct-modal'
64+
wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
65+
>
6166
<ModalHeader>
62-
<ModalTitle>{t('Create_direct_message')}</ModalTitle>
67+
<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
6368
<ModalClose tabIndex={-1} onClick={onClose} />
6469
</ModalHeader>
6570
<ModalContent mbe={2}>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
2222
import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
2323
import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react';
24-
import { useState, useCallback } from 'react';
24+
import { useState, useCallback, useId } from 'react';
2525

2626
import UserStatusMenu from '../../../components/UserStatusMenu';
2727
import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../lib/constants';
@@ -39,6 +39,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
3939
const initialStatusText = customStatus || userStatusText;
4040

4141
const t = useTranslation();
42+
const modalId = useId();
4243
const [statusText, setStatusText] = useState(initialStatusText);
4344
const [statusType, setStatusType] = useState(userStatus);
4445
const [statusTextError, setStatusTextError] = useState<string | undefined>();
@@ -71,6 +72,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
7172

7273
return (
7374
<Modal
75+
aria-labelledby={`${modalId}-title`}
7476
wrapperFunction={(props: ComponentProps<typeof Box>) => (
7577
<Box
7678
is='form'
@@ -84,15 +86,17 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
8486
>
8587
<ModalHeader>
8688
<ModalIcon name='info' />
87-
<ModalTitle>{t('Edit_Status')}</ModalTitle>
89+
<ModalTitle id={`${modalId}-title`}>{t('Edit_Status')}</ModalTitle>
8890
<ModalClose onClick={onClose} />
8991
</ModalHeader>
9092
<ModalContent fontScale='p2'>
9193
<FieldGroup>
9294
<Field>
93-
<FieldLabel>{t('StatusMessage')}</FieldLabel>
95+
<FieldLabel htmlFor={`${modalId}-status-message`}>{t('StatusMessage')}</FieldLabel>
9496
<FieldRow>
9597
<TextInput
98+
id={`${modalId}-status-message`}
99+
aria-label={t('StatusMessage')}
96100
error={statusTextError}
97101
disabled={!allowUserStatusMessageChange}
98102
flexGrow={1}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ exports[`renders Default without crashing 1`] = `
3838
tabindex="-1"
3939
>
4040
<div
41-
class="rcx-box rcx-box--full rcx-css-iag4sp"
41+
class="rcx-box rcx-box--full rcx-css-16efnhh"
4242
>
4343
<div
4444
class="rcx-box rcx-box--full rcx-css-15qq8ie"
@@ -616,7 +616,7 @@ exports[`renders WithABACAttributes without crashing 1`] = `
616616
tabindex="-1"
617617
>
618618
<div
619-
class="rcx-box rcx-box--full rcx-css-iag4sp"
619+
class="rcx-box rcx-box--full rcx-css-16efnhh"
620620
>
621621
<div
622622
class="rcx-box rcx-box--full rcx-css-15qq8ie"
@@ -979,7 +979,7 @@ exports[`renders WithVoiceCallExtension without crashing 1`] = `
979979
tabindex="-1"
980980
>
981981
<div
982-
class="rcx-box rcx-box--full rcx-css-iag4sp"
982+
class="rcx-box rcx-box--full rcx-css-16efnhh"
983983
>
984984
<div
985985
class="rcx-box rcx-box--full rcx-css-15qq8ie"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Box } from '@rocket.chat/fuselage';
2-
import { GenericMenu, HeaderV1ToolbarAction } from '@rocket.chat/ui-client';
2+
import { GenericMenu, HeaderToolbarAction } from '@rocket.chat/ui-client';
33
import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
44
import type { RoomToolboxActionConfig } from '@rocket.chat/ui-contexts';
55
import { useMemo } from 'react';
@@ -39,7 +39,7 @@ export const useAppsRoomStarActions = () => {
3939
order: 3,
4040
renderToolboxItem: ({ id, icon, title, disabled, className }) => (
4141
<GenericMenu
42-
button={<HeaderV1ToolbarAction icon={icon} />}
42+
button={<HeaderToolbarAction icon={icon} />}
4343
key={id}
4444
title={title}
4545
disabled={disabled}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { goToRoomById } from '../../lib/utils/goToRoomById';
2626
const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => {
2727
const t = useTranslation();
2828
const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1);
29+
const createDMFormId = useId();
2930
const membersFieldId = useId();
3031
const dispatchToastMessage = useToastMessageDispatch();
3132

@@ -55,9 +56,13 @@ const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => {
5556
};
5657

5758
return (
58-
<Modal data-qa='create-direct-modal' wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}>
59+
<Modal
60+
aria-labelledby={`${createDMFormId}-title`}
61+
data-qa='create-direct-modal'
62+
wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
63+
>
5964
<ModalHeader>
60-
<ModalTitle>{t('Create_direct_message')}</ModalTitle>
65+
<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
6166
<ModalClose tabIndex={-1} onClick={onClose} />
6267
</ModalHeader>
6368
<ModalContent mbe={2}>

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

Lines changed: 17 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage';
2-
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
1+
import { SidebarSection } from '@rocket.chat/fuselage';
32
import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
43
import type { ReactElement } from 'react';
54
import { memo } from 'react';
@@ -20,45 +19,22 @@ const Header = (): ReactElement => {
2019
const user = useUser();
2120

2221
return (
23-
<FeaturePreview feature='newNavigation'>
24-
<FeaturePreviewOff>
25-
<Sidebar.TopBar.Section>
26-
{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
27-
<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
28-
<Home title={t('Home')} />
29-
<Search title={t('Search')} />
30-
{user && (
31-
<>
32-
<Directory title={t('Directory')} />
33-
<Sort title={t('Display')} />
34-
<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
35-
<Administration title={t('Administration')} />
36-
</>
37-
)}
38-
{!user && <Login title={t('Login')} />}
39-
</SidebarHeaderToolbar>
40-
</Sidebar.TopBar.Section>
41-
</FeaturePreviewOff>
42-
<FeaturePreviewOn>
43-
<SidebarSection>
44-
{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
45-
<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
46-
<Home title={t('Home')} />
47-
<Search title={t('Search')} />
48-
{user && (
49-
<>
50-
<Directory title={t('Directory')} />
51-
<Sort title={t('Display')} />
52-
<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
53-
<Administration title={t('Administration')} />
54-
</>
55-
)}
56-
{!user && <Login title={t('Login')} />}
57-
</SidebarHeaderToolbar>
58-
</SidebarSection>
59-
<SidebarDivider />
60-
</FeaturePreviewOn>
61-
</FeaturePreview>
22+
<SidebarSection>
23+
{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
24+
<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
25+
<Home title={t('Home')} />
26+
<Search title={t('Search')} />
27+
{user && (
28+
<>
29+
<Directory title={t('Directory')} />
30+
<Sort title={t('Display')} />
31+
<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
32+
<Administration title={t('Administration')} />
33+
</>
34+
)}
35+
{!user && <Login title={t('Login')} />}
36+
</SidebarHeaderToolbar>
37+
</SidebarSection>
6238
);
6339
};
6440

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

Lines changed: 18 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage';
22
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
3-
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
43
import { useLayout, useRoute, usePermission } from '@rocket.chat/ui-contexts';
54
import { memo } from 'react';
65
import { useTranslation } from 'react-i18next';
@@ -37,48 +36,24 @@ const OmnichannelSection = () => {
3736
return (
3837
<>
3938
{isWorkspaceOverMacLimit && <OverMacLimitSection />}
40-
41-
<FeaturePreview feature='newNavigation'>
42-
<FeaturePreviewOff>
43-
<Sidebar.TopBar.Section aria-label={t('Omnichannel_actions')} className='omnichannel-sidebar'>
44-
<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
45-
<SidebarHeaderToolbar>
46-
{showOmnichannelQueueLink && (
47-
<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
48-
)}
49-
<OmnichannelLivechatToggle />
50-
{hasPermissionToSeeContactCenter && (
51-
<Sidebar.TopBar.Action
52-
data-tooltip={t('Contact_Center')}
53-
aria-label={t('Contact_Center')}
54-
icon='address-book'
55-
onClick={(): void => handleRoute('directory')}
56-
/>
57-
)}
58-
</SidebarHeaderToolbar>
59-
</Sidebar.TopBar.Section>
60-
</FeaturePreviewOff>
61-
<FeaturePreviewOn>
62-
<SidebarSection aria-label={t('Omnichannel_actions')}>
63-
<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
64-
<SidebarHeaderToolbar>
65-
{showOmnichannelQueueLink && (
66-
<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
67-
)}
68-
<OmnichannelLivechatToggle />
69-
{hasPermissionToSeeContactCenter && (
70-
<Sidebar.TopBar.Action
71-
data-tooltip={t('Contact_Center')}
72-
aria-label={t('Contact_Center')}
73-
icon='address-book'
74-
onClick={(): void => handleRoute('directory')}
75-
/>
76-
)}
77-
</SidebarHeaderToolbar>
78-
</SidebarSection>
79-
<SidebarDivider />
80-
</FeaturePreviewOn>
81-
</FeaturePreview>
39+
<SidebarSection aria-label={t('Omnichannel_actions')}>
40+
<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
41+
<SidebarHeaderToolbar>
42+
{showOmnichannelQueueLink && (
43+
<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
44+
)}
45+
<OmnichannelLivechatToggle />
46+
{hasPermissionToSeeContactCenter && (
47+
<Sidebar.TopBar.Action
48+
data-tooltip={t('Contact_Center')}
49+
aria-label={t('Contact_Center')}
50+
icon='address-book'
51+
onClick={(): void => handleRoute('directory')}
52+
/>
53+
)}
54+
</SidebarHeaderToolbar>
55+
</SidebarSection>
56+
<SidebarDivider />
8257
</>
8358
);
8459
};

‎apps/meteor/client/views/admin/ABAC/ABACAttributesTab/__snapshots__/AttributesForm.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ exports[`AttributesForm renders NewAttribute without crashing 1`] = `
2727
tabindex="-1"
2828
>
2929
<div
30-
class="rcx-box rcx-box--full rcx-css-iag4sp"
30+
class="rcx-box rcx-box--full rcx-css-zg7o7h"
3131
>
3232
<form
3333
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1fuhgt0"
@@ -195,7 +195,7 @@ exports[`AttributesForm renders WithLockedAttributes without crashing 1`] = `
195195
tabindex="-1"
196196
>
197197
<div
198-
class="rcx-box rcx-box--full rcx-css-iag4sp"
198+
class="rcx-box rcx-box--full rcx-css-zg7o7h"
199199
>
200200
<form
201201
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‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,26 @@ exports[`renders AppLogsItem without crashing 1`] = `
2121
tabindex="-1"
2222
>
2323
<div
24-
class="rcx-box rcx-box--full rcx-css-zsa0ng"
24+
class="rcx-box rcx-box--full rcx-css-142wtci"
2525
>
2626
<div
27-
class="rcx-box rcx-box--full rcx-css-1sl6k6j"
27+
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
2828
>
2929
<i
3030
aria-hidden="true"
31-
class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
31+
class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-1yal9it"
3232
>
3333
3434
</i>
3535
<div
36-
class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
36+
class="rcx-box rcx-box--full rcx-css-1spko5i"
3737
id="contextualbarTitle"
3838
>
3939
Filters
4040
</div>
4141
<button
4242
aria-label="Close"
43-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
43+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
4444
data-qa="ContextualbarActionClose"
4545
type="button"
4646
>
@@ -74,7 +74,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
7474
tabindex="-1"
7575
>
7676
<form
77-
class="rcx-box rcx-box--full rcx-css-iag4sp"
77+
class="rcx-box rcx-box--full rcx-css-zg7o7h"
7878
>
7979
<div
8080
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
@@ -391,7 +391,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
391391
</div>
392392
</div>
393393
<div
394-
class="rcx-box rcx-box--full rcx-css-m843eh"
394+
class="rcx-box rcx-box--full rcx-css-f51umh"
395395
>
396396
<button
397397
aria-label="Clear_filters"

0 commit comments

Comments
 (0)