diff --git a/.changeset/wet-walls-drive.md b/.changeset/wet-walls-drive.md new file mode 100644 index 0000000000000..b8297000fa903 --- /dev/null +++ b/.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. diff --git a/apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateDirectMessage.tsx b/apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateDirectMessage.tsx index 2382eee8cafc8..e9c6e2a0e2779 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateDirectMessage.tsx +++ b/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 ( - }> + } + > - {t('Create_direct_message')} + {t('Create_direct_message')} diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx index ee6bc5bfcf17c..c483d331f52b6 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx +++ b/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(); @@ -71,6 +72,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa return ( ) => ( - {t('Edit_Status')} + {t('Edit_Status')} - {t('StatusMessage')} + {t('StatusMessage')}
{ order: 3, renderToolboxItem: ({ id, icon, title, disabled, className }) => ( } + button={} key={id} title={title} disabled={disabled} diff --git a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx b/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx index acfac1c479c3e..784148af79dca 100644 --- a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx +++ b/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 ( - }> + } + > - {t('Create_direct_message')} + {t('Create_direct_message')} diff --git a/apps/meteor/client/sidebar/header/Header.tsx b/apps/meteor/client/sidebar/header/Header.tsx index 66e9d20ad97b8..8f7f4be72f568 100644 --- a/apps/meteor/client/sidebar/header/Header.tsx +++ b/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 ( - - - - {user ? : } - - - - {user && ( - <> - - - - - - )} - {!user && } - - - - - - {user ? : } - - - - {user && ( - <> - - - - - - )} - {!user && } - - - - - + + {user ? : } + + + + {user && ( + <> + + + + + + )} + {!user && } + + ); }; diff --git a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx index fa0d63bab050f..e0fa9080e12d3 100644 --- a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx +++ b/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 && } - - - - - {t('Omnichannel')} - - {showOmnichannelQueueLink && ( - handleRoute('queue')} /> - )} - - {hasPermissionToSeeContactCenter && ( - handleRoute('directory')} - /> - )} - - - - - - {t('Omnichannel')} - - {showOmnichannelQueueLink && ( - handleRoute('queue')} /> - )} - - {hasPermissionToSeeContactCenter && ( - handleRoute('directory')} - /> - )} - - - - - + + {t('Omnichannel')} + + {showOmnichannelQueueLink && ( + handleRoute('queue')} /> + )} + + {hasPermissionToSeeContactCenter && ( + handleRoute('directory')} + /> + )} + + + ); }; diff --git a/apps/meteor/client/views/admin/ABAC/__snapshots__/AdminABACRoomAttributesForm.spec.tsx.snap b/apps/meteor/client/views/admin/ABAC/__snapshots__/AdminABACRoomAttributesForm.spec.tsx.snap index 46ecfca0c5137..6c83c3f1d9c84 100644 --- a/apps/meteor/client/views/admin/ABAC/__snapshots__/AdminABACRoomAttributesForm.spec.tsx.snap +++ b/apps/meteor/client/views/admin/ABAC/__snapshots__/AdminABACRoomAttributesForm.spec.tsx.snap @@ -31,7 +31,7 @@ exports[`AdminABACRoomAttributesForm renders NewAttribute without crashing 1`] = tabindex="-1" >
Filters
, - }, - }} - />, - { wrapper: appRoot }, - ); - expect(screen.getByText('Custom Toolbox')).toBeInTheDocument(); - }); - - it('should render custom toolbox content from slots.toolbox.content', () => { - render(Slotted Toolbox
} }} />, { wrapper: appRoot }); - expect(screen.getByText('Slotted Toolbox')).toBeInTheDocument(); - }); - }); -}); diff --git a/apps/meteor/client/views/room/Header/RoomHeader.tsx b/apps/meteor/client/views/room/Header/RoomHeader.tsx deleted file mode 100644 index ab56a073cb62c..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomHeader.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { isRoomFederated } from '@rocket.chat/core-typings'; -import { RoomAvatar } from '@rocket.chat/ui-avatar'; -import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbar } from '@rocket.chat/ui-client'; -import type { ReactNode } from 'react'; -import { Suspense } from 'react'; -import { useTranslation } from 'react-i18next'; - -import FederatedRoomOriginServer from './FederatedRoomOriginServer'; -import ParentRoomWithData from './ParentRoomWithData'; -import ParentTeam from './ParentTeam'; -import RoomTitle from './RoomTitle'; -import RoomToolbox from './RoomToolbox'; -import Encrypted from './icons/Encrypted'; -import Favorite from './icons/Favorite'; -import Translate from './icons/Translate'; -import MarkdownText from '../../../components/MarkdownText'; - -export type RoomHeaderProps = { - room: IRoom; - topic?: string; - slots: { - start?: ReactNode; - preContent?: ReactNode; - insideContent?: ReactNode; - posContent?: ReactNode; - end?: ReactNode; - toolbox?: { - pre?: ReactNode; - content?: ReactNode; - pos?: ReactNode; - hidden?: boolean; - }; - }; -}; - -const RoomHeader = ({ room, topic = '', slots = {} }: RoomHeaderProps) => { - const { t } = useTranslation(); - - return ( -
- {slots?.start} - - - - {slots?.preContent} - - - - - {room.prid && } - {room.teamId && !room.teamMain && } - {isRoomFederated(room) && } - - - {slots?.insideContent} - - {topic && ( - - - - - - )} - - {slots?.posContent} - {slots.toolbox?.hidden !== true && ( - - - {slots?.toolbox?.pre} - {slots?.toolbox?.content || } - {slots?.toolbox?.pos} - - - )} - {slots?.end} -
- ); -}; - -export default RoomHeader; diff --git a/apps/meteor/client/views/room/Header/RoomHeaderE2EESetup.tsx b/apps/meteor/client/views/room/Header/RoomHeaderE2EESetup.tsx deleted file mode 100644 index 3e3adc99ba7fb..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomHeaderE2EESetup.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { lazy } from 'react'; - -import RoomHeader from './RoomHeader'; -import type { RoomHeaderProps } from './RoomHeader'; -import { useE2EERoomState } from '../hooks/useE2EERoomState'; -import { useE2EEState } from '../hooks/useE2EEState'; - -const RoomToolboxE2EESetup = lazy(() => import('./RoomToolbox/RoomToolboxE2EESetup')); - -const RoomHeaderE2EESetup = ({ room, slots = {} }: RoomHeaderProps) => { - const e2eeState = useE2EEState(); - const e2eRoomState = useE2EERoomState(room._id); - - if (e2eeState === 'SAVE_PASSWORD' || e2eeState === 'ENTER_PASSWORD' || e2eRoomState === 'WAITING_KEYS') { - return ( - , - }, - }} - /> - ); - } - - return ; -}; - -export default RoomHeaderE2EESetup; diff --git a/apps/meteor/client/views/room/Header/RoomInviteHeader.spec.tsx b/apps/meteor/client/views/room/Header/RoomInviteHeader.spec.tsx deleted file mode 100644 index 299e7a522f656..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomInviteHeader.spec.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { composeStories } from '@storybook/react'; -import { render } from '@testing-library/react'; -import { axe } from 'jest-axe'; - -import * as stories from './RoomInviteHeader.stories'; - -const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); - -const appRoot = mockAppRoot().build(); - -jest.mock('../../../../app/utils/client', () => ({ - getURL: (url: string) => url, -})); - -jest.mock('./ParentRoomWithData', () => ({ - __esModule: true, - default: jest.fn(() =>
ParentRoomWithData
), -})); - -jest.mock('./ParentTeam', () => ({ - __esModule: true, - default: jest.fn(() =>
ParentTeam
), -})); - -jest.mock('./RoomToolbox', () => ({ - __esModule: true, - default: jest.fn(() =>
RoomToolbox
), -})); - -describe('RoomInviteHeader', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const view = render(, { wrapper: appRoot }); - expect(view.baseElement).toMatchSnapshot(); - }); - - test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { - const { container } = render(, { wrapper: appRoot }); - - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); -}); diff --git a/apps/meteor/client/views/room/Header/RoomInviteHeader.stories.tsx b/apps/meteor/client/views/room/Header/RoomInviteHeader.stories.tsx deleted file mode 100644 index 5603fdf28efef..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomInviteHeader.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import RoomInviteHeader from './RoomInviteHeader'; -import FakeRoomProvider from '../../../../tests/mocks/client/FakeRoomProvider'; -import { createFakeRoom } from '../../../../tests/mocks/data'; - -const mockedRoom = createFakeRoom({ name: 'rocket.cat', federated: true }); - -const meta = { - component: RoomInviteHeader, - args: { - room: mockedRoom, - }, - decorators: [(story) => {story()}], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/apps/meteor/client/views/room/Header/RoomInviteHeader.tsx b/apps/meteor/client/views/room/Header/RoomInviteHeader.tsx deleted file mode 100644 index 5c309bbe74fa6..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomInviteHeader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import RoomHeader from './RoomHeader'; -import type { RoomHeaderProps } from './RoomHeader'; - -const RoomInviteHeader = ({ room }: Pick) => { - return ( - - ); -}; - -export default RoomInviteHeader; diff --git a/apps/meteor/client/views/room/Header/RoomTitle.tsx b/apps/meteor/client/views/room/Header/RoomTitle.tsx deleted file mode 100644 index 0e57f1ad3eae6..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomTitle.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings'; -import { useButtonPattern, useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useDocumentTitle, HeaderTitle, HeaderTitleButton } from '@rocket.chat/ui-client'; -import { useRoomToolbox } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; - -import HeaderIconWithRoom from './HeaderIconWithRoom'; - -const RoomTitle = ({ room }: { room: IRoom }): ReactElement => { - useDocumentTitle(room.name, false); - const { openTab } = useRoomToolbox(); - - const handleOpenRoomInfo = useEffectEvent(() => { - if (isTeamRoom(room)) { - return openTab('team-info'); - } - - switch (room.t) { - case 'l': - openTab('room-info'); - break; - - case 'd': - (room.uids?.length ?? 0) > 2 ? openTab('user-info-group') : openTab('user-info'); - break; - - default: - openTab('channel-settings'); - break; - } - }); - - const buttonProps = useButtonPattern(handleOpenRoomInfo); - - return ( - - - {room.name} - - ); -}; - -export default RoomTitle; diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx deleted file mode 100644 index 24a056c9adb18..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import type { Box } from '@rocket.chat/fuselage'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { GenericMenu, HeaderToolbarAction, HeaderToolbarDivider } from '@rocket.chat/ui-client'; -import { useRoomToolbox, type RenderToolboxItemParams, type RoomToolboxActionConfig } from '@rocket.chat/ui-contexts'; -import type { ComponentProps } from 'react'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { useRoomToolboxActions } from './hooks/useRoomToolboxActions'; - -type RoomToolboxProps = { - className?: ComponentProps['className']; -}; - -const RoomToolbox = ({ className }: RoomToolboxProps) => { - const { t } = useTranslation(); - - const toolbox = useRoomToolbox(); - const { featuredActions, hiddenActions, visibleActions } = useRoomToolboxActions(toolbox); - - const showKebabMenu = hiddenActions.length > 0; - - const renderDefaultToolboxItem = useEffectEvent( - ({ id, className, icon, title, toolbox: { tab }, action, disabled, tooltip }: RenderToolboxItemParams) => { - return ( - - ); - }, - ); - - const mapToToolboxItem = (action: RoomToolboxActionConfig) => { - return (action.renderToolboxItem ?? renderDefaultToolboxItem)?.({ - ...action, - action: action.action ?? (() => toolbox.openTab(action.id)), - className, - toolbox, - }); - }; - - return ( - <> - {featuredActions.map(mapToToolboxItem)} - {featuredActions.length > 0 && } - {visibleActions.map(mapToToolboxItem)} - {showKebabMenu && } - - ); -}; - -export default memo(RoomToolbox); diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx deleted file mode 100644 index 6cc8db6b27d5c..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { Box } from '@rocket.chat/fuselage'; -import { useStableArray } from '@rocket.chat/fuselage-hooks'; -import { HeaderToolbarAction } from '@rocket.chat/ui-client'; -import { useRoomToolbox, type RoomToolboxActionConfig } from '@rocket.chat/ui-contexts'; -import type { ComponentProps } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { roomActionHooksForE2EESetup } from '../../../../ui'; -import { useRoom } from '../../contexts/RoomContext'; -import { getRoomGroup } from '../../lib/getRoomGroup'; - -type RoomToolboxE2EESetupProps = { - className?: ComponentProps['className']; -}; - -const RoomToolboxE2EESetup = ({ className }: RoomToolboxE2EESetupProps) => { - const { t } = useTranslation(); - const toolbox = useRoomToolbox(); - const room = useRoom(); - - const { tab } = toolbox; - - const actions = useStableArray( - roomActionHooksForE2EESetup - .map((roomActionHook) => roomActionHook()) - .filter( - (roomAction): roomAction is RoomToolboxActionConfig => - !!roomAction && (!roomAction.groups || roomAction.groups.includes(getRoomGroup(room))), - ), - ); - - return ( - <> - {actions.map(({ id, icon, title, action, disabled, tooltip }) => ( - toolbox.openTab(id))} - disabled={disabled} - tooltip={tooltip} - /> - ))} - - ); -}; - -export default RoomToolboxE2EESetup; diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.spec.ts b/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.spec.ts deleted file mode 100644 index 91d31162de668..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.spec.ts +++ /dev/null @@ -1,170 +0,0 @@ -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { RoomToolboxActionConfig } from '@rocket.chat/ui-contexts'; -import { renderHook } from '@testing-library/react'; - -import { useRoomToolboxActions } from './useRoomToolboxActions'; - -describe('useRoomToolboxActions', () => { - it('should return an empty array if there are no actions', () => { - const { result } = renderHook(() => useRoomToolboxActions({ actions: [], openTab: () => undefined }), { - wrapper: mockAppRoot().build(), - }); - expect(result.current.featuredActions).toEqual([]); - expect(result.current.hiddenActions).toEqual([]); - expect(result.current.visibleActions).toEqual([]); - }); - - it('should return apps actions only inside hiddenActions', () => { - const { result } = renderHook(() => useRoomToolboxActions({ actions: appsActions, openTab: () => undefined }), { - wrapper: mockAppRoot().build(), - }); - const appsSection = result.current.hiddenActions[0]; - const appsItems = appsSection.items; - - expect(appsSection).toBeDefined(); - expect(appsSection).toHaveProperty('id', 'apps'); - expect(appsItems).toMatchObject(appsActions); - }); - - it('should return max of 6 items on visibleActions and the rest items inside hiddenActions', () => { - const { result } = renderHook(() => useRoomToolboxActions({ actions, openTab: () => undefined }), { - wrapper: mockAppRoot().build(), - }); - expect(result.current.hiddenActions.length).toBeGreaterThan(0); - expect(result.current.visibleActions.length).toBe(6); - }); - - it('should return featured items inside featuredActions', () => { - const { result } = renderHook(() => useRoomToolboxActions({ actions, openTab: () => undefined }), { - wrapper: mockAppRoot().build(), - }); - expect(result.current.featuredActions).toMatchObject(actions.filter((action) => action.featured)); - }); -}); - -const appsActions: RoomToolboxActionConfig[] = [ - { - id: 'app1', - title: 'app-42212581-0966-44aa-8366-b3e92aa00df4.action_button_label_files', - groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'], - type: 'apps', - icon: undefined as unknown as RoomToolboxActionConfig['icon'], - }, - { - id: 'app2', - title: 'app-42212581-0966-44aa-8366-b3e92aa00df4.action_button_label_files', - groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'], - type: 'apps', - icon: undefined as unknown as RoomToolboxActionConfig['icon'], - }, -]; - -const actions: RoomToolboxActionConfig[] = [ - { - id: 'team-info', - groups: ['team'], - anonymous: true, - full: true, - title: 'Teams_Info', - icon: 'info-circled', - order: 1, - }, - { - id: 'thread', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], - full: true, - title: 'Threads', - icon: 'thread', - order: 2, - }, - { - id: 'team-channels', - groups: ['team'], - anonymous: true, - full: true, - title: 'Team_Channels', - icon: 'hash', - order: 2, - }, - { - id: 'discussions', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], - title: 'Discussions', - icon: 'discussion', - full: true, - order: 3, - }, - { - id: 'start-call', - title: 'Call', - icon: 'phone', - groups: ['direct', 'direct_multiple', 'group', 'team', 'channel', 'direct'], - disabled: false, - full: true, - order: 4, - featured: true, - }, - { - id: 'rocket-search', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'live', 'team'], - title: 'Search_Messages', - icon: 'magnifier', - order: 5, - }, - { - id: 'mentions', - groups: ['channel', 'group', 'team'], - title: 'Mentions', - icon: 'at', - order: 6, - type: 'organization', - }, - { - id: 'members-list', - groups: ['channel', 'group', 'team'], - title: 'Teams_members', - icon: 'members', - order: 7, - }, - { - id: 'uploaded-files-list', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'live', 'team'], - title: 'Files', - icon: 'clip', - order: 8, - type: 'organization', - }, - { - id: 'pinned-messages', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], - title: 'Pinned_Messages', - icon: 'pin', - order: 9, - type: 'organization', - }, - { - id: 'starred-messages', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], - title: 'Starred_Messages', - icon: 'star', - order: 10, - type: 'organization', - }, - { - id: 'keyboard-shortcut-list', - groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], - title: 'Keyboard_Shortcuts_Title', - icon: 'keyboard', - order: 99, - type: 'customization', - }, - { - id: 'clean-history', - groups: ['channel', 'group', 'team', 'direct_multiple', 'direct'], - full: true, - title: 'Prune_Messages', - icon: 'eraser', - order: 250, - type: 'customization', - }, -]; diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.ts b/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.ts deleted file mode 100644 index f9e3cbc325017..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useLayout } from '@rocket.chat/ui-contexts'; -import type { RoomToolboxContextValue } from '@rocket.chat/ui-contexts'; -import { useTranslation } from 'react-i18next'; - -type MenuActionsProps = { - id: string; - items: GenericMenuItemProps[]; -}[]; - -export const useRoomToolboxActions = ({ actions, openTab }: Pick) => { - const { t } = useTranslation(); - const { roomToolboxExpanded } = useLayout(); - - const normalActions = actions.filter((action) => !action.featured && action.type !== 'apps'); - const featuredActions = actions.filter((action) => action.featured); - const appsActions = actions.filter((action) => action.type === 'apps'); - const visibleActions = !roomToolboxExpanded ? [] : normalActions.slice(0, 6); - - const hiddenActions = (!roomToolboxExpanded ? actions : [...appsActions, ...normalActions.slice(6)]) - .filter((item) => !item.disabled && !item.featured) - .map((item) => ({ - content: t(item.title), - onClick: - item.action ?? - ((): void => { - openTab(item.id); - }), - ...item, - })) - .reduce((acc, item) => { - const group = item.type ? item.type : ''; - const section = acc.find((section: { id: string }) => section.id === group); - if (section) { - section.items.push(item); - return acc; - } - - const newSection = { id: group, title: group === 'apps' ? t('Apps') : '', items: [item] }; - acc.push(newSection); - - return acc; - }, [] as MenuActionsProps); - - return { hiddenActions, featuredActions, visibleActions }; -}; diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/index.ts b/apps/meteor/client/views/room/Header/RoomToolbox/index.ts deleted file mode 100644 index d5a042756df45..0000000000000 --- a/apps/meteor/client/views/room/Header/RoomToolbox/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export default lazy(() => import('./RoomToolbox')); diff --git a/apps/meteor/client/views/room/Header/__snapshots__/RoomInviteHeader.spec.tsx.snap b/apps/meteor/client/views/room/Header/__snapshots__/RoomInviteHeader.spec.tsx.snap deleted file mode 100644 index a2d13a46561d4..0000000000000 --- a/apps/meteor/client/views/room/Header/__snapshots__/RoomInviteHeader.spec.tsx.snap +++ /dev/null @@ -1,74 +0,0 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing - -exports[`RoomInviteHeader renders Default without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
-
- -
-

- rocket.cat -

-
- -
-
-
-
-
-
- -`; diff --git a/apps/meteor/client/views/room/Header/icons/Encrypted.tsx b/apps/meteor/client/views/room/Header/icons/Encrypted.tsx deleted file mode 100644 index a4386d6b86336..0000000000000 --- a/apps/meteor/client/views/room/Header/icons/Encrypted.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import colors from '@rocket.chat/fuselage-tokens/colors'; -import { HeaderState } from '@rocket.chat/ui-client'; -import { useSetting } from '@rocket.chat/ui-contexts'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -const Encrypted = ({ room }: { room: IRoom }) => { - const { t } = useTranslation(); - const e2eEnabled = useSetting('E2E_Enable'); - return e2eEnabled && room?.encrypted ? : null; -}; - -export default memo(Encrypted); diff --git a/apps/meteor/client/views/room/Header/icons/Favorite.tsx b/apps/meteor/client/views/room/Header/icons/Favorite.tsx deleted file mode 100644 index c163c30977928..0000000000000 --- a/apps/meteor/client/views/room/Header/icons/Favorite.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { HeaderState } from '@rocket.chat/ui-client'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; -import { memo } from 'react'; - -import { useUserIsSubscribed } from '../../contexts/RoomContext'; -import { useToggleFavoriteMutation } from '../../hooks/useToggleFavoriteMutation'; - -const Favorite = ({ room: { _id, f: favorite = false, t: type, name } }: { room: IRoom & { f?: ISubscription['f'] } }) => { - const t = useTranslation(); - const subscribed = useUserIsSubscribed(); - - const isFavoritesEnabled = useSetting('Favorite_Rooms', true) && ['c', 'p', 'd', 't'].includes(type); - const { mutate: toggleFavorite } = useToggleFavoriteMutation(); - - const handleFavoriteClick = useEffectEvent(() => { - if (!isFavoritesEnabled) { - return; - } - - toggleFavorite({ roomId: _id, favorite: !favorite, roomName: name || '' }); - }); - - const favoriteLabel = favorite ? `${t('Unfavorite')} ${name}` : `${t('Favorite')} ${name}`; - - if (!subscribed || !isFavoritesEnabled) { - return null; - } - - return ( - - ); -}; - -export default memo(Favorite); diff --git a/apps/meteor/client/views/room/Header/icons/Translate.tsx b/apps/meteor/client/views/room/Header/icons/Translate.tsx deleted file mode 100644 index 3690d801eda60..0000000000000 --- a/apps/meteor/client/views/room/Header/icons/Translate.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { IRoom } from '@rocket.chat/core-typings'; -import { HeaderState } from '@rocket.chat/ui-client'; -import { useSetting } from '@rocket.chat/ui-contexts'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -type TranslateProps = { - room: IRoom; -}; - -const Translate = ({ room: { autoTranslateLanguage, autoTranslate } }: TranslateProps) => { - const { t } = useTranslation(); - const autoTranslateEnabled = useSetting('AutoTranslate_Enabled'); - const encryptedLabel = t('Translated'); - return autoTranslateEnabled && autoTranslate && autoTranslateLanguage ? ( - - ) : null; -}; - -export default memo(Translate); diff --git a/apps/meteor/client/views/room/Header/index.ts b/apps/meteor/client/views/room/Header/index.ts deleted file mode 100644 index 579f1ac23fcff..0000000000000 --- a/apps/meteor/client/views/room/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Header'; diff --git a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx b/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx index 1fbbe4b6d4f0a..531def26c09c3 100644 --- a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx +++ b/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx @@ -2,12 +2,15 @@ import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings'; import { useButtonPattern, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useDocumentTitle, HeaderTitle, HeaderTitleButton } from '@rocket.chat/ui-client'; import { useRoomToolbox } from '@rocket.chat/ui-contexts'; +import { useTranslation } from 'react-i18next'; import HeaderIconWithRoom from './HeaderIconWithRoom'; type RoomTitleProps = { room: IRoom }; const RoomTitle = ({ room }: RoomTitleProps) => { + const { t } = useTranslation(); + useDocumentTitle(room.name, false); const { openTab } = useRoomToolbox(); @@ -34,7 +37,7 @@ const RoomTitle = ({ room }: RoomTitleProps) => { const buttonProps = useButtonPattern(handleOpenRoomInfo); return ( - + {room.name} diff --git a/apps/meteor/client/views/room/HeaderV2/__snapshots__/RoomInviteHeader.spec.tsx.snap b/apps/meteor/client/views/room/HeaderV2/__snapshots__/RoomInviteHeader.spec.tsx.snap index 5d76ea38f9793..f3237dff62d2a 100644 --- a/apps/meteor/client/views/room/HeaderV2/__snapshots__/RoomInviteHeader.spec.tsx.snap +++ b/apps/meteor/client/views/room/HeaderV2/__snapshots__/RoomInviteHeader.spec.tsx.snap @@ -4,10 +4,10 @@ exports[`RoomInviteHeader renders Default without crashing 1`] = `
ParentRoom @@ -16,25 +16,26 @@ exports[`RoomInviteHeader renders Default without crashing 1`] = ` class="rcx-box rcx-box--full rcx-css-1axz7ym" >

rocket.cat

diff --git a/apps/meteor/client/views/room/HeaderV2/index.ts b/apps/meteor/client/views/room/HeaderV2/index.ts index a38c9709c31bc..579f1ac23fcff 100644 --- a/apps/meteor/client/views/room/HeaderV2/index.ts +++ b/apps/meteor/client/views/room/HeaderV2/index.ts @@ -1 +1 @@ -export { default as HeaderV2 } from './Header'; +export { default } from './Header'; diff --git a/apps/meteor/client/views/room/NotSubscribedRoom.tsx b/apps/meteor/client/views/room/NotSubscribedRoom.tsx index 933ba44fb88b0..ac5cf7ae2f940 100644 --- a/apps/meteor/client/views/room/NotSubscribedRoom.tsx +++ b/apps/meteor/client/views/room/NotSubscribedRoom.tsx @@ -1,7 +1,5 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn, HeaderV1, HeaderV1Toolbar, SidebarToggler } from '@rocket.chat/ui-client'; -import { useLayout } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { Trans, useTranslation } from 'react-i18next'; @@ -16,27 +14,10 @@ type NotSubscribedRoomProps = { const NotSubscribedRoom = ({ rid, reference, type }: NotSubscribedRoomProps): ReactElement => { const { t } = useTranslation(); - const handleJoinClick = useJoinRoom(); - const { isMobile } = useLayout(); - return ( - - - - - - - - {null} - - ) - } body={ diff --git a/apps/meteor/client/views/room/Room.tsx b/apps/meteor/client/views/room/Room.tsx index 10c8ca831762f..29aee415bdc6e 100644 --- a/apps/meteor/client/views/room/Room.tsx +++ b/apps/meteor/client/views/room/Room.tsx @@ -1,5 +1,5 @@ import { isInviteSubscription } from '@rocket.chat/core-typings'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn, ContextualbarSkeleton } from '@rocket.chat/ui-client'; +import { ContextualbarSkeleton } from '@rocket.chat/ui-client'; import { useSetting, useRoomToolbox } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { createElement, lazy, memo, Suspense } from 'react'; @@ -8,12 +8,10 @@ import { ErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import RoomE2EESetup from './E2EESetup/RoomE2EESetup'; -import Header from './Header'; -import { HeaderV2 } from './HeaderV2'; +import Header from './HeaderV2'; import MessageHighlightProvider from './MessageList/providers/MessageHighlightProvider'; import RoomInvite from './RoomInvite'; -import RoomBody from './body/RoomBody'; -import RoomBodyV2 from './body/RoomBodyV2'; +import RoomBody from './body/RoomBodyV2'; import { useRoom, useRoomSubscription } from './contexts/RoomContext'; import { useAppsContextualBar } from './hooks/useAppsContextualBar'; import RoomLayout from './layout/RoomLayout'; @@ -51,32 +49,8 @@ const Room = (): ReactElement => { - - - - -
- - - } - body={ - shouldDisplayE2EESetup ? ( - - ) : ( - <> - - - - - - - - - - ) - } + header={
} + body={shouldDisplayE2EESetup ? : } aside={ (toolbox.tab?.tabComponent && ( diff --git a/apps/meteor/client/views/room/RoomInvite.tsx b/apps/meteor/client/views/room/RoomInvite.tsx index 97fe37201ca58..3f86a46b66cb6 100644 --- a/apps/meteor/client/views/room/RoomInvite.tsx +++ b/apps/meteor/client/views/room/RoomInvite.tsx @@ -1,10 +1,8 @@ import { isRoomFederated, type IInviteSubscription } from '@rocket.chat/core-typings'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import type { ComponentProps } from 'react'; import { useTranslation } from 'react-i18next'; -import Header from './Header'; -import { HeaderV2 } from './HeaderV2'; +import Header from './HeaderV2'; import RoomInviteBody from './body/RoomInviteBody'; import type { IRoomWithFederationOriginalName } from './contexts/RoomContext'; import { useRoomInvitation } from './hooks/useRoomInvitation'; @@ -25,16 +23,7 @@ const RoomInvite = ({ room, subscription, ...props }: RoomInviteProps) => { return ( - - - - -
- - - } + header={
} body={ { const { t } = useTranslation(); - const { isMobile } = useLayout(); return ( - - - - - - - - {null} - - ) - } body={ diff --git a/apps/meteor/client/views/room/RoomSkeleton.tsx b/apps/meteor/client/views/room/RoomSkeleton.tsx index 14403df3a1e9d..3909ac2d2ce60 100644 --- a/apps/meteor/client/views/room/RoomSkeleton.tsx +++ b/apps/meteor/client/views/room/RoomSkeleton.tsx @@ -1,24 +1,13 @@ -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import type { ReactElement } from 'react'; -import HeaderSkeleton from './Header/HeaderSkeleton'; -import HeaderSkeletonV2 from './HeaderV2/HeaderSkeleton'; +import HeaderSkeleton from './HeaderV2/HeaderSkeleton'; import RoomComposerSkeleton from './composer/RoomComposer/RoomComposerSkeleton'; import RoomLayout from './layout/RoomLayout'; import MessageListSkeleton from '../../components/message/list/MessageListSkeleton'; const RoomSkeleton = (): ReactElement => ( - - - - - - - - } + header={} body={ <> diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx deleted file mode 100644 index 517fd0782a430..0000000000000 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ /dev/null @@ -1,294 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import { CustomScrollbars, useEmbeddedLayout } from '@rocket.chat/ui-client'; -import { usePermission, useRole, useSetting, useTranslation, useUser, useUserPreference, useRoomToolbox } from '@rocket.chat/ui-contexts'; -import type { MouseEvent, ReactElement } from 'react'; -import { memo, useCallback, useMemo } from 'react'; - -import DropTargetOverlay from './DropTargetOverlay'; -import JumpToRecentMessageButton from './JumpToRecentMessageButton'; -import LoadingMessagesIndicator from './LoadingMessagesIndicator'; -import RetentionPolicyWarning from './RetentionPolicyWarning'; -import RoomForeword from './RoomForeword/RoomForeword'; -import UnreadMessagesIndicator from './UnreadMessagesIndicator'; -import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress'; -import { MessageList } from '../MessageList'; -import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; -import { isTruthy } from '../../../../lib/isTruthy'; -import { useMergedRefsV2 } from '../../../hooks/useMergedRefsV2'; -import { BubbleDate } from '../BubbleDate'; -import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary'; -import RoomAnnouncement from '../RoomAnnouncement'; -import ComposerContainer from '../composer/ComposerContainer'; -import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop'; -import RoomComposer from '../composer/RoomComposer/RoomComposer'; -import { useChat } from '../contexts/ChatContext'; -import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext'; -import { useDateScroll } from '../hooks/useDateScroll'; -import { useMessageListNavigation } from '../hooks/useMessageListNavigation'; -import { useRetentionPolicy } from '../hooks/useRetentionPolicy'; -import { useFileUpload } from './hooks/useFileUpload'; -import { useGetMore } from './hooks/useGetMore'; -import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved'; -import { useHasNewMessages } from './hooks/useHasNewMessages'; -import { useListIsAtBottom } from './hooks/useListIsAtBottom'; -import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl'; -import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition'; -import { useHandleUnread } from './hooks/useUnreadMessages'; -import { useJumpToMessageImperative } from '../MessageList/hooks/useJumpToMessage'; -import { useLoadSurroundingMessages } from '../MessageList/hooks/useLoadSurroundingMessages'; - -const RoomBody = (): ReactElement => { - const chat = useChat(); - if (!chat) { - throw new Error('No ChatContext provided'); - } - - const t = useTranslation(); - const isLayoutEmbedded = useEmbeddedLayout(); - const room = useRoom(); - const user = useUser(); - const toolbox = useRoomToolbox(); - const admin = useRole('admin'); - const subscription = useRoomSubscription(); - - const retentionPolicy = useRetentionPolicy(room); - - const hideFlexTab = useUserPreference('hideFlexTab') || undefined; - const hideUsernames = useUserPreference('hideUsernames'); - const displayAvatars = useUserPreference('displayAvatars'); - - const { hasMorePreviousMessages, hasMoreNextMessages, isLoadingMoreMessages } = useRoomMessages(); - - const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead', false); - - const canPreviewChannelRoom = usePermission('preview-c-room'); - - const subscribed = !!subscription; - - const canPreview = useMemo(() => { - if (room && room.t !== 'c') { - return true; - } - - if (allowAnonymousRead === true) { - return true; - } - - if (canPreviewChannelRoom) { - return true; - } - - return subscribed; - }, [allowAnonymousRead, canPreviewChannelRoom, room, subscribed]); - - const { jumpToRef: jumpToRefGetMoreImperative, innerRef: jumpToRefGetMoreImperativeInnerRef } = useJumpToMessageImperative(); - - const { jumpToRef: surroundingMessagesJumpTpRef } = useLoadSurroundingMessages(); - - const { - wrapperRef: unreadBarWrapperRef, - innerRef: unreadBarInnerRef, - handleUnreadBarJumpToButtonClick, - handleMarkAsReadButtonClick, - counter: [unread], - } = useHandleUnread(room, subscription); - - const { innerRef: dateScrollInnerRef, bubbleRef, listStyle, ...bubbleDate } = useDateScroll(); - - const { - innerRef: isAtBottomInnerRef, - atBottomRef, - sendToBottom, - sendToBottomIfNecessary, - isAtBottom, - jumpToRef: jumpToRefIsAtBottom, - } = useListIsAtBottom(); - - const { innerRef: getMoreInnerRef, jumpToRef: jumpToRefGetMore } = useGetMore(room._id, atBottomRef); - - const { innerRef: restoreScrollPositionInnerRef, jumpToRef: jumpToRefRestoreScrollPosition } = useRestoreScrollPosition(room._id); - - const jumpToRef = useMergedRefsV2( - jumpToRefGetMore, - jumpToRefIsAtBottom, - jumpToRefRestoreScrollPosition, - surroundingMessagesJumpTpRef, - jumpToRefGetMoreImperative, - ); - - const { - uploads, - handleUploadFiles, - handleUploadProgressClose, - targeDrop: [fileUploadTriggerProps, fileUploadOverlayProps], - } = useFileUpload(); - - const { messageListRef } = useMessageListNavigation(); - const { innerRef: selectAndScrollRef, selectAllAndScrollToTop } = useSelectAllAndScrollToTop(); - - const { handleNewMessageButtonClick, handleJumpToRecentButtonClick, handleComposerResize, hasNewMessages, newMessagesScrollRef } = - useHasNewMessages(room._id, user?._id, atBottomRef, { - sendToBottom, - sendToBottomIfNecessary, - isAtBottom, - }); - - const innerRef = useMergedRefsV2( - dateScrollInnerRef, - restoreScrollPositionInnerRef, - isAtBottomInnerRef, - newMessagesScrollRef, - unreadBarInnerRef, - getMoreInnerRef, - selectAndScrollRef, - messageListRef, - jumpToRefGetMoreImperativeInnerRef, - ); - - const wrapperBoxRefs = useMergedRefsV2(unreadBarWrapperRef); - - const handleNavigateToPreviousMessage = useCallback((): void => { - chat.messageEditing.toPreviousMessage(); - }, [chat.messageEditing]); - - const handleNavigateToNextMessage = useCallback((): void => { - chat.messageEditing.toNextMessage(); - }, [chat.messageEditing]); - - const handleCloseFlexTab = useCallback( - (e: MouseEvent): void => { - /* - * check if the element is a button or anchor - * it considers the role as well - * usually, the flex tab is closed when clicking outside of it - * but if the user clicks on a button or anchor, we don't want to close the flex tab - * because the user could be actually trying to open the flex tab through those elements - */ - - const checkElement = (element: HTMLElement | null): boolean => { - if (!element) { - return false; - } - if (element instanceof HTMLButtonElement || element.getAttribute('role') === 'button') { - return true; - } - if (element instanceof HTMLAnchorElement || element.getAttribute('role') === 'link') { - return true; - } - return checkElement(element.parentElement); - }; - - if (checkElement(e.target as HTMLElement)) { - return; - } - - toolbox.closeTab(); - }, - [toolbox], - ); - - useGoToHomeOnRemoved(room, user?._id); - useReadMessageWindowEvents(); - useQuoteMessageByUrl(); - - return ( - <> - {!isLayoutEmbedded && room.announcement && } - - - - - ); -}; - -export default memo(RoomBody); diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap index 97583be453a56..19e6873a213b8 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap @@ -20,13 +20,13 @@ exports[`renders Default without crashing 1`] = ` tabindex="-1" >
Invite users
Invite users
Invite users
Invite users
- - -
-
-
- general general general general general general general general general general general general general general general general general general general -
-
-
- -
-
-
-
- -`; - -exports[`renders WithActionBadge without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- -
-
-
- general general general general general general general general general general general general general general general general general general general -
-
-
- -
-
-
-
- -`; - -exports[`renders WithBurger without crashing 1`] = ` - -
-
-
- -
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- - - -
-
-
- general general general general general general general general general general general general general general general general general general general -
-
-
- -
-
-
-
- -`; diff --git a/packages/ui-client/src/components/HeaderV1/index.ts b/packages/ui-client/src/components/HeaderV1/index.ts deleted file mode 100644 index adaf047348398..0000000000000 --- a/packages/ui-client/src/components/HeaderV1/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -export { default as HeaderV1 } from './Header'; -export { default as HeaderV1Avatar } from './HeaderAvatar'; -export { default as HeaderV1Content } from './HeaderContent'; -export { default as HeaderV1ContentRow } from './HeaderContentRow'; -export { default as HeaderV1Divider } from './HeaderDivider'; -export { default as HeaderV1Icon } from './HeaderIcon'; -export { default as HeaderV1State } from './HeaderState'; -export { default as HeaderV1Subtitle } from './HeaderSubtitle'; -export { HeaderTag as HeaderV1Tag, HeaderTagIcon as HeaderV1TagIcon, HeaderTagSkeleton as HeaderV1TagSkeleton } from './HeaderTag'; -export { default as HeaderV1Title } from './HeaderTitle'; -export { default as HeaderV1TitleButton } from './HeaderTitleButton'; -export { - HeaderToolbar as HeaderV1Toolbar, - HeaderToolbarAction as HeaderV1ToolbarAction, - HeaderToolbarActionBadge as HeaderV1ToolbarActionBadge, - HeaderToolbarDivider as HeaderV1ToolbarDivider, -} from './HeaderToolbar'; diff --git a/packages/ui-client/src/components/HeaderV2/Header.spec.tsx b/packages/ui-client/src/components/HeaderV2/Header.spec.tsx deleted file mode 100644 index 9fd86f4504a7e..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/Header.spec.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { composeStories } from '@storybook/react'; -import { render } from '@testing-library/react'; -import { axe } from 'jest-axe'; - -import * as stories from './Header.stories'; - -const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); - -test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const { baseElement } = render(, { wrapper: mockAppRoot().build() }); - expect(baseElement).toMatchSnapshot(); -}); - -test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { - const { container } = render(, { wrapper: mockAppRoot().build() }); - - const results = await axe(container); - expect(results).toHaveNoViolations(); -}); diff --git a/packages/ui-client/src/components/HeaderV2/Header.tsx b/packages/ui-client/src/components/HeaderV2/Header.tsx deleted file mode 100644 index fe36431541265..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/Header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -import HeaderDivider from './HeaderDivider'; - -type HeaderProps = ComponentPropsWithoutRef; - -const Header = (props: HeaderProps) => ( - - - - -); - -export default Header; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderAvatar.tsx b/packages/ui-client/src/components/HeaderV2/HeaderAvatar.tsx deleted file mode 100644 index 06b80697446c8..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderAvatar.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderAvatarProps = ComponentPropsWithoutRef; - -const HeaderAvatar = (props: HeaderAvatarProps) => ; - -export default HeaderAvatar; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderContent.tsx b/packages/ui-client/src/components/HeaderV2/HeaderContent.tsx deleted file mode 100644 index 2f8d75329493f..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderContent.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderContentProps = ComponentPropsWithoutRef; - -const HeaderContent = (props: HeaderContentProps) => ( - -); - -export default HeaderContent; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderContentRow.tsx b/packages/ui-client/src/components/HeaderV2/HeaderContentRow.tsx deleted file mode 100644 index 5b2ca14686678..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderContentRow.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderContentRowProps = ComponentPropsWithoutRef; - -const HeaderContentRow = (props: HeaderContentRowProps) => ( - -); - -export default HeaderContentRow; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderDivider.tsx b/packages/ui-client/src/components/HeaderV2/HeaderDivider.tsx deleted file mode 100644 index 2beadec2d0882..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderDivider.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Divider } from '@rocket.chat/fuselage'; - -const HeaderDivider = () => ; - -export default HeaderDivider; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx b/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx deleted file mode 100644 index 9175b66257d32..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Box, Icon } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef, ReactElement } from 'react'; -import { isValidElement } from 'react'; - -type HeaderIconProps = { icon: ReactElement | ComponentPropsWithoutRef | null }; - -const HeaderIcon = ({ icon }: HeaderIconProps) => - icon && ( - - {isValidElement(icon) ? icon : } - - ); - -export default HeaderIcon; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderState.tsx b/packages/ui-client/src/components/HeaderV2/HeaderState.tsx deleted file mode 100644 index 7c7f64fe86cbb..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderState.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Icon, IconButton } from '@rocket.chat/fuselage'; -import type { Keys as IconName } from '@rocket.chat/icons'; -import type { AllHTMLAttributes, ComponentPropsWithoutRef, MouseEventHandler } from 'react'; - -type HeaderStateProps = - | (Pick, 'color' | 'title' | 'icon'> & { - onClick: MouseEventHandler; - } & Omit, 'is'>) - | (Omit, 'name' | 'onClick'> & { - icon: IconName; - onClick?: undefined; - }); - -const HeaderState = (props: HeaderStateProps) => - props.onClick ? : ; - -export default HeaderState; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderSubtitle.tsx b/packages/ui-client/src/components/HeaderV2/HeaderSubtitle.tsx deleted file mode 100644 index 4f3ef17492819..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderSubtitle.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderSubtitleProps = ComponentPropsWithoutRef; - -const HeaderSubtitle = (props: HeaderSubtitleProps) => ( - -); - -export default HeaderSubtitle; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagSkeleton.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagSkeleton.tsx deleted file mode 100644 index 14fecc6c194be..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagSkeleton.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Skeleton } from '@rocket.chat/fuselage'; - -const HeaderTagSkeleton = () => ; - -export default HeaderTagSkeleton; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/index.ts b/packages/ui-client/src/components/HeaderV2/HeaderTag/index.ts deleted file mode 100644 index da15ab34e601c..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderTag/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as HeaderTag } from './HeaderTag'; -export { default as HeaderTagIcon } from './HeaderTagIcon'; -export { default as HeaderTagSkeleton } from './HeaderTagSkeleton'; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTitle.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTitle.tsx deleted file mode 100644 index 82c1233a41184..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderTitle.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderTitleProps = ComponentPropsWithoutRef; - -const HeaderTitle = (props: HeaderTitleProps) => ; - -export default HeaderTitle; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTitleButton.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTitleButton.tsx deleted file mode 100644 index abc0dc447cab8..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderTitleButton.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box, Palette } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; - -type HeaderTitleButtonProps = Omit, 'className'> & { className?: string }; - -const HeaderTitleButton = ({ className, ...props }: HeaderTitleButtonProps) => { - const customClass = css` - border-width: 1px; - border-style: solid; - border-color: transparent; - - &:hover { - cursor: pointer; - background-color: ${Palette.surface['surface-hover']}; - } - &:focus-visible { - outline: 0; - box-shadow: 0 0 0 2px ${Palette.stroke['stroke-extra-light-highlight']}; - border-color: ${Palette.stroke['stroke-highlight']}; - } - `; - - return ; -}; - -export default HeaderTitleButton; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx deleted file mode 100644 index 7e66fa84595a8..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { IconButton } from '@rocket.chat/fuselage'; -import type { ComponentPropsWithoutRef } from 'react'; -import { forwardRef } from 'react'; - -type HeaderToolbarActionProps = ComponentPropsWithoutRef & { - tooltip?: string; -}; - -const HeaderToolbarAction = forwardRef(function HeaderToolbarAction( - { icon, title, tooltip, ...props }, - ref, -) { - return ; -}); - -export default HeaderToolbarAction; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarDivider.tsx b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarDivider.tsx deleted file mode 100644 index f3823002e88e1..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarDivider.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Divider } from '@rocket.chat/fuselage'; - -const HeaderToolbarDivider = () => ; - -export default HeaderToolbarDivider; diff --git a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/index.ts b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/index.ts deleted file mode 100644 index 933f03d658c06..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as HeaderToolbar } from './HeaderToolbar'; -export { default as HeaderToolbarAction } from './HeaderToolbarAction'; -export { default as HeaderToolbarActionBadge } from './HeaderToolbarActionBadge'; -export { default as HeaderToolbarDivider } from './HeaderToolbarDivider'; diff --git a/packages/ui-client/src/components/HeaderV2/__snapshots__/Header.spec.tsx.snap b/packages/ui-client/src/components/HeaderV2/__snapshots__/Header.spec.tsx.snap deleted file mode 100644 index 5a68c1e4b1c50..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/__snapshots__/Header.spec.tsx.snap +++ /dev/null @@ -1,673 +0,0 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing - -exports[`renders Default without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- - - -
-
- -
-
-
-
- -`; - -exports[`renders WithActionBadge without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- -
-
- -
-
-
-
- -`; - -exports[`renders WithAnnouncement without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- - - -
-
- -
-
-
-
-
- Announcement -
-
-
- -`; - -exports[`renders WithBurger without crashing 1`] = ` - -
-
-
- -
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- - - -
-
- -
-
-
-
- -`; - -exports[`renders WithTopic without crashing 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- -
-

- general general general general general general general general general general general general general general general general general general general -

- - - -
- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum -
-
-
- -
-
-
-
- -`; diff --git a/packages/ui-client/src/components/HeaderV2/index.ts b/packages/ui-client/src/components/HeaderV2/index.ts deleted file mode 100644 index 2b6a829edc6f7..0000000000000 --- a/packages/ui-client/src/components/HeaderV2/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -export { default as HeaderV2 } from './Header'; -export { default as HeaderV2Avatar } from './HeaderAvatar'; -export { default as HeaderV2Content } from './HeaderContent'; -export { default as HeaderV2ContentRow } from './HeaderContentRow'; -export { default as HeaderV2Divider } from './HeaderDivider'; -export { default as HeaderV2Icon } from './HeaderIcon'; -export { default as HeaderV2State } from './HeaderState'; -export { default as HeaderV2Subtitle } from './HeaderSubtitle'; -export { HeaderTag as HeaderV2Tag, HeaderTagIcon as HeaderV2TagIcon, HeaderTagSkeleton as HeaderV2TagSkeleton } from './HeaderTag'; -export { default as HeaderV2Title } from './HeaderTitle'; -export { default as HeaderV2TitleButton } from './HeaderTitleButton'; -export { - HeaderToolbar as HeaderV2Toolbar, - HeaderToolbarAction as HeaderV2ToolbarAction, - HeaderToolbarActionBadge as HeaderV2ToolbarActionBadge, - HeaderToolbarDivider as HeaderV2ToolbarDivider, -} from './HeaderToolbar'; diff --git a/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx b/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx index 90e019e396df3..188900d573cb4 100644 --- a/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx +++ b/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx @@ -4,7 +4,6 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { useDocumentTitle } from '../../hooks'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '../FeaturePreview'; import { HeaderToolbar } from '../Header'; import { SidebarToggler } from '../SidebarToggler'; @@ -32,22 +31,11 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props alignItems='center' color='default' > - - - {sidebar.shouldToggle ? ( - - - - ) : null} - - - {sidebar.shouldToggle && isEmbedded ? ( - - - - ) : null} - - + {sidebar.shouldToggle && isEmbedded ? ( + + + + ) : null} {onClickBack && } {title} diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts index 144220b3b5f08..943eabd144dda 100644 --- a/packages/ui-client/src/components/index.ts +++ b/packages/ui-client/src/components/index.ts @@ -8,8 +8,6 @@ export * from './PasswordVerifier/PasswordVerifier'; export { default as TextSeparator } from './TextSeparator'; export * from './TooltipComponent'; export * as UserStatus from './UserStatus'; -export * from './HeaderV1'; -export * from './HeaderV2'; export * from './Header'; export * from './MultiSelectCustom/MultiSelectCustom'; export * from './FeaturePreview'; diff --git a/packages/ui-client/src/hooks/useFeaturePreviewList.ts b/packages/ui-client/src/hooks/useFeaturePreviewList.ts index e387b2de83692..73d6c91e40b0a 100644 --- a/packages/ui-client/src/hooks/useFeaturePreviewList.ts +++ b/packages/ui-client/src/hooks/useFeaturePreviewList.ts @@ -1,6 +1,6 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts'; -export type FeaturesAvailable = 'newNavigation' | 'secondarySidebar' | 'expandableMessageComposer'; +export type FeaturesAvailable = 'secondarySidebar' | 'expandableMessageComposer'; export type FeaturePreviewProps = { name: FeaturesAvailable; @@ -19,15 +19,6 @@ export type FeaturePreviewProps = { // TODO: Move the features preview array to another directory to be accessed from both BE and FE. export const defaultFeaturesPreview: FeaturePreviewProps[] = [ - { - name: 'newNavigation', - i18n: 'New_navigation', - description: 'New_navigation_description', - group: 'Navigation', - imageUrl: 'images/featurePreview/enhanced-navigation.png', - value: false, - enabled: true, - }, { name: 'secondarySidebar', i18n: 'Filters_and_secondary_sidebar', @@ -36,10 +27,6 @@ export const defaultFeaturesPreview: FeaturePreviewProps[] = [ imageUrl: 'images/featurePreview/secondary-sidebar.png', value: false, enabled: true, - enableQuery: { - name: 'newNavigation', - value: true, - }, }, ];